feat: refs #8110 #8110 apply onScroll

src/pages/Item/Card/ItemDiary.vue

@@ -36,6 +36,17 @@ 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 columns = computed(() => [
     {
@@ -96,6 +107,24 @@ 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) => {
@@ -104,6 +133,12 @@ const showWhatsBeforeInventory = computed({
         else itemsBalanceFilter.where.date = inventoriedDate.value ?? new Date();
     },
 });
+function handleOnFetch(data) {
+    itemBalances.value = data;
+    if (data.length < 1) return;
+    lastPage.value = Math.ceil(data.length / pageSize);
+    sliceRows();
+}
 
 const fetchItemBalances = async () => await itemBalancesRef.value.fetch();
 
@@ -120,15 +155,10 @@ const scrollToToday = async () => {
     await nextTick();
     const today = Date.vnNew();
     today.setHours(0, 0, 0, 0);
-    const todayCell = document.querySelector(`td[data-date="${today.toISOString()}"]`);
+    const todayIndex = itemBalances.value.findIndex((item) =>
-    if (todayCell) {
+        date.isSameDate(today.toISOString(), item.shipped)
-        todayCell.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    );
-    }
+    if (todayIndex > -1) tableRef.value.scrollTo(todayIndex);
-};
-
-const formatDateForAttribute = (dateValue) => {
-    if (dateValue instanceof Date) return date.formatDate(dateValue, 'YYYY-MM-DD');
-    return dateValue;
 };
 
 const originTypeMap = {
@@ -185,7 +215,7 @@ watch(
         ref="itemBalancesRef"
         url="Items/getBalance"
         :filter="itemsBalanceFilter"
-        @on-fetch="(data) => (itemBalances = data)"
+        @on-fetch="handleOnFetch"
     />
     <FetchData
         url="Warehouses"
@@ -225,10 +255,14 @@ watch(
     </QToolbar>
     <QPage class="column items-center q-pa-md">
         <QTable
-            :rows="itemBalances"
+            :rows="rows"
             :columns="columns"
-            class="full-width q-mt-md"
+            class="full-width q-mt-md table-header-sticky"
             :no-data-label="t('globals.noResults')"
+            :loading="loading"
+            virtual-scroll
+            :pagination="pagination"
+            @virtual-scroll="onScroll"
         >
             <template #body-cell-claim="{ row }">
                 <QTd @click.stop>
@@ -247,7 +281,7 @@ watch(
                 </QTd>
             </template>
             <template #body-cell-date="{ row }">
-                <QTd @click.stop :data-date="formatDateForAttribute(row.shipped)">
+                <QTd @click.stop>
                     <QBadge
                         v-bind="getBadgeAttrs(row.shipped)"
                         class="q-ma-none"