fe-accone/test/vuex/acc-one-transfer-req/components/dialogUnpackPersediaan.vue

<template>
    <v-dialog v-model="dialog_unpackform" persistent width="30vw">
        <v-card>
            <v-card-title class="headline grey lighten-2" primary-title>
                Unpack Stock Confirmation
            </v-card-title>
            
            <v-card-text>
                <!-- Batch Selection -->
                <v-autocomplete
                    v-model="selected_batchitemunpack"
                    :items="list_batchitemunpack"
                    item-text="StockBatchNo"
                    return-object
                    label="Select Batch Number"
                    outlined
                    dense
                    @change="onBatchChange"
                >
                    <template v-slot:item="data">
                        <v-list-tile-content>
                            <v-list-tile-title>
                                Batch {{ data.item.StockBatchNo }}
                            </v-list-tile-title>
                            <v-list-tile-sub-title>
                                Expired: {{ data.item.StockED }} | Stock: {{ data.item.StockQty }} {{ data.item.ItemUnitName }}
                            </v-list-tile-sub-title>
                        </v-list-tile-content>
                    </template>
                </v-autocomplete>

                <!-- Stock Info & Unpack Input (show when batch selected) -->
                <div v-if="selected_batchitemunpack && Object.keys(selected_batchitemunpack).length > 0">
                    <div class="mb-3 text-body-1">
                        Current Stock: <strong>{{ selected_batchitemunpack.StockQty }} {{ selected_batchitemunpack.ItemUnitName }}</strong>
                    </div>

                    <div class="d-inline-flex align-end flex-wrap mb-3">
                        <span class="mr-2">Unpack:</span>
                        <v-text-field
                            v-model="unpackQty"
                            type="number"
                            :min="0"
                            :max="selected_batchitemunpack.StockQty"
                            :step="1"
                            dense
                            outlined
                            hide-details
                            style="width: 120px;"
                            class="mx-2"
                        ></v-text-field>
                        <span class="mx-1">{{ selected_batchitemunpack.ItemUnitName }}</span>
                        <span class="mx-1">to</span>
                        <strong class="ml-2">{{ unpackResult }} {{ buffer_itemrequestedunpack.RequestItemUnitName }}</strong>
                    </div>
                </div>
            </v-card-text>

            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="error" flat @click="cancelUnpack()">CANCEL</v-btn>
                <v-btn 
                    color="primary" 
                    @click="confirmUnpack()"
                    :disabled="!selected_batchitemunpack || Object.keys(selected_batchitemunpack).length === 0 || !unpackQty || unpackQty <= 0"
                >
                    UNPACK
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>    
</template>

<script>
module.exports = {
    components: {},
    mounted(){

    },
    data(){
        return {
            unpackQty: 0,
            conversionAmount: 0
        }
    },
    computed: {
        dialog_unpackform: {
            get(){
                return this.$store.state.p_form.dialog_unpackform
            },
            set(val){
                this.$store.commit("p_form/update_dialog_unpackform", val)
            }
        },
        buffer_itemrequestedunpack: {
            get(){
                return this.$store.state.p_form.buffer_itemrequestedunpack
            },
            set(val){
                this.$store.commit("p_form/update_buffer_itemrequestedunpack", val)
            }
        },
        list_batchitemunpack: {
            get(){
                return this.$store.state.p_form.list_batchitemunpack
            },
            set(val){
                this.$store.commit("p_form/update_list_batchitemunpack", val)
            }
        },
        selected_batchitemunpack: {
            get(){
                return this.$store.state.p_form.selected_batchitemunpack
            },
            set(val){
                this.$store.commit("p_form/update_selected_batchitemunpack", val)
            }
        },
        unpackResult() {
            if (!this.unpackQty || !this.selected_batchitemunpack) return 0
            
            if (this.buffer_itemrequestedunpack.UnpackData && 
                Array.isArray(this.buffer_itemrequestedunpack.UnpackData.ConversionOptions)) {
                
                // Find conversion option where:
                // FromItemUnitID matches selected stock batch's ItemUnitID
                // AND ToItemUnitID matches requested item's unit ID
                const matchingOption = this.buffer_itemrequestedunpack.UnpackData.ConversionOptions.find(option => 
                    option.FromItemUnitID === this.selected_batchitemunpack.StockItemUnitID && 
                    option.ToItemUnitID === this.buffer_itemrequestedunpack.PurchaseRequestDetailItemUnitID
                )
                
                if (matchingOption) {
                    this.conversionAmount = parseFloat(matchingOption.UnitConvertAmount)
                }
            }
            return this.unpackQty * this.conversionAmount
        }
    },
    methods: {
        onBatchChange() {
            this.unpackQty = 0
        },
        cancelUnpack() {
            this.selected_batchitemunpack = {}
            this.unpackQty = 0
            this.conversionAmount = 0
            this.list_batchitemunpack = []
            this.dialog_unpackform = false
            this.buffer_itemrequestedunpack = {}
        },
        confirmUnpack() {
            if (!this.selected_batchitemunpack || !this.unpackQty) return
            
            let params = {
                StockStockNumber    : this.selected_batchitemunpack.StockStockNumber,
                StockBatchNo        : this.selected_batchitemunpack.StockBatchNo,
                UnpackQty           : this.unpackQty,
                ToItemUnitID        : this.buffer_itemrequestedunpack.PurchaseRequestDetailItemUnitID,
                UnitConvertAmount   : this.conversionAmount
            }

            this.$store.dispatch("p_form/unpackingStock", params)
            this.cancelUnpack()
        }
    }
}
</script>