Pagination changes

src/components/PaginateData.vue

@@ -45,21 +45,7 @@ const $props = defineProps({
 });
 
 const emit = defineEmits(['onFetch', 'onPaginate']);
-// defineExpose({ refresh });
-
-onMounted(() => {
-    if ($props.autoLoad) paginate();
-});
-
-watch(
-    () => $props.data,
-    () => {
-        rows.value = $props.data;
-    }
-);
-
 const isLoading = ref(false);
-const hasMoreData = ref(false);
 const pagination = ref({
     sortBy: $props.sortBy,
     rowsPerPage: $props.rowsPerPage,
@@ -68,71 +54,50 @@ const pagination = ref({
 
 const arrayData = useArrayData('customers', {
     url: $props.url,
+    filter: $props.filter,
+    where: $props.where,
     limit: $props.rowsPerPage,
+    order: $props.sortBy,
 });
-const rows = arrayData.data;
+const store = arrayData.store;
 
-// async function fetch() {
-//     const { page, rowsPerPage, sortBy } = pagination.value;
+onMounted(() => {
+    if ($props.autoLoad) paginate();
+});
 
-//     if (!$props.url) return;
-
-//     const filter = {
-//         limit: rowsPerPage,
-//         skip: rowsPerPage * (page - 1),
-//     };
-
-//     Object.assign(filter, $props.filter);
-
-//     if ($props.where) filter.where = $props.where;
-//     if ($props.sortBy) filter.order = $props.sortBy;
-//     if ($props.limit) filter.limit = $props.limit;
-
-//     if (sortBy) filter.order = sortBy;
-
-//     arrayData.apply()
-
-//     const { data } = await axios.get($props.url, {
-//         params: { filter },
-//     });
-
-//     isLoading.value = false;
-
-//     return data;
-// }
+watch(
+    () => $props.data,
+    () => {
+        store.data = $props.data;
+    }
+);
 
 async function paginate() {
     const { page, rowsPerPage, sortBy, descending } = pagination.value;
 
     if (!$props.url) return;
 
-    const filter = {
-        limit: rowsPerPage,
-        skip: rowsPerPage * (page - 1),
-    };
+    // const filter = {
+    //     limit: rowsPerPage,
+    //     skip: rowsPerPage * (page - 1),
+    // };
 
-    Object.assign(filter, $props.filter);
+    // Object.assign(filter, $props.filter);
 
-    if ($props.where) filter.where = $props.where;
-    if ($props.sortBy) filter.order = $props.sortBy;
-    if ($props.limit) filter.limit = $props.limit;
+    // if ($props.where) filter.where = $props.where;
+    // if ($props.sortBy) filter.order = $props.sortBy;
+    // if ($props.limit) filter.limit = $props.limit;
 
-    if (sortBy) filter.order = sortBy;
+    // if (sortBy) filter.order = sortBy;
 
-    const data = await arrayData.apply(filter);
+    await arrayData.loadMore();
 
-    if (!data) {
+    if (!arrayData.hasMoreData.value) {
         isLoading.value = false;
         return;
     }
 
-    hasMoreData.value = data.length === rowsPerPage;
-    console.log(hasMoreData.value);
-
-    // if (!rows.value) rows.value = [];
-    // for (const row of data) rows.value.push(row);
-
-    pagination.value.rowsNumber = rows.length;
+    pagination.value.rowsNumber = store.data.length;
     pagination.value.page = page;
     pagination.value.rowsPerPage = rowsPerPage;
     pagination.value.sortBy = sortBy;
@@ -140,48 +105,28 @@ async function paginate() {
 
     isLoading.value = false;
 
-    emit('onFetch', rows);
-    emit('onPaginate', data);
+    emit('onFetch', store.data);
+    emit('onPaginate');
 }
 
-// async function refresh() {
-//     const { rowsPerPage } = pagination.value;
-
-//     const data = await fetch();
-
-//     if (!data) {
-//         isLoading.value = false;
-//         return;
-//     }
-
-//     hasMoreData.value = data.length === rowsPerPage;
-
-//     if (!rows.value) rows.value = [];
-//     rows.value = data;
-
-//     isLoading.value = false;
-
-//     emit('onFetch', rows);
-// }
-
 async function onLoad(...params) {
     const done = params[1];
-    if (!rows || rows.length === 0 || !$props.url) return done(false);
+    if (!store.data || store.data.length === 0 || !$props.url) return done(false);
 
     pagination.value.page = pagination.value.page + 1;
 
     await paginate();
 
-    const endOfPages = !hasMoreData.value;
+    const endOfPages = !arrayData.hasMoreData.value;
     done(endOfPages);
 }
 </script>
 
 <template>
     <q-infinite-scroll @load="onLoad" :offset="offset" class="column items-center">
-        <div v-if="rows" class="card-list q-gutter-y-md">
-            <slot name="body" :rows="rows"></slot>
-            <div v-if="!rows.length && !isLoading" class="info-row q-pa-md text-center">
+        <div v-if="store" class="card-list q-gutter-y-md">
+            <slot name="body" :rows="store.data"></slot>
+            <div v-if="!store.data.length && !isLoading" class="info-row q-pa-md text-center">
                 <h5>
                     {{ t('components.smartCard.noData') }}
                 </h5>
@@ -190,7 +135,7 @@ async function onLoad(...params) {
                 <q-spinner color="orange" size="md" />
             </div>
         </div>
-        <div v-if="!rows" class="card-list q-gutter-y-md">
+        <div v-if="!store" class="card-list q-gutter-y-md">
             <q-card class="card" v-for="$index in $props.rowsPerPage" :key="$index">
                 <q-item v-ripple class="q-pa-none items-start cursor-pointer q-hoverable">
                     <q-item-section class="q-pa-md">

src/composables/useArrayData.js

@@ -1,46 +1,82 @@
+import { ref, onUnmounted } from 'vue';
 import axios from 'axios';
 import { useArrayDataStore } from 'stores/useArrayDataStore';
 
 const arrayDataStore = useArrayDataStore();
-const options = {
-    limit: 10,
-};
 
 export function useArrayData(key, userOptions) {
     if (!key) throw new Error('ArrayData: A key is required to use this composable');
 
-    arrayDataStore.set(key, []);
+    if (!arrayDataStore.get(key)) {
+        arrayDataStore.set(key);
+    }
 
-    const data = arrayDataStore.get(key);
+    const store = arrayDataStore.get(key);
+    const filter = ref({});
+    const userFilter = ref({});
+    const userParams = ref({});
+    const hasMoreData = ref(true);
+    const options = ref({
+        limit: 10,
+        skip: 0,
+    });
+    const page = ref(1);
 
     if (typeof userOptions === 'object') {
-        Object.assign(options, userOptions);
+        Object.assign(options.value, userOptions);
     }
 
-    async function fetch() {
-        if (!options.url) return;
+    // if (typeof userOptions === 'object' && userOptions.filter) {
+    //     Object.assign(filter.value, userOptions.filter);
+    // }
+    onUnmounted(() => {
+        if (arrayDataStore.get(key)) {
+            arrayDataStore.clear(key);
+        }
+    });
 
-        const filter = {
-            limit: options.limit,
+    async function fetch({ append = false }) {
+        if (!options.value.url) return;
+
+        const fetchFilter = {
+            order: options.value.order,
+            limit: options.value.limit,
+            skip: options.value.skip,
         };
 
-        const requestOptions = { params: { filter } };
+        Object.assign(fetchFilter, userFilter.value);
+        filter.value = fetchFilter;
 
-        const response = await axios.get(options.url, requestOptions);
-        for (const row of response.data) data.push(row);
+        const requestOptions = { params: { filter: filter.value } };
+        const response = await axios.get(options.value.url, requestOptions);
 
-        return response.data;
+        const { limit } = filter.value;
+
+        hasMoreData.value = response.data.length === limit;
+
+        if (append === true) {
+            for (const row of response.data) store.data.push(row);
         }
 
-    async function apply(filter) {
-        if (!options.url) return;
+        if (append === false) {
+            store.data = response.data;
+        }
+    }
 
-        const requestOptions = { params: { filter } };
+    async function apply({ filter, params }) {
+        if (filter) userFilter.value = filter;
+        if (params) userParams.value = params;
 
-        const response = await axios.get(options.url, requestOptions);
-        for (const row of response.data) data.push(row);
+        await fetch({ append: false });
+    }
 
-        return response.data;
+    async function loadMore() {
+        if (!hasMoreData.value) return;
+
+        options.value.skip = options.value.limit * (page.value - 1);
+        page.value += 1;
+
+        await fetch({ append: true });
     }
 
     async function refresh() {
@@ -51,6 +87,8 @@ export function useArrayData(key, userOptions) {
         fetch,
         apply,
         refresh,
-        data,
+        loadMore,
+        store,
+        hasMoreData,
     };
 }

src/pages/Customer/CustomerList.vue

@@ -1,24 +1,21 @@
 <script setup>
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
+import TeleportSlot from 'src/components/ui/TeleportSlot.vue';
 import Paginate from 'src/components/PaginateData.vue';
 import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
 
-// import { useArrayData } from 'composables/useArrayData';
+import { useArrayData } from 'composables/useArrayData';
 
 const router = useRouter();
 const quasar = useQuasar();
 const { t } = useI18n();
 
-// const arrayData = useArrayData('customers', {
-//     url: 'Clients',
-// });
-
-// onMounted(async () => {
-//     await arrayData.fetch();
-//     console.log(arrayData.data);
-// });
+const arrayData = useArrayData('customers', {
+    url: 'Clients',
+});
 
 function navigate(id) {
     router.push({ path: `/customer/${id}` });
@@ -32,9 +29,27 @@ function viewSummary(id) {
         },
     });
 }
+
+const search = ref('');
+async function doSearch() {
+    let filter = {};
+    if (search.value != '') {
+        filter = {
+            where: {
+                id: search,
+            },
+        };
+    }
+    await arrayData.apply({ filter });
+}
 </script>
 
 <template>
+    <teleport-slot to="#searchbar">
+        <q-form @submit="doSearch">
+            <q-input v-model="search" label="Search" dense />
+        </q-form>
+    </teleport-slot>
     <q-page class="q-pa-md">
         <paginate url="/Clients" sort-by="id DESC" auto-load>
             <template #body="{ rows }">

src/stores/useArrayDataStore.js

@@ -2,18 +2,23 @@ import { ref } from 'vue';
 import { defineStore } from 'pinia';
 
 export const useArrayDataStore = defineStore('arrayDataStore', () => {
-    const store = ref({});
+    const state = ref({});
 
     function get(key) {
-        return store.value[key];
+        return state.value[key];
     }
 
-    function set(key, data) {
-        store.value[key] = data;
+    function set(key) {
+        state.value[key] = { data: ref([]) };
+    }
+
+    function clear(key) {
+        delete state.value[key];
     }
 
     return {
         get,
         set,
+        clear
     };
 });