wip: reload only the related row

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

packages/nc-gui/components/smartsheet/Row.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { Row } from '~/composables'
 import { useProvideSmartsheetRowStore, useSmartsheetStoreOrThrow } from '#imports'
+import { ReloadRowDataHookInj, ReloadViewDataHookInj } from '~/context'
 
 interface Props {
   row: Row
@@ -10,7 +11,7 @@ const props = defineProps<Props>()
 const currentRow = toRef(props, 'row')
 
 const { meta } = useSmartsheetStoreOrThrow()
-const { isNew, state, syncLTARRefs } = useProvideSmartsheetRowStore(meta, currentRow)
+const { isNew, state, syncLTARRefs, loadRow } = useProvideSmartsheetRowStore(meta, currentRow)
 
 // on changing isNew(new record insert) status sync LTAR cell values
 watch(isNew, async (nextVal, prevVal) => {
@@ -21,6 +22,16 @@ watch(isNew, async (nextVal, prevVal) => {
     currentRow.value.oldRow = { ...currentRow.value.row, ...state.value }
   }
 })
+
+// override reload trigger and use it to reload row
+const reloadHook = createEventHook()
+
+reloadHook.on(() => {
+  if (isNew.value) return
+  loadRow()
+})
+
+provide(ReloadRowDataHookInj, reloadHook)
 </script>
 
 <template>

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

@@ -2,6 +2,7 @@
 import type { TableType, ViewType } from 'nocodb-sdk'
 import { isSystemColumn, isVirtualCol } from 'nocodb-sdk'
 import type { Ref } from 'vue'
+import { ReloadRowDataHookInj } from '~/context'
 import Cell from '../Cell.vue'
 import VirtualCell from '../VirtualCell.vue'
 import Comments from './Comments.vue'
@@ -80,18 +81,18 @@ const onClose = () => {
   isExpanded.value = false
 }
 
-// override reload trigger and use it to reload grid and the form itself
+const reloadParentRowHook = inject(ReloadRowDataHookInj, createEventHook())
-const reloadTrigger = inject(ReloadViewDataHookInj)!
 
+// override reload trigger and use it to reload grid and the form itself
 const reloadHook = createEventHook()
 
 reloadHook.on(() => {
   if (isNew.value) return
   loadRow()
-  reloadTrigger?.trigger()
+  reloadParentRowHook?.trigger()
 })
 
-provide(ReloadViewDataHookInj, reloadHook)
+provide(ReloadRowDataHookInj, reloadHook)
 </script>
 
 <script lang="ts">

packages/nc-gui/components/virtual-cell/BelongsTo.vue

@@ -6,7 +6,7 @@ import {
   CellValueInj,
   ColumnInj,
   ReadonlyInj,
-  ReloadViewDataHookInj,
+  ReloadRowDataHookInj,
   RowInj,
   defineAsyncComponent,
   inject,
@@ -24,7 +24,7 @@ const ListItems = defineAsyncComponent(() => import('./components/ListItems.vue'
 
 const column = inject(ColumnInj)!
 
-const reloadTrigger = inject(ReloadViewDataHookInj)!
+const reloadRowTrigger = inject(ReloadRowDataHookInj)!
 
 const cellValue = inject(CellValueInj, ref<any>(null))
 
@@ -48,7 +48,7 @@ const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvid
   column as Ref<Required<ColumnType>>,
   row,
   isNew,
-  reloadTrigger.trigger,
+  reloadRowTrigger.trigger,
 )
 
 await loadRelatedTableMeta()

packages/nc-gui/components/virtual-cell/HasMany.vue

@@ -7,7 +7,7 @@ import {
   IsFormInj,
   IsLockedInj,
   ReadonlyInj,
-  ReloadViewDataHookInj,
+  ReloadRowDataHookInj,
   RowInj,
   computed,
   defineAsyncComponent,
@@ -30,7 +30,7 @@ const cellValue = inject(CellValueInj)!
 
 const row = inject(RowInj)!
 
-const reloadTrigger = inject(ReloadViewDataHookInj)!
+const reloadRowTrigger = inject(ReloadRowDataHookInj)!
 
 const isForm = inject(IsFormInj)
 
@@ -50,7 +50,7 @@ const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvid
   column as Ref<Required<ColumnType>>,
   row,
   isNew,
-  reloadTrigger.trigger,
+  reloadRowTrigger.trigger,
 )
 await loadRelatedTableMeta()
 

packages/nc-gui/components/virtual-cell/ManyToMany.vue

@@ -7,7 +7,7 @@ import {
   IsFormInj,
   IsLockedInj,
   ReadonlyInj,
-  ReloadViewDataHookInj,
+  ReloadRowDataHookInj,
   RowInj,
   computed,
   inject,
@@ -29,7 +29,7 @@ const row = inject(RowInj)!
 
 const cellValue = inject(CellValueInj)!
 
-const reloadTrigger = inject(ReloadViewDataHookInj)!
+const reloadRowTrigger = inject(ReloadRowDataHookInj)!
 
 const isForm = inject(IsFormInj)
 
@@ -48,7 +48,7 @@ const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvid
   column as Ref<Required<ColumnType>>,
   row,
   isNew,
-  reloadTrigger.trigger,
+  reloadRowTrigger.trigger,
 )
 
 await loadRelatedTableMeta()

packages/nc-gui/composables/useSmartsheetRowStore.ts

@@ -109,6 +109,21 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
     }
   }
 
+
+  const loadRow = async () => {
+    const record = await $api.dbTableRow.read(
+      NOCO,
+      (project?.value?.id) as string,
+      meta.value.title,
+      extractPkFromRow(ref(row).value?.row, meta.value.columns as ColumnType[]),
+    )
+    Object.assign(ref(row).value, {
+      row: record,
+      oldRow: { ...record },
+      rowMeta: {},
+    })
+  }
+
   return {
     row,
     state,
@@ -116,7 +131,7 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
     // todo: use better name
     addLTARRef,
     removeLTARRef,
-    syncLTARRefs,
+    syncLTARRefs,loadRow
   }
 }, 'smartsheet-row-store')
 

packages/nc-gui/context/index.ts

@@ -22,6 +22,7 @@ export const CellValueInj: InjectionKey<Ref<any>> = Symbol('cell-value-injection
 export const ActiveViewInj: InjectionKey<Ref<ViewType>> = Symbol('active-view-injection')
 export const ReadonlyInj: InjectionKey<boolean> = Symbol('readonly-injection')
 export const ReloadViewDataHookInj: InjectionKey<EventHook<void>> = Symbol('reload-view-data-injection')
+export const ReloadRowDataHookInj: InjectionKey<EventHook<void>> = Symbol('reload-row-data-injection')
 export const OpenNewRecordFormHookInj: InjectionKey<EventHook<void>> = Symbol('open-new-record-form-injection')
 export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')
 export const ViewListInj: InjectionKey<Ref<ViewType[]>> = Symbol('view-list-injection')