From 4a09e2787b5a5f523082a7d9f72e9f1d57cc2310 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 00:39:26 +0530
Subject: [PATCH 1/7] chore(gui-v2): arrow/tab navigation correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet/Grid.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 59a9d45409..a2ccf0fb97 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -42,10 +42,7 @@ const addColumnDropdown = ref(false)
 const contextMenu = ref(false)
 const contextMenuTarget = ref(false)
 
-const visibleColLength = $computed(() => {
-  const cols = fields.value
-  return cols.filter((col) => !isVirtualCol(col)).length
-})
+const visibleColLength = $computed(() => fields.value?.length)
 
 const {
   loadData,

From bf947e8012befab391f1ee11cee54c5ef89e0029 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 01:04:36 +0530
Subject: [PATCH 2/7] fix(gui-v2): cell outline correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet/Grid.vue  | 175 +++++++++---------
 1 file changed, 90 insertions(+), 85 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index a2ccf0fb97..4e99b353f1 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -187,72 +187,74 @@ onKeyStroke(['Tab', 'Shift', 'Enter', 'Delete', 'ArrowDown', 'ArrowUp', 'ArrowLe
       <a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']">
         <table class="xc-row-table nc-grid backgroundColorDefault" @contextmenu.prevent="contextMenu = true">
           <thead>
-            <tr class="group">
-              <th>
-                <div class="flex align-center w-[80px]">
-                  <div class="group-hover:hidden" :class="{ hidden: selectedAllRecords }">#</div>
-                  <div
-                    :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
-                    class="group-hover:flex w-full align-center"
-                  >
-                    <a-checkbox v-model:checked="selectedAllRecords" />
-                    <span class="flex-1" />
-                  </div>
+          <tr class="group">
+            <th>
+              <div class="flex align-center w-[80px]">
+                <div class="group-hover:hidden" :class="{ hidden: selectedAllRecords }">#</div>
+                <div
+                  :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
+                  class="group-hover:flex w-full align-center"
+                >
+                  <a-checkbox v-model:checked="selectedAllRecords" />
+                  <span class="flex-1" />
                 </div>
-              </th>
-              <th
-                v-for="col in fields"
-                :key="col.title"
-                v-xc-ver-resize
-                :data-col="col.id"
-                @xcresize="onresize(col.id, $event)"
-                @xcresizing="onXcResizing(col.title, $event)"
-                @xcresized="resizingCol = null"
-              >
-                <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
-                <SmartsheetHeaderCell v-else :column="col" />
-              </th>
-              <!-- v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('add-column')" -->
-              <th v-t="['c:column:add']" @click="addColumnDropdown = true">
-                <a-dropdown v-model:visible="addColumnDropdown" :trigger="['click']">
-                  <div class="h-full w-full flex align-center justify-center">
-                    <MdiPlusIcon class="text-sm" />
-                  </div>
-                  <template #overlay>
-                    <SmartsheetColumnEditOrAdd @click.stop @cancel="addColumnDropdown = false" />
-                  </template>
-                </a-dropdown>
-              </th>
-            </tr>
+              </div>
+            </th>
+            <th
+              v-for="col in fields"
+              :key="col.title"
+              v-xc-ver-resize
+              :data-col="col.id"
+              @xcresize="onresize(col.id, $event)"
+              @xcresizing="onXcResizing(col.title, $event)"
+              @xcresized="resizingCol = null"
+            >
+              <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
+              <SmartsheetHeaderCell v-else :column="col" />
+            </th>
+            <!-- v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('add-column')" -->
+            <th v-t="['c:column:add']" @click="addColumnDropdown = true">
+              <a-dropdown v-model:visible="addColumnDropdown" :trigger="['click']">
+                <div class="h-full w-full flex align-center justify-center">
+                  <MdiPlusIcon class="text-sm" />
+                </div>
+                <template #overlay>
+                  <SmartsheetColumnEditOrAdd @click.stop @cancel="addColumnDropdown = false" />
+                </template>
+              </a-dropdown>
+            </th>
+          </tr>
           </thead>
           <tbody>
-            <tr v-for="(row, rowIndex) in data" :key="rowIndex" class="nc-grid-row group">
-              <td key="row-index" class="caption nc-grid-cell">
-                <div class="align-center flex w-[80px]">
-                  <div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
-                  <div
-                    :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
-                    class="group-hover:flex w-full align-center"
-                  >
-                    <a-checkbox v-model:checked="row.rowMeta.selected" />
-                    <span class="flex-1" />
-                    <MdiArrowExpandIcon class="text-sm text-pink hidden group-hover:inline-block" />
-                  </div>
+          <tr v-for="(row, rowIndex) in data" :key="rowIndex" class="nc-grid-row group">
+            <td key="row-index" class="caption nc-grid-cell">
+              <div class="align-center flex w-[80px]">
+                <div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
+                <div
+                  :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
+                  class="group-hover:flex w-full align-center"
+                >
+                  <a-checkbox v-model:checked="row.rowMeta.selected" />
+                  <span class="flex-1" />
+                  <MdiArrowExpandIcon class="text-sm text-pink hidden group-hover:inline-block" />
                 </div>
-              </td>
-              <td
-                v-for="(columnObj, colIndex) in fields"
-                :key="rowIndex + columnObj.title"
-                class="cell pointer nc-grid-cell"
-                :class="{
+              </div>
+            </td>
+            <td
+              v-for="(columnObj, colIndex) in fields"
+              :key="rowIndex + columnObj.title"
+              class="cell pointer nc-grid-cell"
+              :class="{
                   active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,
                 }"
-                :data-col="columnObj.id"
-                @click="selectCell(rowIndex, colIndex)"
-                @dblclick="editEnabled = true"
-                @contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"
-              >
-                <SmartsheetVirtualCell v-if="isVirtualCol(columnObj)" v-model="row.row[columnObj.title]" :column="columnObj" />
+              :data-col="columnObj.id"
+              @click="selectCell(rowIndex, colIndex)"
+              @dblclick="editEnabled = true"
+              @contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"
+            >
+              <div class="w-full h-full">
+                <SmartsheetVirtualCell v-if="isVirtualCol(columnObj)" v-model="row.row[columnObj.title]"
+                                       :column="columnObj" />
 
                 <SmartsheetCell
                   v-else
@@ -261,34 +263,36 @@ onKeyStroke(['Tab', 'Shift', 'Enter', 'Delete', 'ArrowDown', 'ArrowUp', 'ArrowLe
                   :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
                   @save="updateOrSaveRow(row, columnObj.title)"
                 />
-              </td>
-            </tr>
+              </div>
+            </td>
+          </tr>
 
-            <tr v-if="!isLocked">
-              <td
-                v-t="['c:row:add:grid-bottom']"
-                :colspan="visibleColLength + 1"
-                class="text-left pointer nc-grid-add-new-cell"
-                @click="addEmptyRow()"
-              >
-                <a-tooltip top left>
-                  <div class="w-min flex align-center">
-                    <MdiPlusIcon class="text-pint-500 text-xs" />
-                    <span class="ml-1 caption grey--text">
+          <tr v-if="!isLocked">
+            <td
+              v-t="['c:row:add:grid-bottom']"
+              :colspan="visibleColLength + 1"
+              class="text-left pointer nc-grid-add-new-cell"
+              @click="addEmptyRow()"
+            >
+              <a-tooltip top left>
+                <div class="w-min flex align-center">
+                  <MdiPlusIcon class="text-pint-500 text-xs" />
+                  <span class="ml-1 caption grey--text">
                       {{ $t('activity.addRow') }}
                     </span>
-                  </div>
-                  <template #title>
-                    <span class="caption"> Add new row</span>
-                  </template>
-                </a-tooltip>
-              </td>
-            </tr>
+                </div>
+                <template #title>
+                  <span class="caption"> Add new row</span>
+                </template>
+              </a-tooltip>
+            </td>
+          </tr>
           </tbody>
         </table>
         <template #overlay>
           <div class="bg-white shadow" @click="contextMenu = false">
-            <div v-if="contextMenuTarget" class="nc-menu-item" @click="deleteRow(contextMenuTarget.row)">Delete row</div>
+            <div v-if="contextMenuTarget" class="nc-menu-item" @click="deleteRow(contextMenuTarget.row)">Delete row
+            </div>
             <div class="nc-menu-item" @click="deleteSelectedRows">Delete all selected rows</div>
             <div v-if="contextMenuTarget" class="nc-menu-item" @click="clearCell(contextMenuTarget)">Clear cell</div>
             <div v-if="contextMenuTarget" class="nc-menu-item" @click="addEmptyRow(contextMenuTarget.row + 1)">
@@ -315,13 +319,14 @@ onKeyStroke(['Tab', 'Shift', 'Enter', 'Delete', 'ArrowDown', 'ArrowUp', 'ArrowLe
     min-height: 41px !important;
     height: 41px !important;
     position: relative;
-    padding: 0 5px;
+    //padding: 0 5px;
 
-    & > * {
+    & > div {
+      overflow: hidden;
       @apply flex align-center h-auto;
+      padding: 0 5px;
     }
 
-    overflow: hidden;
   }
 
   table,
@@ -357,7 +362,7 @@ onKeyStroke(['Tab', 'Shift', 'Enter', 'Delete', 'ArrowDown', 'ArrowUp', 'ArrowLe
   }
 
   td.active::before {
-    background: #0040bc /*var(--v-primary-base)*/;
+    background: #0040bc;
     opacity: 0.1;
   }
 }

From 92cdc641192172996d6ecb4d5b7964e7b4921a0b Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 01:34:20 +0530
Subject: [PATCH 3/7] feat(gui-v2): enter key navigation

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet/Cell.vue  |  23 ++-
 .../nc-gui-v2/components/smartsheet/Grid.vue  | 127 +++++++-----
 .../components/smartsheet/VirtualCell.vue     | 188 +-----------------
 packages/nc-gui-v2/lib/enums.ts               |   5 +
 4 files changed, 107 insertions(+), 236 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index fccce1ed79..b103ca1842 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -4,6 +4,7 @@ import type { ColumnType } from 'nocodb-sdk'
 import { provide, toRef } from 'vue'
 import { computed, useColumn, useDebounceFn, useVModel } from '#imports'
 import { ColumnInj, EditModeInj } from '~/context'
+import { NavigateDir } from '~/lib'
 
 interface Props {
   column: ColumnType
@@ -17,7 +18,7 @@ interface Emits {
 
 const { column, ...props } = defineProps<Props>()
 
-const emit = defineEmits(['update:modelValue', 'save'])
+const emit = defineEmits(['update:modelValue', 'save', 'navigate'])
 
 provide(ColumnInj, column)
 
@@ -25,6 +26,7 @@ provide(EditModeInj, toRef(props, 'editEnabled'))
 
 let changed = $ref(false)
 const syncValue = useDebounceFn(function () {
+  changed = false
   emit('save')
 }, 1000)
 
@@ -59,6 +61,7 @@ const vModel = computed({
         syncValue()
       } else if (!isManualSaved) {
         emit('save')
+        changed = true
       }
     }
   },
@@ -87,10 +90,26 @@ const {
   isPercent,
   isPhoneNumber,
 } = useColumn(column)
+
+const syncAndNavigate = (dir: NavigateDir) => {
+  if (changed) {
+    emit('save')
+    changed = false
+  }
+  emit('navigate', dir)
+}
 </script>
 
 <template>
-  <div class="nc-cell" @keydown.stop.left @keydown.stop.right @keydown.stop.up @keydown.stop.down>
+  <div
+    class="nc-cell"
+    @keydown.stop.left
+    @keydown.stop.right
+    @keydown.stop.up
+    @keydown.stop.down
+    @keydown.stop.enter.exact="syncAndNavigate(NavigateDir.NEXT)"
+    @keydown.stop.shift.enter.exact="syncAndNavigate(NavigateDir.PREV)"
+  >
     <CellTextArea v-if="isTextArea" v-model="vModel" />
     <CellCheckbox v-else-if="isBoolean" v-model="vModel" />
     <CellAttachment v-else-if="isAttachment" v-model="vModel" />
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 4e99b353f1..ecff0198e1 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { isVirtualCol } from 'nocodb-sdk'
 import {
-  Row,
   inject,
   onKeyStroke,
   onMounted,
@@ -22,8 +21,9 @@ import {
   PaginationDataInj,
   ReloadViewDataHookInj,
 } from '~/context'
-import MdiPlusIcon from '~icons/mdi/plus'
+import { NavigateDir } from '~/lib'
 import MdiArrowExpandIcon from '~icons/mdi/arrow-expand'
+import MdiPlusIcon from '~icons/mdi/plus'
 
 const meta = inject(MetaInj)
 const view = inject(ActiveViewInj)
@@ -128,57 +128,78 @@ const clearCell = async (ctx: { row: number; col: number }) => {
 
 /** handle keypress events */
 onKeyStroke(['Tab', 'Shift', 'Enter', 'Delete', 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'], async (e: KeyboardEvent) => {
-  if (selected.row !== null && selected.col !== null) {
-    /** on tab key press navigate through cells */
-    switch (e.key) {
-      case 'Tab':
-        e.preventDefault()
-        if (e.shiftKey) {
-          if (selected.col > 0) {
-            selected.col--
-          } else if (selected.row > 0) {
-            selected.row--
-            selected.col = visibleColLength - 1
-          }
-        } else {
-          if (selected.col < visibleColLength - 1) {
-            selected.col++
-          } else if (selected.row < data.value.length - 1) {
-            selected.row++
-            selected.col = 0
-          }
+  if (selected.row === null || selected.col === null) return
+  /** on tab key press navigate through cells */
+  switch (e.key) {
+    case 'Tab':
+      e.preventDefault()
+      if (e.shiftKey) {
+        if (selected.col > 0) {
+          selected.col--
+        } else if (selected.row > 0) {
+          selected.row--
+          selected.col = visibleColLength - 1
         }
-        break
-      /** on enter key press make cell editable */
-      case 'Enter':
-        e.preventDefault()
-        editEnabled = true
-        break
-      /** on delete key press clear cell */
-      case 'Delete':
-        e.preventDefault()
-        await clearCell(selected as { row: number; col: number })
-        break
-      /** on arrow key press navigate through cells */
-      case 'ArrowRight':
-        e.preventDefault()
-        if (selected.col < visibleColLength - 1) selected.col++
-        break
-      case 'ArrowLeft':
-        e.preventDefault()
-        if (selected.col > 0) selected.col--
-        break
-      case 'ArrowUp':
-        e.preventDefault()
-        if (selected.row > 0) selected.row--
-        break
-      case 'ArrowDown':
-        e.preventDefault()
-        if (selected.row < data.value.length - 1) selected.row++
-        break
-    }
+      } else {
+        if (selected.col < visibleColLength - 1) {
+          selected.col++
+        } else if (selected.row < data.value.length - 1) {
+          selected.row++
+          selected.col = 0
+        }
+      }
+      break
+    /** on enter key press make cell editable */
+    case 'Enter':
+      e.preventDefault()
+      editEnabled = true
+      break
+    /** on delete key press clear cell */
+    case 'Delete':
+      e.preventDefault()
+      await clearCell(selected as { row: number; col: number })
+      break
+    /** on arrow key press navigate through cells */
+    case 'ArrowRight':
+      e.preventDefault()
+      if (selected.col < visibleColLength - 1) selected.col++
+      break
+    case 'ArrowLeft':
+      e.preventDefault()
+      if (selected.col > 0) selected.col--
+      break
+    case 'ArrowUp':
+      e.preventDefault()
+      if (selected.row > 0) selected.row--
+      break
+    case 'ArrowDown':
+      e.preventDefault()
+      if (selected.row < data.value.length - 1) selected.row++
+      break
   }
 })
+
+const onNavigate = (dir: NavigateDir) => {
+  if (selected.row === null || selected.col === null) return
+  switch (dir) {
+    case NavigateDir.NEXT:
+      if (selected.col < visibleColLength - 1) {
+        selected.col++
+      } else if (selected.row < data.value.length - 1) {
+        selected.row++
+        selected.col = 0
+      }
+      break
+    case NavigateDir.PREV:
+      if (selected.col > 0) {
+        selected.col--
+      } else if (selected.row > 0) {
+        selected.row--
+        selected.col = visibleColLength - 1
+      }
+      break
+  }
+}
 </script>
 
 <template>
@@ -254,7 +275,9 @@ onKeyStroke(['Tab', 'Shift', 'Enter', 'Delete', 'ArrowDown', 'ArrowUp', 'ArrowLe
             >
               <div class="w-full h-full">
                 <SmartsheetVirtualCell v-if="isVirtualCol(columnObj)" v-model="row.row[columnObj.title]"
-                                       :column="columnObj" />
+                                       :column="columnObj"
+                                       @navigate="onNavigate"
+                />
 
                 <SmartsheetCell
                   v-else
@@ -262,6 +285,7 @@ onKeyStroke(['Tab', 'Shift', 'Enter', 'Delete', 'ArrowDown', 'ArrowUp', 'ArrowLe
                   :column="columnObj"
                   :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
                   @save="updateOrSaveRow(row, columnObj.title)"
+                  @navigate="onNavigate"
                 />
               </div>
             </td>
@@ -326,7 +350,6 @@ onKeyStroke(['Tab', 'Shift', 'Enter', 'Delete', 'ArrowDown', 'ArrowUp', 'ArrowLe
       @apply flex align-center h-auto;
       padding: 0 5px;
     }
-
   }
 
   table,
diff --git a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
index 47eb8e5cc1..5c03c952cf 100644
--- a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
@@ -2,6 +2,8 @@
 import type { ColumnType } from 'nocodb-sdk'
 import { provide, useVirtualCell } from '#imports'
 import { ColumnInj } from '~/context'
+import { NavigateDir } from '~/lib'
+
 
 interface Props {
   column: ColumnType
@@ -10,7 +12,7 @@ interface Props {
 
 const { column, modelValue: value } = defineProps<Props>()
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'navigate'])
 
 provide(ColumnInj, column)
 provide('value', value)
@@ -19,196 +21,18 @@ const { isLookup, isBt, isRollup, isMm, isHm, isFormula, isCount } = useVirtualC
 </script>
 
 <template>
-  <div class="nc-virtual-cell">
+  <div class="nc-virtual-cell"
+       @keydown.stop.enter.exact="emit('navigate',NavigateDir.NEXT)"
+       @keydown.stop.shift.enter.exact="emit('navigate',NavigateDir.PREV)">
     <VirtualCellHasMany v-if="isHm" />
     <VirtualCellManyToMany v-else-if="isMm" />
     <VirtualCellBelongsTo v-else-if="isBt" />
     <VirtualCellRollup v-else-if="isRollup" />
     <VirtualCellFormula v-else-if="isFormula" />
     <VirtualCellCount v-else-if="isCount" />
-
-    <!--    <v-lazy> -->
-    <!--      <has-many-cell
-            v-if="hm"
-            ref="cell"
-            :row="row"
-            :value="row[column.title]"
-            :meta="meta"
-            :hm="hm"
-            :nodes="nodes"
-            :active="active"
-            :sql-ui="sqlUi"
-            :is-new="isNew"
-            :is-form="isForm"
-            :breadcrumbs="breadcrumbs"
-            :is-locked="isLocked"
-            :required="required"
-            :is-public="isPublic"
-            :metas="metas"
-            :column="column"
-            :password="password"
-            v-on="$listeners"
-          />
-          <many-to-many-cell
-            v-else-if="mm"
-            ref="cell"
-            :is-public="isPublic"
-            :row="row"
-            :value="row[column.title]"
-            :meta="meta"
-            :nodes="nodes"
-            :sql-ui="sqlUi"
-            :active="active"
-            :is-new="isNew"
-            :api="api"
-            :is-form="isForm"
-            :breadcrumbs="breadcrumbs"
-            :is-locked="isLocked"
-            :required="required"
-            :column="column"
-            :metas="metas"
-            :password="password"
-            v-on="$listeners"
-          />
-          <belongs-to-cell
-            v-else-if="bt"
-            ref="cell"
-            :is-public="isPublic"
-            :disabled-columns="disabledColumns"
-            :active="active"
-            :row="row"
-            :value="row[column.title]"
-            :meta="meta"
-            :nodes="nodes"
-            :api="api"
-            :sql-ui="sqlUi"
-            :is-new="isNew"
-            :is-form="isForm"
-            :breadcrumbs="breadcrumbs"
-            :is-locked="isLocked"
-            :metas="metas"
-            :column="column"
-            :password="password"
-            v-on="$listeners"
-          />
-          <lookup-cell
-            v-else-if="lookup"
-            :disabled-columns="disabledColumns"
-            :active="active"
-            :row="row"
-            :value="row[column.title]"
-            :meta="meta"
-            :metas="metas"
-            :nodes="nodes"
-            :api="api"
-            :sql-ui="sqlUi"
-            :is-new="isNew"
-            :is-form="isForm"
-            :column="column"
-            :is-locked="isLocked"
-            v-on="$listeners "
-          />
-          <formula-cell
-            v-else-if="formula"
-            :row="row"
-            :column="column"
-            :client="nodes.dbConnection.client"
-          />
-          <rollup-cell
-            v-else-if="rollup"
-            :row="row"
-            :column="column"
-          />
-        </v-lazy>
-        <span v-if="hint" class="nc-hint">{{ hint }}</span>
-        <div v-if="isLocked" class="nc-locked-overlay" /> -->
   </div>
 </template>
 
-<!-- <script>
-import { UITypes } from "nocodb-sdk";
-import RollupCell from "./virtualCell/RollupCell";
-import FormulaCell from "./virtualCell/FormulaCell";
-import hasManyCell from "./virtualCell/HasManyCell";
-import LookupCell from "./virtualCell/LookupCell";
-import manyToManyCell from "./virtualCell/ManyToManyCell";
-import belongsToCell from "./virtualCell/BelongsToCell";
-
-// todo: optimize parent/child meta extraction
-
-export default {
-  name: "VirtualCell",
-  components: {
-    RollupCell,
-    FormulaCell,
-    LookupCell,
-    belongsToCell,
-    manyToManyCell,
-    hasManyCell
-  },
-  props: {
-    breadcrumbs: {
-      type: Array,
-      default() {
-        return [];
-      }
-    },
-    column: [Object],
-    row: [Object],
-    nodes: [Object],
-    meta: [Object],
-    api: [Object, Function],
-    active: Boolean,
-    sqlUi: [Object, Function],
-    isNew: {
-      type: Boolean,
-      default: false
-    },
-    isForm: {
-      type: Boolean,
-      default: false
-    },
-    disabledColumns: Object,
-    hint: String,
-    isLocked: Boolean,
-    required: Boolean,
-    isPublic: Boolean,
-    metas: Object,
-    password: String
-  },
-  computed: {
-    hm() {
-      return this.column && this.column.uidt === UITypes.LinkToAnotherRecord && this.column.colOptions.type === "hm";
-    },
-    bt() {
-      return this.column && (this.column.uidt === UITypes.ForeignKey || this.column.uidt === UITypes.LinkToAnotherRecord) && this.column.colOptions.type === "bt";
-    },
-    mm() {
-      return this.column && this.column.uidt === UITypes.LinkToAnotherRecord && this.column.colOptions.type === "mm";
-    },
-    lookup() {
-      return this.column && this.column.uidt === UITypes.Lookup;
-    },
-    formula() {
-      return this.column && this.column.uidt === UITypes.Formula;
-    },
-    rollup() {
-      return this.column && this.column.uidt === UITypes.Rollup;
-    }
-  },
-  methods: {
-    async save(row) {
-      if (row && this.$refs.cell && this.$refs.cell.saveLocalState) {
-        try {
-          await this.$refs.cell.saveLocalState(row);
-        } catch (e) {
-        }
-      }
-    }
-  }
-};
-</script> -->
-
 <style scoped>
 .nc-hint {
   font-size: 0.61rem;
diff --git a/packages/nc-gui-v2/lib/enums.ts b/packages/nc-gui-v2/lib/enums.ts
index 11acd9ae1c..b9041b6622 100644
--- a/packages/nc-gui-v2/lib/enums.ts
+++ b/packages/nc-gui-v2/lib/enums.ts
@@ -48,3 +48,8 @@ export enum Language {
   sl = 'Slovenščina',
   pt_BR = 'Português (Brasil)',
 }
+
+export enum NavigateDir {
+  NEXT,
+  PREV,
+}

From 6057ee687e65016db488505346162ce5bebfbcf2 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 01:40:49 +0530
Subject: [PATCH 4/7] feat(gui-v2): make edit enabled toggle possible

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/cell/Text.vue   |   2 +-
 .../nc-gui-v2/components/cell/TextArea.vue    |   1 +
 .../nc-gui-v2/components/smartsheet/Cell.vue  |  14 +-
 .../nc-gui-v2/components/smartsheet/Grid.vue  | 192 +++++++++---------
 .../components/smartsheet/VirtualCell.vue     |   9 +-
 packages/nc-gui-v2/context/index.ts           |   2 +-
 6 files changed, 117 insertions(+), 103 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Text.vue b/packages/nc-gui-v2/components/cell/Text.vue
index 2b530448d3..ccd0bca0c7 100644
--- a/packages/nc-gui-v2/components/cell/Text.vue
+++ b/packages/nc-gui-v2/components/cell/Text.vue
@@ -18,6 +18,6 @@ const focus = (el: HTMLInputElement) => el?.focus()
 </script>
 
 <template>
-  <input v-if="editEnabled" :ref="focus" v-model="vModel" class="h-full w-full outline-none" />
+  <input v-if="editEnabled" :ref="focus" v-model="vModel" class="h-full w-full outline-none" @blur="editEnabled = false" />
   <span v-else>{{ vModel }}</span>
 </template>
diff --git a/packages/nc-gui-v2/components/cell/TextArea.vue b/packages/nc-gui-v2/components/cell/TextArea.vue
index a6d50e9efc..c27933fe56 100644
--- a/packages/nc-gui-v2/components/cell/TextArea.vue
+++ b/packages/nc-gui-v2/components/cell/TextArea.vue
@@ -24,6 +24,7 @@ const focus = (el: HTMLTextAreaElement) => el?.focus()
     v-model="vModel"
     rows="4"
     class="h-full w-full min-h-[60px] outline-none"
+    @blur="editEnabled = false"
     @keydown.alt.enter.stop
     @keydown.shift.enter.stop
   />
diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index b103ca1842..8fb5d05bf8 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -18,11 +18,21 @@ interface Emits {
 
 const { column, ...props } = defineProps<Props>()
 
-const emit = defineEmits(['update:modelValue', 'save', 'navigate'])
+const emit = defineEmits(['update:modelValue', 'save', 'navigate', 'cancel'])
 
 provide(ColumnInj, column)
 
-provide(EditModeInj, toRef(props, 'editEnabled'))
+provide(
+  EditModeInj,
+  computed({
+    get() {
+      return props?.editEnabled
+    },
+    set() {
+      return emit('cancel')
+    },
+  }),
+)
 
 let changed = $ref(false)
 const syncValue = useDebounceFn(function () {
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index ecff0198e1..ad60b6d0fd 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -208,115 +208,117 @@ const onNavigate = (dir: NavigateDir) => {
       <a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']">
         <table class="xc-row-table nc-grid backgroundColorDefault" @contextmenu.prevent="contextMenu = true">
           <thead>
-          <tr class="group">
-            <th>
-              <div class="flex align-center w-[80px]">
-                <div class="group-hover:hidden" :class="{ hidden: selectedAllRecords }">#</div>
-                <div
-                  :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
-                  class="group-hover:flex w-full align-center"
-                >
-                  <a-checkbox v-model:checked="selectedAllRecords" />
-                  <span class="flex-1" />
+            <tr class="group">
+              <th>
+                <div class="flex align-center w-[80px]">
+                  <div class="group-hover:hidden" :class="{ hidden: selectedAllRecords }">#</div>
+                  <div
+                    :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
+                    class="group-hover:flex w-full align-center"
+                  >
+                    <a-checkbox v-model:checked="selectedAllRecords" />
+                    <span class="flex-1" />
+                  </div>
                 </div>
-              </div>
-            </th>
-            <th
-              v-for="col in fields"
-              :key="col.title"
-              v-xc-ver-resize
-              :data-col="col.id"
-              @xcresize="onresize(col.id, $event)"
-              @xcresizing="onXcResizing(col.title, $event)"
-              @xcresized="resizingCol = null"
-            >
-              <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
-              <SmartsheetHeaderCell v-else :column="col" />
-            </th>
-            <!-- v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('add-column')" -->
-            <th v-t="['c:column:add']" @click="addColumnDropdown = true">
-              <a-dropdown v-model:visible="addColumnDropdown" :trigger="['click']">
-                <div class="h-full w-full flex align-center justify-center">
-                  <MdiPlusIcon class="text-sm" />
-                </div>
-                <template #overlay>
-                  <SmartsheetColumnEditOrAdd @click.stop @cancel="addColumnDropdown = false" />
-                </template>
-              </a-dropdown>
-            </th>
-          </tr>
+              </th>
+              <th
+                v-for="col in fields"
+                :key="col.title"
+                v-xc-ver-resize
+                :data-col="col.id"
+                @xcresize="onresize(col.id, $event)"
+                @xcresizing="onXcResizing(col.title, $event)"
+                @xcresized="resizingCol = null"
+              >
+                <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
+                <SmartsheetHeaderCell v-else :column="col" />
+              </th>
+              <!-- v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('add-column')" -->
+              <th v-t="['c:column:add']" @click="addColumnDropdown = true">
+                <a-dropdown v-model:visible="addColumnDropdown" :trigger="['click']">
+                  <div class="h-full w-full flex align-center justify-center">
+                    <MdiPlusIcon class="text-sm" />
+                  </div>
+                  <template #overlay>
+                    <SmartsheetColumnEditOrAdd @click.stop @cancel="addColumnDropdown = false" />
+                  </template>
+                </a-dropdown>
+              </th>
+            </tr>
           </thead>
           <tbody>
-          <tr v-for="(row, rowIndex) in data" :key="rowIndex" class="nc-grid-row group">
-            <td key="row-index" class="caption nc-grid-cell">
-              <div class="align-center flex w-[80px]">
-                <div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
-                <div
-                  :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
-                  class="group-hover:flex w-full align-center"
-                >
-                  <a-checkbox v-model:checked="row.rowMeta.selected" />
-                  <span class="flex-1" />
-                  <MdiArrowExpandIcon class="text-sm text-pink hidden group-hover:inline-block" />
+            <tr v-for="(row, rowIndex) in data" :key="rowIndex" class="nc-grid-row group">
+              <td key="row-index" class="caption nc-grid-cell">
+                <div class="align-center flex w-[80px]">
+                  <div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
+                  <div
+                    :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
+                    class="group-hover:flex w-full align-center"
+                  >
+                    <a-checkbox v-model:checked="row.rowMeta.selected" />
+                    <span class="flex-1" />
+                    <MdiArrowExpandIcon class="text-sm text-pink hidden group-hover:inline-block" />
+                  </div>
                 </div>
-              </div>
-            </td>
-            <td
-              v-for="(columnObj, colIndex) in fields"
-              :key="rowIndex + columnObj.title"
-              class="cell pointer nc-grid-cell"
-              :class="{
+              </td>
+              <td
+                v-for="(columnObj, colIndex) in fields"
+                :key="rowIndex + columnObj.title"
+                class="cell pointer nc-grid-cell"
+                :class="{
                   active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,
                 }"
-              :data-col="columnObj.id"
-              @click="selectCell(rowIndex, colIndex)"
-              @dblclick="editEnabled = true"
-              @contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"
-            >
-              <div class="w-full h-full">
-                <SmartsheetVirtualCell v-if="isVirtualCol(columnObj)" v-model="row.row[columnObj.title]"
-                                       :column="columnObj"
-                                       @navigate="onNavigate"
-                />
+                :data-col="columnObj.id"
+                @click="selectCell(rowIndex, colIndex)"
+                @dblclick="editEnabled = true"
+                @contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"
+              >
+                <div class="w-full h-full">
+                  <SmartsheetVirtualCell
+                    v-if="isVirtualCol(columnObj)"
+                    v-model="row.row[columnObj.title]"
+                    :column="columnObj"
+                    @navigate="onNavigate"
+                  />
 
-                <SmartsheetCell
-                  v-else
-                  v-model="row.row[columnObj.title]"
-                  :column="columnObj"
-                  :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
-                  @save="updateOrSaveRow(row, columnObj.title)"
-                  @navigate="onNavigate"
-                />
-              </div>
-            </td>
-          </tr>
+                  <SmartsheetCell
+                    v-else
+                    v-model="row.row[columnObj.title]"
+                    :column="columnObj"
+                    :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
+                    @save="updateOrSaveRow(row, columnObj.title)"
+                    @navigate="onNavigate"
+                    @cancel="editEnabled = false"
+                  />
+                </div>
+              </td>
+            </tr>
 
-          <tr v-if="!isLocked">
-            <td
-              v-t="['c:row:add:grid-bottom']"
-              :colspan="visibleColLength + 1"
-              class="text-left pointer nc-grid-add-new-cell"
-              @click="addEmptyRow()"
-            >
-              <a-tooltip top left>
-                <div class="w-min flex align-center">
-                  <MdiPlusIcon class="text-pint-500 text-xs" />
-                  <span class="ml-1 caption grey--text">
+            <tr v-if="!isLocked">
+              <td
+                v-t="['c:row:add:grid-bottom']"
+                :colspan="visibleColLength + 1"
+                class="text-left pointer nc-grid-add-new-cell"
+                @click="addEmptyRow()"
+              >
+                <a-tooltip top left>
+                  <div class="w-min flex align-center">
+                    <MdiPlusIcon class="text-pint-500 text-xs" />
+                    <span class="ml-1 caption grey--text">
                       {{ $t('activity.addRow') }}
                     </span>
-                </div>
-                <template #title>
-                  <span class="caption"> Add new row</span>
-                </template>
-              </a-tooltip>
-            </td>
-          </tr>
+                  </div>
+                  <template #title>
+                    <span class="caption"> Add new row</span>
+                  </template>
+                </a-tooltip>
+              </td>
+            </tr>
           </tbody>
         </table>
         <template #overlay>
           <div class="bg-white shadow" @click="contextMenu = false">
-            <div v-if="contextMenuTarget" class="nc-menu-item" @click="deleteRow(contextMenuTarget.row)">Delete row
-            </div>
+            <div v-if="contextMenuTarget" class="nc-menu-item" @click="deleteRow(contextMenuTarget.row)">Delete row</div>
             <div class="nc-menu-item" @click="deleteSelectedRows">Delete all selected rows</div>
             <div v-if="contextMenuTarget" class="nc-menu-item" @click="clearCell(contextMenuTarget)">Clear cell</div>
             <div v-if="contextMenuTarget" class="nc-menu-item" @click="addEmptyRow(contextMenuTarget.row + 1)">
diff --git a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
index 5c03c952cf..8cb234b3c4 100644
--- a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
@@ -4,7 +4,6 @@ import { provide, useVirtualCell } from '#imports'
 import { ColumnInj } from '~/context'
 import { NavigateDir } from '~/lib'
 
-
 interface Props {
   column: ColumnType
   modelValue: any
@@ -21,9 +20,11 @@ const { isLookup, isBt, isRollup, isMm, isHm, isFormula, isCount } = useVirtualC
 </script>
 
 <template>
-  <div class="nc-virtual-cell"
-       @keydown.stop.enter.exact="emit('navigate',NavigateDir.NEXT)"
-       @keydown.stop.shift.enter.exact="emit('navigate',NavigateDir.PREV)">
+  <div
+    class="nc-virtual-cell"
+    @keydown.stop.enter.exact="emit('navigate', NavigateDir.NEXT)"
+    @keydown.stop.shift.enter.exact="emit('navigate', NavigateDir.PREV)"
+  >
     <VirtualCellHasMany v-if="isHm" />
     <VirtualCellManyToMany v-else-if="isMm" />
     <VirtualCellBelongsTo v-else-if="isBt" />
diff --git a/packages/nc-gui-v2/context/index.ts b/packages/nc-gui-v2/context/index.ts
index 809c3ee5cd..58aea722a6 100644
--- a/packages/nc-gui-v2/context/index.ts
+++ b/packages/nc-gui-v2/context/index.ts
@@ -21,4 +21,4 @@ export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')
 export const ViewListInj: InjectionKey<Ref<(GridType | FormType | KanbanType | GalleryType)[]>> = Symbol('view-list-injection')
 
 export const RightSidebarInj: InjectionKey<Ref<boolean>> = Symbol('right-sidebar-injection')
-export const EditModeInj: InjectionKey<Ref<boolean>> = Symbol('edit-mode-injection')
+export const EditModeInj: InjectionKey<ComputedRef<boolean>> = Symbol('edit-mode-injection')

From 8aac0b5853632f86c80ef9d3da06cfff41ef108c Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Thu, 4 Aug 2022 11:31:30 +0530
Subject: [PATCH 5/7] fix: null check validations

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 packages/nc-gui-v2/components/tabs/Smartsheet.vue | 2 +-
 packages/nc-gui-v2/composables/useViewColumns.ts  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/tabs/Smartsheet.vue b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
index 6465cac6c0..57ed384d0b 100644
--- a/packages/nc-gui-v2/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
@@ -40,7 +40,7 @@ provide(RightSidebarInj, ref(true))
 useProvideSmartsheetStore(activeView as Ref<TableType>, meta)
 
 watch(tabMeta, async (newTabMeta, oldTabMeta) => {
-  if (newTabMeta !== oldTabMeta && newTabMeta.id) await getMeta(newTabMeta.id)
+  if (newTabMeta !== oldTabMeta && newTabMeta?.id) await getMeta(newTabMeta.id)
 })
 </script>
 
diff --git a/packages/nc-gui-v2/composables/useViewColumns.ts b/packages/nc-gui-v2/composables/useViewColumns.ts
index 11291634f6..44d62505c8 100644
--- a/packages/nc-gui-v2/composables/useViewColumns.ts
+++ b/packages/nc-gui-v2/composables/useViewColumns.ts
@@ -40,7 +40,7 @@ export function useViewColumns(
         }
       }, {})
 
-      fields.value = meta.value.columns
+      fields.value = meta.value?.columns
         ?.map((column) => {
           const currentColumnField = fieldById[column.id!] || {}
 

From 9e9053d212ccbe00cde1fd14d9d13c79d8e85635 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 11:56:32 +0530
Subject: [PATCH 6/7] refactor(gui-v2): replace with use

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet/Cell.vue | 14 ++------------
 packages/nc-gui-v2/components/smartsheet/Grid.vue |  1 +
 2 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index 8fb5d05bf8..bc725b74fa 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -18,21 +18,11 @@ interface Emits {
 
 const { column, ...props } = defineProps<Props>()
 
-const emit = defineEmits(['update:modelValue', 'save', 'navigate', 'cancel'])
+const emit = defineEmits(['update:modelValue', 'save', 'navigate', 'update:editEnabled'])
 
 provide(ColumnInj, column)
 
-provide(
-  EditModeInj,
-  computed({
-    get() {
-      return props?.editEnabled
-    },
-    set() {
-      return emit('cancel')
-    },
-  }),
-)
+provide(EditModeInj, useVModel(props, 'editEnabled', emit))
 
 let changed = $ref(false)
 const syncValue = useDebounceFn(function () {
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index ad60b6d0fd..528ebcba5c 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -286,6 +286,7 @@ const onNavigate = (dir: NavigateDir) => {
                     v-model="row.row[columnObj.title]"
                     :column="columnObj"
                     :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
+                    @update:edit-enabled="editEnabled = false"
                     @save="updateOrSaveRow(row, columnObj.title)"
                     @navigate="onNavigate"
                     @cancel="editEnabled = false"

From ace40750a30a4a72d4dad379f99f260c0718b58c Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Thu, 4 Aug 2022 12:08:03 +0530
Subject: [PATCH 7/7] fix: null check

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 packages/nc-gui-v2/composables/useColumnCreateStore.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/composables/useColumnCreateStore.ts b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
index fb289f7101..59c0b9dc37 100644
--- a/packages/nc-gui-v2/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
@@ -86,7 +86,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
   // actions
   const generateNewColumnMeta = () => {
     setAdditionalValidations({})
-    formState.value = { meta: {}, ...sqlUi.value.getNewColumn((meta.value.columns?.length || 0) + 1) }
+    formState.value = { meta: {}, ...sqlUi.value.getNewColumn((meta.value?.columns?.length || 0) + 1) }
   }
 
   const onUidtOrIdTypeChange = () => {