fe-accone/test/vuex/acc-one-md-ruangan/components/detail-layout.vue

<template>
    <div>
        <v-toolbar color="white">
            <v-toolbar-title class="black--text">DETAIL RUANGAN</v-toolbar-title>
            <v-spacer></v-spacer>
            <h3>STATUS: {{ form_status }}</h3>
        </v-toolbar>

        <v-card class="pa-2">
            <v-layout row wrap>
                <v-flex xs6 pr-1>
                    <v-autocomplete :items="form_listreg" hide-details outline label="Regional"
                        item-text="S_RegionalName" item-value="S_RegionalID" @change="onChangeReg"
                        v-model="form_detail.regional"></v-autocomplete>
                </v-flex>
                <v-flex xs6 pl-1>
                    <v-autocomplete :items="form_listcab" label="Cabang" hide-details outline item-text="M_BranchName"
                        item-value="M_BranchID" :readonly="user.loginLevel == 'branch'"
                        v-model="form_detail.cabang"></v-autocomplete>
                </v-flex>

                <v-flex xs6 class="pr-1 mt-2">
                    <v-text-field hide-details label="Nama Ruangan" outline v-model="form_detail.nama"></v-text-field>
                </v-flex>
                <v-flex xs6 class="pl-1 mt-2">
                    <v-text-field hide-details label="Kode Ruangan" outline v-model="form_detail.kode"></v-text-field>
                </v-flex>
            </v-layout>

            <v-layout row wrap class="mt-2">
                <v-flex grow></v-flex>
                <v-flex shrink pa-1>
                    <v-btn @click="hapusDetail()" outline color="error" :disabled="form_status == 'BARU'">HAPUS</v-btn>
                </v-flex>
                <v-flex shrink pa-1>
                    <v-btn @click="saveDetail()" block color="primary">SIMPAN</v-btn>
                </v-flex>
            </v-layout>
        </v-card>

        <v-dialog v-model="dialog_confirm" persistent width="40vw">
            <v-card>
                <v-card-title class="headline grey lighten-2">KONFIRMASI {{ form_status }}</v-card-title>
                <v-card-text>
                    {{
                        form_status == 'BARU'
                            ? 'Apakah anda yakin akan membuat data detail ruangan baru?'
                            : form_status == 'EDIT'
                                ? 'Apakah anda yakin akan menyimpan perubahan data detail ruangan?'
                                : form_status == 'HAPUS'
                                    ? 'Apakah anda yakin akan menghapus data detail ruangan?'
                                    : ''
                    }}
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn @click="dialog_confirm = false" color="error" class="white--text">Batal</v-btn>
                    <v-btn @click="konfirmasi()" color="primary" class="white--text">Ya</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </div>
</template>

<script>
module.exports = {
    data() {
        return {
            dialog_confirm: false
        };
    },
    computed: {
        user() {
            return this.$store.state.ruangan.user;
        },
        form_listreg() {
            return this.$store.state.ruangan.form_listreg;
        },
        form_listcab() {
            return this.$store.state.ruangan.form_listcab;
        },
        form_status: {
            get() {
                return this.$store.state.ruangan.form_status;
            },
            set(val) {
                this.$store.commit("ruangan/update_form_status", val);
            }
        },
        form_detail: {
            get() {
                return this.$store.state.ruangan.form_detail;
            },
            set(val) {
                this.$store.commit("ruangan/update_form_detail", val);
            }
        },
        snackbar: {
            get() {
                return this.$store.state.ruangan.snackbar;
            },
            set(val) {
                this.$store.commit("ruangan/update_snackbar", val);
            }
        }
    },
    methods: {
        onChangeReg(value) {
            this.form_detail.regional = value;
            this.$store.dispatch('ruangan/listingCabang', 'right', value);
        },
        saveDetail() {
            const detail = this.form_detail;

            const isFilled = ["nama", "kode", "cabang", "regional"].every(field => {
                return String(detail[field]).trim() !== "";
            });

            if (!isFilled) {
                const snac = { color: 'error', msg: "form belum lengkap", state: true };
                this.snackbar = snac;
            } else {
                this.dialog_confirm = true
            }
        },
        hapusDetail() {
            const detail = this.form_detail;
            if (detail.id != 0) {
                this.form_status = 'HAPUS';
                this.dialog_confirm = true;
            } else {
                const snac = { color: 'error', msg: "unknown id detail", state: true };
                this.snackbar = snac;
            }
        },
        konfirmasi() {
            let status = this.form_status
            let form = this.form_detail

            if (status == "BARU") {
                this.$store.dispatch("ruangan/insertRuangan");
            }

            if (status == "EDIT" && form.id != 0) {
                this.$store.dispatch("ruangan/updateRuangan", form.id);
            }

            if (status == "HAPUS" && form.id != 0) {
                this.$store.dispatch("ruangan/deleteRuangan", form.id);
            }
        }
    }
}
</script>