Merge pull request 'Fix[Swift/Bic]: Fixed autocomplete when entering an iban' (!1697) from Fix-CustomerBillingData into dev

Reviewed-on: #1697
Reviewed-by: Alex Moreno <alexm@verdnatura.es>

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>

src/pages/Customer/Card/CustomerBillingData.vue

@@ -9,6 +9,7 @@ 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();
@@ -17,7 +18,7 @@ const bankEntitiesRef = ref(null);
 
 const filter = {
     fields: ['id', 'bic', 'name'],
-    order: 'bic ASC'
+    order: 'bic ASC',
 };
 
 const getBankEntities = (data, formData) => {
@@ -43,13 +44,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="(bankEntityFk) => (data.bankEntityFk = bankEntityFk)"
+                />
                 <VnSelectDialog
                     :label="t('Swift / BIC')"
                     ref="bankEntitiesRef"

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();
@@ -161,16 +163,6 @@ 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;
-}
 </script>
 <template>
     <FetchData
@@ -331,20 +323,14 @@ 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="
+                                    (bankEntityFk) => (data.bankEntityFk = bankEntityFk)
+                                "
+                            />
                         </VnRow>
                         <VnRow>
                             <VnSelectDialog
@@ -362,7 +348,6 @@ async function autofillBic(worker) {
                                     },
                                 ]"
                                 :disable="data.isFreelance"
-                                @update:model-value="autofillBic(data)"
                                 :filter-options="['bic', 'name']"
                             >
                                 <template #form>