exchange-2.0/resources/assets/vue/components/settings/forms/SegmentServiceFormComponent.vue

<template>
    <div class="row">
        <div class="col">
            <loading-component style="height: 50px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
            <div class="row" v-show="!isLoading">
                <div class="col">
                    <div class="row m-b-20">
                        <div class="col">
                            <h6 class="all-caps m-b-5 bold no-margin">Create Service</h6>
                            <div class="font-heading fs-10 muted">Create a new exchange service</div>
                        </div>
                    </div>
                    <div class="row m-b-5 animate__animated animate__fadeInUpBig animate__fast" v-if="error">
                        <div class="col">
                            <small class="bold fs-10 text-danger">{{ error }}</small>
                        </div>
                    </div>
                    <div class="row m-l-0 m-r-0 m-b-20">
                        <div class="col-auto pointer bg-master-lightest p-t-15 p-b-15" v-if="data" @click="parameters.configurations.active = !parameters.configurations.active">
                            <div class="row h-100 align-items-center">
                                <div class="col-auto p-r-0">
                                    <div class="icon-thumbnail fs-12 icon-25 btn-rounded" :class="[{ 'bg-success': parameters.configurations.active }, { 'bg-white': !parameters.configurations.active }]">
                                        <i class="fa fa-check fs-12 text-white"></i>
                                    </div>
                                </div>
                                <div class="col p-l-0 p-r-25">
                                    <div class="font-heading fs-8 all-caps muted">Active For this</div>
                                    <div class="font-heading fs-8 all-caps">Segment's Customers</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row m-b-10">
                        <div class="col">
                            <div class="font-heading all-caps fs-10 hint-text muted">
                                Service Configurations
                            </div>
                        </div>
                    </div>
                    <div class="row m-b-20 m-l-0 m-r-0">
                        <div class="col p-l-10 p-r-10">
                            <div class="row">
                                <div class="col p-l-5 p-r-5">
                                    <div class="row">
                                        <div class="col-5 p-r-0">
                                            <validation-wrapper-component selectable :validator="v$.custom_field">
                                                <label>Custom Fields</label>
                                                <select-component :options="inActiveFields" v-model="custom_field"></select-component>
                                            </validation-wrapper-component>
                                        </div>
                                        <div class="col-auto p-l-25 p-r-25 bg-success pointer" @click="activateCustomField(custom_field, true)">
                                            <div class="row align-items-center h-100">
                                                <div class="col">
                                                    <i class="fa fa-plus text-white"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col p-l-5">
                                    <div class="row no-margin">
                                        <div class="col padding-10 bg-master-lightest">
                                            <div class="row m-l-0 m-r-0 m-b-10">
                                                <div class="col-4 p-l-5 p-r-5" v-show="custom_fields.tax.active">
                                                    <validation-wrapper-component :validator="v$.parameters.configurations.tax" >
                                                        <label>Tax</label>
                                                        <input type="text" class="form-control" v-model.lazy="parameters.configurations.tax"  v-money3="percentage">
                                                        <div class="absolute lh-10" style="top: 0; right: 0;">
                                                            <i class="fa fa-times text-white pointer fs-12 bg-danger padding-5" @click="activateCustomField('tax', false)"></i>
                                                        </div>
                                                    </validation-wrapper-component>
                                                </div>
                                            </div>
                                            <div class="row m-l-0 m-r-0 m-b-10">
                                                <div class="col-4 p-l-5 p-r-5" v-show="custom_fields.service_charge.active">
                                                    <validation-wrapper-component :validator="v$.parameters.configurations.service_charge" >
                                                        <label>Service Charge</label>
                                                        <input type="text" class="form-control" v-model.lazy="parameters.configurations.service_charge"  v-money3="percentage">
                                                        <div class="absolute lh-10" style="top: 0; right: 0;">
                                                            <i class="fa fa-times text-white pointer fs-12 bg-danger padding-5" @click="activateCustomField('service_charge', false)"></i>
                                                        </div>
                                                    </validation-wrapper-component>
                                                </div>
                                                <div class="col-5 p-l-5 p-r-5" v-show="custom_fields.minimum_charge.active">
                                                    <div class="row">
                                                        <div class="col p-r-0">
                                                            <validation-wrapper-component :validator="v$.parameters.configurations.minimum_charge" >
                                                                <label>Minimum Charge</label>
                                                                <input type="text" class="form-control" v-model.lazy="parameters.configurations.minimum_charge"  v-money3="money">
                                                                <div class="absolute lh-10" style="top: 0; right: 0;">
                                                                    <i class="fa fa-times text-white pointer fs-12 bg-danger padding-5" @click="activateCustomField('minimum_charge', false)"></i>
                                                                </div>
                                                            </validation-wrapper-component>
                                                        </div>
                                                        <div class="col-auto bg-white b-t b-r b-b b-grey">
                                                            <div class="row h-100 align-items-center">
                                                                <div class="col">
                                                                    <div class="font-heading fs-10 muted">MYR</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row m-l-0 m-r-0 m-b-5">
                                                <div class="col-5 p-l-5 p-r-5" v-show="custom_fields.po_limit.active">
                                                    <validation-wrapper-component :validator="v$.parameters.configurations.po_limit" >
                                                        <label>Abandoned PO Limit **</label>
                                                        <input type="text" class="form-control" v-model.lazy="parameters.configurations.po_limit" v-money3="integer">
                                                        <div class="absolute lh-10" style="top: 0; right: 0;">
                                                            <i class="fa fa-times text-white pointer fs-12 bg-danger padding-5" @click="activateCustomField('po_limit', false)"></i>
                                                        </div>
                                                    </validation-wrapper-component>
                                                </div>
                                                <div class="col-7 p-l-5 p-r-5" v-show="custom_fields.bank_id.active">
                                                    <validation-wrapper-component selectable :validator="v$.parameters.configurations.bank_id" >
                                                        <label>Receivable Bank Account</label>
                                                        <selectable-component :endpoint="route('api.bank.list') + '?filters={%22company_id%22:1}'" section="BankAccountListSection" valueColumn="id" :labelColumn="['bank_name', 'account_no']" v-model="parameters.configurations.bank_id"></selectable-component>
                                                        <div class="absolute lh-10" style="top: 0; right: 0;">
                                                            <i class="fa fa-times text-white pointer fs-12 bg-danger padding-5" @click="activateCustomField('bank_id', false)"></i>
                                                        </div>
                                                    </validation-wrapper-component>
                                                </div>
                                            </div>
                                            <div class="row m-l-0 m-r-0 m-b-10" v-show="custom_fields.po_limit.active">
                                                <div class="col p-l-5 p-r-5">
                                                    <div class="fs-8 muted">** Abandoned PO's limit is only applicable to transfers that have been paid in full.</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row m-b-10">
                        <div class="col">
                            <div class="font-heading all-caps fs-10 hint-text muted">
                                Currencies Settings
                            </div>
                        </div>
                    </div>
                    <div class="row m-l-0 m-r-0 m-b-10">
                        <div class="col p-r-0">
                            <currencies-list-component :data="parameters.configurations" :section="section" v-model="parameters.configurations.currencies"></currencies-list-component>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col p-r-5">
                            <div class="btn btn-sm btn-default bg-master-lightest btn-block b-rad-none" data-dismiss="modal">Cancel</div>
                        </div>
                        <div class="col p-l-5">
                            <div class="btn btn-sm btn-success btn-block b-rad-none" @click="submitForm">{{ data ? 'Update' : 'Create' }} Service</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { computed, reactive, watch } from 'vue';
import { useFormHandler } from '@/composables/useFormHandler';
import useVuelidate from '@vuelidate/core';
import route from '@/general/functions/router';

interface Props {
    section: string;
    segment_id: number;
    data?: any;
}

const props = defineProps<Props>();

const money = { decimal: '.', thousands: ',', precision: 2 };
const percentage = { decimal: '.', thousands: '', precision: 2, suffix: '%' };
const integer = { decimal: '', thousands: '', precision: 0 };
const { parameters, submit, error, isLoading } = useFormHandler({
    section: props.section,
    // data: props.data || {
    //     id: null,
    //     configurations: {
    //         active: false,
    //         bank_id: '',
    //         service_charge: 0,
    //         minimum_charge: 0,
    //         tax: 0,
    //         po_limit: 0,
    //         currencies: []
    //     }
    // }
});

const custom_fields = reactive(
    parameters.value.custom_fields || {
        bank_id: { name: 'Receivable Bank Account', active: false },
        po_limit: { name: 'Abandoned PO Limit', active: false },
        tax: { name: 'Tax', active: false },
        minimum_charge: { name: 'Minimum Charge', active: false },
        service_charge: { name: 'Service Charge', active: false }
    }
);

parameters.value.custom_fields = custom_fields;
if (!parameters.value.configurations) {
    parameters.value.configurations = {
        active: false,
        bank_id: '',
        service_charge: 0,
        minimum_charge: 0,
        tax: 0,
        po_limit: 0,
        currencies: []
    };
}

const custom_field = computed({
    get: () => parameters.value.custom_field || '',
    set: (value: string) => {
        parameters.value.custom_field = value;
    }
});

const inActiveFields = computed(() => {
    return Object.keys(custom_fields).map((key) => ({ id: key, text: custom_fields[key].name }));
});

const rules = {
    custom_field: {},
    parameters: {
        configurations: {
            bank_id: {},
            service_charge: {},
            minimum_charge: {},
            tax: {},
            po_limit: {}
        }
    }
};

const v$ = useVuelidate(rules, { custom_field, parameters });

const activateCustomField = (fieldName: string, status: boolean) => {
    if (fieldName !== '') {
        custom_fields[fieldName].active = status;
        if (!status && parameters.value.configurations[fieldName] !== undefined) {
            parameters.value.configurations[fieldName] = '';
        }
    }
};

const updateActiveCustomFields = () => {
    if (!props.data) return;

    if (props.data.detail) {
        Object.keys(props.data.detail).forEach((key) => {
            if (Object.prototype.hasOwnProperty.call(custom_fields, key)) {
                custom_fields[key].active = true;
            }
        });
    }

    if (props.data.configurations) {
        parameters.value.configurations = {
            active: Object.prototype.hasOwnProperty.call(props.data.configurations, 'active') ? props.data.configurations.active : false,
            bank_id: Object.prototype.hasOwnProperty.call(props.data.configurations, 'bank_id') ? props.data.configurations.bank_id : '',
            service_charge: Object.prototype.hasOwnProperty.call(props.data.configurations, 'service_charge') ? props.data.configurations.service_charge.value : 0,
            minimum_charge: Object.prototype.hasOwnProperty.call(props.data.configurations, 'minimum_charge') ? props.data.configurations.minimum_charge.value : 0,
            tax: Object.prototype.hasOwnProperty.call(props.data.configurations, 'tax') ? props.data.configurations.tax.value : 0,
            po_limit: Object.prototype.hasOwnProperty.call(props.data.configurations, 'po_limit') ? props.data.configurations.po_limit.value : 0,
            currencies: Object.prototype.hasOwnProperty.call(props.data.configurations, 'currencies') ? props.data.configurations.currencies : []
        };
    }
};

watch(
    () => props.data,
    () => {
        updateActiveCustomFields();
    },
    { immediate: true }
);

const submitForm = async () => {
    parameters.value.id = props.data.id;
    parameters.value.custom_fields = {
        bank_id: custom_fields.bank_id.active ? parameters.value.configurations.bank_id : null,
        service_charge: custom_fields.service_charge.active ? { type: 'percentage', value: parameters.value.configurations.service_charge } : null,
        minimum_charge: custom_fields.minimum_charge.active ? { type: 'fixed_amount', value: parameters.value.configurations.minimum_charge } : null,
        tax: custom_fields.tax.active ? { type: 'percentage', value: parameters.value.configurations.tax } : null,
        po_limit: custom_fields.po_limit.active ? { type: 'fixed_amount', value: parameters.value.configurations.po_limit } : null
    };

    await submit(route('api.segment.constant.service.update', props.segment_id, parameters.value.id), 'put', 'segmentSection', true, true, parameters.value);
};
</script>