From 0fca6c85a0017c58530ac5f6db636fca0b949d1f Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 14 Sep 2022 20:12:27 +0800
Subject: [PATCH] wip(nc-gui): kanban scrolling logic

---
 .../nc-gui/components/smartsheet/Kanban.vue     | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/Kanban.vue b/packages/nc-gui/components/smartsheet/Kanban.vue
index 1151eacf48..ea3beaab5e 100644
--- a/packages/nc-gui/components/smartsheet/Kanban.vue
+++ b/packages/nc-gui/components/smartsheet/Kanban.vue
@@ -144,6 +144,21 @@ 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 kanbanListRef = (kanbanListElement: HTMLElement) => {
+  if (kanbanListElement) {
+    kanbanListElement.removeEventListener('scroll', kanbanListScrollHandler)
+    kanbanListElement.addEventListener('scroll', kanbanListScrollHandler)
+  }
+}
+
 openNewRecordFormHook?.on(async () => {
   const newRow = await addEmptyRow()
   expandForm(newRow)
@@ -178,7 +193,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 class="nc-kanban-list h-full overflow-y-auto">
+                <div :ref="kanbanListRef" class="nc-kanban-list h-full overflow-y-auto" :data-id="stack.id">
                   <Draggable
                     v-model="formattedData[stack.title]"
                     item-key="row.Id"