fix(gui-v2): create a store for LTAR column

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

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

@@ -1,24 +1,30 @@
 <script setup lang="ts">
+import { computed } from '@vue/reactivity'
+import { Row } from 'ant-design-vue'
 import type { ColumnType } from 'nocodb-sdk'
 import { provide, useVirtualCell } from '#imports'
-import { ColumnInj, ValueInj, ActiveCellInj } from '~/context'
+import { ColumnInj, ValueInj, ActiveCellInj, RowInj } from '~/context'
 import { NavigateDir } from '~/lib'
 
 interface Props {
   column: ColumnType
   modelValue: any
+  row: Record<string, any>
   active?: boolean
 }
 
 const props = defineProps<Props>()
-const  { column, modelValue: value,  } = props
+const emit = defineEmits(['update:modelValue', 'navigate'])
+
+const { column, modelValue: value, row } = props
 const active = toRef(props, 'active', false)
 
-const emit = defineEmits(['update:modelValue', 'navigate'])
 
 provide(ColumnInj, column)
 provide(ValueInj, value)
 provide(ActiveCellInj, active)
+provide(RowInj, row)
+provide('value', value)
 
 const { isLookup, isBt, isRollup, isMm, isHm, isFormula, isCount } = useVirtualCell(column)
 </script>

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

@@ -1,25 +1,27 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import ItemChip from './components/ItemChip.vue'
-import { ColumnInj, ValueInj } from '~/context'
+import { ColumnInj, ValueInj, RowInj } from '~/context'
 import { useBelongsTo } from '#imports'
+import { useProvideLTARStore } from '#imports'
 import MdiExpandIcon from '~icons/mdi/arrow-expand'
 
 const column = inject(ColumnInj)
 const value = inject(ValueInj)
+const row = inject(RowInj)
 const active = false
 const localState = null
 
-const { parentMeta, loadParentMeta, primaryValueProp } = useBelongsTo(column as ColumnType)
-await loadParentMeta()
-
+const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp,childrenExcludedList } = useProvideLTARStore(column as ColumnType, row)
+await loadRelatedTableMeta()
+const data = await childrenExcludedList()
 </script>
 
 <template>
   <div class="flex w-full chips-wrapper align-center group" :class="{ active }">
     <div class="chips d-flex align-center flex-grow">
       <template v-if="value || localState">
-        <ItemChip :active="active" :item="value" :value="value[primaryValueProp]" />
+        <ItemChip :active="active" :item="value" :value="value[relatedTablePrimaryValueProp]" />
       </template>
     </div>
     <div class="flex-1" />

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

@@ -13,9 +13,9 @@ const active = inject(ActiveCellInj, false)
 </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 }" >
+  <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" v-if="!readonly" class="flex align-center">
       <MdiCloseThickIcon class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" />
     </div>
   </div>

packages/nc-gui-v2/composables/columns/useLTARColumn.ts

@@ -1,13 +1,14 @@
-import {ColumnType, LinkToAnotherRecordType, TableType} from "nocodb-sdk";
-import {Ref} from "vue";
+import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
+import type { Ref } from 'vue'
 
-export default (column: Ref<ColumnType>) =>{
-
-  const {$api} = useNuxtApp()
-  const {metas,getMeta} = useMetas()
+export default (column: Ref<ColumnType>) => {
+  const { $api } = useNuxtApp()
+  const { metas, getMeta } = useMetas()
 
   const colOptions = computed<LinkToAnotherRecordType>(() => column.value.colOptions as LinkToAnotherRecordType)
-  const relatedTableMeta = computed<TableType>(() => colOptions?.value && metas.value?.[colOptions.value?.fk_related_model_id as string])
+  const relatedTableMeta = computed<TableType>(
+    () => colOptions?.value && metas.value?.[colOptions.value?.fk_related_model_id as string],
+  )
 
   const removeChild = () => {
     // todo: audit
@@ -26,10 +27,9 @@ export default (column: Ref<ColumnType>) =>{
     // await this.$api.dbTableRow.nestedAdd('noco', this.projectName, this.meta.title, id, 'bt', this.column.title, pid);
   }
 
- const loadRelatedTableMeta= async ()=>{
-   return getMeta(colOptions.value?.fk_related_model_id as string)
- }
-
+  const loadRelatedTableMeta = async () => {
+    return getMeta(colOptions.value?.fk_related_model_id as string)
+  }
 
   // this.data = await this.$api.dbTableRow.nestedChildrenExcludedList(
   //   'noco',
@@ -45,7 +45,6 @@ export default (column: Ref<ColumnType>) =>{
   //   }
   // );
 
-
   //   this.data = await this.$api.dbTableRow.nestedList(
   //           'noco',
   //           this.projectName,
@@ -59,5 +58,5 @@ export default (column: Ref<ColumnType>) =>{
   //           }
   //         );
 
-  return  {addChild, removeChild, loadRelatedTableMeta, relatedTableMeta}
+  return { addChild, removeChild, loadRelatedTableMeta, relatedTableMeta }
 }

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

@@ -21,3 +21,4 @@ export * from './useViewSorts'
 export * from './useVirtualCell'
 export * from './useColumnCreateStore'
 export * from './useSmartsheetStore'
+export * from './useLTARStore'

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

@@ -0,0 +1,65 @@
+import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
+import { useMetas } from './useMetas'
+import { useInjectionState } from '#imports'
+import { useProject } from '~/composables/useProject'
+import { NOCO } from '~/lib'
+
+const [useProvideLTARStore, useLTARStore] = useInjectionState((column: ColumnType, row?: Record<string, any>) => {
+  // state
+  const { metas, getMeta } = useMetas()
+  const { project } = useProject()
+  const { $api } = useNuxtApp()
+
+  // getters
+  const meta = computed(() => metas?.value?.[column.fk_model_id as string])
+  const relatedTableMeta = computed<TableType>(() => {
+    return metas.value?.[(column.colOptions as any)?.fk_related_model_id as string]
+  })
+
+  const rowId = computed(() =>
+    meta.value.columns
+      .filter((c) => c.pk)
+      .map((c) => row?.[c.title])
+      .join('___'),
+  )
+
+  // actions
+  const loadRelatedTableMeta = async () => {
+    await getMeta((column.colOptions as any)?.fk_related_model_id as string)
+  }
+
+  const relatedTablePrimaryValueProp = computed(() => {
+    return (relatedTableMeta?.value?.columns?.find((c) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title
+  })
+
+  const size = 25
+  const query = ''
+  const page = 1
+  const childrenExcludedList = async () => {
+    // this.data =
+    return await $api.dbTableRow.nestedChildrenExcludedList(
+      NOCO,
+      project.value.id as string,
+      meta.value.title,
+      rowId.value,
+      (column.colOptions as LinkToAnotherRecordType).type as 'mm' | 'hm',
+      column.title as string,
+      // todo: swagger type correction
+      {
+        limit: size,
+        offset: size * (page - 1),
+        where: query && `(${relatedTablePrimaryValueProp.value},like,${query})`,
+      } as any,
+    )
+  }
+
+  return { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, childrenExcludedList, rowId }
+}, 'ltar-store')
+
+export { useProvideLTARStore }
+
+export function useLTARStoreOrThrow() {
+  const ltarStore = useLTARStore()
+  if (ltarStore == null) throw new Error('Please call `useLTARStore` on the appropriate parent component')
+  return ltarStore
+}

packages/nc-gui-v2/context/index.ts

@@ -6,6 +6,7 @@ import type { TabItem } from '~/composables/useTabs'
 
 export const EditEnabledInj: InjectionKey<boolean> = Symbol('edit-enabled')
 export const ActiveCellInj: InjectionKey<Ref<boolean>> = Symbol('active-cell')
+export const RowInj: InjectionKey<Ref<Record<string, any>>> = Symbol('row')
 export const ColumnInj: InjectionKey<ColumnType & { meta: any }> = Symbol('column-injection')
 export const MetaInj: InjectionKey<ComputedRef<TableType>> = Symbol('meta-injection')
 export const TabMetaInj: InjectionKey<ComputedRef<TabItem>> = Symbol('tab-meta-injection')