Merge pull request '#8254: New autofill component' (!1741) from 8254-CreateAutofillComponent into dev

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

src/components/common/VnBankDetailsForm.vue

@@ -0,0 +1,93 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import VnInput from 'src/components/common/VnInput.vue';
+import FetchData from '../FetchData.vue';
+import VnSelectDialog from './VnSelectDialog.vue';
+
+import CreateBankEntityForm from '../CreateBankEntityForm.vue';
+
+const $props = defineProps({
+    iban: {
+        type: String,
+        default: null,
+    },
+    bankEntityFk: {
+        type: Number,
+        default: null,
+    },
+    disableElement: {
+        type: Boolean,
+        default: false,
+    },
+});
+const filter = {
+    fields: ['id', 'bic', 'name'],
+    order: 'bic ASC',
+};
+const { t } = useI18n();
+const emit = defineEmits(['updateBic']);
+const iban = ref($props.iban);
+const bankEntityFk = ref($props.bankEntityFk);
+const bankEntities = ref([]);
+
+const autofillBic = async (bic) => {
+    if (!bic) return;
+    const bankEntityId = parseInt(bic.substr(4, 4));
+    const ibanCountry = bic.substr(0, 2);
+    if (ibanCountry != 'ES') return;
+
+    const existBank = bankEntities.value.find((b) => b.id === bankEntityId);
+    bankEntityFk.value = existBank ? bankEntityId : null;
+    emit('updateBic', { iban: iban.value, bankEntityFk: bankEntityFk.value });
+};
+
+const getBankEntities = (data) => {
+    bankEntityFk.value = data.id;
+};
+</script>
+<template>
+    <FetchData
+        url="BankEntities"
+        :filter="filter"
+        auto-load
+        @on-fetch="(data) => (bankEntities = data)"
+    />
+    <VnInput
+        :label="t('IBAN')"
+        clearable
+        v-model="iban"
+        @update:model-value="autofillBic($event)"
+        :disable="disableElement"
+    >
+        <template #append>
+            <QIcon name="info" class="cursor-info">
+                <QTooltip>{{ t('components.iban_tooltip') }}</QTooltip>
+            </QIcon>
+        </template>
+    </VnInput>
+    <VnSelectDialog
+        :label="t('Swift / BIC')"
+        :acls="[{ model: 'BankEntity', props: '*', accessType: 'WRITE' }]"
+        :options="bankEntities"
+        hide-selected
+        option-label="name"
+        option-value="id"
+        v-model="bankEntityFk"
+        @update:model-value="$emit('updateBic', { iban, bankEntityFk })"
+        :disable="disableElement"
+    >
+        <template #form>
+            <CreateBankEntityForm @on-data-saved="getBankEntities($event)" />
+        </template>
+        <template #option="scope">
+            <QItem v-bind="scope.itemProps">
+                <QItemSection v-if="scope.opt">
+                    <QItemLabel>{{ scope.opt.bic }} </QItemLabel>
+                    <QItemLabel caption> {{ scope.opt.name }}</QItemLabel>
+                </QItemSection>
+            </QItem>
+        </template>
+    </VnSelectDialog>
+</template>

src/components/common/VnInputBic.vue

@@ -1,44 +0,0 @@
-<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 } };
-    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/components/common/__tests__/VnBankDetailsForm.spec.js

@@ -0,0 +1,43 @@
+import { createWrapper } from 'app/test/vitest/helper';
+import VnBankDetailsForm from 'components/common/VnBankDetailsForm.vue';
+import { vi, afterEach, expect, it, beforeEach, describe } from 'vitest';
+
+describe('VnBankDetail Component', () => {
+    let vm;
+    let wrapper;
+    const bankEntities = [
+        { id: 2100, bic: 'CAIXESBBXXX', name: 'CaixaBank' },
+        { id: 1234, bic: 'TESTBIC', name: 'Test Bank' },
+    ];
+    const correctIban = 'ES6621000418401234567891';
+
+    beforeAll(() => {
+        wrapper = createWrapper(VnBankDetailsForm, {
+            $props: {
+                iban: null,
+                bankEntityFk: null,
+                disableElement: false,
+            },
+        });
+        vm = wrapper.vm;
+        wrapper = wrapper.wrapper;
+    });
+
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+
+    it('should update bankEntityFk when IBAN exists in bankEntities', async () => {
+        vm.bankEntities = bankEntities;
+
+        await vm.autofillBic(correctIban);
+        expect(vm.bankEntityFk).toBe(2100);
+    });
+
+    it('should set bankEntityFk to null when IBAN bank code is not found', async () => {
+        vm.bankEntities = bankEntities;
+
+        await vm.autofillBic('ES1234567891324567891234');
+        expect(vm.bankEntityFk).toBe(null);
+    });
+});

src/pages/Customer/Card/CustomerBillingData.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
@@ -7,29 +6,15 @@ 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 VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
-import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
-import VnInputBic from 'src/components/common/VnInputBic.vue';
+import VnBankDetailsForm from 'src/components/common/VnBankDetailsForm.vue';
 
 const { t } = useI18n();
 const route = useRoute();
-
-const bankEntitiesRef = ref(null);
-
-const filter = {
-    fields: ['id', 'bic', 'name'],
-    order: 'bic ASC',
-};
-
-const getBankEntities = (data, formData) => {
-    bankEntitiesRef.value.fetch();
-    formData.bankEntityFk = Number(data.id);
-};
 </script>
 
 <template>
     <FormModel :url-update="`Clients/${route.params.id}`" auto-load model="Customer">
-        <template #form="{ data, validate }">
+        <template #form="{ data }">
             <VnRow>
                 <VnSelect
                     auto-load
@@ -42,42 +27,19 @@ const getBankEntities = (data, formData) => {
                 />
                 <VnInput :label="t('Due day')" clearable v-model="data.dueDay" />
             </VnRow>
-
             <VnRow>
-                <VnInputBic
-                    :label="t('IBAN')"
-                    v-model="data.iban"
-                    @update-bic="(bankEntityFk) => (data.bankEntityFk = bankEntityFk)"
+                <VnBankDetailsForm
+                    v-model:iban="data.iban"
+                    v-model:bankEntityFk="data.bankEntityFk"
+                    @update-bic="
+                        ({ iban, bankEntityFk }) => {
+                            if (!iban || !bankEntityFk) return;
+                            data.iban = iban;
+                            data.bankEntityFk = bankEntityFk;
+                        }
+                    "
                 />
-                <VnSelectDialog
-                    :label="t('Swift / BIC')"
-                    ref="bankEntitiesRef"
-                    :filter="filter"
-                    auto-load
-                    url="BankEntities"
-                    :acls="[{ model: 'BankEntity', props: '*', accessType: 'WRITE' }]"
-                    :rules="validate('Worker.bankEntity')"
-                    hide-selected
-                    option-label="name"
-                    option-value="id"
-                    v-model="data.bankEntityFk"
-                >
-                    <template #form>
-                        <CreateBankEntityForm
-                            @on-data-saved="getBankEntities($event, data)"
-                        />
-                    </template>
-                    <template #option="scope">
-                        <QItem v-bind="scope.itemProps">
-                            <QItemSection v-if="scope.opt">
-                                <QItemLabel>{{ scope.opt.bic }} </QItemLabel>
-                                <QItemLabel caption> {{ scope.opt.name }}</QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                    </template>
-                </VnSelectDialog>
             </VnRow>
-
             <VnRow>
                 <QCheckbox :label="t('Received LCR')" v-model="data.hasLcr" />
                 <QCheckbox :label="t('VNL core received')" v-model="data.hasCoreVnl" />

src/pages/Supplier/Card/SupplierAccounts.vue

@@ -7,12 +7,11 @@ import FetchData from 'components/FetchData.vue';
 import CrudModel from 'components/CrudModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
-import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
 import { useQuasar } from 'quasar';
+import VnBankDetailsForm from 'src/components/common/VnBankDetailsForm.vue';
 
 const { t } = useI18n();
 const { notify } = useNotify();
@@ -26,11 +25,6 @@ const wireTransferFk = ref(null);
 const bankEntitiesOptions = ref([]);
 const filteredBankEntitiesOptions = ref([]);
 
-const onBankEntityCreated = async (dataSaved, rowData) => {
-    await bankEntitiesRef.value.fetch();
-    rowData.bankEntityFk = dataSaved.id;
-};
-
 const onChangesSaved = async () => {
     if (supplier.value.payMethodFk !== wireTransferFk.value)
         quasar
@@ -56,23 +50,6 @@ const setWireTransfer = async () => {
     await axios.patch(`Suppliers/${route.params.id}`, params);
     notify('globals.dataSaved', 'positive');
 };
-
-function findBankFk(value, row) {
-    row.bankEntityFk = null;
-    if (!value) return;
-
-    const bankEntityFk = bankEntitiesOptions.value.find((b) => b.id == value.slice(4, 8));
-    if (bankEntityFk) row.bankEntityFk = bankEntityFk.id;
-}
-
-function bankEntityFilter(val) {
-    const needle = val.toLowerCase();
-    filteredBankEntitiesOptions.value = bankEntitiesOptions.value.filter(
-        (bank) =>
-            bank.bic.toLowerCase().startsWith(needle) ||
-            bank.name.toLowerCase().includes(needle),
-    );
-}
 </script>
 <template>
     <FetchData
@@ -118,47 +95,16 @@ function bankEntityFilter(val) {
                     :key="index"
                     class="row q-gutter-md q-mb-md"
                 >
-                    <VnInput
-                        :label="t('supplier.accounts.iban')"
-                        v-model="row.iban"
-                        @update:model-value="(value) => findBankFk(value, row)"
-                        :required="true"
-                    >
-                        <template #append>
-                            <QIcon name="info" class="cursor-info">
-                                <QTooltip>{{ t('components.iban_tooltip') }}</QTooltip>
-                            </QIcon>
-                        </template>
-                    </VnInput>
-                    <VnSelectDialog
-                        :label="t('worker.create.bankEntity')"
-                        v-model="row.bankEntityFk"
-                        :options="filteredBankEntitiesOptions"
-                        :filter-fn="bankEntityFilter"
-                        option-label="bic"
-                        hide-selected
-                        :required="true"
-                        :roles-allowed-to-create="['financial']"
-                    >
-                        <template #form>
-                            <CreateBankEntityForm
-                                @on-data-saved="
-                                    (_, requestResponse) =>
-                                        onBankEntityCreated(requestResponse, row)
+                    <VnBankDetailsForm
+                        v-model:iban="row.iban"
+                        v-model:bankEntityFk="row.bankEntityFk"
+                        @update-bic="
+                            ({ iban, bankEntityFk }) => {
+                                row.iban = iban;
+                                row.bankEntityFk = bankEntityFk;
+                            }
                         "
                     />
-                        </template>
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection v-if="scope.opt">
-                                    <QItemLabel
-                                        >{{ scope.opt.bic }}
-                                        {{ scope.opt.name }}</QItemLabel
-                                    >
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectDialog>
                     <VnInput
                         :label="t('supplier.accounts.beneficiary')"
                         v-model="row.beneficiary"

src/pages/Worker/WorkerList.vue

@@ -10,15 +10,13 @@ import VnRadio from 'src/components/common/VnRadio.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 import VnLocation from 'src/components/common/VnLocation.vue';
-import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
-import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
 import FetchData from 'src/components/FetchData.vue';
 import WorkerFilter from './WorkerFilter.vue';
 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';
+import VnBankDetailsForm from 'src/components/common/VnBankDetailsForm.vue';
 
 const { t } = useI18n();
 const tableRef = ref();
@@ -122,12 +120,6 @@ onBeforeMount(async () => {
     ).data?.payMethodFk;
 });
 
-async function handleNewBankEntity(data, resp) {
-    await bankEntitiesRef.value.fetch();
-    data.bankEntityFk = resp.id;
-    bankEntitiesOptions.value.push(resp);
-}
-
 function handleLocation(data, location) {
     const { town, code, provinceFk, countryFk } = location ?? {};
     data.postcode = code;
@@ -323,51 +315,19 @@ function generateCodeUser(worker) {
                                     (val) => !val && delete data.payMethodFk
                                 "
                             />
-                            <VnInputBic
-                                :label="t('IBAN')"
-                                v-model="data.iban"
-                                :disable="data.isFreelance"
-                                @update-bic="
-                                    (bankEntityFk) => (data.bankEntityFk = bankEntityFk)
-                                "
-                            />
                         </VnRow>
                         <VnRow>
-                            <VnSelectDialog
-                                :label="t('worker.create.bankEntity')"
-                                v-model="data.bankEntityFk"
-                                :options="bankEntitiesOptions"
-                                option-label="name"
-                                option-value="id"
-                                hide-selected
-                                :acls="[
-                                    {
-                                        model: 'BankEntity',
-                                        props: '*',
-                                        accessType: 'WRITE',
-                                    },
-                                ]"
-                                :disable="data.isFreelance"
-                                :filter-options="['bic', 'name']"
-                            >
-                                <template #form>
-                                    <CreateBankEntityForm
-                                        @on-data-saved="
-                                            (_, resp) => handleNewBankEntity(data, resp)
+                            <VnBankDetailsForm
+                                v-model:iban="data.iban"
+                                v-model:bankEntityFk="data.bankEntityFk"
+                                :disable-element="data.isFreelance"
+                                @update-bic="
+                                    ({ iban, bankEntityFk }) => {
+                                        data.iban = iban;
+                                        data.bankEntityFk = bankEntityFk;
+                                    }
                                 "
                             />
-                                </template>
-                                <template #option="scope">
-                                    <QItem v-bind="scope.itemProps">
-                                        <QItemSection v-if="scope.opt">
-                                            <QItemLabel
-                                                >{{ scope.opt.bic }}
-                                                {{ scope.opt.name }}</QItemLabel
-                                            >
-                                        </QItemSection>
-                                    </QItem>
-                                </template>
-                            </VnSelectDialog>
                         </VnRow>
                     </div>
                 </template>