feat: refs #8110 #8110 apply pagination

src/pages/Item/Card/ItemDiary.vue

@@ -36,17 +36,13 @@ const itemBalances = ref([]);
 const warehouseFk = ref(null);
 const _showWhatsBeforeInventory = ref(false);
 const inventoriedDate = ref(null);
-const pageSize = 50;
-const lastPage = ref(0);
-const loading = ref(false);
-const pagination = {
-    rowsPerPage: 0,
-};
-
-const nextPage = ref(1);
-
-const rows = ref([]);
-const tableRef = ref(null);
+const loading = ref(true);
+const pagination = ref({
+    rowsPerPage: 5,
+    sortBy: 'desc',
+    descending: false,
+    page: 1,
+});
 
 const columns = computed(() => [
     {
@@ -107,24 +103,6 @@ const columns = computed(() => [
     },
 ]);
 
-function onScroll(data) {
-    const { to, ref } = data;
-    if (!tableRef.value) tableRef.value = ref;
-    const lastIndex = rows.value.length - 1;
-    if (loading.value !== true && nextPage.value < lastPage.value && to === lastIndex) {
-        loading.value = true;
-        nextPage.value++;
-        sliceRows();
-        nextTick(() => {
-            ref.refresh();
-            loading.value = false;
-        });
-    }
-}
-function sliceRows() {
-    rows.value = itemBalances.value.slice(0, pageSize * nextPage.value);
-}
-
 const showWhatsBeforeInventory = computed({
     get: () => _showWhatsBeforeInventory.value,
     set: (val) => {
@@ -133,11 +111,10 @@ const showWhatsBeforeInventory = computed({
         else itemsBalanceFilter.where.date = inventoriedDate.value ?? new Date();
     },
 });
-function handleOnFetch(data) {
+async function handleOnFetch(data) {
     itemBalances.value = data;
     if (data.length < 1) return;
-    lastPage.value = Math.ceil(data.length / pageSize);
-    sliceRows();
+    await scrollToToday();
 }
 
 const fetchItemBalances = async () => await itemBalancesRef.value.fetch();
@@ -158,7 +135,9 @@ const scrollToToday = async () => {
     const todayIndex = itemBalances.value.findIndex((item) =>
         date.isSameDate(today.toISOString(), item.shipped)
     );
-    if (todayIndex > -1) tableRef.value.scrollTo(todayIndex);
+    if (todayIndex > -1)
+        pagination.value.page = Math.ceil(todayIndex / pagination.value.rowsPerPage);
+    loading.value = false;
 };
 
 const originTypeMap = {
@@ -196,7 +175,6 @@ onMounted(async () => {
     const { data } = await axios.get('Configs/findOne');
     inventoriedDate.value = data.inventoried;
     await fetchItemBalances();
-    await scrollToToday();
 });
 
 onUnmounted(() => (stateStore.rightDrawer = false));
@@ -208,6 +186,9 @@ watch(
         itemBalancesRef.value.fetch();
     }
 );
+const pagesNumber = computed(() =>
+    Math.ceil(itemBalances.value.length / pagination.value.rowsPerPage)
+);
 </script>
 
 <template>
@@ -254,15 +235,21 @@ watch(
         <div id="st-actions"></div>
     </QToolbar>
     <QPage class="column items-center q-pa-md">
+        <div class="row justify-center">
+            <QPagination
+                v-model="pagination.page"
+                :max="pagesNumber"
+                size="sm"
+                input
+                ref="paginationRef"
+            />
+        </div>
         <QTable
-            :rows="rows"
+            :loading="loading"
+            :rows="itemBalances"
             :columns="columns"
             class="full-width q-mt-md"
-            :no-data-label="t('globals.noResults')"
-            :loading="loading"
-            virtual-scroll
-            :pagination="pagination"
-            @virtual-scroll="onScroll"
+            v-model:pagination="pagination"
         >
             <template #body-cell-claim="{ row }">
                 <QTd @click.stop>