src/components/common/VnSelectVies.vue

@@ -0,0 +1,81 @@
+<script setup>
+import { ref } from 'vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import FetchData from 'components/FetchData.vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+const model = defineModel({ type: String, required: true });
+const countriesOption = ref([]);
+const countriesOptionCopy = ref([]);
+const lastVal = ref();
+
+function handleBlur() {
+    if (lastVal.value == '') lastVal.value = null;
+    model.value = lastVal.value && lastVal.value.toUpperCase().slice(0, 2);
+}
+
+function filterFn(val, update) {
+    update(
+        () => {
+            if (val === '') {
+                countriesOptionCopy.value = JSON.parse(
+                    JSON.stringify(countriesOption.value)
+                );
+                return;
+            }
+
+            const exist = countriesOption.value.filter((c) =>
+                c.code.toLowerCase().includes(val.toLowerCase())
+            );
+            if (exist) return (countriesOptionCopy.value = exist);
+            countriesOptionCopy.value = JSON.parse(JSON.stringify([{ code: val }]));
+        },
+        (ref) => {
+            if (val !== '' && ref.options.length > 0) {
+                ref.setOptionIndex(-1);
+                ref.moveOptionSelection(1, true);
+            }
+        }
+    );
+}
+</script>
+<template>
+    <FetchData auto-load @on-fetch="(data) => (countriesOption = data)" url="Countries" />
+    <VnSelect
+        :label="t('Vies')"
+        v-model="model"
+        :input-debounce="0"
+        :options="countriesOptionCopy"
+        @input-value="(evt) => (lastVal = evt) && handleBlur()"
+        @filter="filterFn"
+        option-label="code"
+        option-value="code"
+        v-bind="$attrs"
+    >
+        <template #option="scope">
+            <QItem v-bind="scope.itemProps">
+                <QItemSection>
+                    <QItemLabel>{{ scope.opt?.code }}</QItemLabel>
+                    <QItemLabel caption>
+                        {{ scope.opt?.code }},
+                        {{ scope.opt?.name }}
+                    </QItemLabel>
+                </QItemSection>
+            </QItem>
+        </template>
+        <template #after>
+            <QIcon name="info" class="cursor-pointer">
+                <QTooltip>{{ t('viesTip') }}</QTooltip>
+            </QIcon>
+        </template>
+    </VnSelect>
+</template>
+<i18n>
+es:
+    viesTip: El campo puede contener valores que no este en la lista
+
+en:
+    viesTip: The field may contain value that are not in the list
+
+</i18n>

src/pages/Customer/Card/CustomerFiscalData.vue

@@ -8,6 +8,7 @@ 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 VnSelectVies from 'src/components/common/VnSelectVies.vue';
 import VnLocation from 'src/components/common/VnLocation.vue';
 
 const { t } = useI18n();
@@ -103,6 +104,7 @@ function handleLocation(data, location) {
                     :required="true"
                     @update:model-value="(location) => handleLocation(data, location)"
                 />
+                <VnSelectVies v-model="data.viesCode" style="max-width: 30%" />
             </VnRow>
             <VnRow>
                 <QCheckbox :label="t('Active')" v-model="data.isActive" />
@@ -110,14 +112,7 @@ function handleLocation(data, location) {
             </VnRow>
             <VnRow>
                 <QCheckbox :label="t('Has to invoice')" v-model="data.hasToInvoice" />
-                <div>
-                    <QCheckbox :label="t('globals.isVies')" v-model="data.isVies" />
-                    <QIcon name="info" class="cursor-info q-ml-sm" size="sm">
-                        <QTooltip>
-                            {{ t('whenActivatingIt') }}
-                        </QTooltip>
-                    </QIcon>
-                </div>
+                <QCheckbox :label="t('Verified data')" v-model="data.isTaxDataChecked" />
             </VnRow>
 
             <VnRow>
@@ -147,9 +142,6 @@ function handleLocation(data, location) {
                 <QCheckbox
                     :label="t('Electronic invoice')"
                     v-model="data.hasElectronicInvoice"
-                /><QCheckbox
-                    :label="t('Verified data')"
-                    v-model="data.isTaxDataChecked"
                 />
             </VnRow>
         </template>
@@ -177,11 +169,9 @@ es:
     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>

src/pages/Supplier/Card/SupplierFiscalData.vue

@@ -9,6 +9,7 @@ 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 VnSelectVies from 'src/components/common/VnSelectVies.vue';
 import VnAccountNumber from 'src/components/common/VnAccountNumber.vue';
 
 const route = useRoute();
@@ -68,8 +69,12 @@ function handleLocation(data, location) {
                 'supplierActivityFk',
                 'healthRegister',
                 'street',
+<<<<<<< HEAD
+                'viesCode',
+=======
                 'isVies',
                 'isTrucker',
+>>>>>>> d499565ca30fdb6c505e53c85642e15fc02588c6
             ],
             include: [
                 {
@@ -173,34 +178,15 @@ function handleLocation(data, location) {
                         country: data.country,
                     }"
                     @update:model-value="(location) => handleLocation(data, location)"
-                >
-                </VnLocation>
+                />
             </VnRow>
             <VnRow>
-                <div class="col flex justify-around">
+                <VnSelectVies v-model="data.viesCode" />
                 <QCheckbox
                     v-model="data.isTrucker"
                     :label="t('supplier.fiscalData.isTrucker')"
                 />
-                    <div class="row items-center">
-                        <QCheckbox v-model="data.isVies" :label="t('globals.isVies')" />
-                        <QIcon name="info" size="xs" class="cursor-pointer q-ml-sm">
-                            <QTooltip>
-                                {{
-                                    t(
-                                        'When activating it, do not enter the country code in the ID field.'
-                                    )
-                                }}
-                            </QTooltip>
-                        </QIcon>
-                    </div>
-                </div>
             </VnRow>
         </template>
     </FormModel>
 </template>
-
-<i18n>
-es:
-    When activating it, do not enter the country code in the ID field.: Al activarlo, no informar el código del país en el campo nif
-</i18n>