refs #7136 feat: paginate

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 },

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"