Browse Source

feat(gui): add row url feature in gallery view

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/3655/head
Pranav C 2 years ago
parent
commit
b8df66ec11
  1. 52
      packages/nc-gui/components/smartsheet/Gallery.vue
  2. 2
      packages/nc-gui/components/smartsheet/Grid.vue

52
packages/nc-gui/components/smartsheet/Gallery.vue

@ -18,6 +18,7 @@ import {
} from '#imports' } from '#imports'
import Row from '~/components/smartsheet/Row.vue' import Row from '~/components/smartsheet/Row.vue'
import type { Row as RowType } from '~/composables' import type { Row as RowType } from '~/composables'
import { extractPkFromRow } from '~/utils'
import ImageIcon from '~icons/mdi/file-image-box' import ImageIcon from '~icons/mdi/file-image-box'
interface Attachment { interface Attachment {
@ -54,6 +55,10 @@ provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
const fields = inject(FieldsInj, ref([])) const fields = inject(FieldsInj, ref([]))
const route = useRoute()
const router = useRouter()
const fieldsWithoutCover = computed(() => fields.value.filter((f) => f.id !== galleryData.value?.fk_cover_image_col_id)) const fieldsWithoutCover = computed(() => fields.value.filter((f) => f.id !== galleryData.value?.fk_cover_image_col_id))
const coverImageColumn: any = $( const coverImageColumn: any = $(
@ -101,11 +106,23 @@ reloadViewDataHook?.on(async () => {
}) })
}) })
const expandForm = (row: RowType, state?: Record<string, any>) => { const expandForm = (row: RowType, _state?: Record<string, any>) => {
if (!isUIAllowed('xcDatatableEditable')) return if (!isUIAllowed('xcDatatableEditable')) return
expandedFormRow.value = row
expandedFormRowState.value = state const rowId = extractPkFromRow(row.row, meta.value.columns)
expandedFormDlg.value = true
if (rowId) {
router.push({
query: {
...route.query,
rowId,
},
})
} else {
expandedFormRow.value = row
expandedFormRowState.value = state
expandedFormDlg.value = true
}
} }
const expandFormClick = async (e: MouseEvent, row: RowType) => { const expandFormClick = async (e: MouseEvent, row: RowType) => {
@ -119,6 +136,24 @@ openNewRecordFormHook?.on(async () => {
const newRow = await addEmptyRow() const newRow = await addEmptyRow()
expandForm(newRow) expandForm(newRow)
}) })
const expandedFormOnRowIdDlg = computed({
get() {
return !!route.query.rowId
},
set(val) {
if (!val)
router.push({
query: {
...route.query,
rowId: undefined,
},
})
},
})
// reload table data reload hook as fallback to rowdatareload
provide(ReloadRowDataHookInj, reloadViewDataHook)
</script> </script>
<template> <template>
@ -187,6 +222,15 @@ openNewRecordFormHook?.on(async () => {
:state="expandedFormRowState" :state="expandedFormRowState"
:meta="meta" :meta="meta"
/> />
<SmartsheetExpandedForm
v-if="expandedFormOnRowIdDlg"
:key="route.query.rowId"
v-model="expandedFormOnRowIdDlg"
:row="{ row: {}, oldRow: {}, rowMeta: {} }"
:meta="meta"
:row-id="route.query.rowId"
/>
</div> </div>
</template> </template>

2
packages/nc-gui/components/smartsheet/Grid.vue

@ -150,8 +150,6 @@ const expandForm = (row: Row, state?: Record<string, any>, fromToolbar = false)
expandedFormDlg.value = true expandedFormDlg.value = true
skipRowRemovalOnCancel.value = !fromToolbar skipRowRemovalOnCancel.value = !fromToolbar
} }
/* */
} }
openNewRecordFormHook?.on(async () => { openNewRecordFormHook?.on(async () => {

Loading…
Cancel
Save