feat(gui): navigation option to switch between rows in expanded form

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components.d.ts

@@ -138,6 +138,7 @@ declare module '@vue/runtime-core' {
     MdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
     MdiChevronLeft: typeof import('~icons/mdi/chevron-left')['default']
     MdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
+    MdiChevronUp: typeof import('~icons/mdi/chevron-up')['default']
     MdiClose: typeof import('~icons/mdi/close')['default']
     MdiCloseBox: typeof import('~icons/mdi/close-box')['default']
     MdiCloseCircle: typeof import('~icons/mdi/close-circle')['default']

packages/nc-gui/components/smartsheet/Grid.vue

@@ -638,6 +638,50 @@ const closeAddColumnDropdown = () => {
   columnOrder.value = null
   addColumnDropdown.value = false
 }
+
+enum NavDir {
+  NEXT,
+  PREV,
+}
+
+const navigateToSiblingRow = async (dir: NavDir) => {
+  // get current expanded row index
+  const expandedRowIndex = data.value.findIndex(
+    (row) => routeQuery.rowId === extractPkFromRow(row.row, meta.value?.columns as ColumnType[]),
+  )
+
+  // calculate next row index based on direction
+  let siblingRowIndex = expandedRowIndex + (dir === NavDir.NEXT ? 1 : -1)
+
+  const currentPage = paginationData?.value?.page || 1
+
+  // if next row index is less than 0, go to previous page and point to last element
+  if (siblingRowIndex < 0) {
+    // if first page, do nothing
+    if (currentPage === 1) return
+
+    await changePage(currentPage - 1)
+    siblingRowIndex = data.value.length - 1
+
+    // if next row index is greater than total rows in current view
+    // then load next page of data and set next row index to 0
+  } else if (siblingRowIndex >= data.value.length) {
+    siblingRowIndex = 0
+    await changePage(currentPage + 1)
+  }
+
+  // extract the row id of the sibling row
+  const rowId = extractPkFromRow(data.value[siblingRowIndex].row, meta.value?.columns as ColumnType[])
+
+  if (rowId) {
+    router.push({
+      query: {
+        ...routeQuery,
+        rowId,
+      },
+    })
+  }
+}
 </script>
 
 <template>
@@ -805,8 +849,8 @@ const closeAddColumnDropdown = () => {
                         :column="columnObj"
                         :active="activeCell.col === colIndex && activeCell.row === rowIndex"
                         :row="row"
-                        @navigate="onNavigate"
                         :read-only="readOnly"
+                        @navigate="onNavigate"
                       />
 
                       <LazySmartsheetCell
@@ -818,11 +862,11 @@ const closeAddColumnDropdown = () => {
                         "
                         :row-index="rowIndex"
                         :active="activeCell.col === colIndex && activeCell.row === rowIndex"
+                        :read-only="readOnly"
                         @update:edit-enabled="editEnabled = $event"
                         @save="updateOrSaveRow(row, columnObj.title, state)"
                         @navigate="onNavigate"
                         @cancel="editEnabled = false"
-                        :read-only="readOnly"
                       />
                     </div>
                   </SmartsheetTableDataCell>
@@ -918,6 +962,8 @@ const closeAddColumnDropdown = () => {
         :meta="meta"
         :row-id="routeQuery.rowId"
         :view="view"
+        @next="navigateToSiblingRow(NavDir.NEXT)"
+        @prev="navigateToSiblingRow(NavDir.PREV)"
       />
     </Suspense>
   </div>

packages/nc-gui/components/smartsheet/expanded-form/Header.vue

@@ -155,5 +155,3 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
     </a-dropdown-button>
   </div>
 </template>
-
-<style scoped></style>

packages/nc-gui/components/smartsheet/expanded-form/index.vue

@@ -149,7 +149,10 @@ export default {
   >
     <SmartsheetExpandedFormHeader :view="props.view" @cancel="onClose" />
 
-    <div class="!bg-gray-100 rounded flex-1">
+    <div class="!bg-gray-100 rounded flex-1 relative">
+      <MdiChevronRight class="cursor-pointer nc-next-arrow" @click="$emit('next')" />
+      <MdiChevronLeft class="cursor-pointer nc-prev-arrow" @click="$emit('prev')" />
+
       <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">
           <div class="w-[500px] mx-auto">
@@ -216,4 +219,15 @@ export default {
   max-height: max(calc(100vh - 65px), 600px);
   height: max-content !important;
 }
+
+.nc-prev-arrow,
+.nc-next-arrow {
+  @apply absolute opacity-70 rounded-full transition-transform transition-background transition-opacity transform bg-white hover:(bg-gray-200) active:(scale-125 opacity-100) text-xl;
+}
+.nc-prev-arrow {
+  @apply left-4 top-4;
+}
+.nc-next-arrow {
+  @apply right-4 top-4;
+}
 </style>