salix-front/src/pages/Customer/components/CustomerAddressCreate.vue

<script setup>
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router';

import VnLocation from 'src/components/common/VnLocation.vue';
import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
import CustomerNewCustomsAgent from 'src/pages/Customer/components/CustomerNewCustomsAgent.vue';
import VnInputNumber from 'src/components/common/VnInputNumber.vue';

const { t } = useI18n();
const route = useRoute();
const router = useRouter();

const formInitialData = reactive({ isDefaultAddress: false });

const agencyModes = ref([]);
const incoterms = ref([]);
const customsAgents = ref([]);

const toCustomerAddress = () => {
    router.push({
        name: 'CustomerAddress',
        params: {
            id: route.params.id,
        },
    });
};
function handleLocation(data, location) {
    const { town, code, provinceFk, countryFk } = location ?? {};
    data.postalCode = code;
    data.city = town;
    data.provinceFk = provinceFk;
    data.countryFk = countryFk;
}

function onAgentCreated({ id, fiscalName }, data) {
    customsAgents.value.push({ id, fiscalName });
    data.customsAgentFk = id;
}
</script>

<template>
    <FetchData
        @on-fetch="(data) => (customsAgents = data)"
        auto-load
        url="CustomsAgents"
    />
    <FetchData
        @on-fetch="(data) => (agencyModes = data)"
        auto-load
        url="AgencyModes/isActive"
    />
    <FetchData @on-fetch="(data) => (incoterms = data)" auto-load url="Incoterms" />

    <FormModel
        :form-initial-data="formInitialData"
        :observe-form-changes="false"
        :url-create="`Clients/${route.params.id}/createAddress`"
        @on-data-saved="toCustomerAddress()"
        model="client"
    >
        <template #moreActions>
            <QBtn
                :label="t('globals.cancel')"
                @click="toCustomerAddress"
                color="primary"
                flat
                icon="close"
            />
        </template>

        <template #form="{ data, validate }">
            <QCheckbox :label="t('Default')" v-model="data.isDefaultAddress" />

            <VnRow>
                <VnInput
                    :label="t('Consignee')"
                    required
                    clearable
                    v-model="data.nickname"
                />

                <VnInput
                    :label="t('Street address')"
                    clearable
                    v-model="data.street"
                    required
                />
            </VnRow>

            <VnLocation
                :rules="validate('Worker.postcode')"
                :acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
                v-model="data.location"
                :required="true"
                @update:model-value="(location) => handleLocation(data, location)"
            />

            <div class="row justify-between q-gutter-md q-mb-md">
                <VnSelect
                    :label="t('Agency')"
                    :options="agencyModes"
                    :rules="validate('route.agencyFk')"
                    hide-selected
                    option-label="name"
                    option-value="id"
                    v-model="data.agencyModeFk"
                    class="col"
                />
                <VnInput class="col" :label="t('Phone')" clearable v-model="data.phone" />
                <VnInput
                    class="col"
                    :label="t('Mobile')"
                    clearable
                    v-model="data.mobile"
                />
            </div>

            <VnRow>
                <VnSelect
                    :label="t('Incoterms')"
                    :options="incoterms"
                    hide-selected
                    option-label="name"
                    option-value="code"
                    v-model="data.incotermsFk"
                />

                <VnSelectDialog
                    url="CustomsAgents"
                    :label="t('Customs agent')"
                    :options="customsAgents"
                    hide-selected
                    option-label="fiscalName"
                    option-value="id"
                    v-model="data.customsAgentFk"
                    :tooltip="t('Create a new expense')"
                >
                    <template #form>
                        <CustomerNewCustomsAgent
                            @on-data-saved="
                                (requestResponse) => onAgentCreated(requestResponse, data)
                            "
                        />
                    </template>
                </VnSelectDialog>
            </VnRow>
            <VnRow>
                <VnInputNumber
                    :label="t('Longitude')"
                    clearable
                    v-model="data.longitude"
                    :decimal-places="7"
                    :positive="false"
                />
                <VnInputNumber
                    :label="t('Latitude')"
                    clearable
                    v-model="data.latitude"
                    :decimal-places="7"
                    :positive="false"
                />
            </VnRow>
        </template>
    </FormModel>
</template>

<style lang="scss" scoped>
.add-icon {
    cursor: pointer;
    background-color: $primary;
    border-radius: 50px;
}
</style>

<i18n>
es:
    Default: Predeterminado
    Consignee: Consignatario
    Street address: Dirección postal
    Postcode: Código postal
    City: Población
    Province: Provincia
    Agency: Agencia
    Phone: Teléfono
    Mobile: Movíl
    Incoterms: Incoterms
    Customs agent: Agente de aduanas
    Longitude: Longitud
    Latitude: Latitud
</i18n>