chore(nc-gui): properly close expanded form

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

@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { useExpandedFormDetached } from '#imports'
 
-const { states } = useExpandedFormDetached()
+const { states, close } = useExpandedFormDetached()
+
+const shouldClose = (isVisible: boolean, i: number) => {
+  if (!isVisible) close(i)
+}
 </script>
 
 <template>
@@ -15,6 +19,8 @@ const { states } = useExpandedFormDetached()
       :state="state.state"
       :use-meta-fields="state.useMetaFields"
       :view="state.view"
+      @update:model-value="shouldClose($event, i)"
+      @cancel="close(i)"
     />
   </template>
 </template>

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

@@ -17,6 +17,7 @@ import {
   useVModel,
   watch,
 } from '#imports'
+import type { Row } from '~/lib'
 
 const props = defineProps<{ modelValue?: boolean; cellValue: any }>()
 
@@ -80,10 +81,6 @@ const container = computed(() =>
     : Modal,
 )
 
-const expandedFormDlg = ref(false)
-
-const expandedFormRow = ref()
-
 /** reload children list whenever cell value changes and list is visible */
 watch(
   () => props.cellValue,
@@ -92,16 +89,16 @@ watch(
   },
 )
 
-function openExpandedForm() {
-  if (expandedFormRow.value) {
-    open({
-      isOpen: true,
-      row: { row: expandedFormRow.value, oldRow: expandedFormRow.value },
-      meta: relatedTableMeta.value,
-      loadRow: true,
-      useMetaFields: true,
-    })
-  }
+function openExpandedForm(row: Row) {
+  if (readonly) return
+
+  open({
+    isOpen: true,
+    row: { row, oldRow: row, rowMeta: {} },
+    meta: relatedTableMeta.value,
+    loadRow: true,
+    useMetaFields: true,
+  })
 }
 </script>
 
@@ -141,13 +138,7 @@ function openExpandedForm() {
             v-for="(row, i) of childrenList?.list ?? state?.[column?.title] ?? []"
             :key="i"
             class="!my-4 hover:(!bg-gray-200/50 shadow-md)"
-            @click="
-              () => {
-                if (readonly) return
-                expandedFormRow = row
-                expandedFormDlg = true
-              }
-            "
+            @click="openExpandedForm(row)"
           >
             <div class="flex items-center">
               <div class="flex-1 overflow-hidden min-w-0">

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

@@ -7,6 +7,7 @@ import {
   computed,
   inject,
   ref,
+  useExpandedFormDetached,
   useLTARStoreOrThrow,
   useSmartsheetRowStoreOrThrow,
   useVModel,
@@ -22,6 +23,8 @@ const vModel = useVModel(props, 'modelValue', emit)
 
 const column = inject(ColumnInj)
 
+const { open, close } = useExpandedFormDetached()
+
 const {
   childrenExcludedList,
   loadChildrenExcludedList,
@@ -57,8 +60,6 @@ watch(vModel, (nextVal, prevVal) => {
   }
 })
 
-const expandedFormDlg = ref(false)
-
 /** populate initial state for a new row which is parent/child of current record */
 const newRowState = computed(() => {
   if (isNew.value) return {}
@@ -93,11 +94,23 @@ const newRowState = computed(() => {
   }
 })
 
-// if it's an existing record close the list
-// after new record creation since it's already linking while creating
-watch(expandedFormDlg, (nexVal) => {
-  if (!nexVal && !isNew.value) vModel.value = false
-})
+function openExpandedForm() {
+  // if it's an existing record close the list
+  // after new record creation since it's already linking while creating
+  if (!isNew.value) {
+    vModel.value = false
+    return close()
+  }
+
+  open({
+    isOpen: true,
+    row: { row: {}, oldRow: {}, rowMeta: { new: true } },
+    meta: relatedTableMeta.value,
+    loadRow: false,
+    useMetaFields: true,
+    state: newRowState.value,
+  })
+}
 </script>
 
 <template>
@@ -122,7 +135,7 @@ watch(expandedFormDlg, (nexVal) => {
         <MdiReload class="cursor-pointer text-gray-500 nc-reload" @click="loadChildrenExcludedList" />
 
         <!--        Add new record -->
-        <a-button v-if="!isPublic" type="primary" size="small" @click="expandedFormDlg = true">
+        <a-button v-if="!isPublic" type="primary" size="small" @click="openExpandedForm">
           {{ $t('activity.addNewRecord') }}
         </a-button>
       </div>
@@ -156,17 +169,6 @@ watch(expandedFormDlg, (nexVal) => {
       </template>
 
       <a-empty v-else class="my-10" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
-
-      <Suspense>
-        <LazySmartsheetExpandedForm
-          v-if="expandedFormDlg"
-          v-model="expandedFormDlg"
-          :meta="relatedTableMeta"
-          :row="{ row: {}, oldRow: {}, rowMeta: { new: true } }"
-          :state="newRowState"
-          use-meta-fields
-        />
-      </Suspense>
     </div>
   </a-modal>
 </template>

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

@@ -1,5 +1,5 @@
 import type { TableType, ViewType } from 'nocodb-sdk'
-import { ref, useInjectionState } from '#imports'
+import { createEventHook, ref, useInjectionState } from '#imports'
 import type { Row } from '~/lib'
 
 interface UseExpandedFormDetachedProps {
@@ -26,6 +26,8 @@ export function useExpandedFormDetached() {
     states = setup()
   }
 
+  const closeHook = createEventHook<void>()
+
   const index = ref(-1)
 
   const open = (props: UseExpandedFormDetachedProps) => {
@@ -33,9 +35,10 @@ export function useExpandedFormDetached() {
     index.value = states.value.length - 1
   }
 
-  const close = () => {
-    states.value.splice(index.value, 1)
+  const close = (i?: number) => {
+    states.value.splice(i || index.value, 1)
+    if (index.value === i || !i) closeHook.trigger()
   }
 
-  return { states, open, close }
+  return { states, open, close, onClose: closeHook.on }
 }