187 lines
8.0 KiB
Vue
187 lines
8.0 KiB
Vue
<template>
|
|
<v-layout class="mb-2" column>
|
|
<v-snackbar v-model="snackbar" :timeout="5000" :multi-line="false" :vertical="false" :top="true">
|
|
{{ msgsnackbar }}
|
|
<v-btn flat @click="openSnackBar(false)">Tutup</v-btn>
|
|
</v-snackbar>
|
|
<v-card>
|
|
<v-layout row>
|
|
<v-flex xs12>
|
|
<v-subheader>DETAIL PERIODE
|
|
<v-flex text-md-right pa-1>
|
|
<span @click="periodeTambah()" class="ml-1 primary icon-add icon-medium-fill-base white--text xs1"></span>
|
|
</v-flex>
|
|
</v-subheader>
|
|
<v-divider></v-divider>
|
|
<v-layout row wrap>
|
|
<v-flex xs12 pa-2>
|
|
<v-layout row>
|
|
<v-flex xs4 pa-1>
|
|
<v-text-field v-model="selected.periodeName" label="Nama Periode"></v-text-field>
|
|
</v-flex>
|
|
<v-flex xs4 pa-1>
|
|
<!-- <v-text-field v-model="selected.periodeMonth" label="Bulan Periode" type="number"></v-text-field> -->
|
|
<v-select item-text="name" item-value="periodeMonth" :items="bulan" v-model="selected.periodeMonth" label="Bulan Periode"></v-select>
|
|
</v-flex>
|
|
<v-flex xs4 pa-1>
|
|
<v-text-field v-model="selected.periodeYear" label="Tahun Periode" type="number"></v-text-field>
|
|
</v-flex>
|
|
</v-layout>
|
|
<v-layout row>
|
|
<v-flex xs6 pa-1>
|
|
<v-menu
|
|
ref="menustartdate" v-model="menustartdate"
|
|
:close-on-content-click="false" :nudge-right="0" lazy transition="scale-transition"
|
|
offset-y full-width max-width="290px" min-width="290px">
|
|
<template v-slot:activator="{ on }">
|
|
<v-text-field v-model="startComputedDateFormatted" label="Start Date" readonly v-on="on" @blur="date = deFormatedDate(startComputedDateFormatted)"></v-text-field>
|
|
</template>
|
|
<v-date-picker v-model="selected.periodeStartDate" no-title @input="menustartdate = false"></v-date-picker>
|
|
</v-menu>
|
|
</v-flex>
|
|
<v-flex xs6 pa-1>
|
|
<v-menu
|
|
ref="menuenddate" v-model="menuenddate"
|
|
:close-on-content-click="false" :nudge-right="0" lazy transition="scale-transition"
|
|
offset-y full-width max-width="290px" min-width="290px">
|
|
<template v-slot:activator="{ on }">
|
|
<v-text-field v-model="endComputedDateFormatted" label="End Date" readonly v-on="on" @blur="date = deFormatedDate(endComputedDateFormatted)"></v-text-field>
|
|
</template>
|
|
<v-date-picker v-model="selected.periodeEndDate" no-title @input="menuenddate = false"></v-date-picker>
|
|
</v-menu>
|
|
</v-flex>
|
|
</v-layout>
|
|
<v-layout row>
|
|
<v-flex pa-1 text-md-right>
|
|
<v-btn small color="error" @click="periodeDelete()">Hapus</v-btn>
|
|
<v-btn small color="primary" @click="periodeSimpan()">Simpan</v-btn>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-card>
|
|
</v-layout>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
data: () => ({
|
|
menustartdate: false,
|
|
menuenddate: false,
|
|
date: new Date().toISOString().substr(0, 10),
|
|
bulan: [
|
|
{
|
|
periodeMonth: "1",
|
|
name: "Januari"
|
|
},
|
|
{
|
|
periodeMonth: "2",
|
|
name: "Februari"
|
|
},
|
|
{
|
|
periodeMonth: "3",
|
|
name: "Maret"
|
|
},
|
|
{
|
|
periodeMonth: "4",
|
|
name: "April"
|
|
},
|
|
{
|
|
periodeMonth: "5",
|
|
name: "Mei"
|
|
},
|
|
{
|
|
periodeMonth: "6",
|
|
name: "Juni"
|
|
},
|
|
{
|
|
periodeMonth: "7",
|
|
name: "Juli"
|
|
},
|
|
{
|
|
periodeMonth: "8",
|
|
name: "Agustus"
|
|
},
|
|
{
|
|
periodeMonth: "9",
|
|
name: "September"
|
|
},
|
|
{
|
|
periodeMonth: "10",
|
|
name: "Oktober"
|
|
},
|
|
{
|
|
periodeMonth: "11",
|
|
name: "November"
|
|
},
|
|
{
|
|
periodeMonth: "12",
|
|
name: "Desember"
|
|
},
|
|
]
|
|
}),
|
|
computed: {
|
|
selected: {
|
|
get() {
|
|
return this.$store.state.periode.selected;
|
|
},
|
|
set(data) {
|
|
this.$store.commit('periode/update_selected', data)
|
|
}
|
|
},
|
|
snackbar: {
|
|
get() {
|
|
return this.$store.state.periode.snackbar;
|
|
},
|
|
set(bool) {
|
|
this.$store.commit("periode/open_snackbar", bool)
|
|
}
|
|
},
|
|
msgsnackbar() {
|
|
return this.$store.state.periode.message_snack;
|
|
},
|
|
startComputedDateFormatted() {
|
|
return this.formatDate(this.selected.periodeStartDate)
|
|
},
|
|
endComputedDateFormatted() {
|
|
return this.formatDate(this.selected.periodeEndDate)
|
|
},
|
|
},
|
|
methods: {
|
|
formatDate(date) {
|
|
if (!date) return null
|
|
|
|
const [year, month, day] = date.split('-')
|
|
return `${day}-${month}-${year}`
|
|
},
|
|
deFormatedDate(date) {
|
|
if (!date) return null
|
|
|
|
const [day, month, year] = date.split('-')
|
|
return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
|
|
},
|
|
periodeDelete() {
|
|
this.$store.dispatch("periode/deletePeriode")
|
|
},
|
|
periodeSimpan() {
|
|
this.$store.dispatch("periode/checkNewOrEdit")
|
|
},
|
|
periodeTambah() {
|
|
this.$store.commit("periode/update_selected", {})
|
|
},
|
|
openSnackBar(bool) {
|
|
this.$store.commit("periode/update_message_snack", "");
|
|
this.$store.commit("periode/open_snackbar", bool);
|
|
},
|
|
setMonthText(id) {
|
|
const targetMonth = this.bulan.find((month) => month.id === id);
|
|
|
|
if (targetMonth) {
|
|
this.selected.periodeMonth = targetMonth;
|
|
}
|
|
}
|
|
},
|
|
}
|
|
</script> |