From 326bc4ea2f1ef602b8ecd2cfca57a241c91901aa Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Tue, 30 Jul 2024 11:00:12 +0700
Subject: [PATCH] fix: infiniteScroll

---
 src/modules/03_logs/components/LogTable.vue | 45 +++++++++++++--------
 1 file changed, 29 insertions(+), 16 deletions(-)

diff --git a/src/modules/03_logs/components/LogTable.vue b/src/modules/03_logs/components/LogTable.vue
index 72c76d1c..72adfdd4 100644
--- a/src/modules/03_logs/components/LogTable.vue
+++ b/src/modules/03_logs/components/LogTable.vue
@@ -147,23 +147,36 @@ const visibleColumns = ref<string[]>([
   "dataDiff",
 ]);
 
-function handleScroll(event: any) {
-  const element = event.target;
-  if (element.scrollHeight - element.scrollTop === element.clientHeight) {
-    storeData.fetchLog(
-      {
-        size: size.value ?? undefined,
-        search: inputSearch.value ?? undefined,
-        systemName: systemName.value ?? undefined,
-        searchAfter: searchAfter.value ?? undefined,
-        date: date.value,
-      },
-      true
-    );
-    setTimeout(() => {}, 500);
-  }
+function handleScroll() {
+  let scrollFlag = false;
+  return async (e: Event) => {
+    if (scrollFlag) return;
+
+    const element = e.target as HTMLElement;
+
+    if (
+      Math.abs(
+        element.scrollHeight - element.clientHeight - element.scrollTop
+      ) <= 1
+    ) {
+      scrollFlag = true;
+      await storeData.fetchLog(
+        {
+          size: size.value ?? undefined,
+          search: inputSearch.value ?? undefined,
+          systemName: systemName.value ?? undefined,
+          searchAfter: searchAfter.value ?? undefined,
+          date: date.value,
+        },
+        true
+      );
+      scrollFlag = false;
+    }
+  };
 }
 
+const infiniteScroll = handleScroll();
+
 function selectedDate() {
   logData.value = [];
   searchAfter.value = undefined;
@@ -277,7 +290,7 @@ onMounted(() => {
       </div>
     </div>
     <div class="q-pa-md">
-      <div style="max-height: 70vh; overflow: scroll" @scroll="handleScroll">
+      <div style="max-height: 70vh; overflow: scroll" @scroll="infiniteScroll">
         <d-table
           ref="table"
           :columns="columns"