diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index 3b49f0536f..7872a7cb16 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -1,8 +1,8 @@
@@ -25,6 +28,7 @@ const data = await childrenExcludedList()
-
+
+
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
index 59e0e88923..5cc11ac1fe 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
@@ -1,5 +1,23 @@
-
-
+
+
+
+
+ {{ row[relatedTablePrimaryValueProp] }}
+
+
+
+
+
+
+
+
+ <!– No items found –>
{{ $t('placeholder.noItemsFound') }}
@@ -165,11 +199,11 @@ export default {
/>
-
+ -->
-
diff --git a/packages/nc-gui-v2/composables/useLTARStore.ts b/packages/nc-gui-v2/composables/useLTARStore.ts
index 7930188a24..0d5d44b4d6 100644
--- a/packages/nc-gui-v2/composables/useLTARStore.ts
+++ b/packages/nc-gui-v2/composables/useLTARStore.ts
@@ -1,14 +1,34 @@
-import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
+import type { ColumnType, LinkToAnotherRecordType, PaginatedType, TableType } from 'nocodb-sdk'
+import type { Ref } from 'vue'
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) => {
+interface DataApiResponse {
+ list: Record
+ pageInfo: PaginatedType
+}
+
+const [useProvideLTARStore, useLTARStore] = useInjectionState((column: Required, row?: Record) => {
// state
const { metas, getMeta } = useMetas()
const { project } = useProject()
const { $api } = useNuxtApp()
+ const childrenExcludedList: Ref = ref()
+ const childrenList: Ref = ref()
+ const childrenExcludedListPagination = reactive({
+ page: 1,
+ query: '',
+ size: 10,
+ })
+ const childrenListPagination = reactive({
+ page: 1,
+ query: '',
+ size: 10,
+ })
+
+ const colOptions = column.colOptions as LinkToAnotherRecordType
// getters
const meta = computed(() => metas?.value?.[column.fk_model_id as string])
@@ -18,12 +38,19 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState((column: ColumnTyp
const rowId = computed(() =>
meta.value.columns
- .filter((c) => c.pk)
- .map((c) => row?.[c.title])
+ .filter((c: Required) => c.pk)
+ .map((c: Required) => row?.[c.title])
.join('___'),
)
// actions
+ const getRelatedTableRowId = (row: Record) => {
+ return relatedTableMeta.value?.columns
+ ?.filter((c) => c.pk)
+ .map((c) => row?.[c.title as string])
+ .join('___')
+ }
+
const loadRelatedTableMeta = async () => {
await getMeta((column.colOptions as any)?.fk_related_model_id as string)
}
@@ -31,29 +58,138 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState((column: ColumnTyp
const relatedTablePrimaryValueProp = computed(() => {
return (relatedTableMeta?.value?.columns?.find((c) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title
})
+ const primaryValueProp = computed(() => {
+ return (meta?.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(
+ const loadChildrenExcludedList = async () => {
+ childrenExcludedList.value = await $api.dbTableRow.nestedChildrenExcludedList(
NOCO,
project.value.id as string,
- meta.value.title,
+ meta.value.id,
rowId.value,
(column.colOptions as LinkToAnotherRecordType).type as 'mm' | 'hm',
- column.title as string,
+ column.title,
+ // todo: swagger type correction
+ {
+ limit: childrenExcludedListPagination.size,
+ offset: childrenExcludedListPagination.size * (childrenExcludedListPagination.page - 1),
+ where:
+ childrenExcludedListPagination.query &&
+ `(${relatedTablePrimaryValueProp.value},like,${childrenExcludedListPagination.query})`,
+ } as any,
+ )
+ }
+
+ const loadChildrenList = async () => {
+ childrenList.value = await $api.dbTableRow.nestedList(
+ NOCO,
+ project.value.id as string,
+ meta.value.id,
+ rowId.value,
+ colOptions.type as 'mm' | 'hm',
+ column.title,
// todo: swagger type correction
{
- limit: size,
- offset: size * (page - 1),
- where: query && `(${relatedTablePrimaryValueProp.value},like,${query})`,
+ limit: childrenListPagination.size,
+ offset: childrenListPagination.size * (childrenListPagination.page - 1),
+ where: childrenListPagination.query && `(${relatedTablePrimaryValueProp.value},like,${childrenListPagination.query})`,
} as any,
)
}
+ const unlink = async (row: Record) => {
+ // const column = meta.columns.find(c => c.id === this.column.colOptions.fk_child_column_id);
+ // todo: handle if new record
+ // if (this.isNew) {
+ // this.$emit('updateCol', this.row, _cn, null);
+ // this.localState = null;
+ // this.$emit('update:localState', this.localState);
+ // return;
+ // }
+ // todo: handle bt column if required
+ // if (column.rqd) {
+ // this.$toast.info('Unlink is not possible, instead map to another parent.').goAway(3000);
+ // return;
+ // }
- return { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, childrenExcludedList, rowId }
+ // todo: audit
+ await $api.dbTableRow.nestedRemove(
+ NOCO,
+ project.value.title as string,
+ meta.value.title,
+ rowId.value,
+ colOptions.type as 'mm' | 'hm',
+ column.title,
+ getRelatedTableRowId(row) as string,
+ )
+
+ // todo: reload table data and children list
+ // this.$emit('loadTableData');
+ // if (this.isForm && this.$refs.childList) {
+ // this.$refs.childList.loadData();
+ // }
+ }
+
+ const link = async (row: Record) => {
+ // todo: handle new record
+ // const pid = this._extractRowId(parent, this.parentMeta);
+ // const id = this._extractRowId(this.row, this.meta);
+ // const _cn = this.meta.columns.find(c => c.id === this.column.colOptions.fk_child_column_id).title;
+ //
+ // if (this.isNew) {
+ // const _rcn = this.parentMeta.columns.find(c => c.id === this.column.colOptions.fk_parent_column_id).title;
+ // this.localState = parent;
+ // this.$emit('update:localState', this.localState);
+ // this.$emit('updateCol', this.row, _cn, parent[_rcn]);
+ // this.newRecordModal = false;
+ // return;
+ // }
+ await $api.dbTableRow.nestedAdd(
+ NOCO,
+ project.value.title as string,
+ meta.value.title as string,
+ rowId.value,
+ colOptions.type as 'mm' | 'hm',
+ column.title,
+ getRelatedTableRowId(row) as string,
+ )
+
+ // todo: reload table data and child list
+ // this.pid = pid;
+ //
+ // this.newRecordModal = false;
+ //
+ // this.$emit('loadTableData');
+ // if (this.isForm && this.$refs.childList) {
+ // this.$refs.childList.loadData();
+ // }
+ }
+
+
+ // watchers
+ watch(childrenExcludedListPagination, async () => {
+ await loadChildrenExcludedList()
+ })
+ watch(childrenListPagination, async () => {
+ await loadChildrenList()
+ })
+
+ return {
+ relatedTableMeta,
+ loadRelatedTableMeta,
+ relatedTablePrimaryValueProp,
+ childrenExcludedList,
+ childrenList,
+ rowId,
+ childrenExcludedListPagination,
+ childrenListPagination,
+ primaryValueProp,
+ meta,
+ unlink,
+ link,
+ loadChildrenExcludedList,
+ loadChildrenList,
+ }
}, 'ltar-store')
export { useProvideLTARStore }