From bc6d11846fb4424a3e1303ae01c3c3dd0bb439cb Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Thu, 10 Apr 2025 12:37:14 +0200
Subject: [PATCH] fix: fixed autocomplete when entering an iban

---
 src/components/common/VnInputBic.vue          | 44 +++++++++++++++++++
 .../Customer/Card/CustomerBillingData.vue     | 22 ++++++----
 src/pages/Worker/WorkerList.vue               | 34 +++++---------
 3 files changed, 68 insertions(+), 32 deletions(-)
 create mode 100644 src/components/common/VnInputBic.vue

diff --git a/src/components/common/VnInputBic.vue b/src/components/common/VnInputBic.vue
new file mode 100644
index 000000000..5f0afd083
--- /dev/null
+++ b/src/components/common/VnInputBic.vue
@@ -0,0 +1,44 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+
+import VnInput from 'src/components/common/VnInput.vue';
+
+const { t } = useI18n();
+const model = defineModel({ type: [Number, String] });
+const emit = defineEmits(['updateBic']);
+
+const getIbanCountry = (bank) => {
+    return bank.substr(0, 2);
+};
+
+const autofillBic = async (iban) => {
+    if (!iban) return;
+
+    const bankEntityId = parseInt(iban.substr(4, 4));
+    const ibanCountry = getIbanCountry(iban);
+
+    if (ibanCountry != 'ES') return;
+
+    const filter = { where: { id: bankEntityId.value } };
+    const params = { filter: JSON.stringify(filter) };
+
+    const { data } = await axios.get(`BankEntities`, { params });
+
+    emit('updateBic', data[0].id);
+};
+</script>
+<template>
+    <VnInput
+        :label="t('IBAN')"
+        clearable
+        v-model="model"
+        @update:model-value="autofillBic($event)"
+    >
+        <template #append>
+            <QIcon name="info" class="cursor-info">
+                <QTooltip>{{ t('components.iban_tooltip') }}</QTooltip>
+            </QIcon>
+        </template>
+    </VnInput>
+</template>
diff --git a/src/pages/Customer/Card/CustomerBillingData.vue b/src/pages/Customer/Card/CustomerBillingData.vue
index cc894d01e..6f83f6535 100644
--- a/src/pages/Customer/Card/CustomerBillingData.vue
+++ b/src/pages/Customer/Card/CustomerBillingData.vue
@@ -9,21 +9,27 @@ 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 CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
+import VnInputBic from 'src/components/common/VnInputBic.vue';
 
 const { t } = useI18n();
 const route = useRoute();
 
 const bankEntitiesRef = ref(null);
+const bankEntity = ref();
 
 const filter = {
     fields: ['id', 'bic', 'name'],
-    order: 'bic ASC'
+    order: 'bic ASC',
 };
 
 const getBankEntities = (data, formData) => {
     bankEntitiesRef.value.fetch();
     formData.bankEntityFk = Number(data.id);
 };
+
+const autofillSwiftBic = (bankEntityFk) => {
+    bankEntity.value = bankEntityFk;
+};
 </script>
 
 <template>
@@ -43,13 +49,11 @@ const getBankEntities = (data, formData) => {
             </VnRow>
 
             <VnRow>
-                <VnInput :label="t('IBAN')" clearable v-model="data.iban">
-                    <template #append>
-                        <QIcon name="info" class="cursor-info">
-                            <QTooltip>{{ t('components.iban_tooltip') }}</QTooltip>
-                        </QIcon>
-                    </template>
-                </VnInput>
+                <VnInputBic
+                    :label="t('IBAN')"
+                    v-model="data.iban"
+                    @update-bic="autofillSwiftBic($event)"
+                />
                 <VnSelectDialog
                     :label="t('Swift / BIC')"
                     ref="bankEntitiesRef"
@@ -61,7 +65,7 @@ const getBankEntities = (data, formData) => {
                     hide-selected
                     option-label="name"
                     option-value="id"
-                    v-model="data.bankEntityFk"
+                    v-model="bankEntity"
                 >
                     <template #form>
                         <CreateBankEntityForm
diff --git a/src/pages/Worker/WorkerList.vue b/src/pages/Worker/WorkerList.vue
index cb722a139..6bbf4bdf4 100644
--- a/src/pages/Worker/WorkerList.vue
+++ b/src/pages/Worker/WorkerList.vue
@@ -18,6 +18,8 @@ import { useState } from 'src/composables/useState';
 import axios from 'axios';
 import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
 import VnSection from 'src/components/common/VnSection.vue';
+import VnInputBic from 'src/components/common/VnInputBic.vue';
+
 const { t } = useI18n();
 const tableRef = ref();
 const { viewSummary } = useSummaryDialog();
@@ -29,6 +31,7 @@ const postcodesOptions = ref([]);
 const user = useState().getUser();
 const defaultPayMethod = ref();
 const bankEntitiesRef = ref();
+const bankEntity = ref();
 const dataKey = 'WorkerList';
 const columns = computed(() => [
     {
@@ -162,15 +165,9 @@ function generateCodeUser(worker) {
     if (!worker.companyFk) worker.companyFk = user.companyFk;
 }
 
-async function autofillBic(worker) {
-    if (!worker || !worker.iban) return;
-
-    let bankEntityId = parseInt(worker.iban.substr(4, 4));
-    let filter = { where: { id: bankEntityId } };
-
-    const { data } = await axios.get(`BankEntities`, { params: { filter } });
-    worker.bankEntityFk = data?.[0]?.id ?? undefined;
-}
+const autofillSwiftBic = (bankEntityFk) => {
+    bankEntity.value = bankEntityFk;
+};
 </script>
 <template>
     <FetchData
@@ -331,25 +328,17 @@ async function autofillBic(worker) {
                                     (val) => !val && delete data.payMethodFk
                                 "
                             />
-                            <VnInput
+                            <VnInputBic
+                                :label="t('IBAN')"
                                 v-model="data.iban"
-                                :label="t('worker.create.iban')"
                                 :disable="data.isFreelance"
-                                @update:model-value="autofillBic(data)"
-                            >
-                                <template #append>
-                                    <QIcon name="info" class="cursor-info">
-                                        <QTooltip>{{
-                                            t('components.iban_tooltip')
-                                        }}</QTooltip>
-                                    </QIcon>
-                                </template>
-                            </VnInput>
+                                @update-bic="autofillSwiftBic($event)"
+                            />
                         </VnRow>
                         <VnRow>
                             <VnSelectDialog
                                 :label="t('worker.create.bankEntity')"
-                                v-model="data.bankEntityFk"
+                                v-model="bankEntity"
                                 :options="bankEntitiesOptions"
                                 option-label="name"
                                 option-value="id"
@@ -362,7 +351,6 @@ async function autofillBic(worker) {
                                     },
                                 ]"
                                 :disable="data.isFreelance"
-                                @update:model-value="autofillBic(data)"
                                 :filter-options="['bic', 'name']"
                             >
                                 <template #form>