perf: filterURL

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)"

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