From efd732edb16048b506bb1b449e66211a90b9f840 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 6 Aug 2022 02:26:32 +0530
Subject: [PATCH] feat(gui-v2): LTAR form style correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet/expanded-form/index.vue      |  2 +-
 .../nc-gui-v2/components/virtual-cell/BelongsTo.vue    | 10 ++++++++--
 packages/nc-gui-v2/components/virtual-cell/HasMany.vue |  7 ++++---
 .../nc-gui-v2/components/virtual-cell/ManyToMany.vue   |  6 +++++-
 .../virtual-cell/components/ListChildItems.vue         |  5 ++++-
 5 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
index 9eb4dab0eb..29a5e97138 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
@@ -51,7 +51,7 @@ const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : Md
               <SmartsheetHeaderCell v-else :column="col" />
 
               <div class="!bg-white rounded px-1 min-h-[35px] flex align-center">
-                <SmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :row="row.row" :column="col" />
+                <SmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :row="row" :column="col" />
                 <SmartsheetCell
                   v-else
                   v-model="row.row[col.title]"
diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index 330393b5aa..192b641578 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -4,7 +4,7 @@ import type { Ref } from 'vue'
 import ItemChip from './components/ItemChip.vue'
 import ListItems from './components/ListItems.vue'
 import { inject, ref, useProvideLTARStore } from '#imports'
-import { CellValueInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
+import { CellValueInj,IsFormInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
 
 const column = inject(ColumnInj)
 
@@ -18,7 +18,9 @@ const active = false
 
 const listItemsDlg = ref(false)
 
-const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
+const isForm = inject(IsFormInj)
+
+const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
   column as Ref<Required<ColumnType>>,
   row,
   reloadTrigger.trigger,
@@ -29,6 +31,7 @@ await loadRelatedTableMeta()
 
 <template>
   <div class="flex w-full chips-wrapper align-center" :class="{ active }">
+    <template v-if="!isForm">
     <div class="chips d-flex align-center flex-grow">
       <template v-if="cellValue">
         <ItemChip :item="cellValue" :value="cellValue[relatedTablePrimaryValueProp]" @unlink="unlink(cellValue)" />
@@ -42,6 +45,9 @@ await loadRelatedTableMeta()
     </div>
 
     <ListItems v-model="listItemsDlg" />
+    </template>
+    <ListChildItems />
+    <ListItems v-model="listItemsDlg"  @attach-record="listItemsDlg = true"/>
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index 769055faca..2739c86fbf 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -5,7 +5,7 @@ import ItemChip from './components/ItemChip.vue'
 import ListChildItems from './components/ListChildItems.vue'
 import ListItems from './components/ListItems.vue'
 import { computed, inject, ref, useProvideLTARStore } from '#imports'
-import { CellValueInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
+import { CellValueInj, ColumnInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
 
 import { useProvideLTARStore } from '#imports'
 import { CellValueInj, ColumnInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
@@ -20,6 +20,8 @@ const reloadTrigger = inject(ReloadViewDataHookInj)!
 
 const isForm = inject(IsFormInj)
 
+const isForm = inject(IsFormInj)
+
 const listItemsDlg = ref(false)
 
 const childListDlg = ref(false)
@@ -29,7 +31,6 @@ const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvid
   row,
   reloadTrigger.trigger,
 )
-
 await loadRelatedTableMeta()
 
 const cells = computed(() =>
@@ -62,7 +63,7 @@ const cells = computed(() =>
       <MdiPlus class="select-none text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
     </div>
     <ListItems v-model="listItemsDlg" />
-    <ListChildItems v-model="childListDlg" @attach-record=";(childListDlg = false), (listItemsDlg = true)" />
+    <ListChildItems v-model="childListDlg" @attach-record="() => { childListDlg = false; listItemsDlg = true }" />
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index aa05726fc0..ea2c5f1596 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -5,7 +5,7 @@ import ItemChip from './components/ItemChip.vue'
 import ListChildItems from './components/ListChildItems.vue'
 import ListItems from './components/ListItems.vue'
 import { computed, inject, ref, useProvideLTARStore } from '#imports'
-import { CellValueInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
+import { CellValueInj, ColumnInj, ReloadViewDataHookInj,IsFormInj, RowInj } from '~/context'
 
 const column = inject(ColumnInj)!
 
@@ -15,6 +15,8 @@ const cellValue = inject(CellValueInj)!
 
 const reloadTrigger = inject(ReloadViewDataHookInj)!
 
+const isForm = inject(IsFormInj)
+
 const listItemsDlg = ref(false)
 
 const childListDlg = ref(false)
@@ -42,6 +44,7 @@ const cells = computed(() =>
 
 <template>
   <div class="flex align-center gap-1 w-full h-full chips-wrapper">
+    <template v-if="!isForm">
     <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
       <template v-if="cellValue">
         <ItemChip v-for="(cell, i) of cells" :key="i" :value="cell.value" @unlink="unlink(cell.item)" />
@@ -55,6 +58,7 @@ const cells = computed(() =>
 
       <MdiPlus class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
     </div>
+    </template>
 
     <ListItems v-model="listItemsDlg" />
 
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 64002aa5f9..e31e5873a8 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -1,4 +1,7 @@
 <script lang="ts" setup>
+import { watchEffect } from '@vue/runtime-core'
+import { Modal } from 'ant-design-vue'
+import { IsFormInj } from '~/context'
 import { useLTARStoreOrThrow, useVModel, watch } from '#imports'
 
 const props = defineProps<{ modelValue?: boolean }>()
@@ -44,7 +47,7 @@ const container = computed(() =>
       <div class="flex mb-4 align-center gap-2">
         <div class="flex-1" />
 
-        <MdiReload class="cursor-pointer text-gray-500" @click="loadChildrenList" />
+        <MdiReload  v-if="!isForm" class="cursor-pointer text-gray-500" @click="loadChildrenList" />
 
         <a-button type="primary" size="small" @click="emit('attachRecord')">
           <div class="flex align-center gap-1">