From ee72e4e0110e98ae39fe83201aa90399455d43ff Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 16 Aug 2022 11:29:37 +0530
Subject: [PATCH] fix(gui-v2): show form items in editable state and handle
 LTAR columns

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet/Form.vue  | 41 ++++++++++++-------
 .../components/ListChildItems.vue             |  2 +-
 packages/nc-gui-v2/composables/useViewData.ts |  1 +
 3 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Form.vue b/packages/nc-gui-v2/components/smartsheet/Form.vue
index b75673fc52..4c1271cd7f 100644
--- a/packages/nc-gui-v2/components/smartsheet/Form.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Form.vue
@@ -22,9 +22,12 @@ import {
   useViewData,
   watch,
 } from '#imports'
+import { EditModeInj } from '~/context'
 
 provide(IsFormInj, ref(true))
 
+provide(EditModeInj, ref(true))
+
 // todo: generate hideCols based on default values
 const hiddenCols = ['created_at', 'updated_at']
 
@@ -53,6 +56,13 @@ const { showAll, hideAll, saveOrUpdate } = useViewColumns(view, meta as any, fal
   setFormData()
 })
 
+
+const { syncLTARRefs } = useProvideSmartsheetRowStore(meta!, ref({
+  row: formState,
+  oldRow: {},
+  rowMeta: { new: true },
+}))
+
 const columns = computed(() => meta?.value?.columns || [])
 
 const localColumns = ref<Record<string, any>[]>([])
@@ -92,7 +102,11 @@ async function submitForm() {
     return
   }
 
-  await insertRow(formState)
+  const insertedRowData = await insertRow(formState)
+
+  if (insertedRowData) {
+    await syncLTARRefs(insertedRowData)
+  }
 
   submitted.value = true
 }
@@ -119,10 +133,7 @@ function isDbRequired(column: Record<string, any>) {
     // primary column
     (column.pk && !column.ai && !column.cdf)
   if (column.uidt === UITypes.LinkToAnotherRecord && column.colOptions.type === RelationTypes.BELONGS_TO) {
-    const col = columns.value.find((c: Record<string, any>) => c.id === column.colOptions.fk_child_column_id) as Record<
-      string,
-      any
-    >
+    const col = columns.value.find((c: Record<string, any>) => c.id === column.colOptions.fk_child_column_id) as Record<string, any>
     if (col.rqd && !col.default) {
       isRequired = true
     }
@@ -159,7 +170,7 @@ function onMove(event: any) {
 
 function hideColumn(idx: number) {
   if (isDbRequired(localColumns.value[idx]) || localColumns.value[idx].required) {
-    message.info("Required field can't be moved")
+    message.info('Required field can\'t be moved')
     return
   }
 
@@ -257,10 +268,8 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
     columnObj.colOptions &&
     columnObj.colOptions.type === RelationTypes.BELONGS_TO
   ) {
-    columnObj = columns.value.find((c: Record<string, any>) => c.id === columnObj.colOptions.fk_child_column_id) as Record<
-      string,
-      any
-    >
+    columnObj = columns.value.find((c: Record<string, any>) => c.id === columnObj.colOptions.fk_child_column_id) as Record<string,
+      any>
   }
 
   return required || (columnObj && columnObj.rqd && !columnObj.cdf)
@@ -404,7 +413,8 @@ onMounted(async () => {
           </a-card>
         </template>
         <template #footer>
-          <div class="mt-4 border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center nc-drag-n-drop-to-hide">
+          <div
+            class="mt-4 border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center nc-drag-n-drop-to-hide">
             <!-- Drag and drop fields here to hide -->
             {{ $t('msg.info.dragDropHide') }}
           </div>
@@ -568,9 +578,11 @@ onMounted(async () => {
                     </a-form-item>
 
                     <div class="items-center flex">
-                      <span class="text-sm text-gray-500 mr-2 nc-form-input-required">{{ $t('general.required') }}</span>
+                      <span class="text-sm text-gray-500 mr-2 nc-form-input-required">{{ $t('general.required')
+                        }}</span>
 
-                      <a-switch v-model:checked="element.required" size="small" class="my-2" @change="updateColMeta(element)" />
+                      <a-switch v-model:checked="element.required" size="small" class="my-2"
+                                @change="updateColMeta(element)" />
                     </div>
                   </div>
 
@@ -653,7 +665,8 @@ onMounted(async () => {
               />
               <!-- Email me at <email> -->
               <span class="ml-4">
-                {{ $t('msg.info.emailForm') }} <span class="text-bold text-gray-600">{{ state.user.value?.email }}</span>
+                {{ $t('msg.info.emailForm') }} <span class="text-bold text-gray-600">{{ state.user.value?.email
+                }}</span>
               </span>
             </div>
           </div>
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
index c8211f0643..187d536aef 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -43,7 +43,7 @@ const { isNew, state, removeLTARRef } = useSmartsheetRowStoreOrThrow()
 watch(
   [vModel, isForm],
   (nextVal) => {
-    if (nextVal[0] || nextVal[1]) {
+    if ((nextVal[0] || nextVal[1]) && !isNew.value) {
       loadChildrenList()
     }
   },
diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index 0be745f83c..c42a566a24 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -133,6 +133,7 @@ export function useViewData(
       })
 
       await syncCount()
+      return insertedData
     } catch (error: any) {
       message.error(await extractSdkResponseErrorMsg(error))
     }