revert(nc-gui): list items to use regular expanded form

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

@@ -18,6 +18,7 @@ import {
   ReloadViewDataHookInj,
   computed,
   createEventHook,
+  enumColor,
   extractPkFromRow,
   inject,
   isColumnRequiredAndNull,

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

@@ -11,13 +11,11 @@ import {
   h,
   inject,
   ref,
-  useExpandedFormDetached,
   useLTARStoreOrThrow,
   useSmartsheetRowStoreOrThrow,
   useVModel,
   watch,
 } from '#imports'
-import type { Row } from '~/lib'
 
 const props = defineProps<{ modelValue?: boolean; cellValue: any }>()
 
@@ -33,8 +31,6 @@ const column = inject(ColumnInj)
 
 const readonly = inject(ReadonlyInj, false)
 
-const { open } = useExpandedFormDetached()
-
 const {
   childrenList,
   deleteRelatedRow,
@@ -81,6 +77,10 @@ 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,
@@ -88,18 +88,6 @@ watch(
     if (!isNew.value && vModel.value) loadChildrenList()
   },
 )
-
-function openExpandedForm(row: Row) {
-  if (readonly) return
-
-  open({
-    isOpen: true,
-    row: { row, oldRow: row, rowMeta: {} },
-    meta: relatedTableMeta.value,
-    loadRow: true,
-    useMetaFields: true,
-  })
-}
 </script>
 
 <template>
@@ -138,7 +126,13 @@ function openExpandedForm(row: Row) {
             v-for="(row, i) of childrenList?.list ?? state?.[column?.title] ?? []"
             :key="i"
             class="!my-4 hover:(!bg-gray-200/50 shadow-md)"
-            @click="openExpandedForm(row)"
+            @click="
+              () => {
+                if (readonly) return
+                expandedFormRow = row
+                expandedFormDlg = true
+              }
+            "
           >
             <div class="flex items-center">
               <div class="flex-1 overflow-hidden min-w-0">
@@ -182,6 +176,17 @@ function openExpandedForm(row: Row) {
         :image-style="isForm ? { height: '20px' } : {}"
       />
     </div>
+
+    <Suspense>
+      <LazySmartsheetExpandedForm
+        v-if="expandedFormRow && expandedFormDlg"
+        v-model="expandedFormDlg"
+        :row="{ row: expandedFormRow, oldRow: expandedFormRow, rowMeta: {} }"
+        :meta="relatedTableMeta"
+        load-row
+        use-meta-fields
+      />
+    </Suspense>
   </component>
 </template>
 

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

@@ -7,7 +7,6 @@ import {
   computed,
   inject,
   ref,
-  useExpandedFormDetached,
   useLTARStoreOrThrow,
   useSmartsheetRowStoreOrThrow,
   useVModel,
@@ -23,8 +22,6 @@ const vModel = useVModel(props, 'modelValue', emit)
 
 const column = inject(ColumnInj)
 
-const { open, close } = useExpandedFormDetached()
-
 const {
   childrenExcludedList,
   loadChildrenExcludedList,
@@ -60,6 +57,8 @@ 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 {}
@@ -94,23 +93,11 @@ const newRowState = computed(() => {
   }
 })
 
-function openExpandedForm() {
+// if it's an existing record close the list
-  // if it's an existing record close the list
+// after new record creation since it's already linking while creating
-  // after new record creation since it's already linking while creating
+watch(expandedFormDlg, (nexVal) => {
-  if (!isNew.value) {
+  if (!nexVal && !isNew.value) vModel.value = false
-    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>
@@ -135,7 +122,7 @@ function openExpandedForm() {
         <MdiReload class="cursor-pointer text-gray-500 nc-reload" @click="loadChildrenExcludedList" />
 
         <!--        Add new record -->
-        <a-button v-if="!isPublic" type="primary" size="small" @click="openExpandedForm">
+        <a-button v-if="!isPublic" type="primary" size="small" @click="expandedFormDlg = true">
           {{ $t('activity.addNewRecord') }}
         </a-button>
       </div>
@@ -169,6 +156,17 @@ function openExpandedForm() {
       </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>