fix(gui-v2): block user from editing pk and ai values

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

packages/nc-gui-v2/components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    '(fix(gui-v2)': block user from editing pk and ai values)
     AAlert: typeof import('ant-design-vue/es')['Alert']
     AAutoComplete: typeof import('ant-design-vue/es')['AutoComplete']
     AButton: typeof import('ant-design-vue/es')['Button']
@@ -66,6 +67,7 @@ declare module '@vue/runtime-core' {
     MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
     MdiLogout: typeof import('~icons/mdi/logout')['default']
     MdiReload: typeof import('~icons/mdi/reload')['default']
+    MdiTableArrowRight: typeof import('~icons/mdi/table-arrow-right')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

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

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { onClickOutside } from '@vueuse/core'
+import type { ColumnType } from 'nocodb-sdk'
 import { isVirtualCol } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
 import {
@@ -13,6 +14,7 @@ import {
   useSmartsheetStoreOrThrow,
   useViewData,
 } from '#imports'
+import type { Row } from '~/composables'
 import {
   ActiveViewInj,
   ChangePageInj,
@@ -37,11 +39,12 @@ const fields = inject(FieldsInj, ref([]))
 const isLocked = inject(IsLockedInj, false)
 // todo: get from parent ( inject or use prop )
 const isPublicView = false
+const isView = false
 
 const selected = reactive<{ row: number | null; col: number | null }>({ row: null, col: null })
 let editEnabled = $ref(false)
 const { sqlUi } = useProject()
-const { xWhere } = useSmartsheetStoreOrThrow()
+const { xWhere, isPkAvail } = useSmartsheetStoreOrThrow()
 const addColumnDropdown = ref(false)
 const contextMenu = ref(false)
 const contextMenuTarget = ref(false)
@@ -77,12 +80,6 @@ const selectCell = (row: number, col: number) => {
   selected.col = col
 }
 
-onKeyStroke(['Enter'], (e) => {
-  if (selected.row !== null && selected.col !== null) {
-    editEnabled = true
-  }
-})
-
 watch(
   () => (view?.value as any)?.id,
   async (n?: string, o?: string) => {
@@ -115,8 +112,6 @@ watch(contextMenu, () => {
   }
 })
 
-const isPkAvail = $computed(() => meta?.value?.columns?.some((c) => c.pk))
-
 const clearCell = async (ctx: { row: number; col: number }) => {
   const rowObj = data.value[ctx.row]
   const columnObj = fields.value[ctx.col]
@@ -132,6 +127,25 @@ const clearCell = async (ctx: { row: number; col: number }) => {
 
 const { copy } = useClipboard()
 
+const makeEditable = (row: Row, col: ColumnType) => {
+  if (isPublicView || editEnabled || isView) {
+    return
+  }
+  if (!isPkAvail.value && !row.rowMeta.new) {
+    message.info("Update not allowed for table which doesn't have primary Key")
+    return
+  }
+  if (col.ai) {
+    message.info('Auto Increment field is not editable')
+    return
+  }
+  if (col.pk && !row.rowMeta.new) {
+    message.info('Editing primary key not supported')
+    return
+  }
+  return (editEnabled = true)
+}
+
 /** handle keypress events */
 const onKeyDown = async (e: KeyboardEvent) => {
   if (selected.row === null || selected.col === null) return
@@ -158,7 +172,7 @@ const onKeyDown = async (e: KeyboardEvent) => {
     /** on enter key press make cell editable */
     case 'Enter':
       e.preventDefault()
-      editEnabled = true
+      makeEditable(data.value[selected.row], fields.value[selected.col])
       break
     /** on delete key press clear cell */
     case 'Delete':
@@ -205,8 +219,10 @@ const onKeyDown = async (e: KeyboardEvent) => {
           if (!isPkAvail && !rowObj.rowMeta.new) {
             return message.info("Update not allowed for table which doesn't have primary Key")
           }
-          rowObj.row[columnObj.title] = ''
-          editEnabled = true
+          if (makeEditable(rowObj, columnObj)) {
+            rowObj.row[columnObj.title] = ''
+          }
+          // editEnabled = true
         }
       }
       break
@@ -319,7 +335,7 @@ const onNavigate = (dir: NavigateDir) => {
                 :data-col="columnObj.id"
                 :data-title="columnObj.title"
                 @click="selectCell(rowIndex, colIndex)"
-                @dblclick="editEnabled = true"
+                @dblclick="makeEditable(row, columnObj)"
                 @contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"
               >
                 <div class="w-full h-full">

packages/nc-gui-v2/composables/useSmartsheetStore.ts

@@ -18,6 +18,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = createInjectionState((vi
 
   // getters
   const isLocked = computed(() => (view?.value as any)?.lock_type === 'locked')
+  const isPkAvail = computed(() => meta?.value?.columns?.some((c) => c.pk))
   const xWhere = computed(() => {
     let where
     const col = meta?.value?.columns?.find(({ id }) => id === search.field) || meta?.value?.columns?.find((v) => v.pv)
@@ -41,6 +42,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = createInjectionState((vi
     $api,
     search,
     xWhere,
+    isPkAvail,
   }
 })