From 403d2cc55bd27c4605d6e3b0828f063d99157d22 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 25 Mar 2024 11:15:41 +0100
Subject: [PATCH 01/50] refs #7136 feat: paginate

---
 src/components/FetchData.vue             | 30 +++++++++++++++++++-----
 src/components/common/VnSelectFilter.vue | 29 ++++++++++++++++++++++-
 2 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/src/components/FetchData.vue b/src/components/FetchData.vue
index 5b3dcbea7..144c416d8 100644
--- a/src/components/FetchData.vue
+++ b/src/components/FetchData.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { h, onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
 import axios from 'axios';
 
 const $props = defineProps({
@@ -24,8 +24,8 @@ const $props = defineProps({
         default: '',
     },
     limit: {
-        type: String,
-        default: '',
+        type: Number,
+        default: 30,
     },
     params: {
         type: Object,
@@ -34,20 +34,38 @@ const $props = defineProps({
 });
 
 const emit = defineEmits(['onFetch']);
-defineExpose({ fetch });
-
+defineExpose({ fetch, paginate });
+const pagination = ref({
+    sortBy: $props.order,
+    rowsPerPage: $props.limit,
+    page: 1,
+});
 onMounted(async () => {
     if ($props.autoLoad) {
         await fetch();
     }
 });
-
+async function fetchMore(fetchFilter = {}) {
+    try {
+        const filter = await fetch(filter);
+    } catch (error) {
+        console.error(error);
+    }
+}
+async function paginate() {
+    await fetch({
+        skip: pagination.value.page * $props.limit,
+    });
+    pagination.value.page += 1;
+}
 async function fetch(fetchFilter = {}) {
     try {
         const filter = Object.assign(fetchFilter, $props.filter); // eslint-disable-line vue/no-dupe-keys
         if ($props.where && !fetchFilter.where) filter.where = $props.where;
         if ($props.sortBy) filter.order = $props.sortBy;
         if ($props.limit) filter.limit = $props.limit;
+        if ($props.skip) filter.skip = $props.skip;
+        // if (Object.keys(fetchFilter.where).length < 1) delete filter.where;
 
         const { data } = await axios.get($props.url, {
             params: { filter: JSON.stringify(filter), ...$props.params },
diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index 4903a5327..84055efcb 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -3,7 +3,7 @@ import { ref, toRefs, computed, watch } from 'vue';
 import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FetchData from 'src/components/FetchData.vue';
-const emit = defineEmits(['update:modelValue', 'update:options']);
+const emit = defineEmits(['update:modelValue', 'update:options', 'Paginate']);
 
 const $props = defineProps({
     modelValue: {
@@ -38,6 +38,10 @@ const $props = defineProps({
         type: Boolean,
         default: true,
     },
+    paginate: {
+        type: Boolean,
+        default: true,
+    },
     fields: {
         type: Array,
         default: null,
@@ -50,6 +54,10 @@ const $props = defineProps({
         type: String,
         default: null,
     },
+    orderBy: {
+        type: String,
+        default: null,
+    },
     limit: {
         type: Number,
         default: 30,
@@ -75,6 +83,11 @@ const value = computed({
 });
 
 function setOptions(data) {
+    if (loading.value) {
+        data.unshift(...myOptions.value);
+        // myOptions.value.push(...data);
+        loading.value = false;
+    }
     myOptions.value = JSON.parse(JSON.stringify(data));
     myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
 }
@@ -142,6 +155,18 @@ watch(modelValue, (newValue) => {
     if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
         fetchFilter(newValue);
 });
+const loading = ref(false);
+
+async function onScroll({ to, ref }) {
+    const lastIndex = myOptions.value.length - 1;
+    const optionIndex = ref.getOptionIndex();
+
+    console.log(lastIndex, to);
+    if (optionIndex > 0 && to === lastIndex) {
+        loading.value === false && emit('Paginate');
+        loading.value = true;
+    }
+}
 </script>
 
 <template>
@@ -155,6 +180,8 @@ watch(modelValue, (newValue) => {
         :fields="fields"
     />
     <QSelect
+        :loading="loading"
+        @virtual-scroll="onScroll"
         v-model="value"
         :options="myOptions"
         :option-label="optionLabel"
-- 
2.40.1


From 14f214330494892b1c462438db61a990b230a2a1 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 25 Mar 2024 11:17:24 +0100
Subject: [PATCH 02/50] refs #7136 pef: replace paginate by onPaginate

---
 src/components/common/VnSelectFilter.vue | 4 ++--
 src/pages/Customer/CustomerCreate.vue    | 4 ++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index 84055efcb..6bf14f1a8 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -3,7 +3,7 @@ import { ref, toRefs, computed, watch } from 'vue';
 import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FetchData from 'src/components/FetchData.vue';
-const emit = defineEmits(['update:modelValue', 'update:options', 'Paginate']);
+const emit = defineEmits(['update:modelValue', 'update:options', 'onPaginate']);
 
 const $props = defineProps({
     modelValue: {
@@ -163,7 +163,7 @@ async function onScroll({ to, ref }) {
 
     console.log(lastIndex, to);
     if (optionIndex > 0 && to === lastIndex) {
-        loading.value === false && emit('Paginate');
+        loading.value === false && emit('onPaginate');
         loading.value = true;
     }
 }
diff --git a/src/pages/Customer/CustomerCreate.vue b/src/pages/Customer/CustomerCreate.vue
index 5d36c6c37..6afa29380 100644
--- a/src/pages/Customer/CustomerCreate.vue
+++ b/src/pages/Customer/CustomerCreate.vue
@@ -39,6 +39,7 @@ function handleLocation(data, location) {
     data.provinceFk = provinceFk;
     data.countryFk = countryFk;
 }
+const businessTypesRef = ref();
 </script>
 
 <template>
@@ -48,8 +49,10 @@ function handleLocation(data, location) {
         url="Workers/search?departmentCodes"
     />
     <FetchData
+        ref="businessTypesRef"
         @on-fetch="(data) => (businessTypesOptions = data)"
         auto-load
+        limit="10"
         url="BusinessTypes"
     />
     <QPage>
@@ -84,6 +87,7 @@ function handleLocation(data, location) {
                             option-label="description"
                             option-value="code"
                             v-model="data.businessTypeFk"
+                            @on-paginate="(data) => businessTypesRef.paginate()"
                         />
                     </div>
                     <div class="col">
-- 
2.40.1


From b6f68321af9c8d88c0cdaa86510ef0ce376b800c Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 25 Mar 2024 12:35:38 +0100
Subject: [PATCH 03/50] refs #7136 perf: arrayData

---
 src/components/FetchData.vue             | 45 +++++++++++++++++-------
 src/components/common/VnSelectFilter.vue | 22 ++++++------
 2 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/src/components/FetchData.vue b/src/components/FetchData.vue
index 144c416d8..e20b2a79e 100644
--- a/src/components/FetchData.vue
+++ b/src/components/FetchData.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { onMounted, ref } from 'vue';
 import axios from 'axios';
+import { useArrayData } from 'composables/useArrayData';
 
 const $props = defineProps({
     autoLoad: {
@@ -35,43 +36,61 @@ const $props = defineProps({
 
 const emit = defineEmits(['onFetch']);
 defineExpose({ fetch, paginate });
+
+const arrayData = useArrayData($props.url ?? $props.dataKey, {
+    url: $props.url,
+    filter: $props.filter,
+    where: $props.where,
+    limit: $props.limit,
+    order: $props.order,
+    userParams: $props.userParams,
+    exprBuilder: $props.exprBuilder,
+});
+const store = arrayData.store;
+
 const pagination = ref({
     sortBy: $props.order,
-    rowsPerPage: $props.limit,
+    rowsPerPage: +$props.limit,
     page: 1,
+    hasMoreData: true,
 });
+
 onMounted(async () => {
     if ($props.autoLoad) {
         await fetch();
     }
 });
-async function fetchMore(fetchFilter = {}) {
-    try {
-        const filter = await fetch(filter);
-    } catch (error) {
-        console.error(error);
-    }
-}
+
 async function paginate() {
-    await fetch({
-        skip: pagination.value.page * $props.limit,
-    });
+    if (!pagination.value.hasMoreData) return emit('onFetch', []);
+    await fetch(
+        {
+            skip: pagination.value.page * $props.limit,
+        },
+        { append: true }
+    );
     pagination.value.page += 1;
 }
-async function fetch(fetchFilter = {}) {
+
+async function fetch(fetchFilter = {}, options = { append: false }) {
     try {
         const filter = Object.assign(fetchFilter, $props.filter); // eslint-disable-line vue/no-dupe-keys
         if ($props.where && !fetchFilter.where) filter.where = $props.where;
         if ($props.sortBy) filter.order = $props.sortBy;
         if ($props.limit) filter.limit = $props.limit;
         if ($props.skip) filter.skip = $props.skip;
-        // if (Object.keys(fetchFilter.where).length < 1) delete filter.where;
 
         const { data } = await axios.get($props.url, {
             params: { filter: JSON.stringify(filter), ...$props.params },
         });
+        pagination.value.hasMoreData = data.length === pagination.value.rowsPerPage;
+
+        if (options.append) {
+            store.data.push(...data);
+        } else store.data = data;
 
         emit('onFetch', data);
+
         return data;
     } catch (e) {
         //
diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index 6bf14f1a8..831921a28 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -83,10 +83,9 @@ const value = computed({
 });
 
 function setOptions(data) {
-    if (loading.value) {
+    if (isLoading.value) {
         data.unshift(...myOptions.value);
-        // myOptions.value.push(...data);
-        loading.value = false;
+        isLoading.value = false;
     }
     myOptions.value = JSON.parse(JSON.stringify(data));
     myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
@@ -155,22 +154,25 @@ watch(modelValue, (newValue) => {
     if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
         fetchFilter(newValue);
 });
-const loading = ref(false);
+const isLoading = ref(false);
 
-async function onScroll({ to, ref }) {
+async function onScroll(scrollEv) {
+    const { to, ref, direction } = scrollEv;
     const lastIndex = myOptions.value.length - 1;
     const optionIndex = ref.getOptionIndex();
 
-    console.log(lastIndex, to);
-    if (optionIndex > 0 && to === lastIndex) {
-        loading.value === false && emit('onPaginate');
-        loading.value = true;
+    console.log(lastIndex, to, optionIndex);
+    if (direction === 'decrease') return;
+    if (optionIndex > 0 && to === lastIndex && isLoading.value === false) {
+        isLoading.value = true;
+        emit('onPaginate');
     }
 }
 </script>
 
 <template>
     <FetchData
+        v-if="$props.url"
         ref="dataRef"
         :url="$props.url"
         @on-fetch="(data) => setOptions(data)"
@@ -180,7 +182,7 @@ async function onScroll({ to, ref }) {
         :fields="fields"
     />
     <QSelect
-        :loading="loading"
+        :loading="isLoading"
         @virtual-scroll="onScroll"
         v-model="value"
         :options="myOptions"
-- 
2.40.1


From 9ed8a0b51d59f1c7e8bd588b4ba757ef5943e0aa Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 26 Mar 2024 06:16:53 +0100
Subject: [PATCH 04/50] refs #7136 perf: remove onPaginate emit

---
 src/components/common/VnSelectFilter.vue | 7 ++++++-
 src/pages/Customer/CustomerCreate.vue    | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index 831921a28..580b79be2 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -62,6 +62,10 @@ const $props = defineProps({
         type: Number,
         default: 30,
     },
+    fetchRef: {
+        type: Object,
+        default: null,
+    },
 });
 
 const { t } = useI18n();
@@ -165,7 +169,8 @@ async function onScroll(scrollEv) {
     if (direction === 'decrease') return;
     if (optionIndex > 0 && to === lastIndex && isLoading.value === false) {
         isLoading.value = true;
-        emit('onPaginate');
+        // emit('onPaginate');
+        await $props.fetchRef.paginate();
     }
 }
 </script>
diff --git a/src/pages/Customer/CustomerCreate.vue b/src/pages/Customer/CustomerCreate.vue
index 6afa29380..491a049bd 100644
--- a/src/pages/Customer/CustomerCreate.vue
+++ b/src/pages/Customer/CustomerCreate.vue
@@ -87,7 +87,7 @@ const businessTypesRef = ref();
                             option-label="description"
                             option-value="code"
                             v-model="data.businessTypeFk"
-                            @on-paginate="(data) => businessTypesRef.paginate()"
+                            :fetch-ref="businessTypesRef"
                         />
                     </div>
                     <div class="col">
-- 
2.40.1


From 8fc1fa2493790378cca965d7622b51310f4681bc Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 26 Mar 2024 06:18:11 +0100
Subject: [PATCH 05/50] refs #7136 perf: remove onPaginate event from html

---
 src/components/common/VnSelectFilter.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index 580b79be2..dad3471c6 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -3,7 +3,7 @@ import { ref, toRefs, computed, watch } from 'vue';
 import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FetchData from 'src/components/FetchData.vue';
-const emit = defineEmits(['update:modelValue', 'update:options', 'onPaginate']);
+const emit = defineEmits(['update:modelValue', 'update:options']);
 
 const $props = defineProps({
     modelValue: {
@@ -169,7 +169,6 @@ async function onScroll(scrollEv) {
     if (direction === 'decrease') return;
     if (optionIndex > 0 && to === lastIndex && isLoading.value === false) {
         isLoading.value = true;
-        // emit('onPaginate');
         await $props.fetchRef.paginate();
     }
 }
-- 
2.40.1


From 24483448dc48926631e3bab1ce5b638d3455343d Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 26 Mar 2024 06:27:22 +0100
Subject: [PATCH 06/50] refs #7136 perf: handle when fetchRef not exists

---
 src/components/common/VnSelectFilter.vue | 2 +-
 src/pages/InvoiceIn/InvoiceInFilter.vue  | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index 2d93c0e70..4c5cdf726 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -165,7 +165,7 @@ async function onScroll(scrollEv) {
     const lastIndex = myOptions.value.length - 1;
     const optionIndex = ref.getOptionIndex();
 
-    console.log(lastIndex, to, optionIndex);
+    if (!$props.fetchRef) return;
     if (direction === 'decrease') return;
     if (optionIndex > 0 && to === lastIndex && isLoading.value === false) {
         isLoading.value = true;
diff --git a/src/pages/InvoiceIn/InvoiceInFilter.vue b/src/pages/InvoiceIn/InvoiceInFilter.vue
index 8f8213f1c..192987fcd 100644
--- a/src/pages/InvoiceIn/InvoiceInFilter.vue
+++ b/src/pages/InvoiceIn/InvoiceInFilter.vue
@@ -28,6 +28,7 @@ const suppliersRef = ref();
         :filter="{ fields: ['id', 'nickname'] }"
         order="nickname"
         limit="30"
+        auto-load
         @on-fetch="(data) => (suppliers = data)"
     />
     <VnFilterPanel :data-key="props.dataKey" :search-button="true">
@@ -86,10 +87,10 @@ const suppliersRef = ref();
                         :options="suppliers"
                         option-value="id"
                         option-label="nickname"
-                        @input-value="suppliersRef.fetch()"
                         dense
                         outlined
                         rounded
+                        :fetch-ref="suppliersRef"
                     >
                     </VnSelectFilter>
                 </QItemSection>
-- 
2.40.1


From e638d4496fc8891c96f2c261b44229998c9594bb Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 29 Mar 2024 00:41:07 +0100
Subject: [PATCH 07/50] refs #7136 $props

---
 src/components/FetchData.vue | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/FetchData.vue b/src/components/FetchData.vue
index 1665a534e..42299e4ff 100644
--- a/src/components/FetchData.vue
+++ b/src/components/FetchData.vue
@@ -28,6 +28,10 @@ const $props = defineProps({
         type: Number,
         default: 30,
     },
+    skip: {
+        type: Number,
+        default: 0,
+    },
     params: {
         type: Object,
         default: null,
@@ -38,18 +42,19 @@ const emit = defineEmits(['onFetch']);
 defineExpose({ fetch, paginate });
 
 const arrayData = useArrayData($props.url ?? $props.dataKey, {
+    autoLoad: $props.autoLoad,
     url: $props.url,
     filter: $props.filter,
     where: $props.where,
+    sortBy: $props.sortBy,
     limit: $props.limit,
-    order: $props.order,
-    userParams: $props.userParams,
-    exprBuilder: $props.exprBuilder,
+    params: $props.params,
 });
 const store = arrayData.store;
 
 const pagination = ref({
-    sortBy: $props.order,
+    sortBy: $props.sortBy,
+    skip: $props.skip,
     rowsPerPage: +$props.limit,
     page: 1,
     hasMoreData: true,
@@ -63,9 +68,11 @@ onMounted(async () => {
 
 async function paginate() {
     if (!pagination.value.hasMoreData) return emit('onFetch', []);
+    const skip = pagination.value.page * $props.limit;
+    pagination.value.skip = skip;
     await fetch(
         {
-            skip: pagination.value.page * $props.limit,
+            skip,
         },
         { append: true }
     );
-- 
2.40.1


From 243d66b592de9e2731698645d43b4528122a6778 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 5 Apr 2024 13:59:23 +0200
Subject: [PATCH 08/50] refs #7136 use paginate when url exists

---
 src/components/common/VnSelectFilter.vue |  7 ++-
 src/pages/InvoiceIn/InvoiceInFilter.vue  | 77 +++++++++++-------------
 2 files changed, 40 insertions(+), 44 deletions(-)

diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index 4c5cdf726..bd82e0cdb 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -60,7 +60,7 @@ const $props = defineProps({
     },
     limit: {
         type: [Number, String],
-        default: '30',
+        default: '4',
     },
     fetchRef: {
         type: Object,
@@ -165,11 +165,12 @@ async function onScroll(scrollEv) {
     const lastIndex = myOptions.value.length - 1;
     const optionIndex = ref.getOptionIndex();
 
-    if (!$props.fetchRef) return;
+    if (!$props.url && !$props.fetchRef) return;
     if (direction === 'decrease') return;
     if (optionIndex > 0 && to === lastIndex && isLoading.value === false) {
         isLoading.value = true;
-        await $props.fetchRef.paginate();
+        !$props.url && (await $props.fetchRef.paginate());
+        $props.url && (await dataRef.value.paginate());
     }
 }
 </script>
diff --git a/src/pages/InvoiceIn/InvoiceInFilter.vue b/src/pages/InvoiceIn/InvoiceInFilter.vue
index c6c52d5c2..a55a8a874 100644
--- a/src/pages/InvoiceIn/InvoiceInFilter.vue
+++ b/src/pages/InvoiceIn/InvoiceInFilter.vue
@@ -30,7 +30,6 @@ const suppliersRef = ref();
         limit="30"
         auto-load
         @on-fetch="(data) => (suppliers = data)"
-        auto-load
     />
     <VnFilterPanel :data-key="props.dataKey" :search-button="true">
         <template #tags="{ tag, formatFn }">
@@ -71,19 +70,15 @@ const suppliersRef = ref();
                 </QItemSection>
             </QItem>
             <QItem>
-                    <QItemSection>
-                        <VnInputDate
-                            :label="t('From')"
-                            v-model="params.from"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInputDate :label="t('To')" v-model="params.to" is-outlined />
-                    </QItemSection>
-                </QItem>
+                <QItemSection>
+                    <VnInputDate :label="t('From')" v-model="params.from" is-outlined />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInputDate :label="t('To')" v-model="params.to" is-outlined />
+                </QItemSection>
+            </QItem>
             <QItem>
                 <QItemSection>
                     <VnInput
@@ -115,33 +110,33 @@ const suppliersRef = ref();
             </QItem>
             <QExpansionItem :label="t('More options')" expand-separator>
                 <QItem>
-                <QItemSection>
-                    <VnInput
-                        :label="t('params.fi')"
-                        v-model="params.fi"
-                        is-outlined
-                        lazy-rules
-                    >
-                        <template #prepend>
-                            <QIcon name="badge" size="sm"></QIcon>
-                        </template>
-                    </VnInput>
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnInput
-                        :label="t('params.serialNumber')"
-                        v-model="params.serialNumber"
-                        is-outlined
-                        lazy-rules
-                    >
-                        <template #prepend>
-                            <QIcon name="badge" size="sm"></QIcon>
-                        </template>
-                    </VnInput>
-                </QItemSection>
-            </QItem>
+                    <QItemSection>
+                        <VnInput
+                            :label="t('params.fi')"
+                            v-model="params.fi"
+                            is-outlined
+                            lazy-rules
+                        >
+                            <template #prepend>
+                                <QIcon name="badge" size="sm"></QIcon>
+                            </template>
+                        </VnInput>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <VnInput
+                            :label="t('params.serialNumber')"
+                            v-model="params.serialNumber"
+                            is-outlined
+                            lazy-rules
+                        >
+                            <template #prepend>
+                                <QIcon name="badge" size="sm"></QIcon>
+                            </template>
+                        </VnInput>
+                    </QItemSection>
+                </QItem>
                 <QItem>
                     <QItemSection>
                         <VnInput
-- 
2.40.1


From 1a662b222ba220202180ab6fa34dd60e72fd0068 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 16 Apr 2024 14:13:44 +0200
Subject: [PATCH 09/50] feat(lilium) #7220 VnTitle example

---
 cypress/support/commands.js                | 25 ++++++++++++++++++++
 cypress/support/component-index.html       | 12 ++++++++++
 cypress/support/component.js               | 27 ++++++++++++++++++++++
 test/cypress/integration/common/VnTitle.js | 15 ++++++++++++
 4 files changed, 79 insertions(+)
 create mode 100644 cypress/support/commands.js
 create mode 100644 cypress/support/component-index.html
 create mode 100644 cypress/support/component.js
 create mode 100644 test/cypress/integration/common/VnTitle.js

diff --git a/cypress/support/commands.js b/cypress/support/commands.js
new file mode 100644
index 000000000..66ea16ef0
--- /dev/null
+++ b/cypress/support/commands.js
@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
\ No newline at end of file
diff --git a/cypress/support/component-index.html b/cypress/support/component-index.html
new file mode 100644
index 000000000..ac6e79fd8
--- /dev/null
+++ b/cypress/support/component-index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/cypress/support/component.js b/cypress/support/component.js
new file mode 100644
index 000000000..b091808fa
--- /dev/null
+++ b/cypress/support/component.js
@@ -0,0 +1,27 @@
+// ***********************************************************
+// This example support/component.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from 'cypress/vue'
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(MyComponent)
\ No newline at end of file
diff --git a/test/cypress/integration/common/VnTitle.js b/test/cypress/integration/common/VnTitle.js
new file mode 100644
index 000000000..45a49a698
--- /dev/null
+++ b/test/cypress/integration/common/VnTitle.js
@@ -0,0 +1,15 @@
+import VnTitle from '@/components/common/VnTitle.vue';
+
+describe('<VnTitle />', () => {
+    it('renders', () => {
+        // see: https://on.cypress.io/mounting-vue
+        cy.mount(VnTitle,{
+            props:{
+                url:'url',
+                title: 'title',
+
+            }
+        });
+        console.log(VnTitle);
+    });
+});
-- 
2.40.1


From 4d9fcbe23ff488d480254d0b4800df2c5d8ea47b Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 16 Apr 2024 14:12:02 +0200
Subject: [PATCH 10/50] feat(lilium) #7220 config

---
 cypress.config.js |  7 +++++++
 vite.config.js    | 14 ++++++++++++++
 2 files changed, 21 insertions(+)
 create mode 100644 vite.config.js

diff --git a/cypress.config.js b/cypress.config.js
index e2046d6c4..2388d293a 100644
--- a/cypress.config.js
+++ b/cypress.config.js
@@ -20,4 +20,11 @@ module.exports = defineConfig({
             // implement node event listeners here
         },
     },
+
+    component: {
+        devServer: {
+            framework: 'vue',
+            bundler: 'vite',
+        },
+    },
 });
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 000000000..69726edd9
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,14 @@
+import { fileURLToPath, URL } from 'url';
+
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [vue()],
+    resolve: {
+        alias: {
+            '@': fileURLToPath(new URL('./src', import.meta.url)),
+        },
+    },
+});
-- 
2.40.1


From 5b518eb2dbfab4d4d26b119f1ca7fd9364393b4c Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 16 Apr 2024 15:30:12 +0200
Subject: [PATCH 11/50] feat(lilium) #7136 remove Index

---
 src/components/common/VnSelectFilter.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index bd82e0cdb..7c44cc706 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -167,7 +167,7 @@ async function onScroll(scrollEv) {
 
     if (!$props.url && !$props.fetchRef) return;
     if (direction === 'decrease') return;
-    if (optionIndex > 0 && to === lastIndex && isLoading.value === false) {
+    if (to === lastIndex && !isLoading.value) {
         isLoading.value = true;
         !$props.url && (await $props.fetchRef.paginate());
         $props.url && (await dataRef.value.paginate());
-- 
2.40.1


From 38e3e1c004f31ac26d439d4a74d765fd94d4a7c5 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 18 Apr 2024 12:23:51 +0200
Subject: [PATCH 12/50] refs #6772: Improve FetchData

---
 src/components/FetchData.vue             | 14 +++++---------
 src/components/common/VnSelectFilter.vue |  5 ++---
 src/composables/useArrayData.js          |  3 +--
 3 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/src/components/FetchData.vue b/src/components/FetchData.vue
index 42299e4ff..285a3e30d 100644
--- a/src/components/FetchData.vue
+++ b/src/components/FetchData.vue
@@ -79,22 +79,18 @@ async function paginate() {
     pagination.value.page += 1;
 }
 
-async function fetch(fetchFilter = {}, options = { append: false }) {
+async function fetch(fetchFilter = {}) {
     try {
-        const filter = Object.assign(fetchFilter, $props.filter); // eslint-disable-line vue/no-dupe-keys
+        const filter = Object.assign(fetchFilter, $props.filter, $props.params); // eslint-disable-line vue/no-dupe-keys
         if ($props.where && !fetchFilter.where) filter.where = $props.where;
         if ($props.sortBy) filter.order = $props.sortBy;
         if ($props.limit) filter.limit = $props.limit;
         if ($props.skip) filter.skip = $props.skip;
 
-        const { data } = await axios.get($props.url, {
-            params: { filter: JSON.stringify(filter), ...$props.params },
-        });
-        pagination.value.hasMoreData = data.length === pagination.value.rowsPerPage;
+        await arrayData.applyFilter(filter);
 
-        if (options.append) {
-            store.data.push(...data);
-        } else store.data = data;
+        const { data } = store;
+        pagination.value.hasMoreData = data.length === pagination.value.rowsPerPage;
 
         emit('onFetch', data);
 
diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index 7c44cc706..c1f203b3e 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -60,7 +60,7 @@ const $props = defineProps({
     },
     limit: {
         type: [Number, String],
-        default: '4',
+        default: '30',
     },
     fetchRef: {
         type: Object,
@@ -161,9 +161,8 @@ watch(modelValue, (newValue) => {
 const isLoading = ref(false);
 
 async function onScroll(scrollEv) {
-    const { to, ref, direction } = scrollEv;
+    const { to, direction } = scrollEv;
     const lastIndex = myOptions.value.length - 1;
-    const optionIndex = ref.getOptionIndex();
 
     if (!$props.url && !$props.fetchRef) return;
     if (direction === 'decrease') return;
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 093806567..79d5b7fa6 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -80,8 +80,7 @@ export function useArrayData(key, userOptions) {
             exprFilter = where ? { where } : null;
         }
 
-        Object.assign(filter, store.userFilter, exprFilter);
-        Object.assign(store.filter, filter);
+        Object.assign(store.filter, filter, store.userFilter, exprFilter);
         const params = {
             filter: JSON.stringify(store.filter),
         };
-- 
2.40.1


From 7640189f03755a918cd2484af6e65d02a45920cf Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 19 Apr 2024 10:44:20 +0200
Subject: [PATCH 13/50] refs #7136 perf: remove fetchData from InvoiceInFilter

---
 src/components/FetchData.vue                  | 34 +++++++------------
 src/components/common/VnSelectFilter.vue      | 10 +++---
 src/pages/Customer/Card/CustomerBasicData.vue | 19 +++--------
 src/pages/InvoiceIn/InvoiceInFilter.vue       | 19 +++--------
 4 files changed, 27 insertions(+), 55 deletions(-)

diff --git a/src/components/FetchData.vue b/src/components/FetchData.vue
index 285a3e30d..f8ff97af7 100644
--- a/src/components/FetchData.vue
+++ b/src/components/FetchData.vue
@@ -1,6 +1,5 @@
 <script setup>
 import { onMounted, ref } from 'vue';
-import axios from 'axios';
 import { useArrayData } from 'composables/useArrayData';
 
 const $props = defineProps({
@@ -38,9 +37,6 @@ const $props = defineProps({
     },
 });
 
-const emit = defineEmits(['onFetch']);
-defineExpose({ fetch, paginate });
-
 const arrayData = useArrayData($props.url ?? $props.dataKey, {
     autoLoad: $props.autoLoad,
     url: $props.url,
@@ -56,44 +52,38 @@ const pagination = ref({
     sortBy: $props.sortBy,
     skip: $props.skip,
     rowsPerPage: +$props.limit,
-    page: 1,
+    page: 0,
     hasMoreData: true,
 });
 
+const emit = defineEmits(['onFetch']);
+defineExpose({ fetch, pagination });
+
 onMounted(async () => {
     if ($props.autoLoad) {
         await fetch();
     }
 });
 
-async function paginate() {
-    if (!pagination.value.hasMoreData) return emit('onFetch', []);
-    const skip = pagination.value.page * $props.limit;
-    pagination.value.skip = skip;
-    await fetch(
-        {
-            skip,
-        },
-        { append: true }
-    );
-    pagination.value.page += 1;
-}
-
 async function fetch(fetchFilter = {}) {
     try {
-        const filter = Object.assign(fetchFilter, $props.filter, $props.params); // eslint-disable-line vue/no-dupe-keys
+        const filter = Object.assign(fetchFilter, $props.filter); // eslint-disable-line vue/no-dupe-keys
         if ($props.where && !fetchFilter.where) filter.where = $props.where;
         if ($props.sortBy) filter.order = $props.sortBy;
         if ($props.limit) filter.limit = $props.limit;
         if ($props.skip) filter.skip = $props.skip;
-
-        await arrayData.applyFilter(filter);
+        else {
+            const skip = pagination.value.page * $props.limit;
+            pagination.value.skip = skip;
+            filter.skip = skip;
+        }
+        await arrayData.applyFilter({ filter });
 
         const { data } = store;
         pagination.value.hasMoreData = data.length === pagination.value.rowsPerPage;
+        pagination.value.page += 1;
 
         emit('onFetch', data);
-
         return data;
     } catch (e) {
         //
diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index c1f203b3e..2ced330bb 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -89,7 +89,6 @@ const value = computed({
 function setOptions(data) {
     if (isLoading.value) {
         data.unshift(...myOptions.value);
-        isLoading.value = false;
     }
     myOptions.value = JSON.parse(JSON.stringify(data));
     myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
@@ -134,8 +133,10 @@ async function fetchFilter(val) {
 async function filterHandler(val, update) {
     if (!$props.defaultFilter) return update();
     let newOptions;
-    if ($props.url) {
+    if ($props.url && !isLoading.value) {
+        isLoading.value = true;
         newOptions = await fetchFilter(val);
+        isLoading.value = false;
     } else newOptions = filter(val, myOptionsOriginal.value);
     update(
         () => {
@@ -166,10 +167,11 @@ async function onScroll(scrollEv) {
 
     if (!$props.url && !$props.fetchRef) return;
     if (direction === 'decrease') return;
-    if (to === lastIndex && !isLoading.value) {
+    if (to === lastIndex && dataRef.value.pagination.hasMoreData && !isLoading.value) {
         isLoading.value = true;
         !$props.url && (await $props.fetchRef.paginate());
-        $props.url && (await dataRef.value.paginate());
+        $props.url && (await fetchFilter(''));
+        isLoading.value = false;
     }
 }
 </script>
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index d23b08f17..8612cc826 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -8,6 +8,7 @@ import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -19,11 +20,6 @@ const workersCopy = ref([]);
 const businessTypes = ref([]);
 const contactChannels = ref([]);
 
-function setWorkers(data) {
-    workers.value = data;
-    workersCopy.value = data;
-}
-
 const filterOptions = {
     options: workers,
     filterFn: (options, value) => {
@@ -44,12 +40,6 @@ const filterOptions = {
 };
 </script>
 <template>
-    <fetch-data
-        url="Workers/activeWithInheritedRole"
-        :filter="{ where: { role: 'salesPerson' } }"
-        @on-fetch="setWorkers"
-        auto-load
-    />
     <fetch-data
         url="ContactChannels"
         @on-fetch="(data) => (contactChannels = data)"
@@ -125,9 +115,8 @@ const filterOptions = {
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <QSelect
+                    <VnSelectFilter
                         v-model="data.salesPersonFk"
-                        :options="workers"
                         option-value="id"
                         option-label="name"
                         emit-value
@@ -137,6 +126,8 @@ const filterOptions = {
                         @filter="(value, update) => filter(value, update, filterOptions)"
                         :rules="validate('client.salesPersonFk')"
                         :input-debounce="0"
+                        url="Workers/activeWithInheritedRole"
+                        :filter="{ where: { role: 'salesPerson' } }"
                     >
                         <template #prepend>
                             <QAvatar color="orange">
@@ -147,7 +138,7 @@ const filterOptions = {
                                 />
                             </QAvatar>
                         </template>
-                    </QSelect>
+                    </VnSelectFilter>
                 </div>
                 <div class="col">
                     <QSelect
diff --git a/src/pages/InvoiceIn/InvoiceInFilter.vue b/src/pages/InvoiceIn/InvoiceInFilter.vue
index a55a8a874..75caaf1a4 100644
--- a/src/pages/InvoiceIn/InvoiceInFilter.vue
+++ b/src/pages/InvoiceIn/InvoiceInFilter.vue
@@ -4,10 +4,8 @@ import { useI18n } from 'vue-i18n';
 
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import FetchData from 'components/FetchData.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
-import { useCapitalize } from 'src/composables/useCapitalize';
 import VnCurrency from 'src/components/common/VnCurrency.vue';
 
 const { t } = useI18n();
@@ -17,20 +15,9 @@ const props = defineProps({
         required: true,
     },
 });
-const suppliers = ref([]);
-const suppliersRef = ref();
 </script>
 
 <template>
-    <FetchData
-        ref="suppliersRef"
-        url="Suppliers"
-        :filter="{ fields: ['id', 'nickname'] }"
-        order="nickname"
-        limit="30"
-        auto-load
-        @on-fetch="(data) => (suppliers = data)"
-    />
     <VnFilterPanel :data-key="props.dataKey" :search-button="true">
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
@@ -44,13 +31,15 @@ const suppliersRef = ref();
                     <VnSelectFilter
                         :label="t('params.supplierFk')"
                         v-model="params.supplierFk"
-                        :options="suppliers"
                         option-value="id"
                         option-label="nickname"
                         dense
                         outlined
                         rounded
-                        :fetch-ref="suppliersRef"
+                        url="Suppliers"
+                        :fields="['id', 'nickname']"
+                        order="nickname"
+                        limit="30"
                     >
                     </VnSelectFilter>
                 </QItemSection>
-- 
2.40.1


From 7cd3726aa4de1b3be1507fe90976a9f4e2f3592b Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 16 May 2024 12:07:07 +0200
Subject: [PATCH 14/50] fix merge

---
 src/pages/Customer/Card/CustomerBasicData.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index fc3256cc9..37bfa62ba 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -118,13 +118,13 @@ const filterOptions = {
                 />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <!-- @filter="(value, update) => filter(value, update, filterOptions)" -->
                 <QSelect
                     :input-debounce="0"
                     :label="t('customer.basicData.salesPerson')"
                     :options="workers"
                     :rules="validate('client.salesPersonFk')"
                     url="Workers/activeWithInheritedRole"
+                    @filter="(value, update) => filter(value, update, filterOptions)"
                     :filter="{ where: { role: 'salesPerson' } }"
                     emit-value
                     map-options
-- 
2.40.1


From 1ca6bce7fee878c9b6b0ed01770ea1468a806c1e Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Sat, 25 May 2024 10:00:58 +0200
Subject: [PATCH 15/50] updates

---
 src/components/FetchData.vue                  | 46 +++-----------
 src/components/common/VnSelect.vue            | 62 +++++++++++++------
 src/composables/useArrayData.js               |  5 +-
 src/pages/Customer/Card/CustomerBasicData.vue | 23 +------
 src/pages/Customer/Card/CustomerCard.vue      |  1 -
 src/pages/Customer/CustomerCreate.vue         |  4 --
 6 files changed, 59 insertions(+), 82 deletions(-)

diff --git a/src/components/FetchData.vue b/src/components/FetchData.vue
index f8ff97af7..1fdd9a5f5 100644
--- a/src/components/FetchData.vue
+++ b/src/components/FetchData.vue
@@ -1,6 +1,6 @@
 <script setup>
-import { onMounted, ref } from 'vue';
-import { useArrayData } from 'composables/useArrayData';
+import { onMounted } from 'vue';
+import axios from 'axios';
 
 const $props = defineProps({
     autoLoad: {
@@ -24,12 +24,8 @@ const $props = defineProps({
         default: '',
     },
     limit: {
-        type: Number,
-        default: 30,
-    },
-    skip: {
-        type: Number,
-        default: 0,
+        type: String,
+        default: '',
     },
     params: {
         type: Object,
@@ -37,27 +33,8 @@ const $props = defineProps({
     },
 });
 
-const arrayData = useArrayData($props.url ?? $props.dataKey, {
-    autoLoad: $props.autoLoad,
-    url: $props.url,
-    filter: $props.filter,
-    where: $props.where,
-    sortBy: $props.sortBy,
-    limit: $props.limit,
-    params: $props.params,
-});
-const store = arrayData.store;
-
-const pagination = ref({
-    sortBy: $props.sortBy,
-    skip: $props.skip,
-    rowsPerPage: +$props.limit,
-    page: 0,
-    hasMoreData: true,
-});
-
 const emit = defineEmits(['onFetch']);
-defineExpose({ fetch, pagination });
+defineExpose({ fetch });
 
 onMounted(async () => {
     if ($props.autoLoad) {
@@ -71,17 +48,10 @@ async function fetch(fetchFilter = {}) {
         if ($props.where && !fetchFilter.where) filter.where = $props.where;
         if ($props.sortBy) filter.order = $props.sortBy;
         if ($props.limit) filter.limit = $props.limit;
-        if ($props.skip) filter.skip = $props.skip;
-        else {
-            const skip = pagination.value.page * $props.limit;
-            pagination.value.skip = skip;
-            filter.skip = skip;
-        }
-        await arrayData.applyFilter({ filter });
 
-        const { data } = store;
-        pagination.value.hasMoreData = data.length === pagination.value.rowsPerPage;
-        pagination.value.page += 1;
+        const { data } = await axios.get($props.url, {
+            params: { filter: JSON.stringify(filter), ...$props.params },
+        });
 
         emit('onFetch', data);
         return data;
diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index a45bd0319..9a9bdb365 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -4,6 +4,7 @@ import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FetchData from 'src/components/FetchData.vue';
 const emit = defineEmits(['update:modelValue', 'update:options']);
+import { useArrayData } from 'src/composables/useArrayData';
 
 const $props = defineProps({
     modelValue: {
@@ -42,10 +43,10 @@ const $props = defineProps({
         type: Boolean,
         default: true,
     },
-    paginate: {
-        type: Boolean,
-        default: true,
-    },
+    // paginate: {
+    //     type: Boolean,
+    //     default: true,
+    // },
     fields: {
         type: Array,
         default: null,
@@ -58,18 +59,18 @@ const $props = defineProps({
         type: String,
         default: null,
     },
-    orderBy: {
-        type: String,
-        default: null,
-    },
+    // orderBy: {
+    //     type: String,
+    //     default: null,
+    // },
     limit: {
         type: [Number, String],
         default: '30',
     },
-    fetchRef: {
-        type: Object,
-        default: null,
-    },
+    // fetchRef: {
+    //     type: Object,
+    //     default: null,
+    // },
 });
 
 const { t } = useI18n();
@@ -90,13 +91,30 @@ const value = computed({
     },
 });
 
-function setOptions(data) {
+function setOptions(data, append = false) {
     if (isLoading.value) {
         data.unshift(...myOptions.value);
     }
-    myOptions.value = JSON.parse(JSON.stringify(data));
-    myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
+    if (arrayData.store) {
+        //     arrayData.store.data = data;
+        arrayData.store.hasMoreData = data.length === +$props.limit;
+        append && myOptions.value.concat(data);
+        // myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
+    } else {
+        myOptions.value = JSON.parse(JSON.stringify(data));
+        myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
+    }
 }
+const useURL = computed(() => $props.url?.length > 0);
+const arrayData = useURL.value
+    ? useArrayData($props.url, {
+          url: $props.url,
+          fields: $props.fields,
+          where: $props.where,
+          sortBy: $props.sortBy,
+          limit: $props.limit,
+      })
+    : ref(null);
 onMounted(() => {
     setOptions(options.value);
     if ($props.url && $props.modelValue) fetchFilter($props.modelValue);
@@ -166,15 +184,23 @@ watch(modelValue, (newValue) => {
 const isLoading = ref(false);
 
 async function onScroll(scrollEv) {
-    const { to, direction } = scrollEv;
+    const { to, direction, from, index } = scrollEv;
     const lastIndex = myOptions.value.length - 1;
 
+    if (from === 0 && index === 0) return;
     if (!$props.url && !$props.fetchRef) return;
     if (direction === 'decrease') return;
-    if (to === lastIndex && dataRef.value.pagination.hasMoreData && !isLoading.value) {
+    if (to === lastIndex && arrayData.store.hasMoreData && !isLoading.value) {
         isLoading.value = true;
         !$props.url && (await $props.fetchRef.paginate());
-        $props.url && (await fetchFilter(''));
+        $props.url && (await arrayData.loadMore());
+        setOptions(
+            arrayData.store.data.slice(
+                myOptions.value.length,
+                myOptions.value.length + 5
+            ),
+            true
+        );
         isLoading.value = false;
     }
 }
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 728446f81..ce9186b5d 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -79,7 +79,8 @@ export function useArrayData(key, userOptions) {
             exprFilter = where ? { where } : null;
         }
 
-        Object.assign(store.filter, filter, store.userFilter, exprFilter);
+        Object.assign(filter, store.userFilter, exprFilter);
+        Object.assign(store.filter, filter);
         const params = {
             filter: JSON.stringify(store.filter),
         };
@@ -111,6 +112,8 @@ export function useArrayData(key, userOptions) {
         return response;
     }
 
+    function isHasMoreData() {}
+
     function destroy() {
         if (arrayDataStore.get(key)) {
             arrayDataStore.clear(key);
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index 37bfa62ba..d080b0ddf 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -8,7 +8,7 @@ import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -40,23 +40,6 @@ const filterOptions = {
 };
 </script>
 <template>
-    <fetch-data
-        url="ContactChannels"
-        @on-fetch="(data) => (contactChannels = data)"
-        auto-load
-    />
-    <fetch-data
-        url="BusinessTypes"
-        @on-fetch="(data) => (businessTypes = data)"
-        auto-load
-    />
-    <fetch-data
-        :filter="filter"
-        @on-fetch="(data) => (clients = data)"
-        auto-load
-        url="Clients"
-    />
-
     <FormModel :url="`Clients/${route.params.id}`" auto-load model="customer">
         <template #form="{ data, validate, filter }">
             <VnRow class="row q-gutter-md q-mb-md">
@@ -118,7 +101,7 @@ const filterOptions = {
                 />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <QSelect
+                <VnSelect
                     :input-debounce="0"
                     :label="t('customer.basicData.salesPerson')"
                     :options="workers"
@@ -142,7 +125,7 @@ const filterOptions = {
                             />
                         </QAvatar>
                     </template>
-                </QSelect>
+                </VnSelect>
                 <QSelect
                     v-model="data.contactChannelFk"
                     :options="contactChannels"
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index 98842a0c7..1afe19a80 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -8,7 +8,6 @@ import CustomerFilter from '../CustomerFilter.vue';
         data-key="Client"
         base-url="Clients"
         :descriptor="CustomerDescriptor"
-        :filter-panel="CustomerFilter"
         search-data-key="CustomerList"
         search-url="Clients/filter"
         searchbar-label="Search customer"
diff --git a/src/pages/Customer/CustomerCreate.vue b/src/pages/Customer/CustomerCreate.vue
index 9190614bf..80bfd1efe 100644
--- a/src/pages/Customer/CustomerCreate.vue
+++ b/src/pages/Customer/CustomerCreate.vue
@@ -27,7 +27,6 @@ function handleLocation(data, location) {
     data.provinceFk = provinceFk;
     data.countryFk = countryFk;
 }
-const businessTypesRef = ref();
 </script>
 
 <template>
@@ -37,10 +36,8 @@ const businessTypesRef = ref();
         url="Workers/search?departmentCodes"
     />
     <FetchData
-        ref="businessTypesRef"
         @on-fetch="(data) => (businessTypesOptions = data)"
         auto-load
-        limit="10"
         url="BusinessTypes"
     />
     <QPage>
@@ -70,7 +67,6 @@ const businessTypesRef = ref();
                         option-label="description"
                         option-value="code"
                         v-model="data.businessTypeFk"
-                        :fetch-ref="businessTypesRef"
                     />
                     <QInput v-model="data.fi" :label="t('Tax number')" />
                 </VnRow>
-- 
2.40.1


From 2361042facb7017fd4631c0da388dcc1eb1c9fe3 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Sat, 25 May 2024 11:38:27 +0200
Subject: [PATCH 16/50] fix it?

---
 src/components/common/VnSelect.vue | 61 ++++++++++++++----------------
 1 file changed, 28 insertions(+), 33 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 9a9bdb365..b4f31799f 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -92,18 +92,18 @@ const value = computed({
 });
 
 function setOptions(data, append = false) {
-    if (isLoading.value) {
-        data.unshift(...myOptions.value);
-    }
-    if (arrayData.store) {
-        //     arrayData.store.data = data;
-        arrayData.store.hasMoreData = data.length === +$props.limit;
-        append && myOptions.value.concat(data);
-        // myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
-    } else {
-        myOptions.value = JSON.parse(JSON.stringify(data));
-        myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
-    }
+    // if (isLoading.value) {
+    //     data.unshift(...myOptions.value);
+    // }
+    // if (arrayData.store) {
+    //     //     arrayData.store.data = data;
+    //     arrayData.store.hasMoreData = data.length === +$props.limit;
+    //     append && myOptions.value.concat(data);
+    //     // myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
+    // } else {
+    myOptions.value = JSON.parse(JSON.stringify(data));
+    myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
+    // }
 }
 const useURL = computed(() => $props.url?.length > 0);
 const arrayData = useURL.value
@@ -115,11 +115,22 @@ const arrayData = useURL.value
           limit: $props.limit,
       })
     : ref(null);
-onMounted(() => {
+onMounted(async () => {
     setOptions(options.value);
     if ($props.url && $props.modelValue) fetchFilter($props.modelValue);
+    else {
+        const { data } = await arrayData.fetch({ append: true });
+        setOptions(data);
+    }
 });
 
+watch(modelValue, (newValue) => {
+    if (useURL.value) return;
+    if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
+        fetchFilter(newValue);
+});
+const isLoading = ref(false);
+
 function filter(val, options) {
     const search = val.toString().toLowerCase();
 
@@ -156,9 +167,7 @@ async function filterHandler(val, update) {
     if (!$props.defaultFilter) return update();
     let newOptions;
     if ($props.url && !isLoading.value) {
-        isLoading.value = true;
-        newOptions = await fetchFilter(val);
-        isLoading.value = false;
+        return;
     } else newOptions = filter(val, myOptionsOriginal.value);
     update(
         () => {
@@ -173,16 +182,6 @@ async function filterHandler(val, update) {
     );
 }
 
-watch(options, (newValue) => {
-    setOptions(newValue);
-});
-
-watch(modelValue, (newValue) => {
-    if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
-        fetchFilter(newValue);
-});
-const isLoading = ref(false);
-
 async function onScroll(scrollEv) {
     const { to, direction, from, index } = scrollEv;
     const lastIndex = myOptions.value.length - 1;
@@ -194,13 +193,9 @@ async function onScroll(scrollEv) {
         isLoading.value = true;
         !$props.url && (await $props.fetchRef.paginate());
         $props.url && (await arrayData.loadMore());
-        setOptions(
-            arrayData.store.data.slice(
-                myOptions.value.length,
-                myOptions.value.length + 5
-            ),
-            true
-        );
+        setOptions(arrayData.store.data);
+        vnSelectRef.value.scrollTo(lastIndex);
+
         isLoading.value = false;
     }
 }
-- 
2.40.1


From 2485ab755d1a693bb6a65c93da19ff8da23a411d Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Sat, 25 May 2024 11:43:48 +0200
Subject: [PATCH 17/50] feat: #7136 clean code

---
 src/components/common/VnSelect.vue | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index b4f31799f..56293ebc5 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -165,10 +165,7 @@ async function fetchFilter(val) {
 
 async function filterHandler(val, update) {
     if (!$props.defaultFilter) return update();
-    let newOptions;
-    if ($props.url && !isLoading.value) {
-        return;
-    } else newOptions = filter(val, myOptionsOriginal.value);
+    const newOptions = filter(val, myOptionsOriginal.value);
     update(
         () => {
             myOptions.value = newOptions;
@@ -191,11 +188,9 @@ async function onScroll(scrollEv) {
     if (direction === 'decrease') return;
     if (to === lastIndex && arrayData.store.hasMoreData && !isLoading.value) {
         isLoading.value = true;
-        !$props.url && (await $props.fetchRef.paginate());
-        $props.url && (await arrayData.loadMore());
+        await arrayData.loadMore();
         setOptions(arrayData.store.data);
         vnSelectRef.value.scrollTo(lastIndex);
-
         isLoading.value = false;
     }
 }
-- 
2.40.1


From 83f5351774fa0c690a653876b3e6f1639017fe8e Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 27 May 2024 09:50:21 +0200
Subject: [PATCH 18/50] perf: filterURL

---
 src/components/common/VnSelect.vue            | 44 ++++++++++++++-----
 src/pages/Customer/Card/CustomerBasicData.vue | 18 ++++++++
 2 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 56293ebc5..1f03dc0c2 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -78,6 +78,7 @@ const requiredFieldRule = (val) => val ?? t('globals.fieldRequired');
 
 const { optionLabel, optionValue, optionFilter, options, modelValue } = toRefs($props);
 const myOptions = ref([]);
+const myOptionsFiltered = ref([]);
 const myOptionsOriginal = ref([]);
 const vnSelectRef = ref();
 const dataRef = ref();
@@ -91,7 +92,7 @@ const value = computed({
     },
 });
 
-function setOptions(data, append = false) {
+function setOptions(data, append = true) {
     // if (isLoading.value) {
     //     data.unshift(...myOptions.value);
     // }
@@ -102,7 +103,7 @@ function setOptions(data, append = false) {
     //     // myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
     // } else {
     myOptions.value = JSON.parse(JSON.stringify(data));
-    myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
+    if (append) myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
     // }
 }
 const useURL = computed(() => $props.url?.length > 0);
@@ -117,11 +118,13 @@ const arrayData = useURL.value
     : ref(null);
 onMounted(async () => {
     setOptions(options.value);
-    if ($props.url && $props.modelValue) fetchFilter($props.modelValue);
-    else {
+    if (useURL.value) {
         const { data } = await arrayData.fetch({ append: true });
         setOptions(data);
+        return;
     }
+    if ($props.options) setOptions($props.options);
+    else fetchFilter($props.modelValue);
 });
 
 watch(modelValue, (newValue) => {
@@ -136,7 +139,7 @@ function filter(val, options) {
 
     if (!search) return options;
 
-    return options.filter((row) => {
+    const optionsFiltered = options.filter((row) => {
         if ($props.filterOptions.length) {
             return $props.filterOptions.some((prop) => {
                 const propValue = String(row[prop]).toLowerCase();
@@ -149,23 +152,42 @@ function filter(val, options) {
 
         return id == search || optionLabel.includes(search);
     });
+
+    return optionsFiltered;
 }
 
-async function fetchFilter(val) {
-    if (!$props.url || !dataRef.value) return;
+function buildwhere(val) {
+    if (!useURL.value || !dataRef.value) return;
 
-    const { fields, sortBy, limit } = $props;
     let key = optionLabel.value;
 
     if (new RegExp(/\d/g).test(val)) key = optionFilter.value ?? optionValue.value;
 
     const where = { ...{ [key]: { like: `%${val}%` } }, ...$props.where };
+    return where;
+}
+async function fetchFilter(val) {
+    const { fields, sortBy, limit } = $props;
+    const where = buildwhere(val);
     return dataRef.value.fetch({ fields, where, order: sortBy, limit });
 }
 
 async function filterHandler(val, update) {
     if (!$props.defaultFilter) return update();
-    const newOptions = filter(val, myOptionsOriginal.value);
+    let newOptions = [];
+    if (myOptionsFiltered.value.length > 0) {
+        newOptions = filter(val, myOptionsFiltered.value);
+        myOptionsFiltered.value = [];
+    } else newOptions = filter(val, myOptionsOriginal.value);
+    if (useURL.value && myOptions.value.length < 1) {
+        // arrayData.store.filter.where = { [optionLabel.value]: val };
+        arrayData.store.filter.where = { [optionFilter.value]: val };
+        // arrayData.store.filter.where = buildwhere(val);
+        const { data } = await arrayData.fetch({ append: false });
+        newOptions = data;
+        myOptionsFiltered.value = data;
+        // setOptions(data, false);
+    }
     update(
         () => {
             myOptions.value = newOptions;
@@ -184,7 +206,7 @@ async function onScroll(scrollEv) {
     const lastIndex = myOptions.value.length - 1;
 
     if (from === 0 && index === 0) return;
-    if (!$props.url && !$props.fetchRef) return;
+    if (!useURL.value && !$props.fetchRef) return;
     if (direction === 'decrease') return;
     if (to === lastIndex && arrayData.store.hasMoreData && !isLoading.value) {
         isLoading.value = true;
@@ -198,7 +220,7 @@ async function onScroll(scrollEv) {
 
 <template>
     <FetchData
-        v-if="$props.url"
+        v-if="useURL"
         ref="dataRef"
         :url="$props.url"
         @on-fetch="(data) => setOptions(data)"
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index d080b0ddf..2b523d522 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -40,6 +40,23 @@ const filterOptions = {
 };
 </script>
 <template>
+    <FetchData
+        url="ContactChannels"
+        @on-fetch="(data) => (contactChannels = data)"
+        auto-load
+    />
+    <FetchData
+        url="BusinessTypes"
+        @on-fetch="(data) => (businessTypes = data)"
+        auto-load
+    />
+    <FetchData
+        :filter="filter"
+        @on-fetch="(data) => (clients = data)"
+        auto-load
+        url="Clients"
+    />
+
     <FormModel :url="`Clients/${route.params.id}`" auto-load model="customer">
         <template #form="{ data, validate, filter }">
             <VnRow class="row q-gutter-md q-mb-md">
@@ -113,6 +130,7 @@ const filterOptions = {
                     map-options
                     option-label="name"
                     option-value="id"
+                    option-filter="firstName"
                     use-input
                     v-model="data.salesPersonFk"
                 >
-- 
2.40.1


From 4bcb050384197148f55f664728badf7002660a1e Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 27 May 2024 09:50:52 +0200
Subject: [PATCH 19/50] fix: #7136 CustomerCard:Worker

---
 src/pages/Customer/Card/CustomerCard.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index 1afe19a80..98842a0c7 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -8,6 +8,7 @@ import CustomerFilter from '../CustomerFilter.vue';
         data-key="Client"
         base-url="Clients"
         :descriptor="CustomerDescriptor"
+        :filter-panel="CustomerFilter"
         search-data-key="CustomerList"
         search-url="Clients/filter"
         searchbar-label="Search customer"
-- 
2.40.1


From cfc6bc7d115d5500a500dbef625c584e7f335390 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 27 May 2024 11:51:06 +0200
Subject: [PATCH 20/50] perf: improve VnSelect filter

---
 src/components/common/VnSelect.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 1f03dc0c2..edfd60a6e 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -119,6 +119,8 @@ const arrayData = useURL.value
 onMounted(async () => {
     setOptions(options.value);
     if (useURL.value) {
+        arrayData.store.userFilter = $props.where;
+        arrayData.store.filter.where = $props.where;
         const { data } = await arrayData.fetch({ append: true });
         setOptions(data);
         return;
@@ -180,9 +182,9 @@ async function filterHandler(val, update) {
         myOptionsFiltered.value = [];
     } else newOptions = filter(val, myOptionsOriginal.value);
     if (useURL.value && myOptions.value.length < 1) {
-        // arrayData.store.filter.where = { [optionLabel.value]: val };
+        arrayData.store.skip = 0;
+        arrayData.store.filter.skip = 0;
         arrayData.store.filter.where = { [optionFilter.value]: val };
-        // arrayData.store.filter.where = buildwhere(val);
         const { data } = await arrayData.fetch({ append: false });
         newOptions = data;
         myOptionsFiltered.value = data;
-- 
2.40.1


From ab96586a417acc49b0db97635efa856e8a50762f Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 27 May 2024 11:53:28 +0200
Subject: [PATCH 21/50] feat: apply VnSelect url property for some Customer
 fields

---
 src/components/common/VnSelect.vue            | 23 -----------------
 src/pages/Customer/Card/CustomerBasicData.vue | 25 ++-----------------
 .../Defaulter/CustomerDefaulterFilter.vue     | 24 ++++++------------
 3 files changed, 9 insertions(+), 63 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index edfd60a6e..4259555ae 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -43,10 +43,6 @@ const $props = defineProps({
         type: Boolean,
         default: true,
     },
-    // paginate: {
-    //     type: Boolean,
-    //     default: true,
-    // },
     fields: {
         type: Array,
         default: null,
@@ -59,18 +55,10 @@ const $props = defineProps({
         type: String,
         default: null,
     },
-    // orderBy: {
-    //     type: String,
-    //     default: null,
-    // },
     limit: {
         type: [Number, String],
         default: '30',
     },
-    // fetchRef: {
-    //     type: Object,
-    //     default: null,
-    // },
 });
 
 const { t } = useI18n();
@@ -93,18 +81,8 @@ const value = computed({
 });
 
 function setOptions(data, append = true) {
-    // if (isLoading.value) {
-    //     data.unshift(...myOptions.value);
-    // }
-    // if (arrayData.store) {
-    //     //     arrayData.store.data = data;
-    //     arrayData.store.hasMoreData = data.length === +$props.limit;
-    //     append && myOptions.value.concat(data);
-    //     // myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
-    // } else {
     myOptions.value = JSON.parse(JSON.stringify(data));
     if (append) myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
-    // }
 }
 const useURL = computed(() => $props.url?.length > 0);
 const arrayData = useURL.value
@@ -188,7 +166,6 @@ async function filterHandler(val, update) {
         const { data } = await arrayData.fetch({ append: false });
         newOptions = data;
         myOptionsFiltered.value = data;
-        // setOptions(data, false);
     }
     update(
         () => {
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index 2b523d522..a6df99e30 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -16,28 +16,8 @@ const { getTokenMultimedia } = useSession();
 const token = getTokenMultimedia();
 
 const workers = ref([]);
-const workersCopy = ref([]);
 const businessTypes = ref([]);
 const contactChannels = ref([]);
-
-const filterOptions = {
-    options: workers,
-    filterFn: (options, value) => {
-        const search = value.toLowerCase();
-
-        if (value === '') return workersCopy.value;
-
-        return options.value.filter((row) => {
-            const id = row.id;
-            const name = row.name.toLowerCase();
-
-            const idMatches = id === search;
-            const nameMatches = name.indexOf(search) > -1;
-
-            return idMatches || nameMatches;
-        });
-    },
-};
 </script>
 <template>
     <FetchData
@@ -58,7 +38,7 @@ const filterOptions = {
     />
 
     <FormModel :url="`Clients/${route.params.id}`" auto-load model="customer">
-        <template #form="{ data, validate, filter }">
+        <template #form="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">
                 <VnInput
                     :label="t('Comercial name')"
@@ -124,8 +104,7 @@ const filterOptions = {
                     :options="workers"
                     :rules="validate('client.salesPersonFk')"
                     url="Workers/activeWithInheritedRole"
-                    @filter="(value, update) => filter(value, update, filterOptions)"
-                    :filter="{ where: { role: 'salesPerson' } }"
+                    :where="{ role: 'salesPerson' }"
                     emit-value
                     map-options
                     option-label="name"
diff --git a/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue b/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue
index 9220bd7c0..59d92e6f7 100644
--- a/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue
+++ b/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue
@@ -23,13 +23,6 @@ const authors = ref();
 </script>
 
 <template>
-    <FetchData @on-fetch="(data) => (clients = data)" auto-load url="Clients" />
-    <FetchData
-        :filter="{ where: { role: 'salesPerson' } }"
-        @on-fetch="(data) => (salespersons = data)"
-        auto-load
-        url="Workers/activeWithInheritedRole"
-    />
     <FetchData @on-fetch="(data) => (countries = data)" auto-load url="Countries" />
     <FetchData
         @on-fetch="(data) => (authors = data)"
@@ -47,7 +40,7 @@ const authors = ref();
 
         <template #body="{ params, searchFn }">
             <QItem class="q-mb-sm">
-                <QItemSection v-if="clients">
+                <QItemSection>
                     <VnSelect
                         :label="t('Client')"
                         :options="clients"
@@ -62,17 +55,17 @@ const authors = ref();
                         use-input
                         v-model="params.clientFk"
                         @update:model-value="searchFn()"
-                        auto-load
+                        url="Clients"
                     />
                 </QItemSection>
-                <QItemSection v-else>
-                    <QSkeleton class="full-width" type="QInput" />
-                </QItemSection>
             </QItem>
 
             <QItem class="q-mb-sm">
-                <QItemSection v-if="salespersons">
+                <QItemSection>
                     <VnSelect
+                        :where="{ role: 'salesPerson' }"
+                        option-filter="firstName"
+                        url="Workers/activeWithInheritedRole"
                         :input-debounce="0"
                         :label="t('Salesperson')"
                         :options="salespersons"
@@ -89,9 +82,6 @@ const authors = ref();
                         @update:model-value="searchFn()"
                     />
                 </QItemSection>
-                <QItemSection v-else>
-                    <QSkeleton class="full-width" type="QInput" />
-                </QItemSection>
             </QItem>
 
             <QItem class="q-mb-sm">
@@ -104,7 +94,7 @@ const authors = ref();
                         emit-value
                         hide-selected
                         map-options
-                        option-label="country"
+                        option-label="name"
                         option-value="id"
                         outlined
                         rounded
-- 
2.40.1


From cf67a0dc46cb877f8acfebd773db5bf813bbe18a Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 27 May 2024 15:00:11 +0200
Subject: [PATCH 22/50] test: fix

---
 src/components/common/VnSelect.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 4259555ae..344d2549b 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -149,6 +149,7 @@ function buildwhere(val) {
 async function fetchFilter(val) {
     const { fields, sortBy, limit } = $props;
     const where = buildwhere(val);
+    if (!dataRef.value) return;
     return dataRef.value.fetch({ fields, where, order: sortBy, limit });
 }
 
-- 
2.40.1


From 112f33fb1b55a674eac479fe5187fb3fa0a2eda4 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 28 May 2024 11:38:09 +0200
Subject: [PATCH 23/50] updates

---
 cypress.config.js                                     |  1 +
 src/components/CreateBankEntityForm.vue               |  4 ++--
 src/components/FormModel.vue                          |  4 ++--
 src/components/FormModelPopup.vue                     |  2 +-
 test/cypress/components/CreateBankEntityForm.spec.js  |  8 ++++++++
 test/cypress/components/VnSelect.spec.js              |  8 ++++++++
 .../common/VnTitle.js => components/VnTitle.spec.js}  | 11 +++++------
 vite.config.js                                        |  2 +-
 8 files changed, 28 insertions(+), 12 deletions(-)
 create mode 100644 test/cypress/components/CreateBankEntityForm.spec.js
 create mode 100644 test/cypress/components/VnSelect.spec.js
 rename test/cypress/{integration/common/VnTitle.js => components/VnTitle.spec.js} (56%)

diff --git a/cypress.config.js b/cypress.config.js
index 2388d293a..251b18758 100644
--- a/cypress.config.js
+++ b/cypress.config.js
@@ -22,6 +22,7 @@ module.exports = defineConfig({
     },
 
     component: {
+        specPattern: 'test/cypress/components/*.spec.js',
         devServer: {
             framework: 'vue',
             bundler: 'vite',
diff --git a/src/components/CreateBankEntityForm.vue b/src/components/CreateBankEntityForm.vue
index b2c5226e6..038a8f2df 100644
--- a/src/components/CreateBankEntityForm.vue
+++ b/src/components/CreateBankEntityForm.vue
@@ -4,8 +4,8 @@ import { useI18n } from 'vue-i18n';
 import VnInput from 'src/components/common/VnInput.vue';
 
 import VnSelect from 'src/components/common/VnSelect.vue';
-import FetchData from 'components/FetchData.vue';
-import VnRow from 'components/ui/VnRow.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 import FormModelPopup from './FormModelPopup.vue';
 
 defineProps({ showEntityField: { type: Boolean, default: true } });
diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index 2c2acb61c..b8e97bf36 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -5,10 +5,10 @@ import { onBeforeRouteLeave } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useState } from 'src/composables/useState';
-import { useStateStore } from 'stores/useStateStore';
+import { useStateStore } from 'src/stores/useStateStore';
 import { useValidator } from 'src/composables/useValidator';
 import useNotify from 'src/composables/useNotify.js';
-import SkeletonForm from 'components/ui/SkeletonForm.vue';
+import SkeletonForm from 'src/components/ui/SkeletonForm.vue';
 import VnConfirm from './ui/VnConfirm.vue';
 import { tMobile } from 'src/composables/tMobile';
 
diff --git a/src/components/FormModelPopup.vue b/src/components/FormModelPopup.vue
index 25213a8b7..0ce702ff7 100644
--- a/src/components/FormModelPopup.vue
+++ b/src/components/FormModelPopup.vue
@@ -2,7 +2,7 @@
 import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import FormModel from 'components/FormModel.vue';
+import FormModel from 'src/components/FormModel.vue';
 
 const emit = defineEmits(['onDataSaved']);
 
diff --git a/test/cypress/components/CreateBankEntityForm.spec.js b/test/cypress/components/CreateBankEntityForm.spec.js
new file mode 100644
index 000000000..0248c9546
--- /dev/null
+++ b/test/cypress/components/CreateBankEntityForm.spec.js
@@ -0,0 +1,8 @@
+import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
+
+describe('<CreateBankEntityForm />', () => {
+    it('renders', () => {
+        // see: https://on.cypress.io/mounting-vue
+        cy.mount(CreateBankEntityForm);
+    });
+});
diff --git a/test/cypress/components/VnSelect.spec.js b/test/cypress/components/VnSelect.spec.js
new file mode 100644
index 000000000..ec0eebec9
--- /dev/null
+++ b/test/cypress/components/VnSelect.spec.js
@@ -0,0 +1,8 @@
+import VnSelect from 'src/components/common/VnSelect.vue';
+
+describe('<VnSelect />', () => {
+    it('renders', () => {
+        // see: https://on.cypress.io/mounting-vue
+        cy.mount(VnSelect);
+    });
+});
diff --git a/test/cypress/integration/common/VnTitle.js b/test/cypress/components/VnTitle.spec.js
similarity index 56%
rename from test/cypress/integration/common/VnTitle.js
rename to test/cypress/components/VnTitle.spec.js
index 45a49a698..72154348e 100644
--- a/test/cypress/integration/common/VnTitle.js
+++ b/test/cypress/components/VnTitle.spec.js
@@ -1,14 +1,13 @@
-import VnTitle from '@/components/common/VnTitle.vue';
+import VnTitle from 'src/components/common/VnTitle.vue';
 
 describe('<VnTitle />', () => {
     it('renders', () => {
         // see: https://on.cypress.io/mounting-vue
-        cy.mount(VnTitle,{
-            props:{
-                url:'url',
+        cy.mount(VnTitle, {
+            props: {
+                url: 'url',
                 title: 'title',
-
-            }
+            },
         });
         console.log(VnTitle);
     });
diff --git a/vite.config.js b/vite.config.js
index 69726edd9..be4fba284 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -8,7 +8,7 @@ export default defineConfig({
     plugins: [vue()],
     resolve: {
         alias: {
-            '@': fileURLToPath(new URL('./src', import.meta.url)),
+            src: fileURLToPath(new URL('./src', import.meta.url)),
         },
     },
 });
-- 
2.40.1


From 31d2ad66435d958dbf33fd9c421373af190c9168 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 28 May 2024 13:13:24 +0200
Subject: [PATCH 24/50] fix: #7136 default where value as object

---
 src/components/common/VnSelect.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 344d2549b..ef3e9238c 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -49,7 +49,7 @@ const $props = defineProps({
     },
     where: {
         type: Object,
-        default: null,
+        default: () => {},
     },
     sortBy: {
         type: String,
-- 
2.40.1


From cddaf4daac9fc75fc251416d18333acd6c1077db Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 29 May 2024 12:31:41 +0200
Subject: [PATCH 25/50] perf: remove warnings

---
 src/components/common/VnInputTime.vue           |  1 -
 src/composables/useArrayData.js                 |  2 --
 .../Defaulter/CustomerDefaulterFilter.vue       | 17 ++---------------
 .../Department/Card/DepartmentDescriptor.vue    |  2 --
 src/pages/Route/Card/RouteForm.vue              |  3 ---
 src/pages/Route/RouteTickets.vue                |  3 ---
 src/pages/Worker/Card/WorkerCalendarItem.vue    |  7 -------
 src/pages/Zone/ZoneDeliveryPanel.vue            |  1 -
 8 files changed, 2 insertions(+), 34 deletions(-)

diff --git a/src/components/common/VnInputTime.vue b/src/components/common/VnInputTime.vue
index 0b271dee7..4b436c136 100644
--- a/src/components/common/VnInputTime.vue
+++ b/src/components/common/VnInputTime.vue
@@ -2,7 +2,6 @@
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import isValidDate from 'filters/isValidDate';
-import VnInput from 'components/common/VnInput.vue';
 
 const props = defineProps({
     modelValue: {
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index ce9186b5d..e2465f5ba 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -112,8 +112,6 @@ export function useArrayData(key, userOptions) {
         return response;
     }
 
-    function isHasMoreData() {}
-
     function destroy() {
         if (arrayDataStore.get(key)) {
             arrayDataStore.clear(key);
diff --git a/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue b/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue
index 59d92e6f7..d860ba352 100644
--- a/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue
+++ b/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue
@@ -16,19 +16,11 @@ const props = defineProps({
     },
 });
 
-const clients = ref();
-const salespersons = ref();
 const countries = ref();
-const authors = ref();
 </script>
 
 <template>
     <FetchData @on-fetch="(data) => (countries = data)" auto-load url="Countries" />
-    <FetchData
-        @on-fetch="(data) => (authors = data)"
-        auto-load
-        url="Workers/activeWithInheritedRole"
-    />
 
     <VnFilterPanel :data-key="props.dataKey" :search-button="true">
         <template #tags="{ tag, formatFn }">
@@ -43,7 +35,6 @@ const authors = ref();
                 <QItemSection>
                     <VnSelect
                         :label="t('Client')"
-                        :options="clients"
                         dense
                         emit-value
                         hide-selected
@@ -68,7 +59,6 @@ const authors = ref();
                         url="Workers/activeWithInheritedRole"
                         :input-debounce="0"
                         :label="t('Salesperson')"
-                        :options="salespersons"
                         dense
                         emit-value
                         hide-selected
@@ -131,11 +121,11 @@ const authors = ref();
             </QItem>
 
             <QItem class="q-mb-sm">
-                <QItemSection v-if="authors">
+                <QItemSection>
                     <VnSelect
                         :input-debounce="0"
                         :label="t('Author')"
-                        :options="authors"
+                        url="Workers/activeWithInheritedRole"
                         dense
                         emit-value
                         hide-selected
@@ -149,9 +139,6 @@ const authors = ref();
                         @update:model-value="searchFn()"
                     />
                 </QItemSection>
-                <QItemSection v-else>
-                    <QSkeleton class="full-width" type="QInput" />
-                </QItemSection>
             </QItem>
 
             <QItem class="q-mb-sm">
diff --git a/src/pages/Department/Card/DepartmentDescriptor.vue b/src/pages/Department/Card/DepartmentDescriptor.vue
index 70c578fc2..b49f5f9e2 100644
--- a/src/pages/Department/Card/DepartmentDescriptor.vue
+++ b/src/pages/Department/Card/DepartmentDescriptor.vue
@@ -2,7 +2,6 @@
 import { computed, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { useQuasar } from 'quasar';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
@@ -23,7 +22,6 @@ const $props = defineProps({
     },
 });
 
-const quasar = useQuasar();
 const route = useRoute();
 const router = useRouter();
 
diff --git a/src/pages/Route/Card/RouteForm.vue b/src/pages/Route/Card/RouteForm.vue
index 7c25c6a02..a1bae8b02 100644
--- a/src/pages/Route/Card/RouteForm.vue
+++ b/src/pages/Route/Card/RouteForm.vue
@@ -11,13 +11,10 @@ import VnInputDate from 'components/common/VnInputDate.vue';
 import VnInput from 'components/common/VnInput.vue';
 import axios from 'axios';
 import VnInputTime from 'components/common/VnInputTime.vue';
-import RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue';
-import { useStateStore } from 'stores/useStateStore';
 
 const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
-const stateStore = useStateStore();
 const shelvingId = ref(route.params?.id || null);
 const isNew = Boolean(!shelvingId.value);
 const defaultInitialData = {
diff --git a/src/pages/Route/RouteTickets.vue b/src/pages/Route/RouteTickets.vue
index 0efcd6e0c..ba3e855d6 100644
--- a/src/pages/Route/RouteTickets.vue
+++ b/src/pages/Route/RouteTickets.vue
@@ -15,14 +15,11 @@ import VnConfirm from 'components/ui/VnConfirm.vue';
 import FetchData from 'components/FetchData.vue';
 import { openBuscaman } from 'src/utils/buscaman';
 import SendSmsDialog from 'components/common/SendSmsDialog.vue';
-import RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue';
-import { useStateStore } from 'stores/useStateStore';
 
 const { t } = useI18n();
 const quasar = useQuasar();
 const route = useRoute();
 
-const stateStore = useStateStore();
 const selectedRows = ref([]);
 const columns = computed(() => [
     {
diff --git a/src/pages/Worker/Card/WorkerCalendarItem.vue b/src/pages/Worker/Card/WorkerCalendarItem.vue
index c48c083b9..91e118708 100644
--- a/src/pages/Worker/Card/WorkerCalendarItem.vue
+++ b/src/pages/Worker/Card/WorkerCalendarItem.vue
@@ -136,13 +136,6 @@ const getEventByTimestamp = ({ year, month, day }) => {
     return props.events[stamp] || null;
 };
 
-const isFestive = (timestamp) => {
-    const event = getEventByTimestamp(timestamp);
-    if (!event) return false;
-
-    const { isFestive } = event;
-    return isFestive;
-};
 const getEventAttrs = (timestamp) => {
     const event = getEventByTimestamp(timestamp);
     if (!event) return {};
diff --git a/src/pages/Zone/ZoneDeliveryPanel.vue b/src/pages/Zone/ZoneDeliveryPanel.vue
index c754d484f..03f534701 100644
--- a/src/pages/Zone/ZoneDeliveryPanel.vue
+++ b/src/pages/Zone/ZoneDeliveryPanel.vue
@@ -2,7 +2,6 @@
 import { onMounted, ref, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import FetchData from 'components/FetchData.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 
 import { useArrayData } from 'src/composables/useArrayData';
-- 
2.40.1


From 117c2e90db029798f888864a8110e0af2c0c4f59 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 7 Jun 2024 12:59:34 +0200
Subject: [PATCH 26/50] comments

---
 src/components/common/VnSelect.vue | 28 +++++++++++-----------------
 1 file changed, 11 insertions(+), 17 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 3b93fcca4..c855ed6c5 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -66,7 +66,7 @@ const requiredFieldRule = (val) => val ?? t('globals.fieldRequired');
 
 const { optionLabel, optionValue, optionFilter, options, modelValue } = toRefs($props);
 const myOptions = ref([]);
-const myOptionsFiltered = ref([]);
+// const myOptionsFiltered = ref([]);
 const myOptionsOriginal = ref([]);
 const vnSelectRef = ref();
 const dataRef = ref();
@@ -76,6 +76,7 @@ const selectValue = computed({
         return $props.modelValue;
     },
     set(value) {
+        arrayData.store.page.value = 0;
         emit('update:modelValue', value);
     },
 });
@@ -103,8 +104,7 @@ onMounted(async () => {
         setOptions(data);
         return;
     }
-    if ($props.options) setOptions($props.options);
-    else fetchFilter($props.modelValue);
+    if (!$props.options) fetchFilter($props.modelValue);
 });
 
 watch(modelValue, (newValue) => {
@@ -136,37 +136,31 @@ function filter(val, options) {
     return optionsFiltered;
 }
 
-function buildwhere(val) {
+async function fetchFilter(val) {
     if (!useURL.value || !dataRef.value) return;
 
-    let key = optionLabel.value;
-
+    const { fields, sortBy, limit } = $props;
+    let key = null;
     if (new RegExp(/\d/g).test(val)) key = optionFilter.value ?? optionValue.value;
 
     const where = { ...{ [key]: { like: `%${val}%` } }, ...$props.where };
-    return where;
-}
-async function fetchFilter(val) {
-    const { fields, sortBy, limit } = $props;
-    const where = buildwhere(val);
-    if (!dataRef.value) return;
     return dataRef.value.fetch({ fields, where, order: sortBy, limit });
 }
 
 async function filterHandler(val, update) {
     if (!$props.defaultFilter) return update();
     let newOptions = [];
-    if (myOptionsFiltered.value.length > 0) {
-        newOptions = filter(val, myOptionsFiltered.value);
-        myOptionsFiltered.value = [];
+    if (myOptions.value.length > 0) {
+        newOptions = filter(val, myOptions.value);
+        myOptions.value = [];
     } else newOptions = filter(val, myOptionsOriginal.value);
     if (useURL.value && myOptions.value.length < 1) {
         arrayData.store.skip = 0;
         arrayData.store.filter.skip = 0;
-        arrayData.store.filter.where = { [optionFilter.value]: val };
+        arrayData.store.filter.where = { [optionFilter.value]: val, ...$props.where };
         const { data } = await arrayData.fetch({ append: false });
         newOptions = data;
-        myOptionsFiltered.value = data;
+        myOptions.value = data;
     }
     update(
         () => {
-- 
2.40.1


From 464cf47a399d2725cd2ebefb5eafeafe30299243 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 7 Jun 2024 14:58:33 +0200
Subject: [PATCH 27/50] useFetchData composable

---
 src/components/FetchData.vue       |  3 ++-
 src/components/common/VnSelect.vue | 31 +++++++++++++++++++++++++-----
 src/composables/useFetchData.js    | 30 +++++++++++++++++++++++++++++
 3 files changed, 58 insertions(+), 6 deletions(-)
 create mode 100644 src/composables/useFetchData.js

diff --git a/src/components/FetchData.vue b/src/components/FetchData.vue
index 2a0864d3e..cb5aed894 100644
--- a/src/components/FetchData.vue
+++ b/src/components/FetchData.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { onMounted } from 'vue';
 import axios from 'axios';
+import { useFetchData } from 'src/composables/useFetchData';
 
 const $props = defineProps({
     autoLoad: {
@@ -38,7 +39,7 @@ defineExpose({ fetch });
 
 onMounted(async () => {
     if ($props.autoLoad) {
-        await fetch();
+        await useFetchData(...$props).fetch();
     }
 });
 
diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index c855ed6c5..2ca001d8c 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -1,10 +1,11 @@
 <script setup>
-import { ref, toRefs, computed, watch } from 'vue';
+import { ref, toRefs, computed, watch, h } from 'vue';
 import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FetchData from 'src/components/FetchData.vue';
 const emit = defineEmits(['update:modelValue', 'update:options']);
 import { useArrayData } from 'src/composables/useArrayData';
+import { useFetchData } from 'src/composables/useFetchData';
 
 const $props = defineProps({
     modelValue: {
@@ -66,11 +67,29 @@ const requiredFieldRule = (val) => val ?? t('globals.fieldRequired');
 
 const { optionLabel, optionValue, optionFilter, options, modelValue } = toRefs($props);
 const myOptions = ref([]);
-// const myOptionsFiltered = ref([]);
 const myOptionsOriginal = ref([]);
 const vnSelectRef = ref();
-const dataRef = ref();
-
+const dataRef = ref(
+    useFetchData({
+        url: $props.url,
+        where: $props.where,
+        limit: $props.limit,
+        sortBy: $props.sortBy,
+        fields: $props.fields,
+    })
+);
+// const fetchDataComponent = ref(null);
+// fetchDataComponent.value = h(FetchData, {
+//     url: $props.url,
+//     where: $props.where,
+//     limit: $props.limit,
+//     sortBy: $props.sortBy,
+//     fields: $props.fields,
+//     onFetch: (data) => {
+//         setOptions(data); // Tu función para manejar los datos
+//     },
+// });
+//   const dataRef = ref(null);
 const selectValue = computed({
     get() {
         return $props.modelValue;
@@ -193,6 +212,8 @@ async function onScroll(scrollEv) {
 </script>
 
 <template>
+    <!-- <component :is="fetchDataComponent" ref="fetchDataRef" />
+
     <FetchData
         v-if="useURL"
         ref="dataRef"
@@ -202,7 +223,7 @@ async function onScroll(scrollEv) {
         :limit="limit"
         :sort-by="sortBy"
         :fields="fields"
-    />
+    /> -->
     <QSelect
         :loading="isLoading"
         @virtual-scroll="onScroll"
diff --git a/src/composables/useFetchData.js b/src/composables/useFetchData.js
new file mode 100644
index 000000000..a4ccb3734
--- /dev/null
+++ b/src/composables/useFetchData.js
@@ -0,0 +1,30 @@
+import { ref } from 'vue';
+import axios from 'axios';
+
+export function useFetchData(props) {
+    const data = ref(null);
+
+    async function fetch(fetchFilter = {}) {
+        try {
+            const filter = Object.assign(fetchFilter, props.filter);
+            if (props.where && !fetchFilter.where) filter.where = props.where;
+            if (props.sortBy) filter.order = props.sortBy;
+            if (props.limit) filter.limit = props.limit;
+
+            const response = await axios.get(props.url, {
+                params: { filter: JSON.stringify(filter), ...props.params },
+            });
+
+            data.value = response.data;
+            return response.data;
+        } catch (e) {
+            // Manejo de errores
+            console.error(e);
+        }
+    }
+
+    return {
+        data,
+        fetch,
+    };
+}
-- 
2.40.1


From a23eb0a5ad06dd578a48496908c102c5e45ae912 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 7 Jun 2024 23:08:15 +0200
Subject: [PATCH 28/50] approach

---
 src/components/FetchData.vue       |  4 ++--
 src/components/common/VnSelect.vue | 17 ++---------------
 src/composables/useAxios.js        | 21 +++++++++++++++++++++
 3 files changed, 25 insertions(+), 17 deletions(-)
 create mode 100644 src/composables/useAxios.js

diff --git a/src/components/FetchData.vue b/src/components/FetchData.vue
index cb5aed894..cc87af653 100644
--- a/src/components/FetchData.vue
+++ b/src/components/FetchData.vue
@@ -36,10 +36,10 @@ const $props = defineProps({
 
 const emit = defineEmits(['onFetch']);
 defineExpose({ fetch });
-
+const fetchData = useFetchData({ ...$props });
 onMounted(async () => {
     if ($props.autoLoad) {
-        await useFetchData(...$props).fetch();
+        await fetchData.fetch();
     }
 });
 
diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 2ca001d8c..86b9f1a26 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -2,7 +2,6 @@
 import { ref, toRefs, computed, watch, h } from 'vue';
 import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import FetchData from 'src/components/FetchData.vue';
 const emit = defineEmits(['update:modelValue', 'update:options']);
 import { useArrayData } from 'src/composables/useArrayData';
 import { useFetchData } from 'src/composables/useFetchData';
@@ -78,18 +77,6 @@ const dataRef = ref(
         fields: $props.fields,
     })
 );
-// const fetchDataComponent = ref(null);
-// fetchDataComponent.value = h(FetchData, {
-//     url: $props.url,
-//     where: $props.where,
-//     limit: $props.limit,
-//     sortBy: $props.sortBy,
-//     fields: $props.fields,
-//     onFetch: (data) => {
-//         setOptions(data); // Tu función para manejar los datos
-//     },
-// });
-//   const dataRef = ref(null);
 const selectValue = computed({
     get() {
         return $props.modelValue;
@@ -108,10 +95,10 @@ const useURL = computed(() => $props.url?.length > 0);
 const arrayData = useURL.value
     ? useArrayData($props.url, {
           url: $props.url,
-          fields: $props.fields,
           where: $props.where,
-          sortBy: $props.sortBy,
           limit: $props.limit,
+          sortBy: $props.sortBy,
+          fields: $props.fields,
       })
     : ref(null);
 onMounted(async () => {
diff --git a/src/composables/useAxios.js b/src/composables/useAxios.js
new file mode 100644
index 000000000..ebe969473
--- /dev/null
+++ b/src/composables/useAxios.js
@@ -0,0 +1,21 @@
+import axios from 'axios';
+
+export function useAxios() {
+    const fetch = async (url, filter, params) => {
+        axios.get(url, { params: { ...params, ...filter } });
+    };
+
+    const push = async (url, method = 'PUT', filter, params) => {
+        axios({ url, method, params: { ...params, ...filter } });
+    };
+
+    const pop = async (url, filter, params) => {
+        axios.delete(url, { params: { ...params, ...filter } });
+    };
+
+    return {
+        fetch,
+        push,
+        pop,
+    };
+}
-- 
2.40.1


From 693e689f5e94d27df3effc61d105b8cb7d0f0cbd Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 10 Jun 2024 12:09:43 +0200
Subject: [PATCH 29/50] perf: #7136 update composables

---
 src/components/common/VnSelect.vue |  4 ++--
 src/composables/useArrayData.js    |  8 +++-----
 src/composables/useAxios.js        | 32 +++++++++++++++++++++---------
 src/composables/useFetchData.js    |  8 ++++----
 src/stores/useArrayDataStore.js    |  1 +
 5 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 86b9f1a26..c7c694ca1 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -82,7 +82,7 @@ const selectValue = computed({
         return $props.modelValue;
     },
     set(value) {
-        arrayData.store.page.value = 0;
+        arrayData.store.page = 0;
         emit('update:modelValue', value);
     },
 });
@@ -156,7 +156,7 @@ async function fetchFilter(val) {
 async function filterHandler(val, update) {
     if (!$props.defaultFilter) return update();
     let newOptions = [];
-    if (myOptions.value.length > 0) {
+    if (myOptions.value.length > 0 && !useURL.value) {
         newOptions = filter(val, myOptions.value);
         myOptions.value = [];
     } else newOptions = filter(val, myOptionsOriginal.value);
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index d9bcb4904..bf0a61a90 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -15,8 +15,6 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
     const route = useRoute();
     let canceller = null;
 
-    const page = ref(1);
-
     onMounted(() => {
         setOptions();
         store.skip = 0;
@@ -143,7 +141,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         store.userParams = userParams;
         store.skip = 0;
         store.filter.skip = 0;
-        page.value = 1;
+        store.page = 1;
 
         await fetch({ append: false });
         return { filter, params };
@@ -171,8 +169,8 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
     async function loadMore() {
         if (!store.hasMoreData) return;
 
-        store.skip = store.limit * page.value;
-        page.value += 1;
+        store.skip = store.limit * store.page;
+        store.page += 1;
 
         await fetch({ append: true });
     }
diff --git a/src/composables/useAxios.js b/src/composables/useAxios.js
index ebe969473..1595e453f 100644
--- a/src/composables/useAxios.js
+++ b/src/composables/useAxios.js
@@ -1,17 +1,31 @@
 import axios from 'axios';
 
-export function useAxios() {
-    const fetch = async (url, filter, params) => {
-        axios.get(url, { params: { ...params, ...filter } });
+export function useAxios(props, url) {
+    if (!url) url = props.url;
+    const handleFilter = (filter) => {
+        filter = Object.assign(filter, props.filter);
+        if (props.where && !filter.where) filter.where = props.where;
+        if (props.sortBy) filter.order = props.sortBy;
+        if (props.limit) filter.limit = props.limit;
+        return JSON.stringify(filter);
     };
+    const fetch = async (filter) =>
+        (
+            await axios.get(url, {
+                params: { filter: handleFilter(filter), ...props.params },
+            })
+        ).data;
 
-    const push = async (url, method = 'PUT', filter, params) => {
-        axios({ url, method, params: { ...params, ...filter } });
-    };
+    const push = async (method = 'PUT', filter, data) =>
+        axios({
+            url,
+            method,
+            data,
+            params: { filter: handleFilter(filter), ...props.params },
+        });
 
-    const pop = async (url, filter, params) => {
-        axios.delete(url, { params: { ...params, ...filter } });
-    };
+    const pop = async (filter) =>
+        axios.delete(url, { params: { filter: handleFilter(filter), ...props.params } });
 
     return {
         fetch,
diff --git a/src/composables/useFetchData.js b/src/composables/useFetchData.js
index a4ccb3734..ea8c24842 100644
--- a/src/composables/useFetchData.js
+++ b/src/composables/useFetchData.js
@@ -1,8 +1,8 @@
-import { ref } from 'vue';
+// import { ref } from 'vue';
 import axios from 'axios';
 
 export function useFetchData(props) {
-    const data = ref(null);
+    // const data = ref(null);
 
     async function fetch(fetchFilter = {}) {
         try {
@@ -15,7 +15,7 @@ export function useFetchData(props) {
                 params: { filter: JSON.stringify(filter), ...props.params },
             });
 
-            data.value = response.data;
+            // data.value = response.data;
             return response.data;
         } catch (e) {
             // Manejo de errores
@@ -24,7 +24,7 @@ export function useFetchData(props) {
     }
 
     return {
-        data,
+        // data,
         fetch,
     };
 }
diff --git a/src/stores/useArrayDataStore.js b/src/stores/useArrayDataStore.js
index 115c161dd..f04272777 100644
--- a/src/stores/useArrayDataStore.js
+++ b/src/stores/useArrayDataStore.js
@@ -18,6 +18,7 @@ export const useArrayDataStore = defineStore('arrayDataStore', () => {
             skip: 0,
             order: '',
             data: ref(),
+            page: ref(1),
             isLoading: false,
             userParamsChanged: false,
             exprBuilder: null,
-- 
2.40.1


From 7292dca197c39bbc340710903cd34d87fa294631 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 10 Jun 2024 12:10:14 +0200
Subject: [PATCH 30/50] feat: remove fetchData to nativeCmp

---
 src/components/FetchData.vue           |  4 ++--
 src/pages/Worker/Card/WorkerLocker.vue | 14 ++++----------
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/components/FetchData.vue b/src/components/FetchData.vue
index cc87af653..7c754e13a 100644
--- a/src/components/FetchData.vue
+++ b/src/components/FetchData.vue
@@ -36,10 +36,10 @@ const $props = defineProps({
 
 const emit = defineEmits(['onFetch']);
 defineExpose({ fetch });
-const fetchData = useFetchData({ ...$props });
+// const fetchData = useFetchData({ ...$props });
 onMounted(async () => {
     if ($props.autoLoad) {
-        await fetchData.fetch();
+        await fetch();
     }
 });
 
diff --git a/src/pages/Worker/Card/WorkerLocker.vue b/src/pages/Worker/Card/WorkerLocker.vue
index f19fc8ae6..6e9cfba38 100644
--- a/src/pages/Worker/Card/WorkerLocker.vue
+++ b/src/pages/Worker/Card/WorkerLocker.vue
@@ -7,11 +7,10 @@ import { useRole } from 'src/composables/useRole';
 import FormModel from 'components/FormModel.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import { useArrayData } from 'src/composables/useArrayData';
-import FetchData from 'components/FetchData.vue';
+import { useAxios } from 'src/composables/useAxios';
 
 const { hasAny } = useRole();
 const { t } = useI18n();
-const fetchData = ref();
 const originaLockerId = ref();
 const lockers = ref([]);
 const { store } = useArrayData('Worker');
@@ -27,21 +26,14 @@ const save = async (data) => {
     const lockerId = data.id ?? originaLockerId.value;
     const workerFk = lockerId == originaLockerId.value ? null : entityId.value;
 
-    return axios.patch(`Lockers/${lockerId}`, { workerFk });
+    return useAxios(`Lockers/${lockerId}`).push('PATCH', { workerFk });
 };
 
 const init = async (data) => {
-    await fetchData.value.fetch();
     originaLockerId.value = data.id;
 };
 </script>
 <template>
-    <FetchData
-        ref="fetchData"
-        url="Lockers/codes"
-        :filter="filter"
-        @on-fetch="(data) => (lockers = data)"
-    />
     <FormModel
         :url="`Workers/${entityId}/locker`"
         model="worker"
@@ -51,6 +43,8 @@ const init = async (data) => {
     >
         <template #form="{ data }">
             <VnSelect
+                url="Lockers/codes"
+                :filter="filter"
                 :label="t('Locker')"
                 v-model="data.id"
                 :options="lockers"
-- 
2.40.1


From e775d922e85a77bd161e17c58869467ac57f737d Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 18 Jun 2024 10:48:34 +0200
Subject: [PATCH 31/50] perf: cleancode

---
 src/components/common/VnSelect.vue | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index c7c694ca1..c12d81a89 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -103,14 +103,13 @@ const arrayData = useURL.value
     : ref(null);
 onMounted(async () => {
     setOptions(options.value);
+    if (!$props.options) fetchFilter($props.modelValue);
     if (useURL.value) {
         arrayData.store.userFilter = $props.where;
         arrayData.store.filter.where = $props.where;
         const { data } = await arrayData.fetch({ append: true });
         setOptions(data);
-        return;
     }
-    if (!$props.options) fetchFilter($props.modelValue);
 });
 
 watch(modelValue, (newValue) => {
@@ -125,7 +124,7 @@ function filter(val, options) {
 
     if (!search) return options;
 
-    const optionsFiltered = options.filter((row) => {
+    return options.filter((row) => {
         if ($props.filterOptions.length) {
             return $props.filterOptions.some((prop) => {
                 const propValue = String(row[prop]).toLowerCase();
@@ -138,16 +137,15 @@ function filter(val, options) {
 
         return id == search || optionLabel.includes(search);
     });
-
-    return optionsFiltered;
 }
 
 async function fetchFilter(val) {
     if (!useURL.value || !dataRef.value) return;
 
     const { fields, sortBy, limit } = $props;
-    let key = null;
-    if (new RegExp(/\d/g).test(val)) key = optionFilter.value ?? optionValue.value;
+    let key = new RegExp(/\d/g).test(val)
+        ? optionFilter.value ?? optionValue.value
+        : optionValue.value;
 
     const where = { ...{ [key]: { like: `%${val}%` } }, ...$props.where };
     return dataRef.value.fetch({ fields, where, order: sortBy, limit });
-- 
2.40.1


From 817fcc44857abbc47f4166821ca6d0bf1097efb6 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 18 Jun 2024 12:59:47 +0200
Subject: [PATCH 32/50] feat: useArrayData

---
 src/components/common/VnSelect.vue | 48 ++++++++++--------------------
 1 file changed, 16 insertions(+), 32 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index c12d81a89..64f14c6ac 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -68,15 +68,7 @@ const { optionLabel, optionValue, optionFilter, options, modelValue } = toRefs($
 const myOptions = ref([]);
 const myOptionsOriginal = ref([]);
 const vnSelectRef = ref();
-const dataRef = ref(
-    useFetchData({
-        url: $props.url,
-        where: $props.where,
-        limit: $props.limit,
-        sortBy: $props.sortBy,
-        fields: $props.fields,
-    })
-);
+
 const selectValue = computed({
     get() {
         return $props.modelValue;
@@ -92,15 +84,19 @@ function setOptions(data, append = true) {
     if (append) myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
 }
 const useURL = computed(() => $props.url?.length > 0);
-const arrayData = useURL.value
-    ? useArrayData($props.url, {
-          url: $props.url,
-          where: $props.where,
-          limit: $props.limit,
-          sortBy: $props.sortBy,
-          fields: $props.fields,
-      })
-    : ref(null);
+import { useAttrs } from 'vue';
+
+const $attrs = useAttrs();
+const arrayDataKey = $props.url !== '' ? $props.url : $attrs.label;
+const arrayDataOptions =
+    {
+        url: $props.url,
+        where: $props.where,
+        limit: $props.limit,
+        sortBy: $props.sortBy,
+        fields: $props.fields,
+    } ?? {};
+const arrayData = useArrayData(arrayDataKey, arrayDataOptions);
 onMounted(async () => {
     setOptions(options.value);
     if (!$props.options) fetchFilter($props.modelValue);
@@ -140,7 +136,7 @@ function filter(val, options) {
 }
 
 async function fetchFilter(val) {
-    if (!useURL.value || !dataRef.value) return;
+    if (!useURL.value) return;
 
     const { fields, sortBy, limit } = $props;
     let key = new RegExp(/\d/g).test(val)
@@ -148,7 +144,7 @@ async function fetchFilter(val) {
         : optionValue.value;
 
     const where = { ...{ [key]: { like: `%${val}%` } }, ...$props.where };
-    return dataRef.value.fetch({ fields, where, order: sortBy, limit });
+    return arrayData.value.fetch({ fields, where, order: sortBy, limit });
 }
 
 async function filterHandler(val, update) {
@@ -197,18 +193,6 @@ async function onScroll(scrollEv) {
 </script>
 
 <template>
-    <!-- <component :is="fetchDataComponent" ref="fetchDataRef" />
-
-    <FetchData
-        v-if="useURL"
-        ref="dataRef"
-        :url="$props.url"
-        @on-fetch="(data) => setOptions(data)"
-        :where="where || { [optionValue]: value }"
-        :limit="limit"
-        :sort-by="sortBy"
-        :fields="fields"
-    /> -->
     <QSelect
         :loading="isLoading"
         @virtual-scroll="onScroll"
-- 
2.40.1


From 610aacb01047654f1b78568567792d87c4897e59 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 26 Jun 2024 11:42:20 +0200
Subject: [PATCH 33/50] updates

---
 src/components/FetchData.vue                  |  2 -
 src/components/common/VnSelect.vue            | 22 +++----
 src/composables/useFetchData.js               | 30 ---------
 .../Defaulter/CustomerDefaulterFilter.vue     | 66 ++++---------------
 4 files changed, 23 insertions(+), 97 deletions(-)
 delete mode 100644 src/composables/useFetchData.js

diff --git a/src/components/FetchData.vue b/src/components/FetchData.vue
index 7c754e13a..28e841abf 100644
--- a/src/components/FetchData.vue
+++ b/src/components/FetchData.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { onMounted } from 'vue';
 import axios from 'axios';
-import { useFetchData } from 'src/composables/useFetchData';
 
 const $props = defineProps({
     autoLoad: {
@@ -36,7 +35,6 @@ const $props = defineProps({
 
 const emit = defineEmits(['onFetch']);
 defineExpose({ fetch });
-// const fetchData = useFetchData({ ...$props });
 onMounted(async () => {
     if ($props.autoLoad) {
         await fetch();
diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index d1a31a38c..b9e6c6070 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -1,9 +1,8 @@
 <script setup>
-import { ref, toRefs, computed, watch, h, onMounted } from 'vue';
+import { ref, toRefs, computed, watch, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 const emit = defineEmits(['update:modelValue', 'update:options']);
 import { useArrayData } from 'src/composables/useArrayData';
-import { useFetchData } from 'src/composables/useFetchData';
 
 const $props = defineProps({
     modelValue: {
@@ -86,19 +85,18 @@ function setOptions(data, append = true) {
     myOptions.value = JSON.parse(JSON.stringify(data));
     if (append) myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
 }
-const useURL = computed(() => $props.url?.length > 0);
+const useURL = computed(() => $props.url);
 import { useAttrs } from 'vue';
 
 const $attrs = useAttrs();
 const arrayDataKey = $props.url !== '' ? $props.url : $attrs.label;
-const arrayDataOptions =
-    {
-        url: $props.url,
-        where: $props.where,
-        limit: $props.limit,
-        sortBy: $props.sortBy,
-        fields: $props.fields,
-    } ?? {};
+const arrayDataOptions = {
+    url: $props.url,
+    where: $props.where,
+    limit: $props.limit,
+    sortBy: $props.sortBy,
+    fields: $props.fields,
+};
 const arrayData = useArrayData(arrayDataKey, arrayDataOptions);
 onMounted(async () => {
     setOptions(options.value);
@@ -106,7 +104,7 @@ onMounted(async () => {
     if (useURL.value) {
         arrayData.store.userFilter = $props.where;
         arrayData.store.filter.where = $props.where;
-        const { data } = await arrayData.fetch({ append: true });
+        const { data } = await arrayData.fetch({ append: true, updateRouter: false });
         setOptions(data);
     }
 });
diff --git a/src/composables/useFetchData.js b/src/composables/useFetchData.js
deleted file mode 100644
index ea8c24842..000000000
--- a/src/composables/useFetchData.js
+++ /dev/null
@@ -1,30 +0,0 @@
-// import { ref } from 'vue';
-import axios from 'axios';
-
-export function useFetchData(props) {
-    // const data = ref(null);
-
-    async function fetch(fetchFilter = {}) {
-        try {
-            const filter = Object.assign(fetchFilter, props.filter);
-            if (props.where && !fetchFilter.where) filter.where = props.where;
-            if (props.sortBy) filter.order = props.sortBy;
-            if (props.limit) filter.limit = props.limit;
-
-            const response = await axios.get(props.url, {
-                params: { filter: JSON.stringify(filter), ...props.params },
-            });
-
-            // data.value = response.data;
-            return response.data;
-        } catch (e) {
-            // Manejo de errores
-            console.error(e);
-        }
-    }
-
-    return {
-        // data,
-        fetch,
-    };
-}
diff --git a/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue b/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue
index 05924452c..e73e6643a 100644
--- a/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue
+++ b/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue
@@ -1,7 +1,7 @@
 <script setup>
-import { ref } from 'vue';
+// import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import FetchData from 'components/FetchData.vue';
+// import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
@@ -15,26 +15,15 @@ const props = defineProps({
     },
 });
 
-const salespersons = ref();
-const countries = ref();
-const authors = ref();
-const departments = ref();
+// const salespersons = ref();
+// const countries = ref();
+// const authors = ref();
+// const departments = ref();
 </script>
 
 <template>
-    <FetchData
-        :filter="{ where: { role: 'salesPerson' } }"
-        @on-fetch="(data) => (salespersons = data)"
-        auto-load
-        url="Workers/activeWithInheritedRole"
-    />
-    <FetchData @on-fetch="(data) => (countries = data)" auto-load url="Countries" />
-    <FetchData
-        @on-fetch="(data) => (authors = data)"
-        auto-load
-        url="Workers/activeWithInheritedRole"
-    />
-    <FetchData @on-fetch="(data) => (departments = data)" auto-load url="Departments" />
+    <!-- <FetchData @on-fetch="(data) => (countries = data)" auto-load url="Countries" /> -->
+    <!-- <FetchData @on-fetch="(data) => (departments = data)" auto-load /> -->
 
     <VnFilterPanel :data-key="props.dataKey" :search-button="true">
         <template #tags="{ tag, formatFn }">
@@ -64,6 +53,7 @@ const departments = ref();
                     />
                 </QItemSection>
             </QItem>
+
             <QItem class="q-mb-sm">
                 <QItemSection>
                     <VnSelect
@@ -87,11 +77,11 @@ const departments = ref();
                 </QItemSection>
             </QItem>
             <QItem class="q-mb-sm">
-                <QItemSection v-if="departments">
+                <QItemSection>
                     <VnSelect
                         :input-debounce="0"
                         :label="t('Departments')"
-                        :options="departments"
+                        url="Departments"
                         dense
                         emit-value
                         hide-selected
@@ -105,40 +95,13 @@ const departments = ref();
                         @update:model-value="searchFn()"
                     />
                 </QItemSection>
-                <QItemSection v-else>
-                    <QSkeleton class="full-width" type="QInput" />
-                </QItemSection>
             </QItem>
             <QItem class="q-mb-sm">
-                <QItemSection v-if="departments">
-                    <VnSelect
-                        :input-debounce="0"
-                        :label="t('Departments')"
-                        :options="departments"
-                        dense
-                        emit-value
-                        hide-selected
-                        map-options
-                        option-label="name"
-                        option-value="id"
-                        outlined
-                        rounded
-                        use-input
-                        v-model="params.departmentFk"
-                        @update:model-value="searchFn()"
-                    />
-                </QItemSection>
-                <QItemSection v-else>
-                    <QSkeleton class="full-width" type="QInput" />
-                </QItemSection>
-            </QItem>
-
-            <QItem class="q-mb-sm">
-                <QItemSection v-if="countries">
+                <QItemSection>
                     <VnSelect
                         :input-debounce="0"
                         :label="t('Country')"
-                        :options="countries"
+                        url="Countries"
                         dense
                         emit-value
                         hide-selected
@@ -152,9 +115,6 @@ const departments = ref();
                         @update:model-value="searchFn()"
                     />
                 </QItemSection>
-                <QItemSection v-else>
-                    <QSkeleton class="full-width" type="QInput" />
-                </QItemSection>
             </QItem>
 
             <QItem class="q-mb-sm">
-- 
2.40.1


From 94e626a46092ff4be0a190d046c91326a779e9fb Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 26 Jun 2024 13:20:09 +0200
Subject: [PATCH 34/50] feat: use dataKey prop when same url

---
 src/components/common/VnSelect.vue                       | 6 +++++-
 src/pages/Customer/Card/CustomerBasicData.vue            | 4 ++--
 src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue | 6 ++++--
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index b9e6c6070..976e949c8 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -21,6 +21,10 @@ const $props = defineProps({
         type: String,
         default: 'id',
     },
+    dataKey: {
+        type: String,
+        default: null,
+    },
     optionFilter: {
         type: String,
         default: null,
@@ -89,7 +93,7 @@ const useURL = computed(() => $props.url);
 import { useAttrs } from 'vue';
 
 const $attrs = useAttrs();
-const arrayDataKey = $props.url !== '' ? $props.url : $attrs.label;
+const arrayDataKey = $props.dataKey ?? ($props.url !== '' ? $props.url : $attrs.label);
 const arrayDataOptions = {
     url: $props.url,
     where: $props.where,
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index 9f0b260a6..46aab204c 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -13,7 +13,6 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 const route = useRoute();
 const { t } = useI18n();
 
-const workers = ref([]);
 const businessTypes = ref([]);
 const contactChannels = ref([]);
 </script>
@@ -99,10 +98,11 @@ const contactChannels = ref([]);
                 <VnSelect
                     :input-debounce="0"
                     :label="t('customer.basicData.salesPerson')"
-                    :options="workers"
                     :rules="validate('client.salesPersonFk')"
                     url="Workers/activeWithInheritedRole"
+                    hide-selected
                     :where="{ role: 'salesPerson' }"
+                    dense
                     emit-value
                     map-options
                     option-label="name"
diff --git a/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue b/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue
index e73e6643a..cbc4a1ea1 100644
--- a/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue
+++ b/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue
@@ -57,8 +57,7 @@ const props = defineProps({
             <QItem class="q-mb-sm">
                 <QItemSection>
                     <VnSelect
-                        :where="{ role: 'salesPerson' }"
-                        option-filter="firstName"
+                        data-key="salesperson"
                         url="Workers/activeWithInheritedRole"
                         :input-debounce="0"
                         :label="t('Salesperson')"
@@ -68,6 +67,8 @@ const props = defineProps({
                         map-options
                         option-label="name"
                         option-value="id"
+                        :where="{ role: 'salesPerson' }"
+                        option-filter="firstName"
                         outlined
                         rounded
                         use-input
@@ -142,6 +143,7 @@ const props = defineProps({
             <QItem class="q-mb-sm">
                 <QItemSection>
                     <VnSelect
+                        data-key="author"
                         :input-debounce="0"
                         :label="t('Author')"
                         url="Workers/activeWithInheritedRole"
-- 
2.40.1


From 9057215ce59df362c4c9b18f2e72bf01946af302 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 27 Jun 2024 09:59:57 +0200
Subject: [PATCH 35/50] updates

---
 src/components/common/VnSelect.vue            | 64 ++++++++++++-------
 src/pages/Customer/Card/CustomerBasicData.vue |  3 +-
 2 files changed, 43 insertions(+), 24 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 976e949c8..2abac6f44 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -3,6 +3,7 @@ import { ref, toRefs, computed, watch, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 const emit = defineEmits(['update:modelValue', 'update:options']);
 import { useArrayData } from 'src/composables/useArrayData';
+import { useAttrs } from 'vue';
 
 const $props = defineProps({
     modelValue: {
@@ -75,6 +76,8 @@ const myOptions = ref([]);
 const myOptionsOriginal = ref([]);
 const vnSelectRef = ref();
 
+const isLoading = ref(false);
+
 const selectValue = computed({
     get() {
         return $props.modelValue;
@@ -85,12 +88,7 @@ const selectValue = computed({
     },
 });
 
-function setOptions(data, append = true) {
-    myOptions.value = JSON.parse(JSON.stringify(data));
-    if (append) myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
-}
 const useURL = computed(() => $props.url);
-import { useAttrs } from 'vue';
 
 const $attrs = useAttrs();
 const arrayDataKey = $props.dataKey ?? ($props.url !== '' ? $props.url : $attrs.label);
@@ -101,25 +99,33 @@ const arrayDataOptions = {
     sortBy: $props.sortBy,
     fields: $props.fields,
 };
+const filterValue = ref(null);
 const arrayData = useArrayData(arrayDataKey, arrayDataOptions);
 onMounted(async () => {
+    if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300);
     setOptions(options.value);
     if (!$props.options) fetchFilter($props.modelValue);
+    await initSelect();
+});
+
+async function initSelect() {
     if (useURL.value) {
         arrayData.store.userFilter = $props.where;
         arrayData.store.filter.where = $props.where;
         const { data } = await arrayData.fetch({ append: true, updateRouter: false });
         setOptions(data);
     }
-});
+}
 
 watch(modelValue, (newValue) => {
     if (useURL.value) return;
     if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
         fetchFilter(newValue);
 });
-const isLoading = ref(false);
-
+function setOptions(data, append = true) {
+    myOptions.value = JSON.parse(JSON.stringify(data));
+    if (append) myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
+}
 function filter(val, options) {
     const search = val.toString().toLowerCase();
 
@@ -139,10 +145,7 @@ function filter(val, options) {
         return id == search || optionLabel.includes(search);
     });
 }
-
-async function fetchFilter(val) {
-    if (!useURL.value) return;
-
+function whereFn(val) {
     const { fields, sortBy, limit } = $props;
     let key = new RegExp(/\d/g).test(val)
         ? optionFilter.value ?? optionValue.value
@@ -150,22 +153,33 @@ async function fetchFilter(val) {
 
     const where = { ...{ [key]: { like: `%${val}%` } }, ...$props.where };
     const fetchOptions = { where, order: sortBy, limit };
-    if (fields) fetchOptions.fields = fields;
-    return arrayData.value.fetch(fetchOptions);
+    return fetchOptions;
 }
-
+async function fetchFilter(val) {
+    if (!useURL.value) return;
+    const fetchOptions = whereFn(val);
+    arrayData.store.userFilter = fetchOptions;
+    return arrayData.fetch({ append: false, updateRouter: false });
+}
+let isFiltered = false;
+watch(filterValue, (newVal, oldVal) => {
+    isFiltered = oldVal?.length < newVal?.length;
+});
 async function filterHandler(val, update) {
     if (!$props.defaultFilter) return update();
     let newOptions = [];
+    filterValue.value = val;
     if (myOptions.value.length > 0 && !useURL.value) {
         newOptions = filter(val, myOptions.value);
         myOptions.value = [];
-    } else newOptions = filter(val, myOptionsOriginal.value);
-    if (useURL.value && myOptions.value.length < 1) {
+    } else {
+        newOptions = filter(val, myOptionsOriginal.value);
+    }
+    if (useURL.value && isFiltered) {
         arrayData.store.skip = 0;
         arrayData.store.filter.skip = 0;
         arrayData.store.filter.where = { [optionFilter.value]: val, ...$props.where };
-        const { data } = await arrayData.fetch({ append: false });
+        const { data } = await arrayData.fetch({ append: false, updateRouter: false });
         newOptions = data;
         myOptions.value = data;
     }
@@ -189,7 +203,16 @@ async function onScroll(scrollEv) {
     if (from === 0 && index === 0) return;
     if (!useURL.value && !$props.fetchRef) return;
     if (direction === 'decrease') return;
+    console.log(arrayData.store.data.length, myOptions.value.length);
+    // const restoreFilter = +arrayData.store.limit === myOptions.value.length;
     if (to === lastIndex && arrayData.store.hasMoreData && !isLoading.value) {
+        if (isFiltered) {
+            arrayData.store.userFilter = $props.where;
+            arrayData.store.filter.where = $props.where;
+            arrayData.store.hasMoreData = true;
+            await initSelect();
+            return;
+        }
         isLoading.value = true;
         await arrayData.loadMore();
         setOptions(arrayData.store.data);
@@ -197,10 +220,6 @@ async function onScroll(scrollEv) {
         isLoading.value = false;
     }
 }
-
-onMounted(async () => {
-    if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300);
-});
 </script>
 
 <template>
@@ -225,6 +244,7 @@ onMounted(async () => {
         virtual-scroll-slice-size="options.length"
     >
         <template v-if="isClearable" #append>
+            {{ `(${myOptions.length})` }}
             <QIcon
                 v-show="value"
                 name="close"
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index 46aab204c..d5a4de8d1 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -102,7 +102,6 @@ const contactChannels = ref([]);
                     url="Workers/activeWithInheritedRole"
                     hide-selected
                     :where="{ role: 'salesPerson' }"
-                    dense
                     emit-value
                     map-options
                     option-label="name"
@@ -115,7 +114,7 @@ const contactChannels = ref([]);
                         <QAvatar color="orange">
                             <VnImg
                                 v-if="data.salesPersonFk"
-                                :id="user.id"
+                                :id="data.salesPersonFk"
                                 collection="user"
                                 spinner-color="white"
                             />
-- 
2.40.1


From f26e1ae96d57de58f3c1d0dd279d145bf08e5f5f Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 27 Jun 2024 10:29:52 +0200
Subject: [PATCH 36/50] fix: reset state when clean filter

---
 src/components/common/VnSelect.vue | 33 +++++++++++++-----------------
 1 file changed, 14 insertions(+), 19 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 2abac6f44..929699f80 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -145,25 +145,29 @@ function filter(val, options) {
         return id == search || optionLabel.includes(search);
     });
 }
-function whereFn(val) {
+
+async function fetchFilter(val) {
+    if (!useURL.value) return;
     const { fields, sortBy, limit } = $props;
     let key = new RegExp(/\d/g).test(val)
         ? optionFilter.value ?? optionValue.value
         : optionValue.value;
 
     const where = { ...{ [key]: { like: `%${val}%` } }, ...$props.where };
-    const fetchOptions = { where, order: sortBy, limit };
-    return fetchOptions;
-}
-async function fetchFilter(val) {
-    if (!useURL.value) return;
-    const fetchOptions = whereFn(val);
+    const fetchOptions = { where, fields, order: sortBy, limit };
     arrayData.store.userFilter = fetchOptions;
     return arrayData.fetch({ append: false, updateRouter: false });
 }
 let isFiltered = false;
 watch(filterValue, (newVal, oldVal) => {
-    isFiltered = oldVal?.length < newVal?.length;
+    const _isFiltered = oldVal?.length < newVal?.length;
+    if (!_isFiltered && isFiltered) {
+        arrayData.store.hasMoreData = true;
+        arrayData.store.userFilter = $props.where;
+        arrayData.store.filter.where = $props.where;
+        arrayData.store.data = myOptions.value;
+    }
+    isFiltered = _isFiltered;
 });
 async function filterHandler(val, update) {
     if (!$props.defaultFilter) return update();
@@ -175,7 +179,7 @@ async function filterHandler(val, update) {
     } else {
         newOptions = filter(val, myOptionsOriginal.value);
     }
-    if (useURL.value && isFiltered) {
+    if (useURL.value && isFiltered && arrayData.store.hasMoreData) {
         arrayData.store.skip = 0;
         arrayData.store.filter.skip = 0;
         arrayData.store.filter.where = { [optionFilter.value]: val, ...$props.where };
@@ -203,16 +207,7 @@ async function onScroll(scrollEv) {
     if (from === 0 && index === 0) return;
     if (!useURL.value && !$props.fetchRef) return;
     if (direction === 'decrease') return;
-    console.log(arrayData.store.data.length, myOptions.value.length);
-    // const restoreFilter = +arrayData.store.limit === myOptions.value.length;
     if (to === lastIndex && arrayData.store.hasMoreData && !isLoading.value) {
-        if (isFiltered) {
-            arrayData.store.userFilter = $props.where;
-            arrayData.store.filter.where = $props.where;
-            arrayData.store.hasMoreData = true;
-            await initSelect();
-            return;
-        }
         isLoading.value = true;
         await arrayData.loadMore();
         setOptions(arrayData.store.data);
@@ -244,7 +239,6 @@ async function onScroll(scrollEv) {
         virtual-scroll-slice-size="options.length"
     >
         <template v-if="isClearable" #append>
-            {{ `(${myOptions.length})` }}
             <QIcon
                 v-show="value"
                 name="close"
@@ -253,6 +247,7 @@ async function onScroll(scrollEv) {
                 size="xs"
             />
         </template>
+
         <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
             <slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
         </template>
-- 
2.40.1


From e92701de23e5d1d053619e9e2569a1791ff149df Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 5 Jul 2024 13:58:02 +0200
Subject: [PATCH 37/50] updates

---
 src/components/common/VnSelect.vue |  6 +++-
 src/composables/useArrayData.js    | 31 +++++++++++-------
 src/stores/useArrayDataStore.js    | 51 ++++++++++++++++++++----------
 3 files changed, 59 insertions(+), 29 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 929699f80..4a1199460 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -66,6 +66,10 @@ const $props = defineProps({
         type: Boolean,
         default: false,
     },
+    useLike: {
+        type: Boolean,
+        default: true,
+    },
 });
 
 const { t } = useI18n();
@@ -177,7 +181,7 @@ async function filterHandler(val, update) {
         newOptions = filter(val, myOptions.value);
         myOptions.value = [];
     } else {
-        newOptions = filter(val, myOptionsOriginal.value);
+        newOptions = filter(val, isFiltered ? myOptions.value : myOptionsOriginal.value);
     }
     if (useURL.value && isFiltered && arrayData.store.hasMoreData) {
         arrayData.store.skip = 0;
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index a3d1bb537..0fcbbbb48 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -1,4 +1,4 @@
-import { onMounted, ref, computed } from 'vue';
+import { onMounted, computed } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import axios from 'axios';
 import { useArrayDataStore } from 'stores/useArrayDataStore';
@@ -18,7 +18,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
 
     onMounted(() => {
         setOptions();
-        store.skip = 0;
+        arrayDataStore.reset(['skip']);
 
         const query = route.query;
         const searchUrl = store.searchUrl;
@@ -27,7 +27,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
             const filter = params?.filter;
             delete params.filter;
             store.userParams = { ...params, ...store.userParams };
-            store.userFilter = { ...JSON.parse(filter), ...store.userFilter };
+            store.userFilter = { ...JSON.parse(filter ?? '{}'), ...store.userFilter };
         }
     });
 
@@ -85,13 +85,17 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         }
 
         Object.assign(filter, store.userFilter, exprFilter);
-        Object.assign(store.filter, { ...filter, skip: store.skip });
-        const params = {
-            filter: JSON.stringify(store.filter),
-        };
+        let where;
+        if (filter?.where || store.filter?.where)
+            where = Object.assign(filter?.where ?? {}, store.filter?.where ?? {});
+        Object.assign(filter, store.filter);
+        filter.where = where;
+        const params = { filter };
 
         Object.assign(params, userParams);
+        params.filter.skip = store.skip;
 
+        params.filter = JSON.stringify(params.filter);
         store.currentFilter = params;
         store.isLoading = true;
         const response = await axios.get(store.url, {
@@ -127,6 +131,10 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         delete store[option];
     }
 
+    function reset(opts = []) {
+        if (arrayDataStore.get(key)) arrayDataStore.reset(key, opts);
+    }
+
     function cancelRequest() {
         if (canceller) {
             canceller.abort();
@@ -144,22 +152,20 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
     }
 
     async function addFilter({ filter, params }) {
-        if (filter) store.userFilter = Object.assign(store.userFilter, filter);
+        if (filter) store.filter = filter;
 
         let userParams = { ...store.userParams, ...params };
         userParams = sanitizerParams(userParams, store?.exprBuilder);
 
         store.userParams = userParams;
-        store.skip = 0;
-        store.filter.skip = 0;
-        store.page = 1;
+        arrayDataStore.reset(['skip', 'filter.skip', 'page']);
 
         await fetch({ append: false });
         return { filter, params };
     }
 
     async function addFilterWhere(where) {
-        const storedFilter = { ...store.userFilter };
+        const storedFilter = { ...store.filter };
         if (!storedFilter?.where) storedFilter.where = {};
         where = { ...storedFilter.where, ...where };
         await addFilter({ filter: { where } });
@@ -242,5 +248,6 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         updateStateParams,
         isLoading,
         deleteOption,
+        reset,
     };
 }
diff --git a/src/stores/useArrayDataStore.js b/src/stores/useArrayDataStore.js
index cfe0d5749..ea029bc12 100644
--- a/src/stores/useArrayDataStore.js
+++ b/src/stores/useArrayDataStore.js
@@ -3,37 +3,56 @@ import { defineStore } from 'pinia';
 
 export const useArrayDataStore = defineStore('arrayDataStore', () => {
     const state = ref({});
+    const defaultOpts = {
+        filter: {},
+        userFilter: {},
+        userParams: {},
+        url: '',
+        limit: 10,
+        skip: 0,
+        order: '',
+        isLoading: false,
+        userParamsChanged: false,
+        exprBuilder: null,
+        searchUrl: 'params',
+        navigate: null,
+        page: 1,
+    };
 
     function get(key) {
         return state.value[key];
     }
 
     function set(key) {
-        state.value[key] = {
-            filter: {},
-            userFilter: {},
-            userParams: {},
-            url: '',
-            limit: 10,
-            skip: 0,
-            order: '',
-            data: ref(),
-            page: ref(1),
-            isLoading: false,
-            userParamsChanged: false,
-            exprBuilder: null,
-            searchUrl: 'params',
-            navigate: null,
-        };
+        state.value[key] = getDefaultState();
     }
 
     function clear(key) {
         delete state.value[key];
     }
 
+    function reset(key, opts = []) {
+        if (!opts.length) state.value[key] = getDefaultState();
+        else
+            opts.forEach((opt) => {
+                if (opt.includes('.')) {
+                    const [parent, child] = opt.split('.');
+                    state.value[key][parent][child] = defaultOpts[child];
+                } else if (Object.hasOwn(state.value[key], opt))
+                    state.value[key][opt] = defaultOpts[opt];
+            });
+    }
+
+    function getDefaultState() {
+        return Object.assign(JSON.parse(JSON.stringify(defaultOpts)), {
+            data: ref(),
+        });
+    }
+
     return {
         get,
         set,
         clear,
+        reset,
     };
 });
-- 
2.40.1


From 70ba68393e58eac19b50fd0ec54ecd00bd96d252 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 5 Jul 2024 21:01:22 +0200
Subject: [PATCH 38/50] perf: vnSelectPaginate

---
 src/components/common/VnSelect.vue            | 11 ++++++++++-
 src/pages/Customer/Card/CustomerBasicData.vue |  1 +
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 4a1199460..6f62aeb62 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -87,7 +87,11 @@ const selectValue = computed({
         return $props.modelValue;
     },
     set(value) {
+        isFiltered = false;
+        filterValue.value = !!value;
         arrayData.store.page = 0;
+        arrayData.store.hasMoreData = true;
+
         emit('update:modelValue', value);
     },
 });
@@ -95,7 +99,8 @@ const selectValue = computed({
 const useURL = computed(() => $props.url);
 
 const $attrs = useAttrs();
-const arrayDataKey = $props.dataKey ?? ($props.url !== '' ? $props.url : $attrs.label);
+const arrayDataKey =
+    $props.dataKey ?? ($props.url.length > 0 ? $props.url : $attrs.label);
 const arrayDataOptions = {
     url: $props.url,
     where: $props.where,
@@ -164,6 +169,10 @@ async function fetchFilter(val) {
 }
 let isFiltered = false;
 watch(filterValue, (newVal, oldVal) => {
+    // if (vnSelectRef.value.modelValue) {
+    //     isFiltered = true;
+    //     return;
+    // }
     const _isFiltered = oldVal?.length < newVal?.length;
     if (!_isFiltered && isFiltered) {
         arrayData.store.hasMoreData = true;
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index 19b7eacd4..60cde311e 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -104,6 +104,7 @@ const contactChannels = ref([]);
                     :where="{ role: 'salesPerson' }"
                     emit-value
                     map-options
+                    clearable
                     option-label="name"
                     option-value="id"
                     option-filter="firstName"
-- 
2.40.1


From cdee2155b243651b2287431d0ed3743fcabea30c Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 12 Jul 2024 12:43:42 +0200
Subject: [PATCH 39/50] perf: remove unnecessay code

---
 src/components/FetchData.vue           |  1 +
 src/composables/useAxios.js            | 35 --------------------------
 src/pages/Worker/Card/WorkerLocker.vue | 14 ++++++++---
 3 files changed, 11 insertions(+), 39 deletions(-)
 delete mode 100644 src/composables/useAxios.js

diff --git a/src/components/FetchData.vue b/src/components/FetchData.vue
index 28e841abf..2a0864d3e 100644
--- a/src/components/FetchData.vue
+++ b/src/components/FetchData.vue
@@ -35,6 +35,7 @@ const $props = defineProps({
 
 const emit = defineEmits(['onFetch']);
 defineExpose({ fetch });
+
 onMounted(async () => {
     if ($props.autoLoad) {
         await fetch();
diff --git a/src/composables/useAxios.js b/src/composables/useAxios.js
deleted file mode 100644
index 1595e453f..000000000
--- a/src/composables/useAxios.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import axios from 'axios';
-
-export function useAxios(props, url) {
-    if (!url) url = props.url;
-    const handleFilter = (filter) => {
-        filter = Object.assign(filter, props.filter);
-        if (props.where && !filter.where) filter.where = props.where;
-        if (props.sortBy) filter.order = props.sortBy;
-        if (props.limit) filter.limit = props.limit;
-        return JSON.stringify(filter);
-    };
-    const fetch = async (filter) =>
-        (
-            await axios.get(url, {
-                params: { filter: handleFilter(filter), ...props.params },
-            })
-        ).data;
-
-    const push = async (method = 'PUT', filter, data) =>
-        axios({
-            url,
-            method,
-            data,
-            params: { filter: handleFilter(filter), ...props.params },
-        });
-
-    const pop = async (filter) =>
-        axios.delete(url, { params: { filter: handleFilter(filter), ...props.params } });
-
-    return {
-        fetch,
-        push,
-        pop,
-    };
-}
diff --git a/src/pages/Worker/Card/WorkerLocker.vue b/src/pages/Worker/Card/WorkerLocker.vue
index 6e9cfba38..f19fc8ae6 100644
--- a/src/pages/Worker/Card/WorkerLocker.vue
+++ b/src/pages/Worker/Card/WorkerLocker.vue
@@ -7,10 +7,11 @@ import { useRole } from 'src/composables/useRole';
 import FormModel from 'components/FormModel.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import { useArrayData } from 'src/composables/useArrayData';
-import { useAxios } from 'src/composables/useAxios';
+import FetchData from 'components/FetchData.vue';
 
 const { hasAny } = useRole();
 const { t } = useI18n();
+const fetchData = ref();
 const originaLockerId = ref();
 const lockers = ref([]);
 const { store } = useArrayData('Worker');
@@ -26,14 +27,21 @@ const save = async (data) => {
     const lockerId = data.id ?? originaLockerId.value;
     const workerFk = lockerId == originaLockerId.value ? null : entityId.value;
 
-    return useAxios(`Lockers/${lockerId}`).push('PATCH', { workerFk });
+    return axios.patch(`Lockers/${lockerId}`, { workerFk });
 };
 
 const init = async (data) => {
+    await fetchData.value.fetch();
     originaLockerId.value = data.id;
 };
 </script>
 <template>
+    <FetchData
+        ref="fetchData"
+        url="Lockers/codes"
+        :filter="filter"
+        @on-fetch="(data) => (lockers = data)"
+    />
     <FormModel
         :url="`Workers/${entityId}/locker`"
         model="worker"
@@ -43,8 +51,6 @@ const init = async (data) => {
     >
         <template #form="{ data }">
             <VnSelect
-                url="Lockers/codes"
-                :filter="filter"
                 :label="t('Locker')"
                 v-model="data.id"
                 :options="lockers"
-- 
2.40.1


From b00f9559136adcec3cc9886f916540f337ad2956 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 12 Jul 2024 12:55:20 +0200
Subject: [PATCH 40/50] perf: vue-recomendations

---
 src/components/common/VnSelect.vue | 44 ++++++++++++++----------------
 1 file changed, 20 insertions(+), 24 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 6f62aeb62..a42c949da 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -1,10 +1,10 @@
 <script setup>
 import { ref, toRefs, computed, watch, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-const emit = defineEmits(['update:modelValue', 'update:options']);
 import { useArrayData } from 'src/composables/useArrayData';
 import { useAttrs } from 'vue';
 
+const emit = defineEmits(['update:modelValue', 'update:options']);
 const $props = defineProps({
     modelValue: {
         type: [String, Number, Object],
@@ -110,27 +110,35 @@ const arrayDataOptions = {
 };
 const filterValue = ref(null);
 const arrayData = useArrayData(arrayDataKey, arrayDataOptions);
+let isFiltered = false;
 onMounted(async () => {
     if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300);
     setOptions(options.value);
     if (!$props.options) fetchFilter($props.modelValue);
-    await initSelect();
-});
-
-async function initSelect() {
     if (useURL.value) {
         arrayData.store.userFilter = $props.where;
         arrayData.store.filter.where = $props.where;
         const { data } = await arrayData.fetch({ append: true, updateRouter: false });
         setOptions(data);
     }
-}
+});
+watch(filterValue, (newVal, oldVal) => {
+    const _isFiltered = oldVal?.length < newVal?.length;
+    if (!_isFiltered && isFiltered) {
+        arrayData.store.hasMoreData = true;
+        arrayData.store.userFilter = $props.where;
+        arrayData.store.filter.where = $props.where;
+        arrayData.store.data = myOptions.value;
+    }
+    isFiltered = _isFiltered;
+});
 
 watch(modelValue, (newValue) => {
     if (useURL.value) return;
     if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
         fetchFilter(newValue);
 });
+
 function setOptions(data, append = true) {
     myOptions.value = JSON.parse(JSON.stringify(data));
     if (append) myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
@@ -162,26 +170,15 @@ async function fetchFilter(val) {
         ? optionFilter.value ?? optionValue.value
         : optionValue.value;
 
-    const where = { ...{ [key]: { like: `%${val}%` } }, ...$props.where };
+    const defaultWhere = $props.useLike
+        ? { [key]: { like: `%${val}%` } }
+        : { [key]: val };
+    const where = { ...defaultWhere, ...$props.where };
     const fetchOptions = { where, fields, order: sortBy, limit };
     arrayData.store.userFilter = fetchOptions;
     return arrayData.fetch({ append: false, updateRouter: false });
 }
-let isFiltered = false;
-watch(filterValue, (newVal, oldVal) => {
-    // if (vnSelectRef.value.modelValue) {
-    //     isFiltered = true;
-    //     return;
-    // }
-    const _isFiltered = oldVal?.length < newVal?.length;
-    if (!_isFiltered && isFiltered) {
-        arrayData.store.hasMoreData = true;
-        arrayData.store.userFilter = $props.where;
-        arrayData.store.filter.where = $props.where;
-        arrayData.store.data = myOptions.value;
-    }
-    isFiltered = _isFiltered;
-});
+
 async function filterHandler(val, update) {
     if (!$props.defaultFilter) return update();
     let newOptions = [];
@@ -213,8 +210,7 @@ async function filterHandler(val, update) {
     );
 }
 
-async function onScroll(scrollEv) {
-    const { to, direction, from, index } = scrollEv;
+async function onScroll({ to, direction, from, index }) {
     const lastIndex = myOptions.value.length - 1;
 
     if (from === 0 && index === 0) return;
-- 
2.40.1


From cf721bf5a73162f5e46deaaca427eb8cf6d7f97b Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 22 Jul 2024 10:42:15 +0200
Subject: [PATCH 41/50] feat: apply vnSelectPaginate_simplify proposal

---
 src/components/common/VnSelect.vue            | 93 ++++++++-----------
 src/composables/useArrayData.js               |  2 +-
 src/pages/Customer/Card/CustomerBasicData.vue |  1 +
 3 files changed, 39 insertions(+), 57 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index a42c949da..b0b2ccd98 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -79,6 +79,7 @@ const { optionLabel, optionValue, optionFilter, options, modelValue } = toRefs($
 const myOptions = ref([]);
 const myOptionsOriginal = ref([]);
 const vnSelectRef = ref();
+const lastVal = ref();
 
 const isLoading = ref(false);
 
@@ -87,11 +88,8 @@ const selectValue = computed({
         return $props.modelValue;
     },
     set(value) {
-        isFiltered = false;
-        filterValue.value = !!value;
         arrayData.store.page = 0;
         arrayData.store.hasMoreData = true;
-
         emit('update:modelValue', value);
     },
 });
@@ -101,48 +99,31 @@ const useURL = computed(() => $props.url);
 const $attrs = useAttrs();
 const arrayDataKey =
     $props.dataKey ?? ($props.url.length > 0 ? $props.url : $attrs.label);
-const arrayDataOptions = {
-    url: $props.url,
-    where: $props.where,
-    limit: $props.limit,
-    sortBy: $props.sortBy,
-    fields: $props.fields,
-};
-const filterValue = ref(null);
-const arrayData = useArrayData(arrayDataKey, arrayDataOptions);
-let isFiltered = false;
-onMounted(async () => {
-    if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300);
-    setOptions(options.value);
-    if (!$props.options) fetchFilter($props.modelValue);
-    if (useURL.value) {
-        arrayData.store.userFilter = $props.where;
-        arrayData.store.filter.where = $props.where;
-        const { data } = await arrayData.fetch({ append: true, updateRouter: false });
-        setOptions(data);
-    }
-});
-watch(filterValue, (newVal, oldVal) => {
-    const _isFiltered = oldVal?.length < newVal?.length;
-    if (!_isFiltered && isFiltered) {
-        arrayData.store.hasMoreData = true;
-        arrayData.store.userFilter = $props.where;
-        arrayData.store.filter.where = $props.where;
-        arrayData.store.data = myOptions.value;
-    }
-    isFiltered = _isFiltered;
-});
+
+const arrayData = useArrayData(arrayDataKey, { url: $props.url });
 
 watch(modelValue, (newValue) => {
-    if (useURL.value) return;
     if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
         fetchFilter(newValue);
 });
 
+onMounted(() => {
+    setOptions(options.value);
+    if ($props.url && $props.modelValue && !findKeyInOptions())
+        fetchFilter($props.modelValue);
+    if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300);
+});
+
+function findKeyInOptions() {
+    if (!$props.options) return;
+    return filter($props.modelValue, $props.options)?.length;
+}
+
 function setOptions(data, append = true) {
     myOptions.value = JSON.parse(JSON.stringify(data));
     if (append) myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
 }
+
 function filter(val, options) {
     const search = val.toString().toLowerCase();
 
@@ -167,36 +148,35 @@ async function fetchFilter(val) {
     if (!useURL.value) return;
     const { fields, sortBy, limit } = $props;
     let key = new RegExp(/\d/g).test(val)
-        ? optionFilter.value ?? optionValue.value
-        : optionValue.value;
+        ? optionValue.value
+        : optionFilter.value ?? optionLabel.value;
 
     const defaultWhere = $props.useLike
         ? { [key]: { like: `%${val}%` } }
         : { [key]: val };
-    const where = { ...defaultWhere, ...$props.where };
-    const fetchOptions = { where, fields, order: sortBy, limit };
+    const where = { ...(val ? defaultWhere : {}), ...$props.where };
+    const fetchOptions = { where, order: sortBy, limit };
+    if (fields) fetchOptions.fields = fields;
     arrayData.store.userFilter = fetchOptions;
-    return arrayData.fetch({ append: false, updateRouter: false });
+    arrayData.store.skip = 0;
+    arrayData.store.filter.skip = 0;
+    const { data } = await arrayData.fetch({ append: true, updateRouter: false });
+    setOptions(data);
+    return data;
 }
 
 async function filterHandler(val, update) {
+    if (!val && lastVal.value === val) {
+        lastVal.value = val;
+        return update();
+    }
+    lastVal.value = val;
+    let newOptions;
+
     if (!$props.defaultFilter) return update();
-    let newOptions = [];
-    filterValue.value = val;
-    if (myOptions.value.length > 0 && !useURL.value) {
-        newOptions = filter(val, myOptions.value);
-        myOptions.value = [];
-    } else {
-        newOptions = filter(val, isFiltered ? myOptions.value : myOptionsOriginal.value);
-    }
-    if (useURL.value && isFiltered && arrayData.store.hasMoreData) {
-        arrayData.store.skip = 0;
-        arrayData.store.filter.skip = 0;
-        arrayData.store.filter.where = { [optionFilter.value]: val, ...$props.where };
-        const { data } = await arrayData.fetch({ append: false, updateRouter: false });
-        newOptions = data;
-        myOptions.value = data;
-    }
+    if ($props.url) {
+        newOptions = await fetchFilter(val);
+    } else newOptions = filter(val, myOptionsOriginal.value);
     update(
         () => {
             myOptions.value = newOptions;
@@ -228,6 +208,7 @@ async function onScroll({ to, direction, from, index }) {
 
 <template>
     <QSelect
+        :input-debounce="$attrs.url ? 300 : 0"
         :loading="isLoading"
         @virtual-scroll="onScroll"
         v-model="selectValue"
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 3563e0dbd..8eaf72a06 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -175,7 +175,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
 
     async function addOrder(field, direction = 'ASC') {
         const newOrder = field + ' ' + direction;
-        let order = store.order ?? [];
+        let order = store.order || [];
         if (typeof order == 'string') order = [order];
 
         let index = order.findIndex((o) => o.split(' ')[0] === field);
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index 60cde311e..4e9166a5b 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -110,6 +110,7 @@ const contactChannels = ref([]);
                     option-filter="firstName"
                     use-input
                     v-model="data.salesPersonFk"
+                    :use-like="false"
                 >
                     <template #prepend>
                         <QAvatar color="orange">
-- 
2.40.1


From 0da32618ac0e86fd76bf93d04d4e8327678288b1 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 13 Sep 2024 01:13:08 +0200
Subject: [PATCH 42/50] fix: VnSelect

---
 src/components/common/VnSelect.vue            | 103 ++++++++----------
 .../components/common/VnSelect.spec.js        |   5 +-
 2 files changed, 48 insertions(+), 60 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index a040e6e1e..62d4783d0 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -3,6 +3,7 @@ import { ref, toRefs, computed, watch, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useAttrs } from 'vue';
+import FetchData from 'components/FetchData.vue';
 
 const emit = defineEmits(['update:modelValue', 'update:options', 'remove']);
 const $props = defineProps({
@@ -104,20 +105,45 @@ const noOneOpt = ref({
     [optionLabel.value]: noOneText,
 });
 
+const useURL = computed(() => $props.url);
 const selectValue = computed({
     get() {
         return $props.modelValue;
     },
     set(value) {
-        arrayData.store.page = 0;
-        arrayData.store.hasMoreData = true;
-        // setOptions(myOptionsOriginal.value);
+        // arrayData.store.page = 0;
+        // arrayData.store.hasMoreData = true;
+        setOptions(myOptionsOriginal.value);
         emit('update:modelValue', value);
     },
 });
 
-watch(options, (newValue) => {
-    setOptions(newValue);
+// watch(options, (newValue) => {
+//     setOptions(newValue);
+// });
+
+// watch(modelValue, (newValue) => {
+//     if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
+//         fetchFilter(newValue);
+// });
+
+// onMounted(() => {
+//     setOptions(options.value);
+//     if (useURL.value && $props.modelValue && !findKeyInOptions())
+//         fetchFilter($props.modelValue);
+//     if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300);
+// });
+
+const $attrs = useAttrs();
+const arrayDataKey =
+    $props.dataKey ?? (useURL.value?.length > 0 ? useURL.value : $attrs.label);
+
+const arrayData = useArrayData(arrayDataKey, { url: useURL.value });
+
+onMounted(async () => {
+    if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300);
+    setOptions(options.value);
+    if (useURL.value) fetchFilter($props.modelValue);
 });
 
 watch(modelValue, (newValue) => {
@@ -127,43 +153,7 @@ watch(modelValue, (newValue) => {
 
 onMounted(() => {
     setOptions(options.value);
-    if ($props.url && $props.modelValue && !findKeyInOptions())
-        fetchFilter($props.modelValue);
-    if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300);
-});
-
-watch(modelValue, async (newValue) => {
-    if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
-        await fetchFilter(newValue);
-
-    if ($props.noOne) myOptions.value.unshift(noOneOpt.value);
-});
-
-onMounted(() => {
-    setOptions(options.value);
-    if ($props.url && $props.modelValue && !findKeyInOptions())
-        fetchFilter($props.modelValue);
-    if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300);
-});
-
-const useURL = computed(() => $props.url);
-
-const $attrs = useAttrs();
-const arrayDataKey =
-    $props.dataKey ?? ($props.url.length > 0 ? $props.url : $attrs.label);
-
-const arrayData = useArrayData(arrayDataKey, { url: $props.url });
-
-watch(modelValue, async (newValue) => {
-    if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
-        await fetchFilter(newValue);
-
-    if ($props.noOne) myOptions.value.unshift(noOneOpt.value);
-});
-
-onMounted(() => {
-    setOptions(options.value);
-    if ($props.url && $props.modelValue && !findKeyInOptions())
+    if (useURL.value && $props.modelValue && !findKeyInOptions())
         fetchFilter($props.modelValue);
     if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300);
 });
@@ -177,7 +167,6 @@ function setOptions(data, append = true) {
     myOptions.value = JSON.parse(JSON.stringify(data));
     if (append) myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
 }
-
 function filter(val, options) {
     const search = val?.toString()?.toLowerCase();
 
@@ -198,11 +187,12 @@ function filter(val, options) {
         return id == search || optionLabel.includes(search);
     });
 }
-
+// const dataRef = ref();
 async function fetchFilter(val) {
-    if (!$props.url || !dataRef.value) return;
+    if (!useURL.value) return;
+
+    const { fields, sortBy, include, limit } = $props;
 
-    const { fields, include, sortBy, limit } = $props;
     const key =
         optionFilterValue.value ??
         (new RegExp(/\d/g).test(val)
@@ -218,11 +208,10 @@ async function fetchFilter(val) {
         }, {});
     } else defaultWhere = { [key]: getVal(val) };
     const where = { ...(val ? defaultWhere : {}), ...$props.where };
-    const fetchOptions = { where, include, limit };
+    const fetchOptions = { where, order: sortBy, include, limit };
     if (fields) fetchOptions.fields = fields;
-    if (sortBy) fetchOptions.order = sortBy;
-
     arrayData.store.userFilter = fetchOptions;
+    arrayData.store.order = fetchOptions.order;
     arrayData.store.skip = 0;
     arrayData.store.filter.skip = 0;
     const { data } = await arrayData.fetch({ append: true, updateRouter: false });
@@ -239,10 +228,7 @@ async function filterHandler(val, update) {
     let newOptions;
 
     if (!$props.defaultFilter) return update();
-    if (
-        $props.url &&
-        ($props.limit || (!$props.limit && Object.keys(myOptions.value).length === 0))
-    ) {
+    if (useURL.value) {
         newOptions = await fetchFilter(val);
     } else newOptions = filter(val, myOptionsOriginal.value);
     update(
@@ -265,9 +251,9 @@ async function onScroll({ to, direction, from, index }) {
     const lastIndex = myOptions.value.length - 1;
 
     if (from === 0 && index === 0) return;
-    if (!useURL.value && !$props.fetchRef) return;
+    if (!useURL.value) return;
     if (direction === 'decrease') return;
-    if (to === lastIndex && arrayData.store.hasMoreData && !isLoading.value) {
+    if (to === lastIndex && !isLoading.value) {
         isLoading.value = true;
         await arrayData.loadMore();
         setOptions(arrayData.store.data);
@@ -275,7 +261,6 @@ async function onScroll({ to, direction, from, index }) {
         isLoading.value = false;
     }
 }
-
 function nullishToTrue(value) {
     return value ?? true;
 }
@@ -284,16 +269,16 @@ const getVal = (val) => ($props.useLike ? { like: `%${val}%` } : val);
 </script>
 
 <template>
-    <FetchData
+    <!-- <FetchData
         ref="dataRef"
-        :url="$props.url"
+        :url="useURL.value"
         @on-fetch="(data) => setOptions(data)"
         :where="where || { [optionValue]: value }"
         :limit="limit"
         :sort-by="sortBy"
         :fields="fields"
         :params="params"
-    />
+    /> -->
     <QSelect
         :input-debounce="$attrs.url ? 300 : 0"
         :loading="isLoading"
diff --git a/test/vitest/__tests__/components/common/VnSelect.spec.js b/test/vitest/__tests__/components/common/VnSelect.spec.js
index 097bc6277..bce7e2e14 100644
--- a/test/vitest/__tests__/components/common/VnSelect.spec.js
+++ b/test/vitest/__tests__/components/common/VnSelect.spec.js
@@ -59,6 +59,9 @@ describe('VnSelect FETCH URL', () => {
                 optionLabel: 'name',
                 optionValue: 'id',
                 url: 'Suppliers',
+                sortBy: 'name DESC',
+                limit: '320',
+                fields: ['name'],
             },
             global: {
                 stubs: ['FetchData'],
@@ -79,7 +82,7 @@ describe('VnSelect FETCH URL', () => {
         const canceller = new AbortController();
         expect(axios.get).toHaveBeenCalledWith('Suppliers', {
             params: {
-                filter: '{"order":"","limit":"30","skip":0}',
+                filter: '{"limit":"320","where":{},"order":"name DESC","include":null,"fields":["name"],"skip":0}',
             },
             signal: canceller.signal,
         });
-- 
2.40.1


From cf0b53c2bff038c8ec10ecbd491fcbc9f66adf2d Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 13 Sep 2024 10:58:17 +0200
Subject: [PATCH 43/50] fix: use currentFilter.limit when loadMore

---
 src/composables/useArrayData.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 651bcefb0..a198c157d 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -234,8 +234,12 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
 
     async function loadMore() {
         if (!store.hasMoreData) return;
+        const isCurrentFilter = JSON.parse(store.currentFilter.filter);
 
-        store.skip = store.limit * store.page;
+        const limit = isCurrentFilter
+            ? isCurrentFilter.limit ?? store.limit
+            : store.limit;
+        store.skip = limit * store.page;
         store.page += 1;
 
         await fetch({ append: true });
-- 
2.40.1


From ffed7125d020b1b6302f5a6e28ae48f9820c536b Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 13 Sep 2024 10:58:35 +0200
Subject: [PATCH 44/50] perf: remove first call

---
 src/components/common/VnSelect.vue            | 6 ------
 src/pages/Customer/Card/CustomerBasicData.vue | 8 +++-----
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 62d4783d0..e3a5544f2 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -140,12 +140,6 @@ const arrayDataKey =
 
 const arrayData = useArrayData(arrayDataKey, { url: useURL.value });
 
-onMounted(async () => {
-    if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300);
-    setOptions(options.value);
-    if (useURL.value) fetchFilter($props.modelValue);
-});
-
 watch(modelValue, (newValue) => {
     if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
         fetchFilter(newValue);
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index 91d9edc05..24f921777 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -96,12 +96,12 @@ const title = ref();
                     :params="{
                         departmentCodes: ['VT', 'shopping'],
                     }"
+                    map-options
                     :fields="['id', 'nickname']"
                     sort-by="nickname ASC"
                     :rules="validate('client.salesPersonFk')"
                     :use-like="false"
                     emit-value
-                    auto-load
                 >
                     <template #prepend>
                         <VnAvatar
@@ -137,17 +137,15 @@ const title = ref();
             <VnRow>
                 <VnSelect
                     url="Clients"
-                    :input-debounce="0"
                     :label="t('customer.basicData.previousClient')"
-                    :options="clients"
+                    v-model="data.transferorFk"
+                    :fields="['id', 'name']"
                     :rules="validate('client.transferorFk')"
                     emit-value
                     map-options
                     option-label="name"
                     option-value="id"
                     sort-by="name ASC"
-                    v-model="data.transferorFk"
-                    :fields="['id', 'name']"
                 >
                     <template #append>
                         <QIcon name="info" class="cursor-pointer">
-- 
2.40.1


From e2e7bacca0472d0f271d5f71a4f0bb8f1e1cbc56 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 13 Sep 2024 11:18:37 +0200
Subject: [PATCH 45/50] test: improve test

---
 src/composables/useArrayData.js               |  2 +-
 .../components/common/VnSelect.spec.js        | 55 +++++++++++++++++--
 2 files changed, 52 insertions(+), 5 deletions(-)

diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index a198c157d..a7bc23520 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -234,7 +234,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
 
     async function loadMore() {
         if (!store.hasMoreData) return;
-        const isCurrentFilter = JSON.parse(store.currentFilter.filter);
+        const isCurrentFilter = JSON.parse(store?.currentFilter?.filter ?? '{}');
 
         const limit = isCurrentFilter
             ? isCurrentFilter.limit ?? store.limit
diff --git a/test/vitest/__tests__/components/common/VnSelect.spec.js b/test/vitest/__tests__/components/common/VnSelect.spec.js
index bce7e2e14..c92b37588 100644
--- a/test/vitest/__tests__/components/common/VnSelect.spec.js
+++ b/test/vitest/__tests__/components/common/VnSelect.spec.js
@@ -43,7 +43,54 @@ describe('VnSelect use options as arguments', () => {
     });
 });
 
-describe('VnSelect FETCH URL', () => {
+describe('VnSelect CALL FETCH URL', () => {
+    let vm;
+
+    beforeAll(async () => {
+        vi.spyOn(axios, 'get').mockResolvedValue({
+            data: [
+                { id: 1, name: 'Tony Stark' },
+                { id: 2, name: 'Jessica Jones' },
+                { id: 3, name: 'Bruce Wayne' },
+            ],
+        });
+        vm = createWrapper(VnSelect, {
+            propsData: {
+                optionLabel: 'name',
+                optionValue: 'id',
+                url: 'Suppliers',
+                modelValue: '1',
+                sortBy: 'name DESC',
+                limit: '320',
+                fields: ['name'],
+            },
+            global: {
+                stubs: ['FetchData'],
+                mocks: { fetch: vi.fn() },
+            },
+        }).vm;
+    });
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+
+    it('should CALL URL', async () => {
+        vm.selectValue = '';
+        expect(vm.options.length).toEqual(0);
+        expect(vm.useURL).toBeTruthy();
+        expect(vm.myOptions.length).toEqual(3);
+
+        const canceller = new AbortController();
+        expect(axios.get).toHaveBeenCalledWith('Suppliers', {
+            params: {
+                filter: '{"limit":"320","where":{"id":{"like":"%1%"}},"order":"name DESC","include":null,"fields":["name"],"skip":0}',
+            },
+            signal: canceller.signal,
+        });
+    });
+});
+
+describe('VnSelect NOT CALL FETCH URL', () => {
     let vm;
 
     beforeAll(async () => {
@@ -73,14 +120,14 @@ describe('VnSelect FETCH URL', () => {
         vi.clearAllMocks();
     });
 
-    it('should CALL URL', async () => {
+    it('should NOT CALL URL because no modelValue exist', async () => {
         vm.selectValue = '';
         expect(vm.options.length).toEqual(0);
         expect(vm.useURL).toBeTruthy();
-        expect(vm.myOptions.length).toEqual(3);
+        expect(vm.myOptions.length).toEqual(0);
 
         const canceller = new AbortController();
-        expect(axios.get).toHaveBeenCalledWith('Suppliers', {
+        expect(axios.get).not.toHaveBeenCalledWith('Suppliers', {
             params: {
                 filter: '{"limit":"320","where":{},"order":"name DESC","include":null,"fields":["name"],"skip":0}',
             },
-- 
2.40.1


From 88e5dd08b8cf92f5b224d9b805365dd1407b4d1c Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 13 Sep 2024 11:18:46 +0200
Subject: [PATCH 46/50] perf: use $props.params

---
 src/components/common/VnSelect.vue | 33 ++----------------------------
 1 file changed, 2 insertions(+), 31 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index e3a5544f2..3b54e43ef 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -3,7 +3,6 @@ import { ref, toRefs, computed, watch, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useAttrs } from 'vue';
-import FetchData from 'components/FetchData.vue';
 
 const emit = defineEmits(['update:modelValue', 'update:options', 'remove']);
 const $props = defineProps({
@@ -111,34 +110,17 @@ const selectValue = computed({
         return $props.modelValue;
     },
     set(value) {
-        // arrayData.store.page = 0;
-        // arrayData.store.hasMoreData = true;
         setOptions(myOptionsOriginal.value);
         emit('update:modelValue', value);
     },
 });
 
-// watch(options, (newValue) => {
-//     setOptions(newValue);
-// });
-
-// watch(modelValue, (newValue) => {
-//     if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
-//         fetchFilter(newValue);
-// });
-
-// onMounted(() => {
-//     setOptions(options.value);
-//     if (useURL.value && $props.modelValue && !findKeyInOptions())
-//         fetchFilter($props.modelValue);
-//     if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300);
-// });
-
 const $attrs = useAttrs();
 const arrayDataKey =
     $props.dataKey ?? (useURL.value?.length > 0 ? useURL.value : $attrs.label);
 
 const arrayData = useArrayData(arrayDataKey, { url: useURL.value });
+const getVal = (val) => ($props.useLike ? { like: `%${val}%` } : val);
 
 watch(modelValue, (newValue) => {
     if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
@@ -204,6 +186,7 @@ async function fetchFilter(val) {
     const where = { ...(val ? defaultWhere : {}), ...$props.where };
     const fetchOptions = { where, order: sortBy, include, limit };
     if (fields) fetchOptions.fields = fields;
+    arrayData.store.userParams = $props.params;
     arrayData.store.userFilter = fetchOptions;
     arrayData.store.order = fetchOptions.order;
     arrayData.store.skip = 0;
@@ -258,21 +241,9 @@ async function onScroll({ to, direction, from, index }) {
 function nullishToTrue(value) {
     return value ?? true;
 }
-
-const getVal = (val) => ($props.useLike ? { like: `%${val}%` } : val);
 </script>
 
 <template>
-    <!-- <FetchData
-        ref="dataRef"
-        :url="useURL.value"
-        @on-fetch="(data) => setOptions(data)"
-        :where="where || { [optionValue]: value }"
-        :limit="limit"
-        :sort-by="sortBy"
-        :fields="fields"
-        :params="params"
-    /> -->
     <QSelect
         :input-debounce="$attrs.url ? 300 : 0"
         :loading="isLoading"
-- 
2.40.1


From e621810f62fc19fea7273c6ef1d741bf9dfd310a Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 13 Sep 2024 20:39:38 +0200
Subject: [PATCH 47/50] fix: vnselect X cancelSignal

---
 src/components/common/VnSelect.vue            | 84 ++++++++++++-------
 .../components/common/VnSelect.spec.js        |  4 +-
 2 files changed, 56 insertions(+), 32 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 3b54e43ef..23cec4be6 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -3,8 +3,9 @@ import { ref, toRefs, computed, watch, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useAttrs } from 'vue';
-
+// import FetchData from 'src/components/FetchData.vue';
 const emit = defineEmits(['update:modelValue', 'update:options', 'remove']);
+
 const $props = defineProps({
     modelValue: {
         type: [String, Number, Object],
@@ -93,10 +94,11 @@ const requiredFieldRule = (val) => val ?? t('globals.fieldRequired');
 
 const { optionLabel, optionValue, optionFilter, optionFilterValue, options, modelValue } =
     toRefs($props);
-const myOptions = ref([]);
-const myOptionsOriginal = ref([]);
+const myOptions = ref($props.options);
+const myOptionsOriginal = ref($props.options);
 const vnSelectRef = ref();
 const isLoading = ref(false);
+const dataRef = ref();
 const lastVal = ref();
 const noOneText = t('globals.noOne');
 const noOneOpt = ref({
@@ -104,7 +106,6 @@ const noOneOpt = ref({
     [optionLabel.value]: noOneText,
 });
 
-const useURL = computed(() => $props.url);
 const selectValue = computed({
     get() {
         return $props.modelValue;
@@ -115,22 +116,34 @@ const selectValue = computed({
     },
 });
 
+const useURL = computed(() => $props.url);
+
 const $attrs = useAttrs();
 const arrayDataKey =
-    $props.dataKey ?? (useURL.value?.length > 0 ? useURL.value : $attrs.label);
+    $props.dataKey ?? ($props.url?.length > 0 ? $props.url : $attrs.name ?? $attrs.label);
 
-const arrayData = useArrayData(arrayDataKey, { url: useURL.value });
-const getVal = (val) => ($props.useLike ? { like: `%${val}%` } : val);
+const arrayData = useArrayData(arrayDataKey, { url: $props.url });
 
-watch(modelValue, (newValue) => {
-    if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
-        fetchFilter(newValue);
+onMounted(async () => {
+    if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300);
+    setOptions(options.value);
+    if (useURL.value) await fetchFilter($props.modelValue);
+});
+watch(options, (newValue) => {
+    setOptions(newValue);
 });
 
-onMounted(() => {
+watch(modelValue, async (newValue) => {
+    if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
+        await fetchFilter(newValue);
+
+    if ($props.noOne) myOptions.value.unshift(noOneOpt.value);
+});
+
+onMounted(async () => {
     setOptions(options.value);
-    if (useURL.value && $props.modelValue && !findKeyInOptions())
-        fetchFilter($props.modelValue);
+    if ($props.url && $props.modelValue && !findKeyInOptions())
+        await fetchFilter($props.modelValue);
     if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300);
 });
 
@@ -143,6 +156,7 @@ function setOptions(data, append = true) {
     myOptions.value = JSON.parse(JSON.stringify(data));
     if (append) myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
 }
+
 function filter(val, options) {
     const search = val?.toString()?.toLowerCase();
 
@@ -163,12 +177,11 @@ function filter(val, options) {
         return id == search || optionLabel.includes(search);
     });
 }
-// const dataRef = ref();
+
 async function fetchFilter(val) {
-    if (!useURL.value) return;
-
-    const { fields, sortBy, include, limit } = $props;
+    if (!$props.url) return;
 
+    const { fields, include, sortBy, limit } = $props;
     const key =
         optionFilterValue.value ??
         (new RegExp(/\d/g).test(val)
@@ -184,8 +197,11 @@ async function fetchFilter(val) {
         }, {});
     } else defaultWhere = { [key]: getVal(val) };
     const where = { ...(val ? defaultWhere : {}), ...$props.where };
-    const fetchOptions = { where, order: sortBy, include, limit };
+    const fetchOptions = { where, include, limit };
     if (fields) fetchOptions.fields = fields;
+    if (sortBy) fetchOptions.order = sortBy;
+
+    // return dataRef.value.fetch(fetchOptions);
     arrayData.store.userParams = $props.params;
     arrayData.store.userFilter = fetchOptions;
     arrayData.store.order = fetchOptions.order;
@@ -193,7 +209,7 @@ async function fetchFilter(val) {
     arrayData.store.filter.skip = 0;
     const { data } = await arrayData.fetch({ append: true, updateRouter: false });
     setOptions(data);
-    return data;
+    // return data;
 }
 
 async function filterHandler(val, update) {
@@ -224,13 +240,19 @@ async function filterHandler(val, update) {
     );
 }
 
+function nullishToTrue(value) {
+    return value ?? true;
+}
+
+const getVal = (val) => ($props.useLike ? { like: `%${val}%` } : val);
+
 async function onScroll({ to, direction, from, index }) {
     const lastIndex = myOptions.value.length - 1;
 
     if (from === 0 && index === 0) return;
-    if (!useURL.value) return;
+    if (!useURL.value && !$props.fetchRef) return;
     if (direction === 'decrease') return;
-    if (to === lastIndex && !isLoading.value) {
+    if (to === lastIndex && arrayData.store.hasMoreData && !isLoading.value) {
         isLoading.value = true;
         await arrayData.loadMore();
         setOptions(arrayData.store.data);
@@ -238,12 +260,19 @@ async function onScroll({ to, direction, from, index }) {
         isLoading.value = false;
     }
 }
-function nullishToTrue(value) {
-    return value ?? true;
-}
 </script>
 
 <template>
+    <!-- <FetchData
+        ref="dataRef"
+        :url="$props.url"
+        @on-fetch="(data) => setOptions(data)"
+        :where="where || { [optionValue]: selectValue }"
+        :limit="limit"
+        :sort-by="sortBy"
+        :fields="fields"
+        :params="params"
+    /> -->
     <QSelect
         :input-debounce="$attrs.url ? 300 : 0"
         :loading="isLoading"
@@ -269,12 +298,7 @@ function nullishToTrue(value) {
             <QIcon
                 v-show="value"
                 name="close"
-                @click.stop="
-                    () => {
-                        value = null;
-                        emit('remove');
-                    }
-                "
+                @click.stop="value = null"
                 class="cursor-pointer"
                 size="xs"
             />
diff --git a/test/vitest/__tests__/components/common/VnSelect.spec.js b/test/vitest/__tests__/components/common/VnSelect.spec.js
index c92b37588..949d43c36 100644
--- a/test/vitest/__tests__/components/common/VnSelect.spec.js
+++ b/test/vitest/__tests__/components/common/VnSelect.spec.js
@@ -83,7 +83,7 @@ describe('VnSelect CALL FETCH URL', () => {
         const canceller = new AbortController();
         expect(axios.get).toHaveBeenCalledWith('Suppliers', {
             params: {
-                filter: '{"limit":"320","where":{"id":{"like":"%1%"}},"order":"name DESC","include":null,"fields":["name"],"skip":0}',
+                filter: '{"limit":"320","where":{"id":{"like":"%1%"}},"include":null,"fields":["name"],"order":"name DESC","skip":0}',
             },
             signal: canceller.signal,
         });
@@ -124,7 +124,7 @@ describe('VnSelect NOT CALL FETCH URL', () => {
         vm.selectValue = '';
         expect(vm.options.length).toEqual(0);
         expect(vm.useURL).toBeTruthy();
-        expect(vm.myOptions.length).toEqual(0);
+        expect(vm.myOptions.length).toEqual(3);
 
         const canceller = new AbortController();
         expect(axios.get).not.toHaveBeenCalledWith('Suppliers', {
-- 
2.40.1


From 82da5c222843bbdbd4134784971d1845afd5394b Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 13 Sep 2024 21:31:47 +0200
Subject: [PATCH 48/50] fix: solve cancelledSignal

---
 src/components/common/VnSelect.vue | 16 ++--------------
 1 file changed, 2 insertions(+), 14 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 23cec4be6..fe7d8963a 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -127,7 +127,7 @@ const arrayData = useArrayData(arrayDataKey, { url: $props.url });
 onMounted(async () => {
     if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300);
     setOptions(options.value);
-    if (useURL.value) await fetchFilter($props.modelValue);
+    if (useURL.value && $props.modelValue) await fetchFilter($props.modelValue);
 });
 watch(options, (newValue) => {
     setOptions(newValue);
@@ -140,18 +140,6 @@ watch(modelValue, async (newValue) => {
     if ($props.noOne) myOptions.value.unshift(noOneOpt.value);
 });
 
-onMounted(async () => {
-    setOptions(options.value);
-    if ($props.url && $props.modelValue && !findKeyInOptions())
-        await fetchFilter($props.modelValue);
-    if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300);
-});
-
-function findKeyInOptions() {
-    if (!$props.options) return;
-    return filter($props.modelValue, $props.options)?.length;
-}
-
 function setOptions(data, append = true) {
     myOptions.value = JSON.parse(JSON.stringify(data));
     if (append) myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
@@ -209,7 +197,7 @@ async function fetchFilter(val) {
     arrayData.store.filter.skip = 0;
     const { data } = await arrayData.fetch({ append: true, updateRouter: false });
     setOptions(data);
-    // return data;
+    return data;
 }
 
 async function filterHandler(val, update) {
-- 
2.40.1


From 0a86b27f53d9cce28e2a2ee5e08558e5bb86d6c4 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 13 Sep 2024 22:19:43 +0200
Subject: [PATCH 49/50] test: improve test

---
 test/vitest/__tests__/components/common/VnSelect.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/vitest/__tests__/components/common/VnSelect.spec.js b/test/vitest/__tests__/components/common/VnSelect.spec.js
index 949d43c36..06dec779c 100644
--- a/test/vitest/__tests__/components/common/VnSelect.spec.js
+++ b/test/vitest/__tests__/components/common/VnSelect.spec.js
@@ -124,7 +124,7 @@ describe('VnSelect NOT CALL FETCH URL', () => {
         vm.selectValue = '';
         expect(vm.options.length).toEqual(0);
         expect(vm.useURL).toBeTruthy();
-        expect(vm.myOptions.length).toEqual(3);
+        expect(vm.myOptions.length).toEqual(0);
 
         const canceller = new AbortController();
         expect(axios.get).not.toHaveBeenCalledWith('Suppliers', {
-- 
2.40.1


From 5b40984ff30a66374f3edea59c8264724aac3b56 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 11 Oct 2024 15:24:09 +0200
Subject: [PATCH 50/50] test: refs #7136 fix myEntry test

---
 src/components/common/VnSelect.vue             | 5 +----
 test/cypress/integration/entry/myEntry.spec.js | 2 +-
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index d24afcd0a..ffcebce61 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -2,7 +2,6 @@
 import { ref, toRefs, computed, watch, onMounted, useAttrs } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'src/composables/useArrayData';
-import { useAttrs } from 'vue';
 // import FetchData from 'src/components/FetchData.vue';
 import { useValidator } from 'src/composables/useValidator';
 const emit = defineEmits(['update:modelValue', 'update:options', 'remove']);
@@ -106,6 +105,7 @@ const vnSelectRef = ref();
 const isLoading = ref(false);
 const dataRef = ref();
 const lastVal = ref();
+const useURL = computed(() => $props.url);
 const noOneText = t('globals.noOne');
 const noOneOpt = ref({
     [optionValue.value]: false,
@@ -122,9 +122,6 @@ const selectValue = computed({
     },
 });
 
-const useURL = computed(() => $props.url);
-
-const $attrs = useAttrs();
 const arrayDataKey =
     $props.dataKey ?? ($props.url?.length > 0 ? $props.url : $attrs.name ?? $attrs.label);
 
diff --git a/test/cypress/integration/entry/myEntry.spec.js b/test/cypress/integration/entry/myEntry.spec.js
index dca74dec2..79b7dc8b7 100644
--- a/test/cypress/integration/entry/myEntry.spec.js
+++ b/test/cypress/integration/entry/myEntry.spec.js
@@ -11,7 +11,7 @@ describe('EntryMy when is supplier', () => {
 
     it('should open buyLabel when is supplier', () => {
         cy.get(
-            '[to="/null/2"] > .q-card > .column > .q-btn > .q-btn__content > .q-icon'
+            '.q-table__container>.q-table__grid-content >span:nth-child(4 )> .q-card > .column > .q-btn > .q-btn__content > .q-icon'
         ).click();
         cy.get('.q-card__actions > .q-btn').click();
         cy.window().its('open').should('be.called');
-- 
2.40.1