exchange-2.0/resources/assets/vue/components/accounting/elements/EditSingleItemInListComponent.vue

<template>
    <div class="row ">
        <div class="col bg-white padding-15">
            <div class="row">
                <div class="col-12">
                    <div class="form-group">
                        <label>Date: {{ item.posting_date }}</label>
                    </div>
                    <div class="form-group">
                        <label>Transaction Description 1: {{ item.transaction_description_1 }}</label>
                    </div>
                    <div class="form-group">
                        <label>Transaction Description 2: {{ item.transaction_description_2 }}</label>
                    </div>
                    <div class="form-group">
                        <label>Transaction Description 3: {{ item.transaction_description_3 }}</label>
                    </div>
                    <div class="form-group">
                        <label>Transaction Description 4: {{ item.transaction_description_4 }}</label>
                    </div>
                    <div class="form-group">
                        <label>Transaction Description 5: {{ item.transaction_description_5 }}</label>
                    </div>
                </div>
            </div>
            <div class="row m-b-15">
                <div class="col">
                    <div class="row">
                        <div class="col">
                            <validation-wrapper-component selectable :validator="$v.pay_for_value">
                                <label>Transaction Type</label>
                                <select-component :options="['Sales','Top Up', 'Internal Bank Transfer', 'Others']" v-model="pay_for_value"></select-component>
                            </validation-wrapper-component>
                        </div>
                    </div>

                    <div class="row m-t-15" v-if="['Sales', 'Top Up'].includes(pay_for_value)">
                        <div class="col">
                            <validation-wrapper-component selectable :key="custom_options_key" :validator="$v.system_references">
                                <label>Service</label>
                                <select-component :options="customOptions()" v-model="system_references"></select-component>
                            </validation-wrapper-component>
                        </div>
                    </div>

                    <div class="row m-t-15" v-if="['Sales', 'Top Up', 'Others'].includes(pay_for_value)">
                        <div class="col">
                            <validation-wrapper-component :validator="$v.transaction_reference">
                                <label>Transaction ID / Reference</label>
                                <input type="text" class="form-control" v-model.lazy="transaction_reference">
                            </validation-wrapper-component>
                        </div>
                    </div>
                </div>
            </div>
            <p class="text-danger fs-9">{{ error }}</p>
            <div class="row">
                <div class="col">
                    <div class="row">
                        <div class="col p-r-5">
                            <div data-dismiss="modal" class="btn btn-sm btn-default bg-master-lighter btn-block b-rad-none">Cancel</div>
                        </div>
                        <div class="col p-l-5">
                            <div class="btn btn-sm btn-success btn-block b-rad-none" @click="submitForm()">Update</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    import ModalFormHandler from '../../../general/mixins/modalFormHandler';
    // import FormHandler from '../../../general/mixins/formHandler';
    import { required } from "vuelidate/lib/validators";

    export default {
        props:{
            editMapped: {
                type: Boolean,
                default: false,
                required: false
            }
        },
        data(){
            return {
                error: '',
                system_references: "",
                transaction_reference: "",
                pay_for_value: "",
                custom_options_key: 1,
                pay_for: {
                    status: false,
                    options: ['sales', 'top_up', 'internal_bank_transfer', 'others'],
                },
            }
        },
        created() {
            this.pay_for = this.item.pay_for,
            this.system_references = this.item.system_references
        },
        validations: {
            system_references: {  },
            transaction_reference: {  },
            pay_for_value: { required },
        },
        watch: {
            'data': function() {
                this.pay_for = this.item.pay_for;
                this.system_references = this.item.system_references;
            },
            pay_for_value(newVal, oldVal) {
                this.custom_options_key ++;
                this.transaction_reference = '';
            }
        },
        methods: {
            submitForm(){
                this.parameters = {
                    pay_for                 : this.pay_for_value.replace(/\s/g, "_").toLowerCase(),
                    system_references       : this.system_references ? this.system_references.toLowerCase() : '',
                    transaction_reference   : this.transaction_reference
                };
                
                if (this.editMapped) this.parameters['editMapped'] = true;

                this.submit(this.route('api.accounting.statement.details.update', this.data.id), 'put', this.section, true, true);
            },
            errorHandler(error){
                this.error = error.message;
            },
            customOptions(){
                switch (this.pay_for_value) {
                case 'Sales':
                    return ['Exchange', 'Izyim', 'Lite', 'Cntr', 'Probashi', 'Pets'];
                case 'Top Up':
                    return ['Exchange', 'Izyim'];
                default:
                    return [];
                }
            },
        },
        mixins: [componentHandler, ModalFormHandler]
    }
</script>