feat(gui-v2): integrate unlink with local state

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

packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue

@@ -30,7 +30,8 @@ const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, un
 )
 
 await loadRelatedTableMeta()
-const { state, isNew } = useSmartsheetRowStoreOrThrow()
+const { state, isNew, removeLTARRef } = useSmartsheetRowStoreOrThrow()
+
 const value = computed(() => {
   if (cellValue?.value) {
     return cellValue?.value
@@ -39,13 +40,21 @@ const value = computed(() => {
   }
   return null
 })
+
+const unlinkRef = async (rec: Record<string, any>) => {
+  if (isNew.value) {
+    removeLTARRef(rec, column?.value as ColumnType)
+  } else {
+    await unlink(rec)
+  }
+}
 </script>
 
 <template>
   <div class="flex w-full chips-wrapper align-center" :class="{ active }">
     <div class="chips d-flex align-center flex-grow">
       <template v-if="value">
-        <ItemChip :item="value" :value="value[relatedTablePrimaryValueProp]" @unlink="unlink(value)" />
+        <ItemChip :item="value" :value="value[relatedTablePrimaryValueProp]" @unlink="unlinkRef(value)" />
       </template>
     </div>
     <div class="flex-1 flex justify-end gap-1 min-h-[30px] align-center">

packages/nc-gui-v2/components/virtual-cell/HasMany.vue

@@ -36,6 +36,8 @@ const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, un
 )
 await loadRelatedTableMeta()
 
+const { state, isNew, removeLTARRef } = useSmartsheetRowStoreOrThrow()
+
 const localCellValue = computed(() => {
   if (cellValue?.value) {
     return cellValue?.value
@@ -56,6 +58,15 @@ const cells = computed(() =>
     return [...acc, { value, item: curr }]
   }, [] as any[]),
 )
+
+
+const unlinkRef = async (rec: Record<string, any>) => {
+  if (isNew.value) {
+    removeLTARRef(rec, column?.value as ColumnType)
+  } else {
+    await unlink(rec)
+  }
+}
 </script>
 
 <template>
@@ -63,7 +74,7 @@ const cells = computed(() =>
     <template v-if="!isForm">
       <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
         <template v-if="cells">
-          <ItemChip v-for="(cell, i) of cells" :key="i" :value="cell.value" @unlink="unlink(cell.item)" />
+          <ItemChip v-for="(cell, i) of cells" :key="i" :value="cell.value" @unlink="unlinkRef(cell.item)" />
 
           <span v-if="cellValue?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true"
             >more...

packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue

@@ -32,7 +32,7 @@ const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvid
 
 await loadRelatedTableMeta()
 
-const { state, isNew } = useSmartsheetRowStoreOrThrow()
+const { state, isNew, removeLTARRef } = useSmartsheetRowStoreOrThrow()
 
 const localCellValue = computed(() => {
   if (cellValue?.value) {
@@ -54,6 +54,16 @@ const cells = computed(() =>
     return [...acc, { value, item: curr }]
   }, [] as any[]),
 )
+
+
+
+const unlinkRef = async (rec: Record<string, any>) => {
+  if (isNew.value) {
+    removeLTARRef(rec, column?.value as ColumnType)
+  } else {
+    await unlink(rec)
+  }
+}
 </script>
 
 <template>
@@ -61,7 +71,7 @@ const cells = computed(() =>
     <template v-if="!isForm">
       <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
         <template v-if="cells">
-          <ItemChip v-for="(cell, i) of cells" :key="i" :value="cell.value" @unlink="unlink(cell.item)" />
+          <ItemChip v-for="(cell, i) of cells" :key="i" :value="cell.value" @unlink="unlinkRef(cell.item)" />
 
           <span v-if="value?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
         </template>

packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue

@@ -1,21 +1,23 @@
 <script setup lang="ts">
-import { ActiveCellInj, ReadonlyInj } from '~/context'
+import { ActiveCellInj, IsFormInj, ReadonlyInj } from '~/context'
 import MdiCloseThickIcon from '~icons/mdi/close-thick'
 
 interface Props {
   value?: string | number | boolean
+  item?: any
 }
 
-const { value } = defineProps<Props>()
+const { value, item } = defineProps<Props>()
 const emit = defineEmits(['unlink'])
 const readonly = inject(ReadonlyInj, false)
 const active = inject(ActiveCellInj, ref(false))
+const isForm = inject(IsFormInj)
 </script>
 
 <template>
   <div class="group py-1 px-2 flex align-center gap-1 bg-gray-200/50 hover:bg-gray-200 rounded-[20px]" :class="{ active }">
     <span class="name">{{ value }}</span>
-    <div v-show="active" v-if="!readonly" class="flex align-center">
+    <div v-show="active || isForm" v-if="!readonly" class="flex align-center">
       <MdiCloseThickIcon class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" @click="emit('unlink')" />
     </div>
   </div>

packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { watchEffect } from '@vue/runtime-core'
 import { Modal } from 'ant-design-vue'
+import type { ColumnType } from 'nocodb-sdk'
 import { useLTARStoreOrThrow, useVModel } from '#imports'
 import { useSmartsheetRowStoreOrThrow } from '~/composables/useSmartsheetRowStore'
 import { ColumnInj, IsFormInj } from '~/context'
@@ -25,7 +26,7 @@ const {
   getRelatedTableRowId,
 } = useLTARStoreOrThrow()
 
-const { isNew, state } = useSmartsheetRowStoreOrThrow()
+const { isNew, state, removeLTARRef } = useSmartsheetRowStoreOrThrow()
 
 watch([vModel, isForm], (nextVal) => {
   if (nextVal[0] || nextVal[1]) {
@@ -34,10 +35,14 @@ watch([vModel, isForm], (nextVal) => {
 })
 
 const unlinkRow = async (row: Record<string, any>) => {
+  if (isNew.value) {
+    removeLTARRef(row, column?.value as ColumnType)
+  } else {
     await unlink(row)
-
     await loadChildrenList()
   }
+}
+
 const container = computed(() =>
   isForm
     ? h('div', {

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

@@ -6,7 +6,7 @@ import { useVirtualCell } from '~/composables/useVirtualCell'
 
 const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState((meta: Ref<TableType>, row: Ref<Row>) => {
   // state
-  const state = ref<Record<string, Record<string, any> | Record<string, any>[]>>({})
+  const state = ref<Record<string, Record<string, any> | Record<string, any>[] | null>>({})
 
   // getters
   const isNew = computed(() => row.value?.rowMeta?.new)
@@ -16,18 +16,29 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
     const { isHm, isMm } = $(useVirtualCell(ref(column)))
     if (isHm || isMm) {
       state.value[column.title!] = state.value[column.title!] || []
-      state.value[column.title!].push(value)
+      state.value[column.title!]!.push(value)
     } else {
       state.value[column.title!] = value
     }
   }
 
+  // actions
+  const removeLTARRef = async (value: Record<string, any>, column: ColumnType) => {
+    const { isHm, isMm } = $(useVirtualCell(ref(column)))
+    if (isHm || isMm) {
+      state.value[column.title!]?.splice(state.value[column.title!]?.indexOf(value), 1)
+    } else {
+      state.value[column.title!] = null
+    }
+  }
+
   return {
     row,
     state,
     isNew,
     // todo: use better name
     addLTARRef,
+    removeLTARRef,
   }
 }, 'smartsheet-row-store')