From b7c3f032d8839bea3b1242d1ee15ef6d27d3835d Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 9 Aug 2022 16:04:31 +0530
Subject: [PATCH] refactor(gui-v2): skip outside click handler if active cell
 is json or virtual

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/dashboard/TreeView.vue         | 25 +++-----
 .../nc-gui-v2/components/smartsheet/Grid.vue  | 61 +++++++++++--------
 2 files changed, 41 insertions(+), 45 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index 565a314a00..60528bf2b7 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -1,38 +1,28 @@
 <script setup lang="ts">
-import { useNuxtApp, useRoute } from '#app'
-import { computed, useProject, useTable, useTabs, useUIPermission, watchEffect } from '#imports'
 import type { TableType } from 'nocodb-sdk'
 import Sortable from 'sortablejs'
 import { useToast } from 'vue-toastification'
+import { useNuxtApp, useRoute } from '#app'
+import { computed, useProject, useTable, useTabs, watchEffect } from '#imports'
 import { TabType } from '~/composables'
 import MdiTable from '~icons/mdi/table'
 import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiTableLarge from '~icons/mdi/table-large'
 import MdiMenuDown from '~icons/mdi/chevron-down'
-import MdiSettingIcon from '~icons/mdi/cog'
 import MdiMenuIcon from '~icons/mdi/dots-vertical'
 import MdiDrag from '~icons/mdi/drag-vertical'
-import MdiView from '~icons/mdi/eye-circle-outline'
-import MdiAPIDocIcon from '~icons/mdi/open-in-new'
 import MdiPlus from '~icons/mdi/plus-circle-outline'
-import MdiTable from '~icons/mdi/table'
-import MdiTableLarge from '~icons/mdi/table-large'
-import SettingsModal from './settings/SettingsModal.vue'
-import MdiMenuIcon from '~icons/mdi/dots-vertical'
 
 const { addTab } = useTabs()
 
-const toast = useToast()
-
 const { $api, $e } = useNuxtApp()
 
 const route = useRoute()
 
 const { tables, loadTables } = useProject(route.params.projectId as string)
-const { closeTab, activeTab } = useTabs()
+const { activeTab } = useTabs()
 const { deleteTable } = useTable()
 
-
 const tablesById = $computed<Record<string, TableType>>(() =>
   tables?.value?.reduce((acc: Record<string, TableType>, table: TableType) => {
     acc[table.id as string] = table
@@ -40,10 +30,8 @@ const tablesById = $computed<Record<string, TableType>>(() =>
   }, {}),
 )
 
-const settingsDlg = ref(false)
 const showTableList = ref(true)
 const tableCreateDlg = ref(false)
-const tableDeleteDlg = ref(false)
 const menuRef = $ref<HTMLLIElement>()
 let key = $ref(0)
 let sortable: Sortable
@@ -143,7 +131,6 @@ const addTableTab = (table: TableType) => {
 const activeTable = computed(() => {
   return [TabType.TABLE, TabType.VIEW].includes(activeTab.value?.type) ? activeTab.value.title : null
 })
-
 </script>
 
 <template>
@@ -191,8 +178,10 @@ const activeTable = computed(() => {
                 v-for="table of tables"
                 :key="table.id"
                 v-t="['a:table:open']"
-                :class="[{ hidden: !filteredTables?.includes(table),
-                 'active': activeTable === table.title,}, `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,]"
+                :class="[
+                  { hidden: !filteredTables?.includes(table), active: activeTable === table.title },
+                  `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
+                ]"
                 class="nc-tree-item pl-5 pr-3 py-2 text-sm cursor-pointer group"
                 :data-order="table.order"
                 :data-id="table.id"
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index c8cf24defa..403ef2dfd1 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { onClickOutside, useEventListener } from '@vueuse/core'
 import type { ColumnType } from 'nocodb-sdk'
-import { isVirtualCol } from 'nocodb-sdk'
+import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
 import {
   inject,
@@ -190,34 +190,35 @@ const onKeyDown = async (e: KeyboardEvent) => {
       e.preventDefault()
       if (selected.row < data.value.length - 1) selected.row++
       break
-    default: {
-      const rowObj = data.value[selected.row]
-      const columnObj = fields.value[selected.col]
-
-      if (e.metaKey || e.ctrlKey) {
-        switch (e.keyCode) {
-          // copy - ctrl/cmd +c
-          case 67:
-            await copy(rowObj.row[columnObj.title] || '')
-            break
+    default:
+      {
+        const rowObj = data.value[selected.row]
+        const columnObj = fields.value[selected.col]
+
+        if (e.metaKey || e.ctrlKey) {
+          switch (e.keyCode) {
+            // copy - ctrl/cmd +c
+            case 67:
+              await copy(rowObj.row[columnObj.title] || '')
+              break
+          }
         }
-      }
-
-      if (editEnabled || e.ctrlKey || e.altKey || e.metaKey) {
-        return
-      }
 
-      /** on letter key press make cell editable and empty */
-      if (e?.key?.length === 1) {
-        if (!isPkAvail && !rowObj.rowMeta.new) {
-          return message.info('Update not allowed for table which doesn\'t have primary Key')
+        if (editEnabled || e.ctrlKey || e.altKey || e.metaKey) {
+          return
         }
-        if (makeEditable(rowObj, columnObj)) {
-          rowObj.row[columnObj.title] = ''
+
+        /** on letter key press make cell editable and empty */
+        if (e?.key?.length === 1) {
+          if (!isPkAvail && !rowObj.rowMeta.new) {
+            return message.info("Update not allowed for table which doesn't have primary Key")
+          }
+          if (makeEditable(rowObj, columnObj)) {
+            rowObj.row[columnObj.title] = ''
+          }
+          // editEnabled = true
         }
-        // editEnabled = true
       }
-    }
       break
   }
 }
@@ -227,6 +228,12 @@ useEventListener(document, 'keydown', onKeyDown)
 /** On clicking outside of table reset active cell  */
 const smartTable = ref(null)
 onClickOutside(smartTable, () => {
+  if (selected.col === null) return
+
+  const activeCol = fields.value[selected.col]
+
+  if (editEnabled && (isVirtualCol(activeCol) || activeCol.uidt === UITypes.JSON)) return
+
   selected.row = null
   selected.col = null
 })
@@ -295,7 +302,7 @@ const onNavigate = (dir: NavigateDir) => {
             </tr>
           </thead>
           <tbody>
-            <tr v-for="(row, rowIndex) of data" :key="rowIndex" class="nc-grid-row">
+            <tr v-for="(row, rowIndex) of data" :key="rowIndex" class="nc-grid-row group">
               <td key="row-index" class="caption nc-grid-cell group">
                 <div class="flex items-center w-[80px]">
                   <div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
@@ -316,8 +323,8 @@ const onNavigate = (dir: NavigateDir) => {
                 :key="rowIndex + columnObj.title"
                 class="cell pointer nc-grid-cell"
                 :class="{
-                  active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,
-                }"
+                    active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,
+                  }"
                 :data-col="columnObj.id"
                 :data-title="columnObj.title"
                 @click="selectCell(rowIndex, colIndex)"