fe-accone/test/vuex/acc-one-map-inventaris-coa/components/left-layout.vue

<template>
    <div>
        <v-toolbar color="primary" dark>
            <v-toolbar-title class="white--text">Inventaris Category</v-toolbar-title>
            <v-spacer></v-spacer>
            <v-btn icon @click="openDialogAdd()">
                <v-icon large>add_box</v-icon>
            </v-btn>
        </v-toolbar>
        <v-card class="pa-2">
            <v-layout row wrap>
                <v-flex xs4 pa-1>
                    <v-text-field v-model="keyword" hide-details outline 
                        label="Cari" placeholder="Cari"></v-text-field>
                </v-flex>
            </v-layout>
        </v-card>

        <v-card class="pa-2 mt-2">
            <v-data-table :headers="headers" :items="list_inventarisMapping.records" hide-actions class="elevation-1">
                <template v-slot:items="props">
                    <tr @click="selected(props.item)" :class="{ 'amber lighten-4': isSelected(props.item) }">
                        <td class="text-xs-center pa-2">
                            {{ props.index + 1 }}
                        </td>
                        <td class="text-xs-left pa-2">
                            {{ props.item.M_InventarisGolName }}
                        </td>
                        <td class="text-xs-center pa-2">
                            <v-tooltip bottom>
                                <template v-slot:activator="{ on }">
                                    <v-btn color="info" dark v-on="on" @click="openDialogEdit(props.item)" 
                                        small style="min-width: 40px; margin: 0;">
                                        <v-icon small>edit</v-icon>
                                    </v-btn>
                                </template>
                                <span>Edit</span>
                            </v-tooltip>
                            <v-tooltip bottom>
                                <template v-slot:activator="{ on }">
                                    <v-btn color="error" dark v-on="on" @click="openDialogDelete(props.item)" 
                                        small style="min-width: 40px; margin: 0;">
                                        <v-icon small>delete</v-icon>
                                    </v-btn>
                                </template>
                                <span>Delete</span>
                            </v-tooltip>
                        </td>
                    </tr>
                </template>
            </v-data-table>
        </v-card>

        <v-snackbar v-model="snackbar.state" multi-line top :timeout="3000" :color="snackbar.color">
            {{ snackbar.msg }}
            <v-btn class="ml-2" round flat @click="snackbar.state = false">Tutup</v-btn>
        </v-snackbar>

        <dialog-add-form></dialog-add-form>
        <dialog-add-form-item></dialog-add-form-item>
        <dialog-confirm></dialog-confirm>
        <dialog-confirm-item></dialog-confirm-item>
    </div>
</template>

<script>
module.exports = {
    components: {
        'dialog-add-form': httpVueLoader('./dialog-add-mapping-def.vue'),
        'dialog-add-form-item': httpVueLoader('./dialog-add-mapping-item.vue'),
        'dialog-confirm': httpVueLoader('./dialog-confirm.vue'),
        'dialog-confirm-item': httpVueLoader('./dialog-confirm-item.vue'),
    },
    mounted() {
        this.$store.dispatch("invMap/getListingInventarisGol");
        this.$store.dispatch("invMap/getListInventorygolMapping", "");
    },
    data() {
        return {
            keyword: "",
            headers: [
                {
                    text: "NO", align: "center", sortable: false, value: "nomor",
                    width: "10%", class: "pa-1 blue lighten-3 white--text",
                },
                {
                    text: "GOLONGAN INVENTARIS", align: "center", sortable: false, value: "nomor",
                    width: "60%", class: "pa-1 blue lighten-3 white--text",
                },
                {
                    text: "AKSI", align: "center", sortable: false, value: "nomor",
                    width: "30%", class: "pa-1 blue lighten-3 white--text",
                },
            ]
        }
    },
    computed: {
        snackbar: {
            get() {
                return this.$store.state.invMap.snackbar;
            },
            set(val) {
                this.$store.commit("invMap/update_snackbar", val);
            }
        },
        selected_inventaris_gol: {
            get() {
                return this.$store.state.invMap.selected_inventaris_gol;
            },
            set(val) {
                this.$store.commit("invMap/update_selected_inventaris_gol", val);
            }
        },
        list_inventarisMapping: {
            get() {
                return this.$store.state.invMap.list_inventarisMapping;
            },
            set(val) {
                this.$store.commit("invMap/update_list_inventarisMapping;", val);
            }
        }
    },
    methods: {
        cariGolMapInventaris(keyword) {
            setTimeout(() => {
                this.$store.dispatch("invMap/getListInventorygolMapping", keyword);
            }, 500);
        },
        openDialogAdd() {
            this.hidrateCoaAutocomplete({});
            this.$store.commit("invMap/update_dialog_add_mapping_default", true);
        },
        selected(item) {
            this.$store.dispatch("invMap/getListItemInventaris", item.M_InventarisGolID);
            this.selected_inventaris_gol = item;
        },
        isSelected(item) {
            return item.M_InventarisGolID == this.selected_inventaris_gol.M_InventarisGolID
        },
        openDialogEdit(item) {
            this.hidrateCoaAutocomplete(item);
            this.selected_inventaris_gol = item;
            
            const form = {
                golID: item.M_InventarisGolID,
                invCoaID: item.M_InventarisCoaMappingCoaInventarisID,
                debtCoaID: item.M_InventarisCoaMappingCoaHutangID,
                bebanCoaID: item.M_InventarisCoaMappingCoaBebanPenyusutanID,
                accumCoaID: item.M_InventarisCoaMappingCoaAkumulasiPenyusutanID,
                labaCoaID: item.M_InventarisCoaMappingCoaLabaPelepasanID,
                rugiCoaID: item.M_InventarisCoaMappingCoaRugiPelepasanID,
                M_InventarisCoaMappingID: item.M_InventarisCoaMappingID
            }
            
            this.$store.commit("invMap/update_form_gol", form);
            this.$store.commit("invMap/update_dialog_add_mapping_default", true);
        },
        openDialogDelete(item) {
            this.selected_inventaris_gol = item;
            this.$store.commit("invMap/update_dialog_confirm", true);
        },
        hidrateCoaAutocomplete(item) {
            this.$store.dispatch("datacoa/getListCoa", { 
                keyword: item.CoaInventarisAccountNo ?? "", key: "invCoa" 
            });
            this.$store.dispatch("datacoa/getListCoa", { 
                keyword: item.CoaHutangAccountNo ?? "", key: "debtCoa" 
            });
            this.$store.dispatch("datacoa/getListCoa", { 
                keyword: item.CoaBebanPenyusutanAccountNo ?? "", key: "bebanCoa" 
            });
            this.$store.dispatch("datacoa/getListCoa", { 
                keyword: item.CoaAkumulasiPenyusutanAccountNo ?? "", key: "accumCoa" 
            });
            this.$store.dispatch("datacoa/getListCoa", { 
                keyword: item.CoaLabaPelepasanAccountNo ?? "", key: "labaCoa" 
            });
            this.$store.dispatch("datacoa/getListCoa", {
                 keyword: item.CoaRugiPelepasanAccountNo ?? "", key: "rugiCoa" 
            });
        }
    },
    watch: {
        keyword(newval, oldval) {
            if (newval == oldval) return;
            if (!newval) return;
            if (newval.lenght < 1) return;
            this.cariGolMapInventaris(newval);
        }
    }
}
</script>