Browse Source

wip(gui): url for expanded row

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/3655/head
Pranav C 2 years ago
parent
commit
6419934255
  1. 42
      packages/nc-gui/components/smartsheet/Grid.vue
  2. 7
      packages/nc-gui/components/smartsheet/expanded-form/index.vue
  3. 5
      packages/nc-gui/composables/useExpandedFormStore.ts
  4. 0
      packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]]/[[rowId]].vue

42
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,12 +135,25 @@ reloadViewDataHook?.on(async (shouldShowLoading) => {
const skipRowRemovalOnCancel = ref(false)
const expandForm = (row: Row, state?: Record<string, any>, fromToolbar = false) => {
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 () => {
const newRow = await addEmptyRow()
expandForm(newRow, undefined, true)
@ -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,
},
})
},
})
</script>
<template>
@ -617,6 +650,15 @@ onBeforeUnmount(async () => {
}
"
/>
<SmartsheetExpandedForm
v-if="expandedFormOnRowIdDlg"
:key="route.params.rowId"
v-model="expandedFormOnRowIdDlg"
:row="{ row: {}, oldRow: {}, rowMeta: {} }"
:meta="meta"
:row-id="route.params.rowId"
/>
</div>
</template>

7
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<Props>()
@ -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<ViewType>, meta)
provide(IsFormInj, ref(true))

5
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 },

0
packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue → packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]]/[[rowId]].vue

Loading…
Cancel
Save