salix-front/src/pages/Supplier/Card/SupplierFiscalData.vue

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

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 VnLocation from 'src/components/common/VnLocation.vue';
import VnAccountNumber from 'src/components/common/VnAccountNumber.vue';
import VnCheckbox from 'src/components/common/VnCheckbox.vue';

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

const sageTaxTypesOptions = ref([]);
const sageWithholdingsOptions = ref([]);
const sageTransactionTypesOptions = ref([]);
const supplierActivitiesOptions = ref([]);

function handleLocation(data, location) {
    const { town, code, provinceFk, countryFk } = location ?? {};
    data.postCode = code;
    data.city = town;
    data.provinceFk = provinceFk;
    data.countryFk = countryFk;
}
</script>
<template>
    <FetchData
        url="SageTaxTypes"
        auto-load
        @on-fetch="(data) => (sageTaxTypesOptions = data)"
    />
    <FetchData
        url="SageWithholdings"
        auto-load
        @on-fetch="(data) => (sageWithholdingsOptions = data)"
    />
    <FetchData
        url="sageTransactionTypes"
        auto-load
        @on-fetch="(data) => (sageTransactionTypesOptions = data)"
    />
    <FetchData
        url="SupplierActivities"
        auto-load
        @on-fetch="(data) => (supplierActivitiesOptions = data)"
    />
    <FormModel
        :url="`Suppliers/${route.params.id}`"
        :url-update="`Suppliers/${route.params.id}/updateFiscalData`"
        model="supplier"
        :filter="{
            fields: [
                'id',
                'nif',
                'city',
                'name',
                'account',
                'postCode',
                'countryFk',
                'provinceFk',
                'sageTaxTypeFk',
                'sageWithholdingFk',
                'sageTransactionTypeFk',
                'supplierActivityFk',
                'healthRegister',
                'street',
                'isVies',
                'isTrucker',
            ],
            include: [
                {
                    relation: 'province',
                    scope: {
                        fields: ['id', 'name'],
                    },
                },
                {
                    relation: 'country',
                    scope: {
                        fields: ['id', 'name'],
                    },
                },
            ],
        }"
        auto-load
        :clear-store-on-unmount="false"
    >
        <template #form="{ data, validate }">
            <VnRow>
                <VnInput
                    v-model="data.name"
                    :label="t('supplier.fiscalData.name')"
                    :uppercase="true"
                    clearable
                />
                <VnInput
                    v-model="data.nif"
                    :label="t('supplier.fiscalData.nif')"
                    clearable
                />
            </VnRow>
            <VnRow>
                <VnAccountNumber
                    v-model="data.account"
                    :label="t('supplier.fiscalData.account')"
                    clearable
                    data-cy="supplierFiscalDataAccount"
                    insertable
                    :maxlength="10"
                />
                <VnSelect
                    :label="t('supplier.fiscalData.sageTaxTypeFk')"
                    v-model="data.sageTaxTypeFk"
                    :options="sageTaxTypesOptions"
                    option-value="id"
                    option-label="vat"
                    hide-selected
                    map-options
                />
            </VnRow>
            <VnRow>
                <VnSelect
                    :label="t('supplier.fiscalData.sageWithholdingFk')"
                    v-model="data.sageWithholdingFk"
                    :options="sageWithholdingsOptions"
                    option-value="id"
                    option-label="withholding"
                    hide-selected
                    map-options
                />
                <VnSelect
                    :label="t('supplier.fiscalData.sageTransactionTypeFk')"
                    v-model="data.sageTransactionTypeFk"
                    :options="sageTransactionTypesOptions"
                    option-value="id"
                    option-label="transaction"
                    hide-selected
                    map-options
                />
            </VnRow>
            <VnRow>
                <VnSelect
                    :label="t('supplier.fiscalData.supplierActivityFk')"
                    v-model="data.supplierActivityFk"
                    :options="supplierActivitiesOptions"
                    option-value="code"
                    option-label="name"
                    hide-selected
                    map-options
                />
                <VnInput
                    v-model="data.healthRegister"
                    :label="t('supplier.summary.healthRegister')"
                    clearable
                />
            </VnRow>
            <VnRow>
                <VnInput v-model="data.street" :label="t('globals.street')" clearable />
            </VnRow>
            <VnRow>
                <VnLocation
                    :rules="validate('Worker.postcode')"
                    :roles-allowed-to-create="['deliveryAssistant', 'administrative']"
                    :acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
                    :location="{
                        postcode: data.postCode,
                        city: data.city,
                        province: data.province,
                        country: data.country,
                    }"
                    @update:model-value="(location) => handleLocation(data, location)"
                >
                </VnLocation>
            </VnRow>
            <VnRow>
                <div class="col flex justify-around">
                    <QCheckbox
                        v-model="data.isTrucker"
                        :label="t('supplier.fiscalData.isTrucker')"
                    />
                    <VnCheckbox
                        v-model="data.isVies"
                        :label="t('globals.isVies')" 
                        :info="t('whenActivatingIt')" 
                    />
                </div>
            </VnRow>
        </template>
    </FormModel>
</template>

<i18n>
en:
    whenActivatingIt: When activating it, do not enter the country code in the ID field.
es:
    whenActivatingIt: Al activarlo, no informar el código del país en el campo nif.
</i18n>