feat(api): show warning for virtual cells when enter or delete key press

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

packages/nc-gui/components/cell/Checkbox.vue

@@ -1,13 +1,5 @@
 <script setup lang="ts">
-import {
+import { ActiveCellInj, ColumnInj, IsFormInj, ReadonlyInj, getMdiIcon, inject, useSelectedCellKeyupListener } from '#imports'
-  ActiveCellInj,
-  ColumnInj,
-  IsFormInj,
-  ReadonlyInj,
-  getMdiIcon,
-  inject,
-  useSelectedCellKeyupListener,
-} from '#imports'
 
 interface Props {
   // If the previous cell value was a text, the initial checkbox value is a string type

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

@@ -22,6 +22,7 @@ import {
   extractPkFromRow,
   inject,
   isColumnRequiredAndNull,
+  isMac,
   message,
   onBeforeUnmount,
   onClickOutside,
@@ -39,9 +40,7 @@ import {
   useUIPermission,
   useViewData,
   watch,
-  isMac,
 } from '#imports'
-import { switchAll } from 'rxjs'
 import type { Row } from '~/lib'
 import { NavigateDir } from '~/lib'
 
@@ -146,8 +145,8 @@ const getContainerScrollForElement = (
     relativePos.right + (offset?.right || 0) > 0
       ? container.scrollLeft + relativePos.right + (offset?.right || 0)
       : relativePos.left - (offset?.left || 0) < 0
-      ? container.scrollLeft + relativePos.left - (offset?.left || 0)
+        ? container.scrollLeft + relativePos.left - (offset?.left || 0)
-      : container.scrollLeft
+        : container.scrollLeft
 
   /*
    * If the element is below the container, scroll down (positive)
@@ -163,6 +162,7 @@ const getContainerScrollForElement = (
   return scroll
 }
 
+
 const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange, selected } = useMultiSelect(
   fields,
   data,
@@ -208,50 +208,50 @@ const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange
 )
 
 function scrollToCell(row?: number | null, col?: number | null) {
-    row = row ?? selected.row
+  row = row ?? selected.row
-    col = col ?? selected.col
+  col = col ?? selected.col
-    if (row !== undefined && col !== undefined && row !== null && col !== null) {
+  if (row !== undefined && col !== undefined && row !== null && col !== null) {
-      // get active cell
+    // get active cell
-      const rows = tbodyEl.value?.querySelectorAll('tr')
+    const rows = tbodyEl.value?.querySelectorAll('tr')
-      const cols = rows?.[row].querySelectorAll('td')
+    const cols = rows?.[row].querySelectorAll('td')
-      const td = cols?.[col === 0 ? 0 : col + 1]
+    const td = cols?.[col === 0 ? 0 : col + 1]
-
-      if (!td || !gridWrapper.value) return
-
-      const { height: headerHeight } = tableHead.value!.getBoundingClientRect()
-      const tdScroll = getContainerScrollForElement(td, gridWrapper.value, { top: headerHeight, bottom: 9, right: 9 })
-
-      if (rows && row === rows.length - 2) {
-        // if last row make 'Add New Row' visible
-        gridWrapper.value.scrollTo({
-          top: gridWrapper.value.scrollHeight,
-          left:
-            cols && col === cols.length - 2 // if corner cell
-              ? gridWrapper.value.scrollWidth
-              : tdScroll.left,
-          behavior: 'smooth',
-        })
-        return
-      }
 
-      if (cols && col === cols.length - 2) {
+    if (!td || !gridWrapper.value) return
-        // if last column make 'Add New Column' visible
+
-        gridWrapper.value.scrollTo({
+    const { height: headerHeight } = tableHead.value!.getBoundingClientRect()
-          top: tdScroll.top,
+    const tdScroll = getContainerScrollForElement(td, gridWrapper.value, { top: headerHeight, bottom: 9, right: 9 })
-          left: gridWrapper.value.scrollWidth,
+
-          behavior: 'smooth',
+    if (rows && row === rows.length - 2) {
-        })
+      // if last row make 'Add New Row' visible
-        return
+      gridWrapper.value.scrollTo({
-      }
+        top: gridWrapper.value.scrollHeight,
+        left:
+          cols && col === cols.length - 2 // if corner cell
+            ? gridWrapper.value.scrollWidth
+            : tdScroll.left,
+        behavior: 'smooth',
+      })
+      return
+    }
 
-      // scroll into the active cell
+    if (cols && col === cols.length - 2) {
+      // if last column make 'Add New Column' visible
       gridWrapper.value.scrollTo({
         top: tdScroll.top,
-        left: tdScroll.left,
+        left: gridWrapper.value.scrollWidth,
         behavior: 'smooth',
       })
+      return
     }
+
+    // scroll into the active cell
+    gridWrapper.value.scrollTo({
+      top: tdScroll.top,
+      left: tdScroll.left,
+      behavior: 'smooth',
+    })
   }
+}
 
 onMounted(loadGridViewColumns)
 

packages/nc-gui/components/virtual-cell/Formula.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { message } from 'ant-design-vue'
 import type { ColumnType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { CellValueInj, ColumnInj, computed, handleTZ, inject, ref, replaceUrlsWithLink, useProject } from '#imports'
@@ -23,6 +24,17 @@ const showEditFormulaWarningMessage = () => {
 const result = computed(() => (isPg.value ? handleTZ(cellValue?.value) : cellValue?.value))
 
 const urls = computed(() => replaceUrlsWithLink(result.value))
+
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
+  switch (e.key) {
+    case 'Enter':
+      message.warning('Formula fields should be configured in the field menu dropdown')
+      break
+    case 'Delete':
+      message.warning('Computed field: unable to clear text')
+      break
+  }
+})
 </script>
 
 <template>

packages/nc-gui/components/virtual-cell/Lookup.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { message } from 'ant-design-vue'
 import type { ColumnType, LinkToAnotherRecordType, LookupType } from 'nocodb-sdk'
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
 import type { Ref } from 'vue'
@@ -46,6 +47,17 @@ provide(MetaInj, lookupTableMeta)
 provide(CellUrlDisableOverlayInj, ref(true))
 
 const lookupColumnMetaProps = useColumn(lookupColumn)
+
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
+  switch (e.key) {
+    case 'Enter':
+      message.warning('Computed field: unable to edit')
+      break
+    case 'Delete':
+      message.warning('Computed field: unable to clear text')
+      break
+  }
+})
 </script>
 
 <template>

packages/nc-gui/components/virtual-cell/Rollup.vue

@@ -1,7 +1,19 @@
 <script setup lang="ts">
+import { message } from 'ant-design-vue'
 import { CellValueInj, inject } from '#imports'
 
 const value = inject(CellValueInj)
+
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
+  switch (e.key) {
+    case 'Enter':
+      message.warning('Computed field: unable to edit')
+      break
+    case 'Delete':
+      message.warning('Computed field: unable to clear text')
+      break
+  }
+})
 </script>
 
 <template>