fe-accone/test/vuex/acc-one-jurnal-penyesuaian/components/dialogAddRowJurnal.vue

<template>
<v-dialog v-model="dialog_add_jurnaltrx" persistent width="60vw">
    <v-card>
        <v-card-title class="headline grey lighten-2">
            TAMBAH TRANSAKSI JURNAL
        </v-card-title>
        <v-card-text>
            <v-layout row wrap>
                <v-flex xs2 pr-1>
                    <v-text-field
                        v-model="trx_acc.coaAccountNo" hide-details
                        label="Nomor Account" outline readonly
                    ></v-text-field>
                </v-flex>
                <v-flex xs3 px-1>
                    <v-autocomplete
                        label="Deskripsi Account" hide-details outline
                        v-model="trx_acc" :items="list_account" 
                        item-text="coaDescription" return-object
                    ></v-autocomplete>
                </v-flex>
                <v-flex xs3 px-1>
                    <v-text-field
                        v-model="trx_info" hide-details
                        label="Informasi Transaksi" outline
                    ></v-text-field>
                </v-flex>
                <v-flex xs2 px-1>
                    <v-text-field
                        v-model="trx_debit" hide-details @blur="handleBlur('trx_debit')"
                        label="Debit" outline prefix="Rp." @focus="handleFocus('trx_debit')"
                    ></v-text-field>
                </v-flex>
                <v-flex xs2 pl-1>
                    <v-text-field
                        v-model="trx_kredit" hide-details @blur="handleBlur('trx_kredit')"
                        label="Kredit" outline prefix="Rp." @focus="handleFocus('trx_kredit')"
                    ></v-text-field>
                </v-flex>
            </v-layout>
        </v-card-text>
        <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn @click="batalJurnalTrx()" color="red" class="white--text">Batal</v-btn>
            <v-btn @click="simpanJurnalTrx()" color="primary" class="white--text">Simpan</v-btn>
        </v-card-actions>
    </v-card>
</v-dialog>
</template>

<script>
module.exports = {
    data() {
        return {
            trx_acc: {},
            trx_info: "",
            trx_debit: 0.00,
            trx_kredit: 0.00
        }
    },
    computed: {
        dialog_add_jurnaltrx: {
            get() {
                return this.$store.state.journal.dialog_add_jurnaltrx
            },
            set(val) {
                this.$store.commit("journal/update_dialog_add_jurnaltrx", val)
            }
        },
        list_account() {
            return this.$store.state.journal.list_account
        },
        journal_balik_new() {
            return this.$store.state.journal.journal_balik_new
        },
        summary_balik_new() {
            return this.$store.state.journal.summary_balik_new
        }
    },
    methods: {
        formatCurrency(value) {
            const num = parseFloat(value);
            if (isNaN(num)) return 0;
            return num.toFixed(2).replace('.', ',').replace(/\B(?=(\d{3})+(?!\d))/g, ".");
        },
        parseCurrency(value) {
            let cleanedValue = String(value).replace(/\./g, '');
            cleanedValue = cleanedValue.replace(',', '.');
            return parseFloat(cleanedValue) || 0;
        },
        handleFocus(modelname) {
            const currentValue = this[modelname];
            this[modelname] = String(currentValue).replace(/\./g, '');
        },
        handleBlur(modelname) {
            const currentValue = this[modelname];
            const parsedValue = this.parseCurrency(currentValue);
            this[modelname] = parsedValue;
            this[modelname] = this.formatCurrency(parsedValue);
        },
        batalJurnalTrx() {
            this.dialog_add_jurnaltrx = false
        },
        simpanJurnalTrx() {
            let temp_trx = JSON.parse(JSON.stringify(this.journal_balik_new))
            var count = temp_trx.length

            const debit = this.parseCurrency(this.trx_debit);
            const kredit = this.parseCurrency(this.trx_kredit);

            let new_trx = {
                ...this.trx_acc,
                jurnalTxID: "temp_" + (count + 1),
                jurnalTxCoaID: this.trx_acc.coaID,
                jurnalTxDebit: debit,
                jurnalTxCredit: kredit,
                jurnalTxDescription: this.trx_acc.coaDescription,
                jurnalAddOnValue: this.trx_info
            }

            temp_trx.push(new_trx)

            const total = temp_trx.reduce((acc, item) => {
                const debit = Number(item.jurnalTxDebit)
                const kredit = Number(item.jurnalTxCredit)

                acc.total_debit += debit
                acc.total_kredit += kredit
                return acc
            }, {total_debit: 0, total_kredit: 0 })
            total.balance = total.total_debit - total.total_kredit

            this.$store.commit("journal/update_journal_balik_new", temp_trx)
            this.$store.commit("journal/update_summary_balik_new", total)
            this.dialog_add_jurnaltrx = false
        }
    },
    watch: {
        dialog_add_jurnaltrx(val) {
            if (val) {
                this.$nextTick(() => {
                    this.trx_acc =  {}
                    this.trx_info = ""
                    this.trx_debit = 0.00
                    this.trx_kredit = 0.00
                })
            }
        },
        trx_debit: {
            immediate: true,
            handler(newValue) {
                if (typeof newValue === 'number') {
                    this.trx_debit = this.formatCurrency(newValue);
                }
            }
        },
        trx_kredit: {
            immediate: true,
            handler(newValue) {
                if (typeof newValue === 'number') {
                    this.trx_kredit = this.formatCurrency(newValue);
                }
            }
        }
    }
}
</script>