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] 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>