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) {
         //

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>

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

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>