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

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

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"

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"
     />

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

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">

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

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

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>

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(() => {

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 }"

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"

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="

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="

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) => {

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",