refs #7136 perf: arrayData

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

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"