wip(gui): url for expanded row

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

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

@@ -2,6 +2,7 @@
 import type { ColumnType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
+import { useRoute } from '#app'
 import {
   ActiveViewInj,
   CellUrlDisableOverlayInj,
@@ -34,6 +35,7 @@ import {
 } from '#imports'
 import type { Row } from '~/composables'
 import { NavigateDir } from '~/lib'
+import { extractPkFromRow } from '~/utils'
 
 const { t } = useI18n()
 
@@ -53,6 +55,9 @@ const openNewRecordFormHook = inject(OpenNewRecordFormHookInj, createEventHook()
 const { isUIAllowed } = useUIPermission()
 const hasEditPermission = isUIAllowed('xcDatatableEditable')
 
+const route = useRoute()
+const router = useRouter()
+
 // todo: get from parent ( inject or use prop )
 const isView = false
 
@@ -130,10 +135,23 @@ reloadViewDataHook?.on(async (shouldShowLoading) => {
 const skipRowRemovalOnCancel = ref(false)
 
 const expandForm = (row: Row, state?: Record<string, any>, fromToolbar = false) => {
-  expandedFormRow.value = row
-  expandedFormRowState.value = state
-  expandedFormDlg.value = true
-  skipRowRemovalOnCancel.value = !fromToolbar
+  const rowId = extractPkFromRow(row.row, meta.value.columns)
+
+  if (rowId) {
+    router.push({
+      params: {
+        ...route.params,
+        rowId,
+      },
+    })
+  } else {
+    expandedFormRow.value = row
+    expandedFormRowState.value = state
+    expandedFormDlg.value = true
+    skipRowRemovalOnCancel.value = !fromToolbar
+  }
+
+  /*  */
 }
 
 openNewRecordFormHook?.on(async () => {
@@ -377,6 +395,21 @@ onBeforeUnmount(async () => {
     }
   }
 })
+
+const expandedFormOnRowIdDlg = computed({
+  get() {
+    return !!route.params.rowId
+  },
+  set(val) {
+    if (!val)
+      router.push({
+        params: {
+          ...route.params,
+          rowId: undefined,
+        },
+      })
+  },
+})
 </script>
 
 <template>
@@ -617,6 +650,15 @@ onBeforeUnmount(async () => {
         }
       "
     />
+
+    <SmartsheetExpandedForm
+      v-if="expandedFormOnRowIdDlg"
+      :key="route.params.rowId"
+      v-model="expandedFormOnRowIdDlg"
+      :row="{ row: {}, oldRow: {}, rowMeta: {} }"
+      :meta="meta"
+      :row-id="route.params.rowId"
+    />
   </div>
 </template>
 

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

@@ -29,6 +29,7 @@ interface Props {
   meta: TableType
   loadRow?: boolean
   useMetaFields?: boolean
+  rowId?: string
 }
 
 const props = defineProps<Props>()
@@ -52,10 +53,16 @@ provide(MetaInj, meta)
 
 const { commentsDrawer, changedColumns, state: rowState, isNew, loadRow } = useProvideExpandedFormStore(meta, row)
 
+
 if (props.loadRow) {
   await loadRow()
 }
 
+if (props.rowId) {
+  loadRow(props.rowId)
+}
+
+
 useProvideSmartsheetStore(ref({}) as Ref<ViewType>, meta)
 
 provide(IsFormInj, ref(true))

packages/nc-gui/composables/useExpandedFormStore.ts

@@ -175,13 +175,14 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
     return data
   }
 
-  const loadRow = async () => {
+  const loadRow = async (rowId?: string) => {
     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[]),
+      rowId ?? extractPkFromRow(row.value.row, meta.value.columns as ColumnType[]),
     )
+
     Object.assign(row.value, {
       row: record,
       oldRow: { ...record },