91 lines
3.0 KiB
Vue
91 lines
3.0 KiB
Vue
<template>
|
|
<v-dialog v-model="dialog_pick_periode" persistent max-width="35vw">
|
|
<v-card>
|
|
<v-card-title class="headline grey lighten-2" primary-title>
|
|
PILIH PERIODE
|
|
</v-card-title>
|
|
<v-card-text>
|
|
<v-autocomplete
|
|
v-model="temp_periode" :items="list_periode"
|
|
outline hide-details label="Periode Jurnal"
|
|
item-text="periodeName" return-object
|
|
>
|
|
<template slot="item" slot-scope="{ item }">
|
|
<v-list-tile-content>
|
|
<v-list-tile-title v-text="item.periodeName"></v-list-tile-title>
|
|
<v-list-tile-sub-title>
|
|
{{ item.periodeStartDate }} - {{ item.periodeEndDate }}
|
|
</v-list-tile-sub-title>
|
|
</v-list-tile-content>
|
|
</template>
|
|
</v-autocomplete>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="error" flat @click="closeDialogPeriode()">TUTUP</v-btn>
|
|
<v-btn color="primary" @click="choosePeriode()">PILIH</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
data() {
|
|
return {
|
|
temp_periode: {}
|
|
}
|
|
},
|
|
computed: {
|
|
list_periode() {
|
|
return this.$store.state.journal.list_periode
|
|
},
|
|
dialog_pick_periode: {
|
|
get() {
|
|
return this.$store.state.journal.dialog_pick_periode
|
|
},
|
|
set(val) {
|
|
this.$store.commit("journal/update_dialog_pick_periode", val)
|
|
}
|
|
},
|
|
selected_periode: {
|
|
get() {
|
|
return this.$store.state.journal.selected_periode
|
|
},
|
|
set(val) {
|
|
this.$store.commit("journal/update_selected_periode", val)
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
closeDialogPeriode() {
|
|
this.temp_periode = {}
|
|
this.dialog_pick_periode = false
|
|
},
|
|
choosePeriode() {
|
|
var periode = this.temp_periode
|
|
let filter = this.$store.state.journal.filter
|
|
|
|
if (!periode || periode.periodeID == '') {
|
|
return
|
|
}
|
|
|
|
this.selected_periode = periode
|
|
filter.periode_id = periode.periodeID
|
|
this.$store.commit("journal/update_filter", filter)
|
|
|
|
this.temp_periode = {}
|
|
this.dialog_pick_periode = false
|
|
}
|
|
},
|
|
watch: {
|
|
dialog_pick_periode(val) {
|
|
if (val) {
|
|
this.$nextTick(() => {
|
|
this.temp_periode = this.selected_periode
|
|
})
|
|
}
|
|
}
|
|
},
|
|
}
|
|
</script> |