From 77e3796bbb8e57946345a0a88826c86a2ebabded Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 23 Feb 2023 00:32:53 +0530
Subject: [PATCH] fix(gui): hide prev icon for first row and next icon for last
 row

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/smartsheet/Grid.vue       |  3 +++
 .../components/smartsheet/expanded-form/index.vue    |  6 ++++--
 packages/nc-gui/composables/useViewData.ts           | 12 +++++++++---
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 87965126a7..2af1a31391 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -118,6 +118,7 @@ const {
   selectedAllRecords,
   removeRowIfNew,
   navigateToSiblingRow,
+  getExpandedRowIndex
 } = useViewData(meta, view, xWhere)
 
 const { getMeta } = useMetas()
@@ -982,6 +983,8 @@ const closeAddColumnDropdown = () => {
         show-next-prev-icons
         @next="navigateToSiblingRow(NavigateDir.NEXT)"
         @prev="navigateToSiblingRow(NavigateDir.PREV)"
+        :first-row="getExpandedRowIndex() === 0"
+        :last-row="getExpandedRowIndex() === paginationData.totalRows - 1"
       />
     </Suspense>
   </div>
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index dd603f795a..10ffc75056 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -35,6 +35,8 @@ interface Props {
   rowId?: string
   view?: ViewType
   showNextPrevIcons?: boolean
+  firstRow?: boolean
+  lastRow?: boolean
 }
 
 const props = defineProps<Props>()
@@ -280,7 +282,7 @@ export default {
       <div class="flex h-full nc-form-wrapper items-stretch min-h-[max(70vh,100%)]">
         <div class="flex-1 overflow-auto scrollbar-thin-dull nc-form-fields-container relative">
           <template v-if="props.showNextPrevIcons">
-            <a-tooltip placement="bottom">
+            <a-tooltip placement="bottom" v-if="!props.firstRow">
               <template #title>
                 {{ $t('labels.prevRow') }}
 
@@ -289,7 +291,7 @@ export default {
               <MdiChevronRight class="cursor-pointer nc-next-arrow" @click="$emit('next')" />
             </a-tooltip>
 
-            <a-tooltip placement="bottom">
+            <a-tooltip placement="bottom" v-if="!props.lastRow">
               <template #title>
                 {{ $t('labels.nextRow') }}
                 <GeneralShortcutLabel class="justify-center" :keys="['Alt', '→']" />
diff --git a/packages/nc-gui/composables/useViewData.ts b/packages/nc-gui/composables/useViewData.ts
index 2681c7e7d7..ba16ef240d 100644
--- a/packages/nc-gui/composables/useViewData.ts
+++ b/packages/nc-gui/composables/useViewData.ts
@@ -477,11 +477,16 @@ export function useViewData(
     }
   }
 
-  const navigateToSiblingRow = async (dir: NavigateDir) => {
-    // get current expanded row index
-    const expandedRowIndex = formattedData.value.findIndex(
+
+  // get current expanded row index
+  function getExpandedRowIndex() {
+    return formattedData.value.findIndex(
       (row: Row) => routeQuery.rowId === extractPkFromRow(row.row, meta.value?.columns as ColumnType[]),
     )
+  }
+
+  const navigateToSiblingRow = async (dir: NavigateDir) => {
+    const expandedRowIndex = getExpandedRowIndex()
 
     // calculate next row index based on direction
     let siblingRowIndex = expandedRowIndex + (dir === NavigateDir.NEXT ? 1 : -1)
@@ -547,5 +552,6 @@ export function useViewData(
     removeRowIfNew,
     navigateToSiblingRow,
     deleteRowById,
+    getExpandedRowIndex
   }
 }