src/components/CrudModel.vue

@@ -176,14 +176,13 @@ async function saveChanges(data) {
     const changes = data || getChanges();
     try {
         await axios.post($props.saveUrl || $props.url + '/crud', changes);
-    } catch (e) {
-        return (isLoading.value = false);
+    } finally {
+        isLoading.value = false;
     }
     originalData.value = JSON.parse(JSON.stringify(formData.value));
     if (changes.creates?.length) await vnPaginateRef.value.fetch();
 
     hasChanges.value = false;
-    isLoading.value = false;
     emit('saveChanges', data);
     quasar.notify({
         type: 'positive',

src/components/common/VnSelect.vue

@@ -284,9 +284,9 @@ async function onScroll({ to, direction, from, index }) {
         :loading="isLoading"
         @virtual-scroll="onScroll"
     >
-        <template v-if="isClearable" #append>
+        <template #append>
             <QIcon
-                v-show="value"
+                v-show="isClearable && value"
                 name="close"
                 @click.stop="
                     () => {
@@ -299,7 +299,22 @@ async function onScroll({ to, direction, from, index }) {
             />
         </template>
         <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
-            <slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
+            <div v-if="slotName == 'append'">
+                <QIcon
+                    v-show="isClearable && value"
+                    name="close"
+                    @click.stop="
+                        () => {
+                            value = null;
+                            emit('remove');
+                        }
+                    "
+                    class="cursor-pointer"
+                    size="xs"
+                />
+                <slot name="append" v-if="$slots.append" v-bind="slotData ?? {}" />
+            </div>
+            <slot v-else :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
         </template>
     </QSelect>
 </template>

src/pages/Supplier/Card/SupplierAccounts.vue

@@ -24,13 +24,14 @@ const supplier = ref(null);
 const supplierAccountRef = ref(null);
 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 = () => {
+const onChangesSaved = async () => {
     if (supplier.value.payMethodFk !== wireTransferFk.value)
         quasar
             .dialog({
@@ -55,12 +56,35 @@ 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, update) {
+    update(() => {
+        const needle = val.toLowerCase();
+        filteredBankEntitiesOptions.value = bankEntitiesOptions.value.filter(
+            (bank) =>
+                bank.bic.toLowerCase().startsWith(needle) ||
+                bank.name.toLowerCase().includes(needle)
+        );
+    });
+}
 </script>
 <template>
     <FetchData
         ref="bankEntitiesRef"
         url="BankEntities"
-        @on-fetch="(data) => (bankEntitiesOptions = data)"
+        @on-fetch="
+            (data) => {
+                (bankEntitiesOptions = data), (filteredBankEntitiesOptions = data);
+            }
+        "
         auto-load
     />
     <FetchData
@@ -98,6 +122,7 @@ const setWireTransfer = async () => {
                     <VnInput
                         :label="t('supplier.accounts.iban')"
                         v-model="row.iban"
+                        @update:model-value="(value) => findBankFk(value, row)"
                         :required="true"
                     >
                         <template #append>
@@ -109,7 +134,9 @@ const setWireTransfer = async () => {
                     <VnSelectDialog
                         :label="t('worker.create.bankEntity')"
                         v-model="row.bankEntityFk"
-                        :options="bankEntitiesOptions"
+                        :options="filteredBankEntitiesOptions"
+                        :default-filter="false"
+                        @filter="(val, update) => bankEntityFilter(val, update)"
                         option-label="bic"
                         option-value="id"
                         hide-selected

test/cypress/integration/vnComponent/vnBreadcrumbs.spec.js

@@ -3,6 +3,7 @@ describe('VnBreadcrumbs', () => {
     const firstCard = '.q-infinite-scroll > :nth-child(1)';
     const lastBreadcrumb = '.q-breadcrumbs--last > .q-breadcrumbs__el';
     beforeEach(() => {
+        cy.viewport(1920, 1080);
         cy.login('developer');
         cy.visit('/');
     });