From 3e57a845745fc1fb5e8ed8db481d428bfeeb43fd Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Thu, 2 Nov 2023 07:39:09 +0000
Subject: [PATCH 1/5] fix: Added pagination shortcuts for grid

---
 .../components/smartsheet/grid/Table.vue      | 12 +++
 .../smartsheet/grid/usePaginationShortcuts.ts | 73 +++++++++++++++++++
 2 files changed, 85 insertions(+)
 create mode 100644 packages/nc-gui/components/smartsheet/grid/usePaginationShortcuts.ts

diff --git a/packages/nc-gui/components/smartsheet/grid/Table.vue b/packages/nc-gui/components/smartsheet/grid/Table.vue
index e802b92e5f..ce02bff9c7 100644
--- a/packages/nc-gui/components/smartsheet/grid/Table.vue
+++ b/packages/nc-gui/components/smartsheet/grid/Table.vue
@@ -5,6 +5,7 @@ import type { ColumnReqType, ColumnType, PaginatedType, TableType, ViewType } fr
 import { UITypes, ViewTypes, isLinksOrLTAR, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
 import { useColumnDrag } from './useColumnDrag'
 
+import usePaginationShortcuts from './usePaginationShortcuts'
 import {
   ActiveViewInj,
   CellUrlDisableOverlayInj,
@@ -187,6 +188,11 @@ const { onDrag, onDragStart, draggedCol, dragColPlaceholderDomRef, toBeDroppedCo
   gridWrapper,
 })
 
+const { onLeft, onRight, onUp, onDown } = usePaginationShortcuts({
+  paginationDataRef,
+  changePage: changePage as any,
+})
+
 // #Variables
 const addColumnDropdown = ref(false)
 
@@ -1204,6 +1210,12 @@ const loaderText = computed(() => {
     }
   }
 })
+
+// Keyboard shortcuts for pagination
+onKeyStroke('ArrowLeft', onLeft)
+onKeyStroke('ArrowRight', onRight)
+onKeyStroke('ArrowUp', onUp)
+onKeyStroke('ArrowDown', onDown)
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/smartsheet/grid/usePaginationShortcuts.ts b/packages/nc-gui/components/smartsheet/grid/usePaginationShortcuts.ts
new file mode 100644
index 0000000000..27ba2910e5
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/grid/usePaginationShortcuts.ts
@@ -0,0 +1,73 @@
+import axios from 'axios'
+import type { PaginatedType } from 'nocodb-sdk'
+
+const usePaginationShortcuts = ({
+  changePage,
+  paginationDataRef,
+}: {
+  changePage: (page: number) => Promise<void> | undefined
+  paginationDataRef: Ref<PaginatedType | undefined>
+}) => {
+  const { isViewDataLoading } = storeToRefs(useViewsStore())
+  const getTotalPages = () => {
+    return Math.ceil(paginationDataRef.value!.totalRows! / paginationDataRef.value!.pageSize!)
+  }
+
+  const changePageWithLoading = async (page: number) => {
+    isViewDataLoading.value = true
+    try {
+      await changePage?.(page)
+      isViewDataLoading.value = false
+    } catch (e) {
+      if (axios.isCancel(e)) return
+
+      isViewDataLoading.value = false
+    }
+  }
+
+  const onLeft = async (e: KeyboardEvent) => {
+    if (!e.altKey) return
+    e.preventDefault()
+
+    const page = paginationDataRef.value!.page! - 1
+    if (page < 1) return
+
+    await changePageWithLoading(page)
+  }
+
+  const onRight = async (e: KeyboardEvent) => {
+    if (!e.altKey) return
+    e.preventDefault()
+
+    const page = paginationDataRef.value!.page! + 1
+
+    if (page > getTotalPages()) return
+
+    await changePageWithLoading(page)
+  }
+
+  const onDown = async (e: KeyboardEvent) => {
+    if (!e.altKey) return
+    e.preventDefault()
+
+    const page = 1
+
+    await changePageWithLoading(page)
+  }
+
+  const onUp = async (e: KeyboardEvent) => {
+    if (!e.altKey) return
+    e.preventDefault()
+
+    await changePageWithLoading(getTotalPages())
+  }
+
+  return {
+    onLeft,
+    onRight,
+    onUp,
+    onDown,
+  }
+}
+
+export default usePaginationShortcuts

From ed92ef01d6c68a3058bd1c615886bbecec89d21f Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Thu, 2 Nov 2023 07:39:10 +0000
Subject: [PATCH 2/5] docs: keyboard shortcuts updated

---
 .../docs/020.getting-started/040.keyboard-shortcuts.md        | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/noco-docs/docs/020.getting-started/040.keyboard-shortcuts.md b/packages/noco-docs/docs/020.getting-started/040.keyboard-shortcuts.md
index 7d259af2d3..f1f9b4f636 100644
--- a/packages/noco-docs/docs/020.getting-started/040.keyboard-shortcuts.md
+++ b/packages/noco-docs/docs/020.getting-started/040.keyboard-shortcuts.md
@@ -84,6 +84,10 @@ To navigate within ⌘+K menu,
 |       `⌘` + `c` | Copy cell contents                                                                   |
 |       `⌘` + `v` | Paste copied contents                                                                |
 |     `alt` + `r` | Inserts new record in grid view                                                      |
+|     `alt` + `↑` | Jump to first page in this view                                                      |
+|     `alt` + `↓` | Jump to last page in this view                                                       |
+|     `alt` + `←` | Jump to previous page in this view                                                   |
+|     `alt` + `→` | Jump to next page in this view                                                       |
 
 
 ## Field type specific shortcuts

From b6ab0f6cc0bfbe5a44366e3c0de23b41bcd85c2b Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Thu, 2 Nov 2023 07:39:10 +0000
Subject: [PATCH 3/5] docs: keyboard shorcut typo fixed

---
 .../docs/020.getting-started/040.keyboard-shortcuts.md        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/noco-docs/docs/020.getting-started/040.keyboard-shortcuts.md b/packages/noco-docs/docs/020.getting-started/040.keyboard-shortcuts.md
index f1f9b4f636..dacf0133c4 100644
--- a/packages/noco-docs/docs/020.getting-started/040.keyboard-shortcuts.md
+++ b/packages/noco-docs/docs/020.getting-started/040.keyboard-shortcuts.md
@@ -84,8 +84,8 @@ To navigate within ⌘+K menu,
 |       `⌘` + `c` | Copy cell contents                                                                   |
 |       `⌘` + `v` | Paste copied contents                                                                |
 |     `alt` + `r` | Inserts new record in grid view                                                      |
-|     `alt` + `↑` | Jump to first page in this view                                                      |
-|     `alt` + `↓` | Jump to last page in this view                                                       |
+|     `alt` + `↑` | Jump to last page in this view                                                       |
+|     `alt` + `↓` | Jump to first page in this view                                                      |
 |     `alt` + `←` | Jump to previous page in this view                                                   |
 |     `alt` + `→` | Jump to next page in this view                                                       |
 

From 17c3c5e5e6cf48da3b2478c4d3471a0ae5458847 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Thu, 2 Nov 2023 07:39:10 +0000
Subject: [PATCH 4/5] fix: Added tooltip to pagination button for shortcuts and
 updated in shortcuts info modal

---
 .../components/dlg/KeyboardShortcuts.vue      |  16 +++
 packages/nc-gui/components/nc/Pagination.vue  | 113 +++++++++++-------
 .../components/smartsheet/Pagination.vue      |   8 ++
 3 files changed, 93 insertions(+), 44 deletions(-)

diff --git a/packages/nc-gui/components/dlg/KeyboardShortcuts.vue b/packages/nc-gui/components/dlg/KeyboardShortcuts.vue
index d3cf53b122..88bd41c35d 100644
--- a/packages/nc-gui/components/dlg/KeyboardShortcuts.vue
+++ b/packages/nc-gui/components/dlg/KeyboardShortcuts.vue
@@ -52,6 +52,22 @@ const shortcutList = [
   {
     title: 'Grid View',
     shortcuts: [
+      {
+        keys: [renderAltOrOptlKey(), '←'],
+        behaviour: 'Navigate to previous page',
+      },
+      {
+        keys: [renderAltOrOptlKey(), '→'],
+        behaviour: 'Navigate to next page',
+      },
+      {
+        keys: [renderAltOrOptlKey(), '↑'],
+        behaviour: 'Navigate to last page',
+      },
+      {
+        keys: [renderAltOrOptlKey(), '↓'],
+        behaviour: 'Navigate to first page',
+      },
       {
         keys: [renderCmdOrCtrlKey(), '←'],
         behaviour: 'Jump to leftmost column in this row',
diff --git a/packages/nc-gui/components/nc/Pagination.vue b/packages/nc-gui/components/nc/Pagination.vue
index 3efe511692..ec8bb6b2d3 100644
--- a/packages/nc-gui/components/nc/Pagination.vue
+++ b/packages/nc-gui/components/nc/Pagination.vue
@@ -1,10 +1,16 @@
 <script setup lang="ts">
+import NcTooltip from '~/components/nc/Tooltip.vue'
+
 const props = defineProps<{
   current: number
   total: number
   pageSize: number
   entityName?: string
   mode?: 'simple' | 'full'
+  prevPageTooltip?: string
+  nextPageTooltip?: string
+  firstPageTooltip?: string
+  lastPageTooltip?: string
 }>()
 
 const emits = defineEmits(['update:current', 'update:pageSize'])
@@ -51,28 +57,38 @@ const pagesList = computed(() => {
 
 <template>
   <div class="nc-pagination flex flex-row items-center gap-x-2">
-    <NcButton
-      v-if="mode === 'full'"
-      v-e="[`a:pagination:${entityName}:first-page`]"
-      class="first-page"
-      type="secondary"
-      size="small"
-      :disabled="current === 1"
-      @click="goToFirstPage"
-    >
-      <GeneralIcon icon="doubleLeftArrow" />
-    </NcButton>
-
-    <NcButton
-      v-e="[`a:pagination:${entityName}:prev-page`]"
-      class="prev-page"
-      type="secondary"
-      size="small"
-      :disabled="current === 1"
-      @click="changePage({ increase: false })"
-    >
-      <GeneralIcon icon="arrowLeft" />
-    </NcButton>
+    <component :is="props.firstPageTooltip && mode === 'full' ? NcTooltip : 'div'" v-if="mode === 'full'">
+      <template v-if="props.firstPageTooltip" #title>
+        {{ props.firstPageTooltip }}
+      </template>
+      <NcButton
+        v-e="[`a:pagination:${entityName}:first-page`]"
+        class="first-page"
+        type="secondary"
+        size="small"
+        :disabled="current === 1"
+        @click="goToFirstPage"
+      >
+        <GeneralIcon icon="doubleLeftArrow" />
+      </NcButton>
+    </component>
+
+    <component :is="props.prevPageTooltip && mode === 'full' ? NcTooltip : 'div'">
+      <template v-if="props.prevPageTooltip" #title>
+        {{ props.prevPageTooltip }}
+      </template>
+      <NcButton
+        v-e="[`a:pagination:${entityName}:prev-page`]"
+        class="prev-page"
+        type="secondary"
+        size="small"
+        :disabled="current === 1"
+        @click="changePage({ increase: false })"
+      >
+        <GeneralIcon icon="arrowLeft" />
+      </NcButton>
+    </component>
+
     <div v-if="!isMobileMode" class="text-gray-600">
       <a-select v-model:value="current" class="!mr-[2px]" :options="pagesList">
         <template #suffixIcon>
@@ -85,28 +101,37 @@ const pagesList = computed(() => {
       </span>
     </div>
 
-    <NcButton
-      v-e="[`a:pagination:${entityName}:next-page`]"
-      class="next-page"
-      type="secondary"
-      size="small"
-      :disabled="current === totalPages"
-      @click="changePage({ increase: true })"
-    >
-      <GeneralIcon icon="arrowRight" />
-    </NcButton>
-
-    <NcButton
-      v-if="mode === 'full'"
-      v-e="[`a:pagination:${entityName}:last-page`]"
-      class="last-page"
-      type="secondary"
-      size="small"
-      :disabled="current === totalPages"
-      @click="goToLastPage"
-    >
-      <GeneralIcon icon="doubleRightArrow" />
-    </NcButton>
+    <component :is="props.nextPageTooltip && mode === 'full' ? NcTooltip : 'div'">
+      <template v-if="props.nextPageTooltip" #title>
+        {{ props.nextPageTooltip }}
+      </template>
+      <NcButton
+        v-e="[`a:pagination:${entityName}:next-page`]"
+        class="next-page"
+        type="secondary"
+        size="small"
+        :disabled="current === totalPages"
+        @click="changePage({ increase: true })"
+      >
+        <GeneralIcon icon="arrowRight" />
+      </NcButton>
+    </component>
+
+    <component :is="props.lastPageTooltip && mode === 'full' ? NcTooltip : 'div'" v-if="mode === 'full'">
+      <template v-if="props.lastPageTooltip" #title>
+        {{ props.lastPageTooltip }}
+      </template>
+      <NcButton
+        v-e="[`a:pagination:${entityName}:last-page`]"
+        class="last-page"
+        type="secondary"
+        size="small"
+        :disabled="current === totalPages"
+        @click="goToLastPage"
+      >
+        <GeneralIcon icon="doubleRightArrow" />
+      </NcButton>
+    </component>
   </div>
 </template>
 
diff --git a/packages/nc-gui/components/smartsheet/Pagination.vue b/packages/nc-gui/components/smartsheet/Pagination.vue
index 3c3de49788..56fb99f042 100644
--- a/packages/nc-gui/components/smartsheet/Pagination.vue
+++ b/packages/nc-gui/components/smartsheet/Pagination.vue
@@ -62,6 +62,10 @@ const page = computed({
 })
 
 const isRTLLanguage = computed(() => isRtlLang(locale.value as keyof typeof Language))
+
+const renderAltOrOptlKey = () => {
+  return isMac() ? '⌥' : 'ALT'
+}
 </script>
 
 <template>
@@ -107,6 +111,10 @@ const isRTLLanguage = computed(() => isRtlLang(locale.value as keyof typeof Lang
         :class="{ 'rtl-pagination': isRTLLanguage }"
         :total="+count"
         entity-name="grid"
+        :prev-page-tooltip="`${renderAltOrOptlKey()}+←`"
+        :next-page-tooltip="`${renderAltOrOptlKey()}+→`"
+        :first-page-tooltip="`${renderAltOrOptlKey()}+↓`"
+        :last-page-tooltip="`${renderAltOrOptlKey()}+↑`"
       />
       <div v-else class="mx-auto flex items-center mt-n1" style="max-width: 250px">
         <span class="text-xs" style="white-space: nowrap"> Change page:</span>

From 8de3547bba3e1e84bdfe476a658405ca5c01b0a5 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Thu, 2 Nov 2023 07:39:10 +0000
Subject: [PATCH 5/5] fix: Added tooltip to pagination button for shortcuts and
 updated in shortcuts info modal

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

diff --git a/packages/nc-gui/components/dlg/KeyboardShortcuts.vue b/packages/nc-gui/components/dlg/KeyboardShortcuts.vue
index 88bd41c35d..cc9ec08a89 100644
--- a/packages/nc-gui/components/dlg/KeyboardShortcuts.vue
+++ b/packages/nc-gui/components/dlg/KeyboardShortcuts.vue
@@ -54,19 +54,19 @@ const shortcutList = [
     shortcuts: [
       {
         keys: [renderAltOrOptlKey(), '←'],
-        behaviour: 'Navigate to previous page',
+        behaviour: 'Jump to previous page in this view',
       },
       {
         keys: [renderAltOrOptlKey(), '→'],
-        behaviour: 'Navigate to next page',
+        behaviour: 'Jump to next page in this view',
       },
       {
         keys: [renderAltOrOptlKey(), '↑'],
-        behaviour: 'Navigate to last page',
+        behaviour: 'Jump to last page in this view',
       },
       {
         keys: [renderAltOrOptlKey(), '↓'],
-        behaviour: 'Navigate to first page',
+        behaviour: 'Jump to first page in this view',
       },
       {
         keys: [renderCmdOrCtrlKey(), '←'],