fix(gui): after save maintain the relation data in expanded-form

re #3566

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/smartsheet/expanded-form/Header.vue

@@ -5,7 +5,7 @@ const emit = defineEmits(['cancel'])
 
 const { meta, isSqlView } = useSmartsheetStoreOrThrow()
 
-const { commentsDrawer, primaryValue, save: _save } = useExpandedFormStoreOrThrow()
+const { commentsDrawer, primaryValue, save: _save, loadRow } = useExpandedFormStoreOrThrow()
 
 const { isNew, syncLTARRefs } = useSmartsheetRowStoreOrThrow()
 
@@ -15,6 +15,7 @@ const save = async () => {
   if (isNew.value) {
     const data = await _save()
     await syncLTARRefs(data)
+    await loadRow()
   } else {
     await _save()
   }
@@ -46,7 +47,7 @@ const iconColor = '#1890ff'
       <template #title>
         <div class="text-center w-full">{{ $t('general.reload') }}</div>
       </template>
-      <mdi-reload class="cursor-pointer select-none text-gray-500" />
+      <mdi-reload class="cursor-pointer select-none text-gray-500" @click="loadRow" />
     </a-tooltip>
     <a-tooltip v-if="!isSqlView" placement="bottom">
       <!--      Toggle comments draw -->

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
+import type { TableType, ViewType } from 'nocodb-sdk'
 import { isSystemColumn, isVirtualCol } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import Cell from '../Cell.vue'
@@ -10,14 +10,10 @@ import {
   FieldsInj,
   IsFormInj,
   MetaInj,
-  NOCO,
   computedInject,
-  extractPkFromRow,
   provide,
   ref,
   toRef,
-  useNuxtApp,
-  useProject,
   useProvideExpandedFormStore,
   useProvideSmartsheetStore,
   useVModel,
@@ -53,25 +49,10 @@ const fields = computedInject(FieldsInj, (_fields) => {
 
 provide(MetaInj, meta)
 
-const { commentsDrawer, changedColumns, state: rowState, isNew } = useProvideExpandedFormStore(meta, row)
-
-const { $api } = useNuxtApp()
+const { commentsDrawer, changedColumns, state: rowState, isNew, loadRow } = useProvideExpandedFormStore(meta, row)
 
 if (props.loadRow) {
-  const { project } = useProject()
-
-  const { sharedView } = useSharedView() as Record<string, any>
-
-  row.value.row = 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[]),
-  )
-
-  row.value.oldRow = { ...row.value.row }
-
-  row.value.rowMeta = {}
+  await loadRow()
 }
 
 useProvideSmartsheetStore(ref({}) as Ref<ViewType>, meta)

packages/nc-gui/composables/useExpandedFormStore.ts

@@ -29,6 +29,8 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
   const changedColumns = ref(new Set<string>())
   const { project } = useProject()
   const rowStore = useProvideSmartsheetRowStore(meta, row)
+  const { sharedView } = useSharedView() as Record<string, any>
+
   // todo
   // const activeView = inject(ActiveViewInj)
 
@@ -174,6 +176,20 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
     return data
   }
 
+  const loadRow = async () => {
+    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[]),
+    )
+    Object.assign(row.value, {
+      row: record,
+      oldRow: { ...record },
+      rowMeta: {},
+    })
+  }
+
   return {
     ...rowStore,
     commentsOnly,
@@ -189,6 +205,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
     primaryValue,
     save,
     changedColumns,
+    loadRow,
   }
 }, 'expanded-form-store')