From 64199342554c9f98406e4182a1787ddb0caae28a Mon Sep 17 00:00:00 2001 From: Pranav C Date: Wed, 14 Sep 2022 14:10:42 +0530 Subject: [PATCH] wip(gui): url for expanded row Signed-off-by: Pranav C --- .../nc-gui/components/smartsheet/Grid.vue | 50 +++++++++++++++++-- .../smartsheet/expanded-form/index.vue | 7 +++ .../composables/useExpandedFormStore.ts | 5 +- .../[[rowId]].vue} | 0 4 files changed, 56 insertions(+), 6 deletions(-) rename packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/{[[viewTitle]].vue => [[viewTitle]]/[[rowId]].vue} (100%) diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue index 515ce9ad41..73546a870d 100644 --- a/packages/nc-gui/components/smartsheet/Grid.vue +++ b/packages/nc-gui/components/smartsheet/Grid.vue @@ -2,6 +2,7 @@ import type { ColumnType } from 'nocodb-sdk' import { UITypes, isVirtualCol } from 'nocodb-sdk' import { message } from 'ant-design-vue' +import { useRoute } from '#app' import { ActiveViewInj, CellUrlDisableOverlayInj, @@ -34,6 +35,7 @@ import { } from '#imports' import type { Row } from '~/composables' import { NavigateDir } from '~/lib' +import { extractPkFromRow } from '~/utils' const { t } = useI18n() @@ -53,6 +55,9 @@ const openNewRecordFormHook = inject(OpenNewRecordFormHookInj, createEventHook() const { isUIAllowed } = useUIPermission() const hasEditPermission = isUIAllowed('xcDatatableEditable') +const route = useRoute() +const router = useRouter() + // todo: get from parent ( inject or use prop ) const isView = false @@ -130,10 +135,23 @@ reloadViewDataHook?.on(async (shouldShowLoading) => { const skipRowRemovalOnCancel = ref(false) const expandForm = (row: Row, state?: Record, fromToolbar = false) => { - expandedFormRow.value = row - expandedFormRowState.value = state - expandedFormDlg.value = true - skipRowRemovalOnCancel.value = !fromToolbar + const rowId = extractPkFromRow(row.row, meta.value.columns) + + if (rowId) { + router.push({ + params: { + ...route.params, + rowId, + }, + }) + } else { + expandedFormRow.value = row + expandedFormRowState.value = state + expandedFormDlg.value = true + skipRowRemovalOnCancel.value = !fromToolbar + } + + /* */ } openNewRecordFormHook?.on(async () => { @@ -377,6 +395,21 @@ onBeforeUnmount(async () => { } } }) + +const expandedFormOnRowIdDlg = computed({ + get() { + return !!route.params.rowId + }, + set(val) { + if (!val) + router.push({ + params: { + ...route.params, + rowId: undefined, + }, + }) + }, +}) diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue index e2e535bd4d..3e1ccaf8f2 100644 --- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue +++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue @@ -29,6 +29,7 @@ interface Props { meta: TableType loadRow?: boolean useMetaFields?: boolean + rowId?: string } const props = defineProps() @@ -52,10 +53,16 @@ provide(MetaInj, meta) const { commentsDrawer, changedColumns, state: rowState, isNew, loadRow } = useProvideExpandedFormStore(meta, row) + if (props.loadRow) { await loadRow() } +if (props.rowId) { + loadRow(props.rowId) +} + + useProvideSmartsheetStore(ref({}) as Ref, meta) provide(IsFormInj, ref(true)) diff --git a/packages/nc-gui/composables/useExpandedFormStore.ts b/packages/nc-gui/composables/useExpandedFormStore.ts index 2aec9d1bf6..84483102ff 100644 --- a/packages/nc-gui/composables/useExpandedFormStore.ts +++ b/packages/nc-gui/composables/useExpandedFormStore.ts @@ -175,13 +175,14 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m return data } - const loadRow = async () => { + const loadRow = async (rowId?: string) => { const record = await $api.dbTableRow.read( NOCO, (project?.value?.id || sharedView.value.view.project_id) as string, meta.value.title, - extractPkFromRow(row.value.row, meta.value.columns as ColumnType[]), + rowId ?? extractPkFromRow(row.value.row, meta.value.columns as ColumnType[]), ) + Object.assign(row.value, { row: record, oldRow: { ...record }, diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue b/packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]]/[[rowId]].vue similarity index 100% rename from packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue rename to packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]]/[[rowId]].vue