refactor(gui-v2): update LTAR columns

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

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

@@ -14,7 +14,8 @@ interface Props {
 
 const props = defineProps<Props>()
 const emit = defineEmits(['update:modelValue', 'navigate'])
-const { column } = props
+
+const column = toRef(props, 'column')
 const active = toRef(props, 'active', false)
 const row = toRef(props, 'row')
 

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
+import type { Ref } from 'vue'
 import ItemChip from './components/ItemChip.vue'
 import ListItems from './components/ListItems.vue'
 import { useProvideLTARStore } from '#imports'
@@ -15,7 +16,7 @@ const localState = null
 const listItemsDlg = ref(false)
 
 const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
-  column as Required<ColumnType>,
+  column as Ref<Required<ColumnType>>,
   row,
   () => reloadTrigger?.trigger(),
 )

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
+import type { Ref } from 'vue'
 import ItemChip from './components/ItemChip.vue'
 import ListChildItems from './components/ListChildItems.vue'
 import ListItems from './components/ListItems.vue'
@@ -17,7 +18,7 @@ const listItemsDlg = ref(false)
 const childListDlg = ref(false)
 
 const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
-  column as Required<ColumnType>,
+  column as Ref<Required<ColumnType>>,
   row,
   () => reloadTrigger?.trigger(),
 )

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
+import type { Ref } from 'vue'
 import ItemChip from './components/ItemChip.vue'
 import ListChildItems from './components/ListChildItems.vue'
 import ListItems from './components/ListItems.vue'
@@ -17,7 +18,7 @@ const listItemsDlg = ref(false)
 const childListDlg = ref(false)
 
 const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
-  column as Required<ColumnType>,
+  column as Ref<Required<ColumnType>>,
   row,
   () => reloadTrigger?.trigger(),
 )

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

@@ -13,7 +13,7 @@ interface DataApiResponse {
 
 /** Store for managing Link to another cells */
 const [useProvideLTARStore, useLTARStore] = useInjectionState(
-  (column: Required<ColumnType>, row?: Ref<Row>, reloadData = () => {}) => {
+  (column: Ref<Required<ColumnType>>, row?: Ref<Row>, reloadData = () => {}) => {
     // state
     const { metas, getMeta } = useMetas()
     const { project } = useProject()
@@ -31,12 +31,12 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       size: 10,
     })
 
-    const colOptions = column.colOptions as LinkToAnotherRecordType
+    const colOptions = $computed(() => column?.value.colOptions as LinkToAnotherRecordType)
 
     // getters
-    const meta = computed(() => metas?.value?.[column.fk_model_id as string])
+    const meta = computed(() => metas?.value?.[column?.value?.fk_model_id as string])
     const relatedTableMeta = computed<TableType>(() => {
-      return metas.value?.[(column.colOptions as any)?.fk_related_model_id as string]
+      return metas.value?.[colOptions?.fk_related_model_id as string]
     })
 
     const rowId = computed(() =>
@@ -72,8 +72,8 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
           project.value.id as string,
           meta.value.id,
           rowId.value,
-          (column.colOptions as LinkToAnotherRecordType).type as 'mm' | 'hm',
+          colOptions.type as 'mm' | 'hm',
-          column.title,
+          column?.value?.title,
           // todo: swagger type correction
           {
             limit: childrenExcludedListPagination.size,
@@ -99,7 +99,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
           meta.value.id,
           rowId.value,
           colOptions.type as 'mm' | 'hm',
-          column.title,
+          column?.value?.title,
           // todo: swagger type correction
           {
             limit: childrenListPagination.size,
@@ -157,7 +157,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
           meta.value.title,
           rowId.value,
           colOptions.type as 'mm' | 'hm',
-          column.title,
+          column?.value?.title,
           getRelatedTableRowId(row) as string,
         )
       } catch (e) {
@@ -195,7 +195,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
           meta.value.title as string,
           rowId.value,
           colOptions.type as 'mm' | 'hm',
-          column.title,
+          column?.value?.title,
           getRelatedTableRowId(row) as string,
         )
       } catch (e) {