feat(nc-gui): open a separate form for each composable caller

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

@@ -1,20 +1,20 @@
 <script lang="ts" setup>
 import { useExpandedFormDetached } from '#imports'
 
-const { isOpen, state, row, rowId, loadRow: shouldLoadRow, meta, useMetaFields, view, close } = useExpandedFormDetached()
+const { states } = useExpandedFormDetached()
 </script>
 
 <template>
-  <LazySmartsheetExpandedForm
+  <template v-for="(state, i) of states" :key="`expanded-form-${i}`">
-    v-if="!!row && !!meta"
+    <LazySmartsheetExpandedForm
-    v-model="isOpen"
+      v-model="state.isOpen"
-    :row="row"
+      :row="state.row"
-    :load-row="shouldLoadRow"
+      :load-row="state.loadRow"
-    :meta="meta"
+      :meta="state.meta"
-    :row-id="rowId"
+      :row-id="state.rowId"
-    :state="state"
+      :state="state.state"
-    :use-meta-fields="useMetaFields"
+      :use-meta-fields="state.useMetaFields"
-    :view="view"
+      :view="state.view"
-    @cancel="close"
+    />
-  />
+  </template>
 </template>

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

@@ -11,6 +11,7 @@ import {
   h,
   inject,
   ref,
+  useExpandedFormDetached,
   useLTARStoreOrThrow,
   useSmartsheetRowStoreOrThrow,
   useVModel,
@@ -31,6 +32,8 @@ const column = inject(ColumnInj)
 
 const readonly = inject(ReadonlyInj, false)
 
+const { open } = useExpandedFormDetached()
+
 const {
   childrenList,
   deleteRelatedRow,
@@ -88,6 +91,18 @@ watch(
     if (!isNew.value && vModel.value) loadChildrenList()
   },
 )
+
+function openExpandedForm() {
+  if (expandedFormRow.value) {
+    open({
+      isOpen: true,
+      row: { row: expandedFormRow.value, oldRow: expandedFormRow.value },
+      meta: relatedTableMeta.value,
+      loadRow: true,
+      useMetaFields: true,
+    })
+  }
+}
 </script>
 
 <template>
@@ -176,17 +191,6 @@ watch(
         :image-style="isForm ? { height: '20px' } : {}"
       />
     </div>
-
-    <Suspense>
-      <LazySmartsheetExpandedForm
-        v-if="expandedFormRow && expandedFormDlg"
-        v-model="expandedFormDlg"
-        :row="{ row: expandedFormRow }"
-        :meta="relatedTableMeta"
-        load-row
-        use-meta-fields
-      />
-    </Suspense>
   </component>
 </template>
 

packages/nc-gui/composables/useExpandedFormDetached/index.ts

@@ -1,58 +1,41 @@
 import type { TableType, ViewType } from 'nocodb-sdk'
-import { reactive, toRefs, useInjectionState } from '#imports'
+import { ref, useInjectionState } from '#imports'
 import type { Row } from '~/lib'
 
 interface UseExpandedFormDetachedProps {
-  isOpen?: boolean
+  'isOpen'?: boolean
-  row: Row | null
+  'row': Row | null
-  state?: Record<string, any> | null
+  'state'?: Record<string, any> | null
-  meta: TableType
+  'meta': TableType
-  loadRow?: boolean
+  'loadRow'?: boolean
-  useMetaFields?: boolean
+  'useMetaFields'?: boolean
-  rowId?: string
+  'rowId'?: string
-  view?: ViewType
+  'view'?: ViewType
+  'onCancel'?: Function
+  'onUpdate:modelValue'?: Function
 }
 
 const [setup, use] = useInjectionState(() => {
-  const state = reactive<UseExpandedFormDetachedProps>({
+  return ref<UseExpandedFormDetachedProps[]>([])
-    isOpen: false,
+})
-    state: null,
-    loadRow: false,
-    useMetaFields: false,
-    row: null,
-    meta: null as any,
-  })
 
-  const open = (props: UseExpandedFormDetachedProps) => {
+export function useExpandedFormDetached() {
-    state.state = props.state
+  let states = use()!
-    state.loadRow = props.loadRow
-    state.useMetaFields = props.useMetaFields
-    state.rowId = props.rowId
-    state.row = props.row
-    state.loadRow = props.loadRow
-    state.meta = props.meta
-    state.isOpen = props.isOpen
-
-    state.isOpen = true
-  }
 
-  const close = () => {
+  if (!states) {
-    state.isOpen = false
+    states = setup()
   }
 
-  return {
+  const index = ref(-1)
-    ...toRefs(state),
-    open,
-    close,
-  }
-})
 
-export function useExpandedFormDetached() {
+  const open = (props: UseExpandedFormDetachedProps) => {
-  const state = use()
+    states.value.push(props)
+    index.value = states.value.length - 1
+  }
 
-  if (!state) {
+  const close = () => {
-    return setup()
+    states.value.splice(index.value, 1)
   }
 
-  return state
+  return { states, open, close }
 }