From 17d7ebfe71615d6f11d7c2a6c33fbb45ff48ac32 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 13 Feb 2024 06:22:09 +0000
Subject: [PATCH] feat(nc-gui): change page on tab or arrowDown key press

---
 .../components/smartsheet/grid/Table.vue      | 60 ++++++++++++++++++-
 .../smartsheet/grid/usePaginationShortcuts.ts |  1 +
 2 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/grid/Table.vue b/packages/nc-gui/components/smartsheet/grid/Table.vue
index 67f4b53d4f..8fcee428ea 100644
--- a/packages/nc-gui/components/smartsheet/grid/Table.vue
+++ b/packages/nc-gui/components/smartsheet/grid/Table.vue
@@ -208,7 +208,7 @@ const { onDrag, onDragStart, onDragEnd, draggedCol, dragColPlaceholderDomRef, to
   gridWrapper,
 })
 
-const { onLeft, onRight, onUp, onDown } = usePaginationShortcuts({
+const { onLeft, onRight, onUp, onDown, changePageWithLoading } = usePaginationShortcuts({
   paginationDataRef,
   changePage: changePage as any,
 })
@@ -558,7 +558,7 @@ const {
   clearSelectedRangeOfCells,
   makeEditable,
   scrollToCell,
-  (e: KeyboardEvent) => {
+  async (e: KeyboardEvent) => {
     // ignore navigating if picker(Date, Time, DateTime, Year)
     // or single/multi select options is open
     const activePickerOrDropdownEl = document.querySelector(
@@ -601,6 +601,62 @@ const {
         editEnabled.value = false
         return true
       }
+    } else if (e.key === 'Tab') {
+      if (activeCell.row === dataRef.value.length - 1 && activeCell.col === fields.value?.length - 1) {
+        e.preventDefault()
+        editEnabled.value = false
+
+        if (paginationDataRef.value?.isLastPage && isAddingEmptyRowAllowed.value) {
+          addEmptyRow()
+          activeCell.row = dataRef.value.length - 1
+          activeCell.col = 0
+          resetSelectedRange()
+
+          await nextTick()
+          ;(document.querySelector('td.cell.active') as HTMLInputElement | HTMLTextAreaElement)?.scrollIntoView({
+            behavior: 'smooth',
+          })
+
+          return true
+        } else if (!paginationDataRef.value?.isLastPage) {
+          await changePageWithLoading(paginationDataRef.value?.page! + 1)
+
+          await nextTick()
+
+          activeCell.row = 0
+          activeCell.col = 0
+
+          return true
+        }
+      }
+    } else if (e.key === 'ArrowDown') {
+      if (activeCell.row === dataRef.value.length - 1) {
+        e.preventDefault()
+        editEnabled.value = false
+
+        if (paginationDataRef.value?.isLastPage && isAddingEmptyRowAllowed.value) {
+          addEmptyRow()
+          activeCell.row = dataRef.value.length - 1
+          activeCell.col = 0
+          resetSelectedRange()
+
+          await nextTick()
+          ;(document.querySelector('td.cell.active') as HTMLInputElement | HTMLTextAreaElement)?.scrollIntoView({
+            behavior: 'smooth',
+          })
+
+          return true
+        } else if (!paginationDataRef.value?.isLastPage) {
+          await changePageWithLoading(paginationDataRef.value?.page! + 1)
+
+          await nextTick()
+
+          activeCell.row = 0
+          activeCell.col = activeCell.col
+
+          return true
+        }
+      }
     }
 
     if (cmdOrCtrl) {
diff --git a/packages/nc-gui/components/smartsheet/grid/usePaginationShortcuts.ts b/packages/nc-gui/components/smartsheet/grid/usePaginationShortcuts.ts
index 9eff4121c4..5a6cbd1b18 100644
--- a/packages/nc-gui/components/smartsheet/grid/usePaginationShortcuts.ts
+++ b/packages/nc-gui/components/smartsheet/grid/usePaginationShortcuts.ts
@@ -75,6 +75,7 @@ const usePaginationShortcuts = ({
     onRight,
     onUp,
     onDown,
+    changePageWithLoading,
   }
 }