Files
FE_CPONE/test/vuex/one-md-schedule-cpone/components/mdScheduleList.vue
2026-04-27 10:13:31 +07:00

689 lines
22 KiB
Vue

<template>
<v-layout>
<template>
<v-dialog v-model="dialogdeletealert" max-width="30%">
<v-card>
<v-card-title class="headline blue 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>
{{ msgalert }}
</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="dialogdeletealert = false">
Tutup
</v-btn>
<v-btn color="primary" flat @click="closeDeleteAlert()">
Yakin lah
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<v-flex xs12>
<v-card class="scroll-container" style="/*max-height:645px;overflow: auto;*/">
<v-toolbar color="blue lighten-2" dark height="50px">
<v-toolbar-title class="white--text">SCHEDULE</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn @click="openFormSchedule()" icon>
<v-icon class="white--text">library_add</v-icon>
</v-btn>
</v-toolbar>
<v-snackbar v-model="snackbar" :color="color" :timeout="5000" :multi-line="false" :vertical="false" :top="true">
{{ msgsnackbar }}
<v-btn flat @click="updateAlert_success(false)">
Tutup
</v-btn>
</v-snackbar>
<v-layout row style="padding-top:5px;" justify-center>
<v-flex class="pa-2" d-flex>
<v-text-field v-model="xsearch" hide-details label="Cari Schedule" />
</v-flex>
</v-layout>
<v-layout row style="padding-top:2px;" justify-center>
<v-flex class="pa-2" d-flex>
<v-text-field v-model="xsearchtest" label="Kode Pemeriksaan" hint="8 digit kode test"/>
</v-flex>
</v-layout>
<v-divider></v-divider>
<div style="overflow: auto;max-height:550px">
<div v-for="(vs, idx) in vschedules" :key="vs.id">
<v-layout pa-2 v-if="isSelected(vs)" row>
<v-flex xs12 @click="selectMe(vs)">
<v-layout row>
<v-flex class="boxsolid" xs12>
<v-tooltip right>
<template v-slot:activator="{ on }">
<span v-on="on">{{ vs.detail }}</span>
</template>
<span>{{ vs.detail }}</span>
</v-tooltip>
</v-flex>
<v-flex :class="{ boxoutline: !isSelected(vs), boxsolid: isSelected(vs) }" class="text-center"
style="padding-top:10px" pl-2 pb-2 pr-2 xs2>
<v-layout row align-center justify-space-between>
<v-icon style="color:#ffffff" @click="editSchedule(vs)">edit</v-icon>
<v-icon style="color:#ffffff" @click="deleteSchedule(vs)">clear</v-icon>
</v-layout>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
<v-layout pa-2 v-if="!isSelected(vs)" row>
<v-flex xs12 @click="selectMe(vs)">
<v-layout row>
<v-flex class="boxoutline" xs12>
<v-tooltip right>
<template v-slot:activator="{ on }">
<span v-on="on">{{ vs.detail }}</span>
</template>
<span>{{ vs.detail }}</span>
</v-tooltip>
</v-flex>
</v-layout>
</v-flex>
<v-flex :class="{ boxoutline: !isSelected(vs), boxsolid: isSelected(vs) }" class="text-center"
style="padding-top:10px" pl-2 pb-2 pr-2 xs2>
<v-layout row align-center justify-space-between>
<v-icon :style="{ color: iconColor(vs) }" @click="editSchedule(vs)">edit</v-icon>
<v-icon :style="{ color: iconColor(vs) }" @click="deleteSchedule(vs)">clear</v-icon>
</v-layout>
</v-flex>
</v-layout>
<v-divider></v-divider>
</div>
</div>
<v-layout row>
<v-flex class="text-xs-center" pt-3 xs12>
<p style="margin-bottom:2px;color: rgba(0,0,0,0.54);font-size:12px;">Menampilkan <span
class="red--text">{{ xtotalfilterschedules }}</span> dari <span class="red--text">{{ xtotalschedules }}</span>
total data</p>
<v-btn small v-if="xshowall === 'N'" flat @click="updateShowAll('Y')" color="primary" dark>Tampilkan
Semua</v-btn>
<v-btn small v-if="xshowall === 'Y'" flat @click="updateShowAll('N')" color="primary" dark>Batasi data</v-btn>
</v-flex>
</v-layout>
<template>
<v-layout row justify-center>
<v-dialog v-model="dialogschedule" persistent max-width="1000px">
<v-card>
<v-card-title>
<span class="headline">Form Schedule</span>
</v-card-title>
<v-card-text class="pt-0 pb-0">
<v-layout row>
<v-flex xs12>
<v-text-field v-model="schedulename" label="Nama Schedule" :error-messages="schedulename == '' ? 'Nama Schedule harus diisi' : ''" ></v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs8>
<v-autocomplete v-model="branch" :search-input.sync="search_branch" item-text="name" return-object :items="branches" label="Pilih Cabang" ></v-autocomplete>
</v-flex>
<v-flex xs4>
<v-btn color="blue darken-1" flat @click="addBranch()">Tambah Cabang</v-btn>
</v-flex>
</v-layout>
<v-card tile class="mb-2">
<v-card-title>Berlaku untuk cabang : </v-card-title>
<v-card-text class="pt-0 pb-0">
<v-layout wrap pa-0 mb-2>
<v-flex xs12 pa-0 mb-3>
<v-chip v-if="selected_branch.length > 0" label dark v-for="branch in selected_branch" :key="branch.id" color="primary" class="ml-0 mr-1 mb-1">{{ branch.name }} <v-icon @click="deleteBranch(branch.id)">close</v-icon></v-chip>
<v-chip v-if="selected_branch.length == 0" label dark color="error" class="ml-0 mr-1 mb-1">Tidak ada cabang yang dipilih, silahkan pilih cabang</v-chip>
</v-flex>
</v-layout>
</v-card-text>
</v-card>
<!--<v-layout class="mt-2" row>
<v-flex xs7 pa-1>
<v-autocomplete label="Pemeriksaan" v-model="xorderautotest" :items="xorderautotests"
:search-input.sync="search_test" auto-select-first no-filter item-text="Nat_TestName"
return-object no-data-text="Cari Pemeriksaan">
<template slot="item" slot-scope="{ item }">
<v-list-tile-content>
<v-list-tile-title v-text="item.Nat_TestName"></v-list-tile-title>
</v-list-tile-content>
</template>
</v-autocomplete>
</v-flex>
<v-flex xs5 pa-1>
<v-btn @click="addTest()" color="blue darken-1" flat>Tambah Test</v-btn>
</v-flex>
</v-layout>-->
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" flat @click="updateDialogFormSchedule()">Tutup</v-btn>
<v-btn v-if="xact === 'new' && schedulename.length > 0 && selected_branch.length > 0" color="blue darken-1" flat @click="saveFormSchedule()">Simpan</v-btn>
<v-btn v-if="xact === 'edit' && schedulename.length > 0 && selected_branch.length > 0" color="blue darken-1" flat @click="updateFormSchedule()">Simpan
Perubahan</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-layout>
</template>
</v-card>
</v-flex>
</v-layout>
</template>
<style scoped>
.textinput {
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
background-color: white;
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
width: 100%;
padding: 8px 10px;
margin-bottom: 5px;
box-sizing: border-box;
border: 1px solid #607d8b;
}
.textinput:focus {
width: 100%;
}
.textinput:focus::-webkit-input-placeholder {
color: transparent;
}
.textinput:focus::-moz-placeholder {
color: transparent;
}
.textinput:-moz-placeholder {
color: transparent;
}
.boxoutlinex {
color: teal;
border: 1px solid teal;
justify-content: center;
height: 45px;
line-height: 45px;
padding-left: 10px;
background: #ffffff;
font-size: 14px;
font-weight: 500;
border-radius: 1px
}
.boxoutlinex:hover {
background: rgba(0, 0, 0, 0.07) !important;
font-size: 15px;
font-weight: 700;
}
.boxoutline {
color: red;
border: 1px solid red;
justify-content: center;
height: 45px;
line-height: 45px;
padding-left: 10px;
background: #ffffff;
font-size: 14px;
font-weight: 500;
border-radius: 1px
}
.boxoutline:hover {
background: rgba(0, 0, 0, 0.07) !important;
font-size: 15px;
font-weight: 700;
}
.boxsolid {
color: #ffffff;
border: 1px solid #ffffff;
justify-content: center;
height: 45px;
line-height: 45px;
padding-left: 10px;
background: #f44336;
font-size: 14px;
font-weight: 500;
border-radius: 1px
}
.boxsolid:hover {
background: #f44336de;
font-size: 15px;
font-weight: 700;
}
.scroll-container {
scroll-padding: 50px 0 0 50px;
}
::-webkit-scrollbar {
width: 7px;
}
/* this targets the default scrollbar (compulsory) */
::-webkit-scrollbar-track {
background-color: #73baf3;
}
/* the new scrollbar will have a flat appearance with the set background color */
::-webkit-scrollbar-thumb {
background-color: #2196f3;
}
/* this will style the thumb, ignoring the track */
::-webkit-scrollbar-button {
background-color: #0079da;
}
/* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
::-webkit-scrollbar-corner {
background-color: black;
}
/* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
</style>
<script>
module.exports = {
data: () => ({
search_branch:'',
branch_name: '',
color: "success",
valid: false,
schedulename: '',
search_test: '',
isLoading: false,
flagpreschedule: "",
preschedulemaxhour: '',
nameRules: [
v => !!v || 'Nama Schedule harus diisi'
],
dialogdeletealert: false,
msgalert: "",
xid: 0
}),
mounted() {
this.$store.dispatch("schedule/lookup", {
search: this.$store.state.schedule.xsearch,
test: this.$store.state.schedule.xsearchtest,
all: this.xshowall
})
this.$store.dispatch("notest/selected", {
id: 0,
search:''
})
this.$store.dispatch("schedule/lookup_branches")
},
computed: {
xsearch : {
get() {
return this.$store.state.schedule.xsearch
},
set(val) {
this.$store.commit("schedule/update_xsearch", val)
}
},
xsearchtest : {
get() {
return this.$store.state.schedule.xsearchtest
},
set(val) {
this.$store.commit("schedule/update_xsearchtest", val)
}
},
branches(){
let branches = this.$store.state.schedule.branches
let selected_branch = this.$store.state.schedule.selected_branch
return branches.filter(branch => !selected_branch.some(selected => selected.id === branch.id))
},
selected_branch : {
get() {
return this.$store.state.schedule.selected_branch
},
set(val) {
this.$store.commit("schedule/update_selected_branch", val)
}
},
branch: {
get() {
return this.$store.state.schedule.branch
},
set(val) {
this.$store.commit("schedule/update_branch", val)
}
},
xact() {
return this.$store.state.schedule.act
},
xerrorname() {
return this.$store.state.schedule.error_name
},
xshowall() {
return this.$store.state.schedule.show_all
},
vschedules() {
return this.$store.state.schedule.schedules
},
vtests() {
return this.$store.state.test.selected
},
xtotalschedules() {
return this.$store.state.schedule.total_schedules
},
xtotalfilterschedules() {
return this.$store.state.schedule.total_filter_schedules
},
dialogschedule() {
return this.$store.state.schedule.dialog_form_schedule
},
snackbar: {
get() {
return this.$store.state.schedule.alert_success
},
set(val) {
this.$store.commit("schedule/update_alert_success", val)
}
},
msgsnackbar() {
return this.$store.state.schedule.msg_success
},
lookupstatus() {
return this.$store.state.schedule.lookup_schedule
},
xtests() {
return this.$store.state.schedule.tests
},
test: {
get() {
return this.$store.state.schedule.test
},
set(val) {
this.$store.commit("schedule/update_test", val)
}
},
xorderautotests() {
return this.$store.state.schedule.orderautotests
},
xorderautotest: {
get() {
return this.$store.state.schedule.orderautotest
},
set(val) {
this.$store.commit("schedule/update_orderautotest", val)
}
},
xordertests:{
get() {
return this.$store.state.schedule.ordertests
},
set(val) {
this.$store.commit("schedule/update_ordertests", val)
}
}
},
methods: {
addBranch() {
let selected_branch = this.$store.state.schedule.selected_branch
let new_branch = {
id: this.branch.id,
name: this.branch.name
}
let ind_new = _.findIndex(selected_branch, (branch) => branch.id === new_branch.id)
if(ind_new === -1){
selected_branch.push(new_branch)
}
this.$store.commit("schedule/update_branch", {})
},
deleteBranch(id) {
this.selected_branch = this.selected_branch.filter(branch => branch.id !== id)
},
iconColor(vs) {
if (this.isSelected(vs)) return '#fff';
return 'red';
},
updateShowAll(val) {
this.$store.commit("schedule/update_show_all", val)
this.$store.dispatch("schedule/lookup", {
search: this.xsearch,
test: this.xsearchtest,
all: this.xshowall
})
},
isSelected(p) {
return p.id == this.$store.state.schedule.selected_schedule.id
},
thr_search_test: _.debounce(function () {
this.$store.dispatch("schedule/searchtest", this.search_test)
}, 2000),
subname(name) {
var xname = name
if (xname.length > 15) {
xname = xname.substring(0, 12) + '...'
}
return xname
},
selectMe(sc) {
this.$store.commit("schedule/update_selected_schedule", sc)
this.$store.dispatch("schedulepromise/lookup", {
id: this.$store.state.schedule.selected_schedule.id
})
this.$store.commit("schedulepromise/update_selected_promise", 0)
this.$store.dispatch("test/selected", {
id: this.$store.state.schedule.selected_schedule.id
})
this.$store.dispatch("notest/selected", {
id: this.$store.state.schedule.selected_schedule.id
})
this.$store.dispatch("scheduleday/lookup", {
id: this.$store.state.schedule.selected_schedule.id
})
},
updateDialogFormSchedule() {
this.$store.commit("schedule/update_dialog_form_schedule", false)
},
addTest() {
var oldArr = this.$store.state.schedule.ordertests
oldArr.push(this.$store.state.schedule.orderautotest)
this.searchtest = ''
this.$store.commit("schedule/update_orderautotests", [])
this.$store.commit("schedule/update_orderautotest", {})
},
deleteDataPx(idx) {
var inx = parseInt(idx);
console.log(inx)
var xrow = this.$store.state.schedule.ordertests[inx]
console.log(this.$store.state.schedule.ordertests)
if (parseInt(xrow.xid) !== 0) {
console.log("xrow.xid is not 0")
var xdeltest = this.$store.state.schedule.deleted_ordertests
xdeltest.push(xrow)
console.log(xdeltest)
this.$store.commit("schedule/update_deleted_ordertests", xdeltest)
}
var oldArr = this.$store.state.schedule.ordertests
console.log(oldArr)
oldArr.splice(inx, 1)
console.log(oldArr)
this.xordertests = oldArr
},
openFormSchedule() {
this.selected_branch = []
this.xordertests = []
this.xorderautotest = {}
this.xorderautotests = []
this.search_branch = ''
this.search_test = ''
this.schedulename = ''
let user = JSON.parse(localStorage.getItem('user'));
this.$store.commit("schedule/update_act", 'new')
this.$store.commit("schedule/update_error_name", false)
this.$store.commit("schedule/update_dialog_form_schedule", true)
},
saveFormSchedule() {
if(this.schedulename.length < 1){
this.$store.commit("schedule/update_error_name", true)
return
}
if(this.selected_branch.length < 1){
this.$store.commit("schedule/update_error_branch", true)
return
}
if(this.xordertests.length < 1){
this.$store.commit("schedule/update_error_test", true)
return
}
this.$store.dispatch("schedule/save", {
name: this.schedulename,
test: '',
ordertests: this.xordertests,
selected_branch: this.selected_branch
})
this.xsearch = this.schedulename
},
updateFormSchedule() {
if(this.schedulename.length < 1){
this.$store.commit("schedule/update_error_name", true)
return
}
if(this.selected_branch.length < 1){
this.$store.commit("schedule/update_error_branch", true)
return
}
if(this.xordertests.length < 1){
this.$store.commit("schedule/update_error_test", true)
return
}
this.$store.dispatch("schedule/update", {
id: this.xid,
name: this.schedulename,
branches: this.selected_branch,
test: '',
ordertests: this.xordertests,
deleted_ordertests: this.$store.state.schedule.deleted_ordertests
})
},
updateAlert_success(val) {
this.$store.commit("schedule/update_alert_success", val)
},
editSchedule(data) {
//console.log(data)
this.$store.commit("schedule/update_act", 'edit')
console.log(this.xact)
this.selectMe(data)
this.sch
this.xid = data.id
this.schedulename = data.name
this.$store.commit("schedule/update_ordertests", data.tests)
this.$store.commit("schedule/update_selected_branch", data.branches)
this.$store.commit("schedule/update_error_name", false)
this.$store.commit("schedule/update_dialog_form_schedule", true)
},
deleteSchedule(data) {
//console.log(data)
this.xid = data.id
var xdata = {
id: data.id,
name: data.name,
schedulepromise: 'xxx',
scheduletests: 'xxx'
}
this.$store.commit("schedule/update_selected_schedule", xdata)
this.msgalert = "Yakin, mau hapus schedule " + data.name + " ?"
this.dialogdeletealert = true
},
closeDeleteAlert() {
this.$store.dispatch("schedule/delete", {
scheduleid: this.$store.state.schedule.selected_schedule.id,
schedulename: this.$store.state.schedule.selected_schedule.name
})
this.dialogdeletealert = false
},
thr_search: _.debounce(function () {
this.$store.dispatch("schedule/lookup", {
search: this.xsearch,
test: this.xsearchtest,
all: this.xshowall
})
}, 1000)
},
watch: {
xsearch(val, old) {
if (val !== old && this.lookupstatus !== 1) {
console.log(val)
this.xsearch = val
this.thr_search()
}
},
xsearchtest(val, old) {
if (val !== old && this.lookupstatus !== 1) {
console.log(val)
this.xsearchtest = val
this.thr_search()
}
},
search_test(val, old) {
if (val == old) return
if (!val) return
if (val.length < 1) return
if (this.$store.state.schedule.update_autocomplete_status == 1) return
this.thr_search_test()
},
}
}
</script>