salix-front/src/pages/Customer/Card/CustomerFiscalData.vue

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

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';

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

const typesTaxes = ref([]);
const typesTransactions = 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 auto-load @on-fetch="(data) => (typesTaxes = data)" url="SageTaxTypes" />
    <FetchData
        auto-load
        @on-fetch="(data) => (typesTransactions = data)"
        url="SageTransactionTypes"
    />
    <FormModel
        :url-update="`Clients/${route.params.id}/updateFiscalData`"
        :url="`Clients/${route.params.id}/getCard`"
        auto-load
        model="customer"
    >
        <template #form="{ data, validate }">
            <VnRow>
                <VnInput
                    :label="t('Social name')"
                    :required="true"
                    :rules="validate('client.socialName')"
                    clearable
                    v-model="data.socialName"
                >
                    <template #append>
                        <QIcon name="info" class="cursor-info">
                            <QTooltip>{{ t('onlyLetters') }}</QTooltip>
                        </QIcon>
                    </template>
                </VnInput>
                <VnInput :label="t('Tax number')" clearable v-model="data.fi" />
            </VnRow>

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

            <VnRow>
                <VnSelect
                    :label="t('Sage tax type')"
                    :options="typesTaxes"
                    hide-selected
                    option-label="vat"
                    option-value="id"
                    v-model="data.sageTaxTypeFk"
                />
                <VnSelect
                    :label="t('Sage transaction type')"
                    :options="typesTransactions"
                    hide-selected
                    option-label="transaction"
                    option-value="id"
                    v-model="data.sageTransactionTypeFk"
                >
                    <template #option="scope">
                        <QItem v-bind="scope.itemProps">
                            <QItemSection>
                                <QItemLabel>{{ scope.opt.name }}</QItemLabel>
                                <QItemLabel caption>
                                    {{ `${scope.opt.id}: ${scope.opt.transaction}` }}
                                </QItemLabel>
                            </QItemSection>
                        </QItem>
                    </template>
                </VnSelect>
            </VnRow>

            <VnRow>
                <VnLocation
                    :rules="validate('Worker.postcode')"
                    :acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
                    v-model="data.postcode"
                    @update:model-value="(location) => handleLocation(data, location)"
                />
            </VnRow>
            <VnRow>
                <QCheckbox :label="t('Active')" v-model="data.isActive" />
                <QCheckbox :label="t('Frozen')" v-model="data.isFreezed" />
            </VnRow>
            <VnRow>
                <QCheckbox :label="t('Has to invoice')" v-model="data.hasToInvoice" />
                <div>
                    <QCheckbox :label="t('Vies')" v-model="data.isVies" />
                    <QIcon name="info" class="cursor-info q-ml-sm" size="sm">
                        <QTooltip>
                            {{ t('whenActivatingIt') }}
                        </QTooltip>
                    </QIcon>
                </div>
            </VnRow>

            <VnRow>
                <QCheckbox :label="t('Notify by email')" v-model="data.isToBeMailed" />
                <QCheckbox
                    :label="t('Invoice by address')"
                    v-model="data.hasToInvoiceByAddress"
                />
            </VnRow>

            <VnRow>
                <div>
                    <QCheckbox
                        :label="t('Is equalizated')"
                        v-model="data.isEqualizated"
                    />
                    <QIcon class="cursor-info q-ml-sm" name="info" size="sm">
                        <QTooltip>
                            {{ t('inOrderToInvoice') }}
                        </QTooltip>
                    </QIcon>
                </div>
                <QCheckbox :label="t('Verified data')" v-model="data.isTaxDataChecked" />
            </VnRow>

            <VnRow>
                <QCheckbox
                    :label="t('Electronic invoice')"
                    v-model="data.hasElectronicInvoice"
                />
                <QCheckbox :label="t('Daily invoice')" v-model="data.hasDailyInvoice" />
            </VnRow>
        </template>
    </FormModel>
</template>

<i18n>
es:
    Social name: Razón social
    Tax number: NIF / CIF
    Street: Dirección fiscal
    Sage tax type: Tipo de impuesto Sage
    Sage transaction type: Tipo de transacción Sage
    Postcode: Código postal
    City: Población
    Province: Provincia
    Country: País
    Active: Activo
    Frozen: Congelado
    Has to invoice: Factura
    Vies: Vies
    Notify by email: Notificar vía e-mail
    Invoice by address: Facturar por consignatario
    Is equalizated: Recargo de equivalencia
    Verified data: Datos comprobados
    Incoterms authorization: Autorización incoterms
    Electronic invoice: Factura electrónica
    onlyLetters: Sólo se pueden usar letras, números y espacios
    whenActivatingIt: Al activarlo, no informar el código del país en el campo nif
    inOrderToInvoice: Para facturar no se consulta este campo, sino el RE de consignatario. Al modificar este campo si no esta marcada la casilla Facturar por consignatario, se propagará automaticamente el cambio a todos lo consignatarios, en caso contrario preguntará al usuario si quiere o no propagar
    Daily invoice: Facturación diaria
en:
    onlyLetters: Only letters, numbers and spaces can be used
    whenActivatingIt: When activating it, do not enter the country code in the ID field
    inOrderToInvoice: In order to invoice, this field is not contulted, but the consignee's ET. When modifiying this field if the invoice by address option is not checked, the change will be automatically propagated to all addresses, otherwise the user will be asked if he wants to propagate it or not
</i18n>