salix-front/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue

<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';

import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import VnInputTime from 'components/common/VnInputTime.vue';

import axios from 'axios';
import useNotify from 'src/composables/useNotify.js';
import { toTimeFormat } from 'filters/date.js';

const $props = defineProps({
    formData: {
        type: Object,
        required: true,
        default: () => ({}),
    },
});

const emit = defineEmits(['updateForm']);

const { notify } = useNotify();
const router = useRouter();
const { t } = useI18n();
const agencyFetchRef = ref(null);
const zonesFetchRef = ref(null);

const warehousesOptions = ref([]);
const companiesOptions = ref([]);
const agenciesOptions = ref([]);
const zonesOptions = ref([]);
const addresses = ref([]);
const formData = ref($props.formData);

watch(
    () => formData.value,
    (val) => emit('updateForm', val),
    { deep: true }
);

const agencyByWarehouseFilter = computed(() => ({
    fields: ['id', 'name'],
    order: 'name ASC',
    where: {
        warehouseFk: warehouseId.value,
    },
}));

const zonesFilter = computed(() => ({
    fields: ['id', 'name'],
    order: 'name ASC',
    where: formData.value?.agencyModeFk
        ? {
              shipped: formData.value?.shipped,
              addressFk: formData.value?.addressFk,
              agencyModeFk: formData.value?.agencyModeFk,
              warehouseFk: formData.value?.warehouseFk,
          }
        : {},
}));

const getLanded = async (params) => {
    try {
        const validParams =
            shipped.value && addressId.value && agencyModeId.value && warehouseId.value;
        if (!validParams) return;

        formData.value.zoneFk = null;
        zonesOptions.value = [];
        const { data } = await axios.get(`Agencies/getLanded`, { params });
        if (data) {
            formData.value.zoneFk = data.zoneFk;
            formData.value.landed = data.landed;
            formData.value.shipped = params.shipped;
        }
    } catch (error) {
        console.error(error);
        notify(t('basicData.noDeliveryZoneAvailable'), 'negative');
    }
};

const getShipped = async (params) => {
    try {
        const validParams =
            landed.value && addressId.value && agencyModeId.value && warehouseId.value;
        if (!validParams) return;

        formData.value.zoneFk = null;
        zonesOptions.value = [];
        const { data } = await axios.get(`Agencies/getShipped`, { params });
        if (data) {
            formData.value.zoneFk = data.zoneFk;
            formData.value.landed = params.landed;
            formData.value.shipped = data.shipped;
        } else {
            notify(t('basicData.noDeliveryZoneAvailable'), 'negative');
        }
    } catch (error) {
        console.error(error);
        notify(t('basicData.noDeliveryZoneAvailable'), 'negative');
    }
};

const onChangeZone = async (zoneId) => {
    try {
        formData.value.agencyModeFk = null;
        const { data } = await axios.get(`Zones/${zoneId}`);
        formData.value.agencyModeFk = data.agencyModeFk;
    } catch (error) {
        console.error(error);
    }
};

const onChangeAddress = async (addressId) => {
    try {
        formData.value.nickname = null;
        const { data } = await axios.get(`Addresses/${addressId}`);
        formData.value.nickname = data.nickname;
    } catch (error) {
        console.error(error);
    }
};

const getClientDefaultAddress = async (clientId) => {
    try {
        const { data } = await axios.get(`Clients/${clientId}`);
        if (data) addressId.value = data.defaultAddressFk;
    } catch (error) {
        console.error(error);
    }
};

const clientAddressesList = async (value) => {
    let filter = {
        include: [
            {
                relation: 'province',
                scope: {
                    fields: ['name'],
                },
            },
            {
                relation: 'agencyMode',
                scope: {
                    fields: ['name'],
                },
            },
        ],
    };
    const params = { filter: JSON.stringify(filter) };
    const { data } = await axios.get(`Clients/${value}/addresses`, { params });
    if (data) addresses.value = data;
};

const addressId = computed({
    get: () => formData.value?.addressFk,
    set: (val) => {
        if (val != formData.value?.addressFk) {
            formData.value.addressFk = val;
            onChangeAddress(val);
            getShipped({
                landed: formData.value?.landed,
                addressFk: val,
                agencyModeFk: formData.value?.agencyModeFk,
                warehouseFk: formData.value?.warehouseFk,
            });
        }
    },
});

const clientId = computed({
    get: () => formData.value?.clientFk,
    set: (val) => {
        formData.value.clientFk = val;
        formData.value.addressFk = null;
        if (!val) return;
        getClientDefaultAddress(val);
        clientAddressesList(val);
    },
});

const landed = computed({
    get: () => formData.value?.landed,
    set: (val) => {
        formData.value.landed = val;
        getShipped({
            landed: val,
            addressFk: formData.value?.addressFk,
            agencyModeFk: formData.value?.agencyModeFk,
            warehouseFk: formData.value?.warehouseFk,
        });
    },
});

const agencyModeId = computed({
    get: () => formData.value.agencyModeFk,
    set: (val) => {
        if (val != formData.value.agencyModeFk) {
            formData.value.agencyModeFk = val;
            if (!val) return;
            const agencyMode = agenciesOptions.value.find((a) => a.id == val);
            formData.value.warehouseFk = agencyMode.warehouseFk;

            getLanded({
                shipped: formData.value?.shipped,
                addressFk: formData.value?.addressFk,
                agencyModeFk: val,
                warehouseFk: formData.value?.warehouseFk,
            });
        }
    },
});

const zoneId = computed({
    get: () => formData.value?.zoneFk,
    set: (val) => {
        if (val != formData.value?.zoneFk) {
            formData.value.zoneFk = val;
            onChangeZone(val);
        }
    },
});

const warehouseId = computed({
    get: () => formData.value?.warehouseFk,
    set: (val) => {
        if (val != formData.value?.warehouseFk) {
            formData.value.warehouseFk = val;
            getShipped({
                landed: formData.value?.landed,
                addressFk: formData.value?.addressFk,
                agencyModeFk: formData.value?.agencyModeFk,
                warehouseFk: val,
            }).then(() => {
                if (zoneId.value == null) formData.value.agencyModeFk = null;
            });
        }
    },
});

const shipped = computed({
    get: () => formData.value?.shipped,
    set: (val) => {
        if (new Date(formData.value?.shipped).toDateString() != val.toDateString())
            val.setHours(0, 0, 0, 0);
        formData.value.shipped = val;
        getLanded({
            shipped: val,
            addressFk: formData.value?.addressFk,
            agencyModeFk: formData.value?.agencyModeFk,
            warehouseFk: formData.value?.warehouseFk,
        });
    },
});

const onFormModelInit = () => {
    if (formData.value?.clientFk) clientAddressesList(formData.value?.clientFk);
};

const redirectToCustomerAddress = () => {
    router.push({
        name: 'CustomerAddressEditCard',
        params: { id: clientId.value, addressId: addressId.value },
    });
};

onMounted(() => onFormModelInit());
</script>
<template>
    <FetchData
        url="Warehouses"
        @on-fetch="(data) => (warehousesOptions = data)"
        auto-load
    />
    <FetchData
        url="Companies"
        :filter="{
            fields: ['id', 'code'],
            order: 'code ASC',
        }"
        @on-fetch="(data) => (companiesOptions = data)"
        auto-load
    />
    <FetchData
        ref="agencyFetchRef"
        url="AgencyModes/byWarehouse"
        :filter="agencyByWarehouseFilter"
        @on-fetch="(data) => (agenciesOptions = data)"
        auto-load
    />
    <FetchData
        ref="zonesFetchRef"
        url="Zones/includingExpired"
        :filter="zonesFilter"
        @on-fetch="(data) => (zonesOptions = data)"
        auto-load
    />
    <QForm>
        <VnRow>
            <VnSelect
                :label="t('basicData.client')"
                v-model="clientId"
                option-value="id"
                option-label="name"
                url="Clients"
                :fields="['id', 'name']"
                sort-by="id"
                hide-selected
                map-options
                :required="true"
            >
                <template #option="scope">
                    <QItem v-bind="scope.itemProps">
                        <QItemSection>
                            <QItemLabel
                                >#{{ scope.opt?.id }} {{ scope.opt?.name }}</QItemLabel
                            >
                        </QItemSection>
                    </QItem>
                </template>
            </VnSelect>
            <VnSelect
                :label="t('basicData.warehouse')"
                v-model="warehouseId"
                option-value="id"
                option-label="name"
                :options="warehousesOptions"
                hide-selected
                map-options
                :required="true"
            />
        </VnRow>
        <VnRow>
            <VnSelect
                :label="t('basicData.address')"
                v-model="addressId"
                option-value="id"
                option-label="nickname"
                :options="addresses"
                hide-selected
                map-options
                :required="true"
            >
                <template #option="scope">
                    <QItem v-bind="scope.itemProps">
                        <QItemSection>
                            <QItemLabel
                                :class="{
                                    'color-vn-label': !scope.opt?.isActive,
                                }"
                            >
                                {{
                                    `${
                                        !scope.opt?.isActive
                                            ? t('basicData.inactive')
                                            : ''
                                    } `
                                }}
                                <span> {{ scope.opt?.nickname }}</span>
                                <span
                                    v-if="
                                        scope.opt?.province ||
                                        scope.opt?.city ||
                                        scope.opt?.street
                                    "
                                    >, {{ scope.opt?.street }}, {{ scope.opt?.city }},
                                    {{ scope.opt?.province?.name }} -
                                    {{ scope.opt?.agencyMode?.name }}</span
                                >
                            </QItemLabel>
                        </QItemSection>
                    </QItem>
                </template>
                <template #append>
                    <QIcon
                        name="edit"
                        color="primary"
                        size="sm"
                        class="fill-icon cursor-pointer"
                        @click.stop="redirectToCustomerAddress()"
                    >
                        <QTooltip>{{ t('basicData.editAddress') }}</QTooltip>
                    </QIcon>
                </template>
            </VnSelect>
            <VnInput
                :label="t('basicData.alias')"
                v-model="formData.nickname"
                :required="true"
            />
        </VnRow>
        <VnRow class="row q-gutter-md q-mb-md no-wrap">
            <VnSelect
                :label="t('basicData.company')"
                v-model="formData.companyFk"
                option-value="id"
                option-label="code"
                :options="companiesOptions"
                hide-selected
                map-options
                :required="true"
            />
            <VnSelect
                :label="t('basicData.agency')"
                v-model="agencyModeId"
                option-value="id"
                option-label="name"
                :options="agenciesOptions"
                hide-selected
                map-options
                @focus="agencyFetchRef.fetch()"
            />
            <VnSelect
                :label="t('basicData.zone')"
                v-model="zoneId"
                option-value="id"
                option-label="name"
                :options="zonesOptions"
                hide-selected
                map-options
                :required="true"
                @focus="zonesFetchRef.fetch()"
            >
                <template #option="scope">
                    <QItem v-bind="scope.itemProps">
                        <QItemSection>
                            <QItemLabel
                                >{{ scope.opt?.name }} - Max.
                                {{ toTimeFormat(scope.opt?.hour) }}
                                h.</QItemLabel
                            >
                        </QItemSection>
                    </QItem>
                </template>
            </VnSelect>
        </VnRow>
        <VnRow>
            <VnInputDate
                :label="t('basicData.shipped')"
                v-model="formData.shipped"
                :required="true"
            />
            <VnInputTime
                :label="t('basicData.shippedHour')"
                v-model="formData.shipped"
                :required="true"
            />
            <VnInputDate
                :label="t('basicData.landed')"
                v-model="formData.landed"
                :required="true"
            />
        </VnRow>
    </QForm>
</template>