feat: refs #7731 create component vnSelectVies

src/components/common/VnSelectVies.vue

@@ -0,0 +1,77 @@
+<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)
+                );
+            } else {
+                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"
+        @blur="() => handleBlur()"
+        @input-value="(evt) => (lastVal = evt)"
+        @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('globals.allowedFilesText') }}</QTooltip>
+            </QIcon>
+        </template>
+    </VnSelect>
+</template>
+<i18n>
+es:
+    Vies: Vies
+</i18n>

src/pages/Customer/Card/CustomerFiscalData.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import { nextTick, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
@@ -8,7 +8,9 @@ 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';
+import axios from 'axios';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -98,6 +100,7 @@ function handleLocation(data, location) {
                     :location="data"
                     @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" />
@@ -165,7 +168,6 @@ es:
     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