From 93858b018d1fd32efb96fc2646ba51952079472e Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 15 Sep 2022 12:58:02 +0800
Subject: [PATCH] feat(nc-gui): infinite scroll to load

---
 packages/nc-gui/components/smartsheet/Kanban.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Kanban.vue b/packages/nc-gui/components/smartsheet/Kanban.vue
index ea3beaab5e..7be67fc4d7 100644
--- a/packages/nc-gui/components/smartsheet/Kanban.vue
+++ b/packages/nc-gui/components/smartsheet/Kanban.vue
@@ -33,6 +33,7 @@ const expandedFormRowState = ref<Record<string, any>>()
 
 const {
   loadKanbanData,
+  loadMoreKanbanData,
   loadKanbanMeta,
   kanbanMetaData,
   formattedData,
@@ -46,6 +47,8 @@ const {
 
 const { isUIAllowed } = useUIPermission()
 
+const { appInfo } = $(useGlobal())
+
 provide(IsFormInj, ref(false))
 provide(IsGalleryInj, ref(false))
 provide(IsGridInj, ref(false))
@@ -146,9 +149,10 @@ async function onMove(event: any, stackKey: string) {
 
 const kanbanListScrollHandler = async (e: any) => {
   if (e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight) {
-    const stackId = e.target.getAttribute('data-id')
-    // TODO: load 25 more records
-    console.log(stackId)
+    const stackTitle = e.target.getAttribute('data-stack-title')
+    const pageSize = appInfo.defaultLimit || 25
+    const page = Math.ceil(formattedData.value[stackTitle].length / pageSize)
+    await loadMoreKanbanData(stackTitle, { offset: (page - 1) * pageSize })
   }
 }
 
@@ -193,7 +197,7 @@ openNewRecordFormHook?.on(async () => {
                 <div class="nc-kanban-stack-head text-slate-500 font-bold">{{ stack.title }}</div>
               </a-layout-header>
               <a-layout-content class="overflow-y-hidden">
-                <div :ref="kanbanListRef" class="nc-kanban-list h-full overflow-y-auto" :data-id="stack.id">
+                <div :ref="kanbanListRef" class="nc-kanban-list h-full overflow-y-auto" :data-stack-title="stack.title">
                   <Draggable
                     v-model="formattedData[stack.title]"
                     item-key="row.Id"