269 lines
9.7 KiB
Vue
269 lines
9.7 KiB
Vue
<template>
|
|
<v-layout>
|
|
<v-flex xs12>
|
|
<v-card class="mb-2" color="white" style="min-height:100px">
|
|
<v-toolbar class="mb-1" color="grey lighten-2" dark height="50px">
|
|
<v-toolbar-title class="black--text">HARI (DALAM SEMINGGU) : {{xpromises.name}}</v-toolbar-title>
|
|
<v-spacer></v-spacer>
|
|
</v-toolbar>
|
|
|
|
<v-btn style="min-width:160px;" class="mt-1 mb-2" v-for="(vst,idx) in vscheduledays" :key="vst.id" @click="changeDay(idx)"
|
|
small :color="vst.isavailable === 'N' ? 'yellow' : 'green'" v-if="vst.paramid !== '0'">{{vst.dayofweekname}}
|
|
</v-btn>
|
|
|
|
<template>
|
|
|
|
<v-dialog v-model="dialogaddalertday" max-width="30%">
|
|
<v-card>
|
|
<v-card-title class="headline grey lighten-2 pt-2 pb-2" primary-title>
|
|
Konfirmasi
|
|
</v-card-title>
|
|
<v-card-text class="pt-2 pb-2">
|
|
<v-layout row>
|
|
<v-flex xs12 d-flex>
|
|
<v-layout row>
|
|
<v-flex pb-1 xs12>
|
|
<v-layout row>
|
|
<v-flex pt-2 pr-2 xs12>
|
|
{{msgalertday}}
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-card-text>
|
|
<v-divider></v-divider>
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="primary" flat @click="dialogaddalertday = false">
|
|
Tutup
|
|
</v-btn>
|
|
<v-btn color="primary" flat @click="closeAddAlertDay()">
|
|
Yakin lah
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
</template>
|
|
|
|
<template>
|
|
|
|
<v-dialog v-model="dialogdeletealertday" max-width="30%">
|
|
<v-card>
|
|
<v-card-title class="headline grey lighten-2 pt-2 pb-2" primary-title>
|
|
Peringatan !
|
|
</v-card-title>
|
|
<v-card-text class="pt-2 pb-2">
|
|
<v-layout row>
|
|
<v-flex xs12 d-flex>
|
|
<v-layout row>
|
|
<v-flex pb-1 xs12>
|
|
<v-layout row>
|
|
<v-flex pt-2 pr-2 xs12>
|
|
{{msgalertday}}
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-card-text>
|
|
<v-divider></v-divider>
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="primary" flat @click="dialogdeletealertday = false">
|
|
Tutup
|
|
</v-btn>
|
|
<v-btn color="primary" flat @click="closeDeleteAlertDay()">
|
|
Yakin lah
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
</template>
|
|
|
|
|
|
<template>
|
|
<v-layout row justify-center>
|
|
<v-dialog v-model="dialogscheduleday" persistent max-width="600px">
|
|
<v-card>
|
|
<v-card-title>
|
|
<span class="headline">Form Schedule Pemeriksaan</span>
|
|
</v-card-title>
|
|
<v-card-text class="pt-0 pb-0">
|
|
<v-form ref="formscheduleday" v-model="validday" lazy-validation>
|
|
<v-layout wrap>
|
|
<v-flex xs12>
|
|
SCHEDULE : {{xschedules.name}}
|
|
</v-flex>
|
|
<v-flex xs12>
|
|
<v-autocomplete label="Pemeriksaan" v-model="xselected_day" :items="xdays" :search-input.sync="search" auto-select-first
|
|
no-filter return-object item-text="name" :loading="is_loading" no-data-text="Pilih Pemeriksaan">
|
|
<template slot="item" slot-scope="{ item }">
|
|
<v-list-tile-content>
|
|
<v-list-tile-title v-text="item.name"></v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</template>
|
|
|
|
</v-autocomplete>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="grey darken-1" flat @click="updateDialogFormScheduleDay()">Tutup</v-btn>
|
|
<v-btn color="grey darken-1" flat @click="saveFormScheduleDay()">Simpan</v-btn>
|
|
</v-card-actions>
|
|
</v-form>
|
|
</v-card>
|
|
</v-dialog>
|
|
</v-layout>
|
|
</template>
|
|
|
|
</v-card>
|
|
</v-flex>
|
|
</v-layout>
|
|
</template>
|
|
|
|
<style scoped>
|
|
</style>
|
|
|
|
<script>
|
|
module.exports = {
|
|
data: () => ({
|
|
color: "success",
|
|
validday: false,
|
|
search: "",
|
|
dialogaddalertday: false,
|
|
dialogdeletealertday: false,
|
|
xid: 0,
|
|
msgalertday: ""
|
|
}),
|
|
computed: {
|
|
vscheduledays() {
|
|
return this.$store.state.scheduleday.scheduledays
|
|
},
|
|
dialogscheduleday() {
|
|
return this.$store.state.scheduleday.dialog_form_schedule_day
|
|
},
|
|
xselected_day: {
|
|
get() {
|
|
return this.$store.state.scheduleday.selected_day
|
|
},
|
|
set(val) {
|
|
this.$store.commit("scheduleday/update_selected_day", val)
|
|
}
|
|
},
|
|
xpromises() {
|
|
return this.$store.state.schedulepromise.selected_promise
|
|
},
|
|
xschedules() {
|
|
return this.$store.state.schedule.selected_schedule
|
|
},
|
|
xdays() {
|
|
return this.$store.state.scheduleday.days
|
|
},
|
|
is_loading() {
|
|
return this.$store.state.scheduleday.search_status == 1
|
|
}
|
|
},
|
|
methods: {
|
|
updateDialogFormScheduleDay() {
|
|
this.$store.commit("scheduleday/update_dialog_form_schedule_day", false)
|
|
},
|
|
openFormScheduleDay() {
|
|
this.$store.commit("scheduleday/update_selected_day", {})
|
|
this.$refs.formscheduleday.reset()
|
|
this.$refs.formscheduleday.resetValidation()
|
|
this.$store.commit("scheduleday/update_dialog_form_schedule_day", true)
|
|
},
|
|
saveFormScheduleDay() {
|
|
if (this.$refs.formscheduleday.validate()) {
|
|
this.$store.dispatch("scheduleday/save", {
|
|
scheduleid: this.$store.state.schedule.selected_schedule.id,
|
|
schedulename: this.$store.state.schedule.selected_schedule.name,
|
|
dayid: this.xselected_day.id,
|
|
dayname: this.xselected_day.name
|
|
})
|
|
}
|
|
},
|
|
updateAlert_success(val) {
|
|
this.$store.commit("schedule/update_alert_success", val)
|
|
},
|
|
thr_search: _.debounce(function () {
|
|
this.$store.dispatch("scheduleday/search", {
|
|
id: this.$store.state.schedule.selected_schedule.id
|
|
})
|
|
}, 2000),
|
|
addDay(data) {
|
|
this.xid = data.id
|
|
console.log(this.xid)
|
|
this.$store.commit("scheduleday/update_selected_day", data)
|
|
this.msgalertday = "Yakin, mau tambah hari " + this.xselected_day.dayofweekname + "dari schedule " + this.xpromises
|
|
.name + " ?"
|
|
this.dialogaddalertday = true
|
|
},
|
|
closeAddAlertDay() {
|
|
this.$store.dispatch("scheduleday/save", {
|
|
scheduleid: this.$store.state.schedule.selected_schedule.id,
|
|
schedulename: this.$store.state.schedule.selected_schedule.name,
|
|
dayid: this.xselected_day.dayofweek,
|
|
dayname: this.xselected_day.dayofweekname
|
|
})
|
|
this.dialogaddalertday = false
|
|
},
|
|
deleteDay(data) {
|
|
this.xid = data.id
|
|
console.log(this.xid)
|
|
this.$store.commit("scheduleday/update_selected_day", data)
|
|
this.msgalertday = "Yakin, mau hapus pemeriksaan " + this.xselected_day.dayofweekname + "dari schedule " +
|
|
this.xpromises
|
|
.name + " ?"
|
|
this.dialogdeletealertday = true
|
|
},
|
|
closeDeleteAlertDay() {
|
|
this.$store.dispatch("scheduleday/delete", {
|
|
xid: this.xid,
|
|
scheduleid: this.$store.state.schedule.selected_schedule.id,
|
|
schedulename: this.$store.state.schedule.selected_schedule.name,
|
|
dayname: this.xselected_day.dayofweekname
|
|
})
|
|
this.dialogdeletealertday = false
|
|
},
|
|
changeDay(idx) {
|
|
var pos = this.vscheduledays;
|
|
if (pos[idx].isavailable == 'Y') {
|
|
pos[idx].isavailable = 'N'
|
|
this.$store.dispatch("scheduleday/delete", {
|
|
scheduleid: this.$store.state.schedule.selected_schedule.id,
|
|
schedulename: this.$store.state.schedule.selected_schedule.name,
|
|
dayid: pos[idx].dayofweek,
|
|
dayname: pos[idx].dayofweekname
|
|
})
|
|
} else {
|
|
pos[idx].isavailable = 'Y'
|
|
this.$store.dispatch("scheduleday/save", {
|
|
scheduleid: this.$store.state.schedule.selected_schedule.id,
|
|
schedulename: this.$store.state.schedule.selected_schedule.name,
|
|
dayid: pos[idx].dayofweek,
|
|
dayname: pos[idx].dayofweekname
|
|
})
|
|
}
|
|
this.$store.dispatch("scheduleday/update_days_only", pos)
|
|
|
|
}
|
|
},
|
|
watch: {
|
|
search(val, old) {
|
|
console.log(val)
|
|
if (val !== "" && val !== old && val && val.length > 2) {
|
|
this.$store.commit("scheduleday/update_search", val)
|
|
this.thr_search()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script> |