Browse Source

fix: expanded view not working on shared view and shared bases (#8596)

* fix: expanded view not working on shared view and shared bases

* fix: expanded record not working on calendar shared

* fix: review commenys

* fix: calendar unwanted data mutattion fix: kanban update changed Columns

* fix: move try catch to inner block

* fix: coderabbit comments
nc-fix/duplicate-code
Anbarasu 5 months ago committed by GitHub
parent
commit
3a951118bc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 8
      packages/nc-gui/components/smartsheet/Gallery.vue
  2. 10
      packages/nc-gui/components/smartsheet/Kanban.vue
  3. 7
      packages/nc-gui/components/smartsheet/Map.vue
  4. 2
      packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
  5. 4
      packages/nc-gui/components/smartsheet/calendar/MonthView.vue
  6. 2
      packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
  7. 2
      packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
  8. 46
      packages/nc-gui/components/smartsheet/calendar/index.vue
  9. 44
      packages/nc-gui/components/smartsheet/expanded-form/index.vue
  10. 1
      packages/nc-gui/components/smartsheet/grid/Table.vue
  11. 15
      packages/nc-gui/components/smartsheet/grid/index.vue
  12. 1
      packages/nc-gui/components/virtual-cell/components/LinkedItems.vue
  13. 1
      packages/nc-gui/components/virtual-cell/components/UnLinkedItems.vue
  14. 97
      packages/nc-gui/composables/useExpandedFormStore.ts
  15. 1
      packages/nc-gui/lang/en.json

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

@ -100,6 +100,8 @@ const attachments = (record: any): Attachment[] => {
const expandForm = (row: RowType, state?: Record<string, any>) => {
const rowId = extractPkFromRow(row.row, meta.value!.columns!)
expandedFormRow.value = row
expandedFormRowState.value = state
if (rowId && !isPublic.value) {
router.push({
@ -109,8 +111,6 @@ const expandForm = (row: RowType, state?: Record<string, any>) => {
},
})
} else {
expandedFormRow.value = row
expandedFormRowState.value = state
expandedFormDlg.value = true
}
}
@ -340,6 +340,7 @@ watch(
v-if="expandedFormRow && expandedFormDlg"
v-model="expandedFormDlg"
:row="expandedFormRow"
:load-row="!isPublic"
:state="expandedFormRowState"
:meta="meta"
:view="view"
@ -350,8 +351,9 @@ watch(
<LazySmartsheetExpandedForm
v-if="expandedFormOnRowIdDlg && meta?.id"
v-model="expandedFormOnRowIdDlg"
:row="{ row: {}, oldRow: {}, rowMeta: {} }"
:row="expandedFormRow ?? { row: {}, oldRow: {}, rowMeta: {} }"
:meta="meta"
:load-row="!isPublic"
:row-id="route.query.rowId"
:view="view"
show-next-prev-icons

10
packages/nc-gui/components/smartsheet/Kanban.vue

@ -139,7 +139,8 @@ reloadViewMetaHook?.on(async () => {
const expandForm = (row: RowType, state?: Record<string, any>) => {
const rowId = extractPkFromRow(row.row, meta.value!.columns!)
expandedFormRow.value = row
expandedFormRowState.value = state
if (rowId && !isPublic.value) {
router.push({
query: {
@ -148,8 +149,6 @@ const expandForm = (row: RowType, state?: Record<string, any>) => {
},
})
} else {
expandedFormRow.value = row
expandedFormRowState.value = state
expandedFormDlg.value = true
}
}
@ -729,6 +728,7 @@ const getRowId = (row: RowType) => {
:row="expandedFormRow"
:state="expandedFormRowState"
:meta="meta"
:load-row="!isPublic"
:view="view"
/>
</Suspense>
@ -736,9 +736,9 @@ const getRowId = (row: RowType) => {
<Suspense>
<LazySmartsheetExpandedForm
v-if="expandedFormOnRowIdDlg && meta?.id"
:key="route.query.rowId"
v-model="expandedFormOnRowIdDlg"
:row="{ row: {}, oldRow: {}, rowMeta: {} }"
:load-row="!isPublic"
:row="expandedFormRow ?? { row: {}, oldRow: {}, rowMeta: {} }"
:meta="meta"
:row-id="route.query.rowId"
:view="view"

7
packages/nc-gui/components/smartsheet/Map.vue

@ -51,6 +51,8 @@ const getMapCenterLocalStorageKey = (viewId: string) => `mapView.${viewId}.cente
const expandForm = (row: Row, state?: Record<string, any>) => {
const rowId = extractPkFromRow(row.row, meta.value!.columns!)
expandedFormRow.value = row
if (rowId) {
router.push({
query: {
@ -59,7 +61,6 @@ const expandForm = (row: Row, state?: Record<string, any>) => {
},
})
} else {
expandedFormRow.value = row
expandedFormRowState.value = state
expandedFormDlg.value = true
}
@ -236,6 +237,7 @@ const count = computed(() => paginationData.value.totalRows)
v-if="expandedFormRow && expandedFormDlg"
v-model="expandedFormDlg"
:row="expandedFormRow"
:load-row="!isPublic"
:state="expandedFormRowState"
:meta="meta"
:view="view"
@ -245,8 +247,9 @@ const count = computed(() => paginationData.value.totalRows)
<LazySmartsheetExpandedForm
v-if="expandedFormOnRowIdDlg && meta?.id"
v-model="expandedFormOnRowIdDlg"
:row="{ row: {}, oldRow: {}, rowMeta: {} }"
:row="expandedFormRow ?? { row: {}, oldRow: {}, rowMeta: {} }"
:meta="meta"
:load-row="!isPublic"
:row-id="route.query.rowId"
:view="view"
/>

2
packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue

@ -681,13 +681,13 @@ const stopDrag = (event: MouseEvent) => {
}
const dragStart = (event: MouseEvent, record: Row) => {
if (!isUIAllowed('dataEdit')) return
let target = event.target as HTMLElement
isDragging.value = false
// We use a timeout to determine if the user is dragging or clicking on the record
dragTimeout.value = setTimeout(() => {
if (!isUIAllowed('dataEdit')) return
isDragging.value = true
while (!target.classList.contains('draggable-record')) {
target = target.parentElement as HTMLElement

4
packages/nc-gui/components/smartsheet/calendar/MonthView.vue

@ -567,11 +567,12 @@ const stopDrag = (event: MouseEvent) => {
}
const dragStart = (event: MouseEvent, record: Row) => {
if (!isUIAllowed('dataEdit') || resizeInProgress.value || !record.rowMeta.id) return
if (resizeInProgress.value || !record.rowMeta.id) return
let target = event.target as HTMLElement
isDragging.value = false
dragTimeout.value = setTimeout(() => {
if (!isUIAllowed('dataEdit')) return
isDragging.value = true
while (!target.classList.contains('draggable-record')) {
@ -825,7 +826,6 @@ const addRecord = (date: dayjs.Dayjs) => {
:resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')"
:selected="dragRecord?.rowMeta?.id === record.rowMeta.id || resizeRecord?.rowMeta?.id === record.rowMeta.id"
@resize-start="onResizeStart"
@dblclick.stop="emit('expandRecord', record)"
>
<template v-if="calDataType === UITypes.DateTime" #time>
<span class="text-xs font-medium text-gray-400">

2
packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue

@ -467,13 +467,13 @@ const stopDrag = (event: MouseEvent) => {
}
const dragStart = (event: MouseEvent, record: Row) => {
if (!isUIAllowed('dataEdit')) return
if (resizeInProgress.value) return
let target = event.target as HTMLElement
isDragging.value = false
dragTimeout.value = setTimeout(() => {
if (!isUIAllowed('dataEdit')) return
isDragging.value = true
while (!target.classList.contains('draggable-record')) {
target = target.parentElement as HTMLElement

2
packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue

@ -762,13 +762,13 @@ const stopDrag = (event: MouseEvent) => {
}
const dragStart = (event: MouseEvent, record: Row) => {
if (!isUIAllowed('dataEdit')) return
if (resizeInProgress.value) return
let target = event.target as HTMLElement
isDragging.value = false
dragTimeout.value = setTimeout(() => {
if (!isUIAllowed('dataEdit')) return
isDragging.value = true
while (!target.classList.contains('draggable-record')) {
target = target.parentElement as HTMLElement

46
packages/nc-gui/components/smartsheet/calendar/index.vue

@ -12,7 +12,7 @@ const reloadViewMetaHook = inject(ReloadViewMetaHookInj)
const reloadViewDataHook = inject(ReloadViewDataHookInj)
const { isMobileMode } = useGlobal()
const isPublic = inject(IsPublicInj, ref(false))
provide(IsFormInj, ref(false))
@ -45,14 +45,15 @@ const expandedFormOnRowIdDlg = computed({
get() {
return !!route.query.rowId
},
set(val) {
if (!val)
set(value) {
if (!value) {
router.push({
query: {
...route.query,
rowId: undefined,
},
})
}
},
})
@ -64,7 +65,11 @@ const expandedFormRowState = ref<Record<string, any>>()
const expandRecord = (row: RowType, state?: Record<string, any>) => {
const rowId = extractPkFromRow(row.row, meta.value!.columns!)
if (rowId) {
expandedFormRow.value = row
expandedFormRowState.value = state
if (rowId && !isPublic.value) {
router.push({
query: {
...route.query,
@ -72,13 +77,12 @@ const expandRecord = (row: RowType, state?: Record<string, any>) => {
},
})
} else {
expandedFormRow.value = row
expandedFormRowState.value = state
expandedFormDlg.value = true
}
}
const newRecord = (row: RowType) => {
if (isPublic.value) return
$e('c:calendar:new-record', activeCalendarView.value)
expandRecord({
row: {
@ -168,23 +172,27 @@ reloadViewDataHook?.on(async (params: void | { shouldShowLoading?: boolean }) =>
<LazySmartsheetExpandedForm
v-if="expandedFormRow && expandedFormDlg"
v-model="expandedFormDlg"
close-after-save
:meta="meta"
:row="expandedFormRow"
:load-row="!isPublic"
:state="expandedFormRowState"
:view="view"
/>
</Suspense>
<Suspense>
<LazySmartsheetExpandedForm
v-if="expandedFormOnRowIdDlg && meta?.id"
v-model="expandedFormOnRowIdDlg"
close-after-save
:meta="meta"
:row="{ row: {}, oldRow: {}, rowMeta: {} }"
:row-id="route.query.rowId"
:view="view"
/>
</Suspense>
<LazySmartsheetExpandedForm
v-if="expandedFormOnRowIdDlg && meta?.id"
v-model="expandedFormOnRowIdDlg"
close-after-save
:load-row="!isPublic"
:meta="meta"
:state="expandedFormRowState"
:row="{
row: {},
oldRow: {},
rowMeta: {},
}"
:row-id="route.query.rowId"
:view="view"
/>
</template>

44
packages/nc-gui/components/smartsheet/expanded-form/index.vue

@ -63,8 +63,6 @@ const isFirstRow = toRef(props, 'firstRow')
const route = useRoute()
const router = useRouter()
const isPublic = inject(IsPublicInj, ref(false))
// to check if a expanded form which is not yet saved exist or not
@ -303,14 +301,20 @@ provide(ReloadRowDataHookInj, reloadHook)
if (isKanban.value) {
// adding column titles to changedColumns if they are preset
for (const [k, v] of Object.entries(_row.value.row)) {
if (v) {
changedColumns.value.add(k)
if (_row.value.rowMeta.new) {
for (const [k, v] of Object.entries(_row.value.row)) {
if (v) {
changedColumns.value.add(k)
}
}
}
}
provide(IsExpandedFormOpenInj, isExpanded)
const triggerRowLoad = async (rowId?: string) => {
await Promise.allSettled([loadComments(), loadAudits(), _loadRow(rowId)])
}
const cellWrapperEl = ref()
onMounted(async () => {
@ -318,22 +322,15 @@ onMounted(async () => {
isLoading.value = true
const focusFirstCell = !isExpandedFormCommentMode.value
let isTriggered = false
if (props.loadRow) {
await _loadRow()
await Promise.all([loadComments(), loadAudits()])
}
if (props.rowId) {
try {
await _loadRow(props.rowId)
await Promise.all([loadComments(), loadAudits()])
} catch (e: any) {
if (e.response?.status === 404) {
message.error(t('msg.noRecordFound'))
router.replace({ query: {} })
} else throw e
}
if (props.loadRow && !props.rowId) {
await triggerRowLoad()
isTriggered = true
} else if (props.rowId && props.loadRow && !isTriggered) {
await triggerRowLoad(props.rowId)
} else {
_row.value = props.row
}
isLoading.value = false
@ -401,7 +398,7 @@ useActiveKeyupListener(
;(document.activeElement as HTMLInputElement)?.blur?.()
if (changedColumns.value.size > 0) {
await Modal.confirm({
Modal.confirm({
title: t('msg.saveChanges'),
okText: t('general.save'),
cancelText: t('labels.discard'),
@ -415,7 +412,7 @@ useActiveKeyupListener(
},
})
} else if (isNew.value) {
await Modal.confirm({
Modal.confirm({
title: 'Do you want to save the record?',
okText: t('general.save'),
cancelText: t('labels.discard'),
@ -458,8 +455,7 @@ const onConfirmDeleteRowClick = async () => {
}
watch(rowId, async (nRow) => {
await _loadRow(nRow)
await Promise.all([loadComments(), loadAudits()])
await triggerRowLoad(nRow)
})
const showRightSections = computed(() => {

1
packages/nc-gui/components/smartsheet/grid/Table.vue

@ -1930,7 +1930,6 @@ onKeyStroke('ArrowDown', onDown)
<span class="flex-1" />
<div
v-if="isUIAllowed('expandedForm')"
class="nc-expand"
:data-testid="`nc-expand-${rowIndex}`"
:class="{ 'nc-comment': row.rowMeta?.commentCount }"

15
packages/nc-gui/components/smartsheet/grid/index.vue

@ -79,6 +79,8 @@ provide(IsCalendarInj, ref(false))
provide(RowHeightInj, rowHeight)
const isPublic = inject(IsPublicInj, ref(false))
// reload table data reload hook as fallback to rowdatareload
provide(ReloadRowDataHookInj, reloadViewDataHook)
@ -86,10 +88,9 @@ const skipRowRemovalOnCancel = ref(false)
function expandForm(row: Row, state?: Record<string, any>, fromToolbar = false) {
const rowId = extractPkFromRow(row.row, meta.value?.columns as ColumnType[])
if (rowId) {
expandedFormRowState.value = state
expandedFormRow.value = row
expandedFormRowState.value = state
if (rowId && !isPublic.value) {
router.push({
query: {
...routeQuery.value,
@ -97,8 +98,6 @@ function expandForm(row: Row, state?: Record<string, any>, fromToolbar = false)
},
})
} else {
expandedFormRow.value = row
expandedFormRowState.value = state
expandedFormDlg.value = true
skipRowRemovalOnCancel.value = !fromToolbar
}
@ -238,6 +237,7 @@ const goToPreviousRow = () => {
<LazySmartsheetExpandedForm
v-if="expandedFormRow && expandedFormDlg"
v-model="expandedFormDlg"
:load-row="!isPublic"
:row="expandedFormRow"
:state="expandedFormRowState"
:meta="meta"
@ -248,8 +248,9 @@ const goToPreviousRow = () => {
<SmartsheetExpandedForm
v-if="expandedFormOnRowIdDlg && meta?.id"
v-model="expandedFormOnRowIdDlg"
:row="{ row: {}, oldRow: {}, rowMeta: {} }"
:row="expandedFormRow ?? { row: {}, oldRow: {}, rowMeta: {} }"
:meta="meta"
:load-row="!isPublic"
:state="expandedFormRowState"
:row-id="routeQuery.rowId"
:view="view"

1
packages/nc-gui/components/virtual-cell/components/LinkedItems.vue

@ -453,6 +453,7 @@ const onFilterChange = () => {
<LazySmartsheetExpandedForm
v-if="expandedFormRow && expandedFormDlg"
v-model="expandedFormDlg"
:load-row="!isPublic"
:close-after-save="isExpandedFormCloseAfterSave"
:meta="relatedTableMeta"
:new-record-header="

1
packages/nc-gui/components/virtual-cell/components/UnLinkedItems.vue

@ -439,6 +439,7 @@ const onFilterChange = () => {
<LazySmartsheetExpandedForm
v-if="expandedFormDlg"
v-model="expandedFormDlg"
:load-row="!isPublic"
:close-after-save="isExpandedFormCloseAfterSave"
:meta="relatedTableMeta"
:new-record-header="

97
packages/nc-gui/composables/useExpandedFormStore.ts

@ -46,13 +46,14 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
!sharedView.value ||
sharedView.value?.type === ViewTypes.GALLERY ||
sharedView.value?.type === ViewTypes.KANBAN ||
_row.value.rowMeta.new
_row.value?.rowMeta?.new
? _row.value
: ({ row: {}, oldRow: {}, rowMeta: {} } as Row),
)
row.value.rowMeta.fromExpandedForm = true
if (row.value?.rowMeta?.fromExpandedForm) {
row.value.rowMeta.fromExpandedForm = true
}
const rowStore = useProvideSmartsheetRowStore(row)
const activeView = inject(ActiveViewInj, ref())
@ -349,53 +350,67 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
}
const loadRow = async (rowId?: string, onlyVirtual = false, onlyNewColumns = false) => {
if (row.value.rowMeta.new || isPublic.value || !meta.value?.id) return
if (row?.value?.rowMeta?.new || isPublic.value || !meta.value?.id) return
const recordId = rowId ?? extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
if (!recordId) return
let record = await $api.dbTableRow.read(
NOCO,
// todo: base_id missing on view type
((base?.value?.id ?? meta.value?.base_id) || (sharedView.value?.view as any)?.base_id) as string,
meta.value.id as string,
encodeURIComponent(recordId),
{
getHiddenColumn: true,
},
)
// update only virtual columns value if `onlyVirtual` is true
if (onlyVirtual) {
record = {
...row.value.row,
...(meta.value.columns ?? []).reduce((partialRecord, col) => {
if (isVirtualCol(col) && col.title && col.title in record) {
partialRecord[col.title] = (record as Record<string, any>)[col.title as string]
}
return partialRecord
}, {} as Record<string, any>),
let record: Record<string, any> = {}
try {
record = await $api.dbTableRow.read(
NOCO,
// todo: base_id missing on view type
((base?.value?.id ?? meta.value?.base_id) || (sharedView.value?.view as any)?.base_id) as string,
meta.value.id as string,
encodeURIComponent(recordId),
{
getHiddenColumn: true,
},
)
} catch (err: any) {
if (err.response?.status === 404) {
const router = useRouter()
message.error(t('msg.noRecordFound'))
router.replace({ query: {} })
} else {
message.error(`${await extractSdkResponseErrorMsg(err)}`)
}
}
// update only new/duplicated/renamed columns value if `onlyNewColumns` is true
if (onlyNewColumns) {
record = Object.keys(record).reduce((acc, curr) => {
if (!Object.prototype.hasOwnProperty.call(row.value.row, curr)) {
acc[curr] = record(record as Record<string, any>)[curr]
} else {
acc[curr] = row.value.row[curr]
try {
// update only virtual columns value if `onlyVirtual` is true
if (onlyVirtual) {
record = {
...row.value.row,
...(meta.value.columns ?? []).reduce((partialRecord, col) => {
if (isVirtualCol(col) && col.title && col.title in record) {
partialRecord[col.title] = (record as Record<string, any>)[col.title as string]
}
return partialRecord
}, {} as Record<string, any>),
}
return acc
}, {} as Record<string, any>)
}
}
// update only new/duplicated/renamed columns value if `onlyNewColumns` is true
if (onlyNewColumns) {
record = Object.keys(record).reduce((acc, curr) => {
if (!Object.prototype.hasOwnProperty.call(row.value.row, curr)) {
acc[curr] = record[curr]
} else {
acc[curr] = row.value.row[curr]
}
return acc
}, {} as Record<string, any>)
}
Object.assign(row.value, {
row: record,
oldRow: { ...record },
rowMeta: {},
})
Object.assign(row.value, {
row: record,
oldRow: { ...record },
rowMeta: {},
})
} catch (e: any) {
message.error(`${t('msg.error.errorLoadingRecord')}`)
}
}
const deleteRowById = async (rowId?: string) => {

1
packages/nc-gui/lang/en.json

@ -1413,6 +1413,7 @@
"preventHideAllOptions": "You cannot hide all options if field is required"
},
"error": {
"errorLoadingRecord": "Error loading record data",
"fetchingCalendarData": "Error fetching calendar data",
"fetchingActiveDates": "Error fetching active dates",
"scopesRequired": "Scopes required",

Loading…
Cancel
Save