From 030bab3c9b8e14e485213b5fedeefdce0d2daf1a Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 21 Oct 2022 12:25:16 +0200
Subject: [PATCH] revert(nc-gui): list items to use regular expanded form

---
 .../nc-gui/components/smartsheet/Grid.vue     |  1 +
 .../components/ListChildItems.vue             | 43 +++++++++++--------
 .../virtual-cell/components/ListItems.vue     | 40 ++++++++---------
 3 files changed, 44 insertions(+), 40 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 5e2b201105..e2cac568b6 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -18,6 +18,7 @@ import {
   ReloadViewDataHookInj,
   computed,
   createEventHook,
+  enumColor,
   extractPkFromRow,
   inject,
   isColumnRequiredAndNull,
diff --git a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
index eec01a1cdd..8e9f1c875d 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
+++ b/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,
@@ -76,11 +72,15 @@ const unlinkIfNewRow = async (row: Record<string, any>) => {
 const container = computed(() =>
   isForm.value
     ? h('div', {
-        class: 'w-full p-2',
-      })
+      class: 'w-full p-2',
+    })
     : 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>
 
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItems.vue b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
index af7f606bae..df6700cd02 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItems.vue
+++ b/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
-  // 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,
-  })
-}
+// 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
+})
 </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>