From 9212b5876da999909e19325ca618746d09b3c4c6 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 22 Feb 2023 11:39:39 +0530
Subject: [PATCH 01/11] feat(gui): add shortcuts to navigate bw rows in
 expanded form

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet/expanded-form/index.vue        | 19 +++++++++++++++++++
 .../useSelectedCellKeyupListener/index.ts     |  6 +++---
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 20eae1d22b..586a38adcb 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -22,6 +22,7 @@ import {
   useVModel,
   watch,
 } from '#imports'
+import { useActiveKeyupListener } from '~/composables/useSelectedCellKeyupListener'
 import type { Row } from '~/lib'
 
 interface Props {
@@ -157,6 +158,24 @@ const cellWrapperEl = ref<HTMLElement>()
 onMounted(() => {
   setTimeout(() => (cellWrapperEl.value?.querySelector('input,select,textarea') as HTMLInputElement)?.focus())
 })
+
+// attach keyboard listeners to switch between rows
+// using alt + left/right arrow keys
+useActiveKeyupListener(
+  isExpanded,
+  (e: KeyboardEvent) => {
+    if (!e.altKey) return
+
+    if (e.key === 'ArrowLeft') {
+      e.stopPropagation()
+      emits('prev')
+    } else if (e.key === 'ArrowRight') {
+      e.stopPropagation()
+      emits('next')
+    }
+  },
+  { immediate: true },
+)
 </script>
 
 <script lang="ts">
diff --git a/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts b/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts
index da1eb4fa0a..b6e5d8a78c 100644
--- a/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts
+++ b/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts
@@ -1,15 +1,15 @@
 import { isClient } from '@vueuse/core'
-import type { Ref } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
 
 function useSelectedCellKeyupListener(
-  selected: Ref<boolean>,
+  selected: Ref<boolean | undefined> | ComputedRef<boolean | undefined>,
   handler: (e: KeyboardEvent) => void,
   { immediate = false }: { immediate?: boolean } = {},
 ) {
   if (isClient) {
     watch(
       selected,
-      (nextVal: boolean, _: boolean, cleanup) => {
+      (nextVal: boolean | undefined, _: boolean | undefined, cleanup) => {
         // bind listener when `selected` is truthy
         if (nextVal) {
           document.addEventListener('keydown', handler, true)

From 1914ccc27e11671752c1e1c3617400329d369078 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 22 Feb 2023 12:40:16 +0530
Subject: [PATCH 02/11] feat(gui): add generic component for showing shortcut
 label

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/general/ShortcutLabel.vue      | 56 +++++++++++++++++++
 .../smartsheet/expanded-form/index.vue        |  3 +
 2 files changed, 59 insertions(+)
 create mode 100644 packages/nc-gui/components/general/ShortcutLabel.vue

diff --git a/packages/nc-gui/components/general/ShortcutLabel.vue b/packages/nc-gui/components/general/ShortcutLabel.vue
new file mode 100644
index 0000000000..f748a444ec
--- /dev/null
+++ b/packages/nc-gui/components/general/ShortcutLabel.vue
@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { isMac } from '#imports'
+
+const props = defineProps<{
+  keys: string[]
+}>()
+
+const isMacOs = isMac()
+
+const getLabel = (key: string) => {
+  if (isMacOs) {
+    switch (key.toLowerCase()) {
+      case 'alt':
+        return '⌥'
+      case 'shift':
+        return '⇧'
+      case 'meta':
+        return '⌘'
+      case 'control':
+        return '⌃'
+      case 'enter':
+        return '↩'
+    }
+  }
+  switch (key.toLowerCase()) {
+    case 'arrowup':
+      return '↑'
+    case 'arrowdown':
+      return '↓'
+    case 'arrowleft':
+      return '←'
+    case 'arrowright':
+      return '→'
+  }
+
+  return key
+}
+</script>
+
+<template>
+  <div class="nc-shortcut-label-wrapper">
+    <div v-for="(key, index) in props.keys" :key="index" class="nc-shortcut-label">
+      <span>{{ getLabel(key) }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.nc-shortcut-label-wrapper {
+  @apply flex gap-1;
+}
+
+.nc-shortcut-label {
+  @apply text-[.6rem] text-gray-200 bg-gray-200 bg-opacity-20 rounded  px-1;
+}
+</style>
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 586a38adcb..da5b36b31c 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -203,12 +203,15 @@ export default {
             <a-tooltip placement="bottom">
               <template #title>
                 {{ $t('labels.nextRow') }}
+                <GeneralShortcutLabel class="justify-center" :keys="['Alt', '←']" />
               </template>
               <MdiChevronRight class="cursor-pointer nc-next-arrow" @click="onNext" />
             </a-tooltip>
             <a-tooltip placement="bottom">
               <template #title>
                 {{ $t('labels.prevRow') }}
+
+                <GeneralShortcutLabel class="justify-center" :keys="['Alt', '→']" />
               </template>
               <MdiChevronLeft class="cursor-pointer nc-prev-arrow" @click="$emit('prev')" />
             </a-tooltip>

From cfae8f4fb0515f341a5e92e519e4d2d49deace43 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 22 Feb 2023 14:08:35 +0530
Subject: [PATCH 03/11] feat(gui): add new shortcuts in shortcut list component

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/general/ShortcutLabel.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/general/ShortcutLabel.vue b/packages/nc-gui/components/general/ShortcutLabel.vue
index f748a444ec..2e861cd948 100644
--- a/packages/nc-gui/components/general/ShortcutLabel.vue
+++ b/packages/nc-gui/components/general/ShortcutLabel.vue
@@ -17,6 +17,7 @@ const getLabel = (key: string) => {
       case 'meta':
         return '⌘'
       case 'control':
+      case 'ctrl':
         return '⌃'
       case 'enter':
         return '↩'
@@ -51,6 +52,6 @@ const getLabel = (key: string) => {
 }
 
 .nc-shortcut-label {
-  @apply text-[.6rem] text-gray-200 bg-gray-200 bg-opacity-20 rounded  px-1;
+  @apply text-[0.7rem] leading-6 min-w-5 min-h-5 text-center relative z-0 after:(content-[''] left-0 top-0 -z-1 bg-current opacity-10 absolute w-full h-full rounded) px-1;
 }
 </style>

From d55086cf89321710243a456e1258276220c5761e Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 22 Feb 2023 15:48:23 +0530
Subject: [PATCH 04/11] refactor(gui): update description

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/dlg/KeyboardShortcuts.vue      | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/packages/nc-gui/components/dlg/KeyboardShortcuts.vue b/packages/nc-gui/components/dlg/KeyboardShortcuts.vue
index 8079cd6bf8..d3cf53b122 100644
--- a/packages/nc-gui/components/dlg/KeyboardShortcuts.vue
+++ b/packages/nc-gui/components/dlg/KeyboardShortcuts.vue
@@ -15,6 +15,9 @@ const dialogShow = computed({
 const renderCmdOrCtrlKey = () => {
   return isMac() ? '⌘' : 'CTRL'
 }
+const renderAltOrOptlKey = () => {
+  return isMac() ? '⌥' : 'ALT'
+}
 
 const shortcutList = [
   {
@@ -197,6 +200,22 @@ const shortcutList = [
         keys: [renderCmdOrCtrlKey(), 'Enter'],
         behaviour: 'Save current expanded form item',
       },
+      {
+        keys: [renderAltOrOptlKey(), '→'],
+        behaviour: 'Switch to next row',
+      },
+      {
+        keys: [renderAltOrOptlKey(), '←'],
+        behaviour: 'Switch to previous row',
+      },
+      {
+        keys: [renderAltOrOptlKey(), 'S'],
+        behaviour: 'Save current expanded form item',
+      },
+      {
+        keys: [renderAltOrOptlKey(), 'N'],
+        behaviour: 'Create a new row',
+      },
     ],
   },
 ]

From cab8ff5fff05bb0940cf685ca7b18e49378bd42c Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 22 Feb 2023 17:50:04 +0530
Subject: [PATCH 05/11] feat(gui): save expanded form and new expanded form
 shortcuts

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet/expanded-form/Header.vue       |  4 +-
 .../smartsheet/expanded-form/index.vue        | 93 +++++++++++++++++--
 .../composables/useExpandedFormStore.ts       |  3 +
 3 files changed, 88 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
index 80ed48f93d..f453f8f8db 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
@@ -18,7 +18,7 @@ const route = useRoute()
 
 const { meta, isSqlView } = useSmartsheetStoreOrThrow()
 
-const { commentsDrawer, displayValue, primaryKey, save: _save, loadRow } = useExpandedFormStoreOrThrow()
+const { commentsDrawer, displayValue, primaryKey, save: _save, loadRow, saveRowAndStay } = useExpandedFormStoreOrThrow()
 
 const { isNew, syncLTARRefs, state } = useSmartsheetRowStoreOrThrow()
 
@@ -26,8 +26,6 @@ const { isUIAllowed } = useUIPermission()
 
 const reloadTrigger = inject(ReloadRowDataHookInj, createEventHook())
 
-const saveRowAndStay = ref(0)
-
 const save = async () => {
   if (isNew.value) {
     const data = await _save(state.value)
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index da5b36b31c..54be1938c0 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -65,7 +65,16 @@ const isKanban = inject(IsKanbanInj, ref(false))
 
 provide(MetaInj, meta)
 
-const { commentsDrawer, changedColumns, state: rowState, isNew, loadRow, save } = useProvideExpandedFormStore(meta, row)
+const {
+  commentsDrawer,
+  changedColumns,
+  state: rowState,
+  isNew,
+  loadRow,
+  saveRowAndStay,
+  syncLTARRefs,
+  save,
+} = useProvideExpandedFormStore(meta, row)
 
 const duplicatingRowInProgress = ref(false)
 
@@ -159,13 +168,23 @@ onMounted(() => {
   setTimeout(() => (cellWrapperEl.value?.querySelector('input,select,textarea') as HTMLInputElement)?.focus())
 })
 
+const addNewRow = () => {
+  setTimeout(async () => {
+    row.value = {
+      row: {},
+      oldRow: {},
+      rowMeta: { new: true },
+    }
+    isExpanded.value = true
+  }, 500);
+}
+
 // attach keyboard listeners to switch between rows
 // using alt + left/right arrow keys
 useActiveKeyupListener(
   isExpanded,
-  (e: KeyboardEvent) => {
+  async (e: KeyboardEvent) => {
     if (!e.altKey) return
-
     if (e.key === 'ArrowLeft') {
       e.stopPropagation()
       emits('prev')
@@ -173,6 +192,60 @@ useActiveKeyupListener(
       e.stopPropagation()
       emits('next')
     }
+    // on alt + s save record
+    else if (e.code === 'KeyS') {
+      e.stopPropagation()
+      e.preventDefault()
+      if (isNew.value) {
+        const data = await save(rowState.value)
+        await syncLTARRefs(data)
+        reloadHook?.trigger(null)
+      } else {
+        await save()
+        reloadHook?.trigger(null)
+      }
+      if (!saveRowAndStay.value) {
+        onClose()
+      }
+      // on alt + n create new record
+    } else if (e.code === 'KeyN') {
+      e.stopPropagation()
+      e.preventDefault()
+
+      if (changedColumns.value.size > 0) {
+        await Modal.confirm({
+          title: 'Do you want to save the changes?',
+          okText: 'Save',
+          cancelText: 'Discard',
+          onOk: async () => {
+            await save()
+            reloadHook?.trigger(null)
+            addNewRow()
+          },
+          onCancel: () => {
+            addNewRow()
+          },
+        })
+      } else if (isNew.value) {
+         await Modal.confirm({
+          title: 'Do you want to save the record?',
+          okText: 'Save',
+          cancelText: 'Discard',
+          onOk: async () => {
+            const data = await save(rowState.value)
+            await syncLTARRefs(data)
+            reloadHook?.trigger(null)
+            addNewRow()
+          },
+          onCancel: () => {
+            addNewRow()
+          },
+        })
+      } else {
+        addNewRow()
+      }
+
+    }
   },
   { immediate: true },
 )
@@ -202,18 +275,19 @@ export default {
           <template v-if="props.showNextPrevIcons">
             <a-tooltip placement="bottom">
               <template #title>
-                {{ $t('labels.nextRow') }}
+                {{ $t('labels.prevRow') }}
+
                 <GeneralShortcutLabel class="justify-center" :keys="['Alt', '←']" />
               </template>
-              <MdiChevronRight class="cursor-pointer nc-next-arrow" @click="onNext" />
+              <MdiChevronRight class="cursor-pointer nc-next-arrow" @click="$emit('next')" />
             </a-tooltip>
+
             <a-tooltip placement="bottom">
               <template #title>
-                {{ $t('labels.prevRow') }}
-
+                {{ $t('labels.nextRow') }}
                 <GeneralShortcutLabel class="justify-center" :keys="['Alt', '→']" />
               </template>
-              <MdiChevronLeft class="cursor-pointer nc-prev-arrow" @click="$emit('prev')" />
+              <MdiChevronRight class="cursor-pointer nc-next-arrow" @click="$emit('next')" />
             </a-tooltip>
           </template>
           <div class="w-[500px] mx-auto">
@@ -237,7 +311,8 @@ export default {
                 :ref="i ? null : (el) => (cellWrapperEl = el)"
                 class="!bg-white rounded px-1 min-h-[35px] flex items-center mt-2 relative"
               >
-                <LazySmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :row="row" :column="col" />
+                <LazySmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :row="row"
+                                           :column="col" />
 
                 <LazySmartsheetCell
                   v-else
diff --git a/packages/nc-gui/composables/useExpandedFormStore.ts b/packages/nc-gui/composables/useExpandedFormStore.ts
index d0df5b65d0..15ab03bf89 100644
--- a/packages/nc-gui/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui/composables/useExpandedFormStore.ts
@@ -38,6 +38,8 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
 
   const commentsDrawer = ref(false)
 
+  const saveRowAndStay = ref(0)
+
   const changedColumns = ref(new Set<string>())
 
   const { project } = useProject()
@@ -243,6 +245,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
     changedColumns,
     loadRow,
     primaryKey,
+    saveRowAndStay
   }
 }, 'expanded-form-store')
 

From db13b1d186a551666c4fd8f10a47ddf5bd4a5583 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 22 Feb 2023 17:53:58 +0530
Subject: [PATCH 06/11] fix(gui): remove focus from input if focused

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/smartsheet/expanded-form/index.vue   | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 54be1938c0..dd603f795a 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -194,6 +194,9 @@ useActiveKeyupListener(
     }
     // on alt + s save record
     else if (e.code === 'KeyS') {
+      // remove focus from the active input if any
+      document.activeElement?.blur()
+
       e.stopPropagation()
       e.preventDefault()
       if (isNew.value) {
@@ -209,6 +212,10 @@ useActiveKeyupListener(
       }
       // on alt + n create new record
     } else if (e.code === 'KeyN') {
+
+      // remove focus from the active input if any
+      document.activeElement?.blur()
+
       e.stopPropagation()
       e.preventDefault()
 

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 07/11] 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
   }
 }

From 3fde0f0c366e30c51e647404889e591e712e6775 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 23 Feb 2023 00:39:44 +0530
Subject: [PATCH 08/11] chore(gui): lint

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

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 2af1a31391..50cd2efcd1 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -118,7 +118,7 @@ const {
   selectedAllRecords,
   removeRowIfNew,
   navigateToSiblingRow,
-  getExpandedRowIndex
+  getExpandedRowIndex,
 } = useViewData(meta, view, xWhere)
 
 const { getMeta } = useMetas()
@@ -981,10 +981,10 @@ const closeAddColumnDropdown = () => {
         :row-id="routeQuery.rowId"
         :view="view"
         show-next-prev-icons
-        @next="navigateToSiblingRow(NavigateDir.NEXT)"
-        @prev="navigateToSiblingRow(NavigateDir.PREV)"
         :first-row="getExpandedRowIndex() === 0"
         :last-row="getExpandedRowIndex() === paginationData.totalRows - 1"
+        @next="navigateToSiblingRow(NavigateDir.NEXT)"
+        @prev="navigateToSiblingRow(NavigateDir.PREV)"
       />
     </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 10ffc75056..68c47152cb 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -178,7 +178,7 @@ const addNewRow = () => {
       rowMeta: { new: true },
     }
     isExpanded.value = true
-  }, 500);
+  }, 500)
 }
 
 // attach keyboard listeners to switch between rows
@@ -200,7 +200,7 @@ useActiveKeyupListener(
       document.activeElement?.blur()
 
       e.stopPropagation()
-      e.preventDefault()
+
       if (isNew.value) {
         const data = await save(rowState.value)
         await syncLTARRefs(data)
@@ -214,12 +214,8 @@ useActiveKeyupListener(
       }
       // on alt + n create new record
     } else if (e.code === 'KeyN') {
-
-      // remove focus from the active input if any
-      document.activeElement?.blur()
-
-      e.stopPropagation()
-      e.preventDefault()
+      // remove focus from the active input if any to avoid unwanted input
+      ;(document.activeElement as HTMLInputElement)?.blur?.()
 
       if (changedColumns.value.size > 0) {
         await Modal.confirm({
@@ -236,7 +232,7 @@ useActiveKeyupListener(
           },
         })
       } else if (isNew.value) {
-         await Modal.confirm({
+        await Modal.confirm({
           title: 'Do you want to save the record?',
           okText: 'Save',
           cancelText: 'Discard',
@@ -253,7 +249,6 @@ useActiveKeyupListener(
       } else {
         addNewRow()
       }
-
     }
   },
   { immediate: true },
@@ -282,7 +277,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" v-if="!props.firstRow">
+            <a-tooltip v-if="!props.firstRow" placement="bottom">
               <template #title>
                 {{ $t('labels.prevRow') }}
 
@@ -291,7 +286,7 @@ export default {
               <MdiChevronRight class="cursor-pointer nc-next-arrow" @click="$emit('next')" />
             </a-tooltip>
 
-            <a-tooltip placement="bottom" v-if="!props.lastRow">
+            <a-tooltip v-if="!props.lastRow" placement="bottom">
               <template #title>
                 {{ $t('labels.nextRow') }}
                 <GeneralShortcutLabel class="justify-center" :keys="['Alt', '→']" />
@@ -320,8 +315,7 @@ export default {
                 :ref="i ? null : (el) => (cellWrapperEl = el)"
                 class="!bg-white rounded px-1 min-h-[35px] flex items-center mt-2 relative"
               >
-                <LazySmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :row="row"
-                                           :column="col" />
+                <LazySmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :row="row" :column="col" />
 
                 <LazySmartsheetCell
                   v-else
diff --git a/packages/nc-gui/composables/useExpandedFormStore.ts b/packages/nc-gui/composables/useExpandedFormStore.ts
index 15ab03bf89..79f4590c30 100644
--- a/packages/nc-gui/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui/composables/useExpandedFormStore.ts
@@ -245,7 +245,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
     changedColumns,
     loadRow,
     primaryKey,
-    saveRowAndStay
+    saveRowAndStay,
   }
 }, 'expanded-form-store')
 
diff --git a/packages/nc-gui/composables/useViewData.ts b/packages/nc-gui/composables/useViewData.ts
index ba16ef240d..b55c7bcbbe 100644
--- a/packages/nc-gui/composables/useViewData.ts
+++ b/packages/nc-gui/composables/useViewData.ts
@@ -477,7 +477,6 @@ export function useViewData(
     }
   }
 
-
   // get current expanded row index
   function getExpandedRowIndex() {
     return formattedData.value.findIndex(
@@ -552,6 +551,6 @@ export function useViewData(
     removeRowIfNew,
     navigateToSiblingRow,
     deleteRowById,
-    getExpandedRowIndex
+    getExpandedRowIndex,
   }
 }

From f392ebdff731701d0c8f0dbdbff1fa4419ebdfcf Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 23 Feb 2023 23:52:52 +0530
Subject: [PATCH 09/11] fix(gui): skip unsaved records while switching between
 rows

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/smartsheet/Grid.vue | 2 +-
 packages/nc-gui/composables/useViewData.ts     | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 50cd2efcd1..d358804fa9 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -982,7 +982,7 @@ const closeAddColumnDropdown = () => {
         :view="view"
         show-next-prev-icons
         :first-row="getExpandedRowIndex() === 0"
-        :last-row="getExpandedRowIndex() === paginationData.totalRows - 1"
+        :last-row="getExpandedRowIndex() === data.length - 1"
         @next="navigateToSiblingRow(NavigateDir.NEXT)"
         @prev="navigateToSiblingRow(NavigateDir.PREV)"
       />
diff --git a/packages/nc-gui/composables/useViewData.ts b/packages/nc-gui/composables/useViewData.ts
index b55c7bcbbe..cd2ba8dde9 100644
--- a/packages/nc-gui/composables/useViewData.ts
+++ b/packages/nc-gui/composables/useViewData.ts
@@ -490,6 +490,11 @@ export function useViewData(
     // calculate next row index based on direction
     let siblingRowIndex = expandedRowIndex + (dir === NavigateDir.NEXT ? 1 : -1)
 
+    // if unsaved row skip it
+    while (formattedData.value[siblingRowIndex]?.rowMeta?.new) {
+      siblingRowIndex = siblingRowIndex + (dir === NavigateDir.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

From 70c39f782ff8204dbc8db35acf490a2c05a50653 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 8 Mar 2023 11:26:42 +0530
Subject: [PATCH 10/11] fix: missing prev row icon

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/smartsheet/expanded-form/index.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 68c47152cb..06bdb792b3 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -283,7 +283,7 @@ export default {
 
                 <GeneralShortcutLabel class="justify-center" :keys="['Alt', '←']" />
               </template>
-              <MdiChevronRight class="cursor-pointer nc-next-arrow" @click="$emit('next')" />
+              <MdiChevronLeft class="cursor-pointer nc-prev-arrow" @click="$emit('prev')" />
             </a-tooltip>
 
             <a-tooltip v-if="!props.lastRow" placement="bottom">
@@ -291,7 +291,7 @@ export default {
                 {{ $t('labels.nextRow') }}
                 <GeneralShortcutLabel class="justify-center" :keys="['Alt', '→']" />
               </template>
-              <MdiChevronRight class="cursor-pointer nc-next-arrow" @click="$emit('next')" />
+              <MdiChevronRight class="cursor-pointer nc-next-arrow" @click="onNext" />
             </a-tooltip>
           </template>
           <div class="w-[500px] mx-auto">

From cbadeca21239ca2f1a7c4a261c11b96aefaaa8f5 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 8 Mar 2023 11:46:12 +0530
Subject: [PATCH 11/11] fix: on new row creation reset LTAR values

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/smartsheet/expanded-form/index.vue    | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 06bdb792b3..f72807f0cf 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -43,6 +43,8 @@ const props = defineProps<Props>()
 
 const emits = defineEmits(['update:modelValue', 'cancel', 'next', 'prev'])
 
+const key = ref(0)
+
 const { t } = useI18n()
 
 const row = ref(props.row)
@@ -177,6 +179,8 @@ const addNewRow = () => {
       oldRow: {},
       rowMeta: { new: true },
     }
+    rowState.value = {}
+    key.value++
     isExpanded.value = true
   }, 500)
 }
@@ -273,7 +277,7 @@ export default {
   >
     <SmartsheetExpandedFormHeader :view="props.view" @cancel="onClose" @duplicate-row="onDuplicateRow" />
 
-    <div class="!bg-gray-100 rounded flex-1">
+    <div :key="key" class="!bg-gray-100 rounded flex-1">
       <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">