feat(gui): allow clear option for LTAR cell

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

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

@@ -182,11 +182,14 @@ watch(contextMenu, () => {
   }
 })
 
-async function clearCell(ctx: { row: number; col: number }) {
+const rowRefs = $ref<any[]>()
+
+async function clearCell(ctx: { row: number; col: number }, field?: ColumnType) {
   const rowObj = data.value[ctx.row]
   const columnObj = fields.value[ctx.col]
 
   if (isVirtualCol(columnObj)) {
+    await rowRefs[ctx.row]!.clearLTARCell(field)
     return
   }
 
@@ -249,8 +252,7 @@ const onNavigate = (dir: NavigateDir) => {
       if (selected.row < data.value.length - 1) {
         selected.row++
       } else {
-        addEmptyRow()
-        selected.row++
+        editEnabled = false
       }
       break
     case NavigateDir.PREV:

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

@@ -20,7 +20,7 @@ const currentRow = toRef(props, 'row')
 
 const { meta } = useSmartsheetStoreOrThrow()
 
-const { isNew, state, syncLTARRefs } = useProvideSmartsheetRowStore(meta, currentRow)
+const { isNew, state, syncLTARRefs, clearLTARCell } = useProvideSmartsheetRowStore(meta, currentRow)
 
 // on changing isNew(new record insert) status sync LTAR cell values
 watch(isNew, async (nextVal, prevVal) => {
@@ -46,6 +46,7 @@ provide(ReloadRowDataHookInj, reloadHook)
 
 defineExpose({
   syncLTARRefs,
+  clearLTARCell,
 })
 </script>
 

packages/nc-gui/composables/useSmartsheetRowStore.ts

@@ -1,5 +1,5 @@
-import { UITypes } from 'nocodb-sdk'
-import type { ColumnType, LinkToAnotherRecordType, RelationTypes, TableType } from 'nocodb-sdk'
+import { RelationTypes, UITypes } from 'nocodb-sdk'
+import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import type { MaybeRef } from '@vueuse/core'
 import {
@@ -120,6 +120,42 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
       }
     }
 
+    // clear LTAR cell
+    const clearLTARCell = async (column: ColumnType) => {
+      if(!column || column.uidt!==UITypes.LinkToAnotherRecord) return
+
+      const relatedTableMeta = metas.value?.[(<LinkToAnotherRecordType>column?.colOptions)?.fk_related_model_id as string]
+
+      if (isNew.value) {
+        state.value[column.title!] = null
+      } else if (currentRow.value) {
+        if ((<LinkToAnotherRecordType>column.colOptions)?.type === RelationTypes.BELONGS_TO) {
+          if(!currentRow.value.row[column.title!]) return
+          await $api.dbTableRow.nestedRemove(
+            NOCO,
+            project.value.title as string,
+            meta.value?.title as string,
+            extractPkFromRow(currentRow.value, meta.value?.columns as ColumnType[]),
+            'bt' as any,
+            column.title as string,
+            extractPkFromRow(currentRow.value.row[column.title!], relatedTableMeta?.columns as ColumnType[]),
+          )
+        } else {
+          for (const link of (currentRow.value.row[column.title!] as Record<string, any>[]) || []) {
+            await $api.dbTableRow.nestedRemove(
+              NOCO,
+              project.value.title as string,
+              meta.value?.title as string,
+              extractPkFromRow(currentRow.value, meta.value?.columns as ColumnType[]),
+              (<LinkToAnotherRecordType>column?.colOptions).type as 'hm' | 'mm',
+              column.title as string,
+              extractPkFromRow(link, relatedTableMeta?.columns as ColumnType[]),
+            )
+        }
+        }
+      }
+    }
+
     const loadRow = async () => {
       const record = await $api.dbTableRow.read(
         NOCO,
@@ -144,6 +180,7 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
       syncLTARRefs,
       loadRow,
       currentRow,
+      clearLTARCell,
     }
   },
   'smartsheet-row-store',