From 29e430fd698f0350e2dd6c80c0dc019647ad98c6 Mon Sep 17 00:00:00 2001 From: Pranav C Date: Wed, 3 Aug 2022 11:19:19 +0530 Subject: [PATCH] feat(gui-v2): excluded child list modal Signed-off-by: Pranav C --- .../components/virtual-cell/BelongsTo.vue | 12 +- .../virtual-cell/components/ListItems.vue | 84 +++++---- .../nc-gui-v2/composables/useLTARStore.ts | 168 ++++++++++++++++-- 3 files changed, 209 insertions(+), 55 deletions(-) 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 @@
-
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 @@ - - 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 }