From 4a59b5247a0f008ff061d1cb6d5a02bf8687c4dc Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 13 Aug 2022 16:28:55 +0800
Subject: [PATCH] fix(gui-v2): editEnabled for virtual cells

---
 .../nc-gui-v2/components/virtual-cell/BelongsTo.vue    |  6 ++++--
 packages/nc-gui-v2/components/virtual-cell/HasMany.vue | 10 ++++++++--
 .../nc-gui-v2/components/virtual-cell/ManyToMany.vue   | 10 ++++++++--
 .../components/virtual-cell/components/ItemChip.vue    |  8 +++++---
 .../virtual-cell/components/ListChildItems.vue         | 10 +++++++---
 5 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index 284fb9cad6..f863851a18 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, useSmartsheetRowStoreOrThrow } from '#imports'
-import { ActiveCellInj, CellValueInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
+import { ActiveCellInj, CellValueInj, ColumnInj, ReadonlyInj, ReloadViewDataHookInj, RowInj } from '~/context'
 import MdiArrowExpand from '~icons/mdi/arrow-expand'
 import MdiPlus from '~icons/mdi/plus'
 
@@ -18,6 +18,8 @@ const row = inject(RowInj)
 
 const active = inject(ActiveCellInj)
 
+const editEnabled = inject(ReadonlyInj)
+
 const listItemsDlg = ref(false)
 
 const { state, isNew, removeLTARRef } = useSmartsheetRowStoreOrThrow()
@@ -57,7 +59,7 @@ const unlinkRef = async (rec: Record<string, any>) => {
         <ItemChip :item="value" :value="value[relatedTablePrimaryValueProp]" @unlink="unlinkRef(value)" />
       </template>
     </div>
-    <div class="flex-1 flex justify-end gap-1 min-h-[30px] align-center">
+    <div v-if="editEnabled" class="flex-1 flex justify-end gap-1 min-h-[30px] align-center">
       <component
         :is="addIcon"
         class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 select-none group-hover:(text-gray-500)"
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index 03037ce47e..47a19044b3 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, useSmartsheetRowStoreOrThrow } from '#imports'
-import { CellValueInj, ColumnInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
+import { CellValueInj, ColumnInj, IsFormInj, ReadonlyInj, ReloadViewDataHookInj, RowInj } from '~/context'
 
 const column = inject(ColumnInj)!
 
@@ -17,6 +17,8 @@ const reloadTrigger = inject(ReloadViewDataHookInj)!
 
 const isForm = inject(IsFormInj)
 
+const editEnabled = inject(ReadonlyInj)
+
 const listItemsDlg = ref(false)
 
 const childListDlg = ref(false)
@@ -76,7 +78,11 @@ const unlinkRef = async (rec: Record<string, any>) => {
           class="select-none transform text-sm nc-action-icon text-gray-500/50 hover:text-gray-500"
           @click="childListDlg = true"
         />
-        <MdiPlus class="select-none text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
+        <MdiPlus
+          v-if="editEnabled"
+          class="select-none 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/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index 5db431b837..62e6221623 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, useSmartsheetRowStoreOrThrow } from '#imports'
-import { CellValueInj, ColumnInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
+import { CellValueInj, ColumnInj, IsFormInj, ReadonlyInj, ReloadViewDataHookInj, RowInj } from '~/context'
 
 const column = inject(ColumnInj)!
 
@@ -17,6 +17,8 @@ const reloadTrigger = inject(ReloadViewDataHookInj)!
 
 const isForm = inject(IsFormInj)
 
+const editEnabled = inject(ReadonlyInj)
+
 const listItemsDlg = ref(false)
 
 const childListDlg = ref(false)
@@ -75,7 +77,11 @@ const unlinkRef = async (rec: Record<string, any>) => {
       <div class="flex-1 flex justify-end gap-1 min-h-[30px] align-center">
         <MdiArrowExpand class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="childListDlg = true" />
 
-        <MdiPlus class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
+        <MdiPlus
+          v-if="editEnabled"
+          class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500"
+          @click="listItemsDlg = true"
+        />
       </div>
     </template>
 
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
index e7f0a5a7f7..15a7090530 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
@@ -13,8 +13,10 @@ const emit = defineEmits(['unlink'])
 
 const { relatedTableMeta } = useLTARStoreOrThrow()
 
-const readonly = inject(ReadonlyInj, false)
+const editEnabled = inject(ReadonlyInj)
+
 const active = inject(ActiveCellInj, ref(false))
+
 const isForm = inject(IsFormInj)
 
 const expandedFormDlg = ref(false)
@@ -27,12 +29,12 @@ const expandedFormDlg = ref(false)
     @click="expandedFormDlg = true"
   >
     <span class="name">{{ value }}</span>
-    <div v-show="active || isForm" v-if="!readonly" class="flex align-center">
+    <div v-show="active || isForm" v-if="editEnabled" class="flex align-center">
       <MdiCloseThick class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" @click.stop="emit('unlink')" />
     </div>
 
     <SmartsheetExpandedForm
-      v-if="expandedFormDlg"
+      v-if="expandedFormDlg && editEnabled"
       v-model="expandedFormDlg"
       :row="{ row: item }"
       :meta="relatedTableMeta"
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 976685bb85..78302f33cc 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -2,15 +2,19 @@
 import { Empty, Modal } from 'ant-design-vue'
 import type { ColumnType } from 'nocodb-sdk'
 import { computed, useLTARStoreOrThrow, useSmartsheetRowStoreOrThrow, useVModel, watch } from '#imports'
-import { ColumnInj, IsFormInj } from '~/context'
+import { ColumnInj, IsFormInj, ReadonlyInj } from '~/context'
 
 const props = defineProps<{ modelValue?: boolean }>()
 const emit = defineEmits(['update:modelValue', 'attachRecord'])
 
 const vModel = useVModel(props, 'modelValue', emit)
+
 const isForm = inject(IsFormInj, ref(false))
+
 const column = inject(ColumnInj)
 
+const editEnabled = inject(ReadonlyInj)
+
 const {
   childrenList,
   meta,
@@ -64,7 +68,7 @@ const expandedFormRow = ref()
 
         <MdiReload v-if="!isForm" class="cursor-pointer text-gray-500" @click="loadChildrenList" />
 
-        <a-button type="primary" ghost class="!text-xs" size="small" @click="emit('attachRecord')">
+        <a-button v-if="editEnabled" type="primary" ghost class="!text-xs" size="small" @click="emit('attachRecord')">
           <div class="flex align-center gap-1">
             <MdiLinkVariantRemove class="text-xs" type="primary" @click="unlinkRow(row)" />
             Link to '{{ meta.title }}'
@@ -90,7 +94,7 @@ const expandedFormRow = ref()
                 }}<span class="text-gray-400 text-[11px] ml-1">(Primary key : {{ getRelatedTableRowId(row) }})</span>
               </div>
               <div class="flex-1"></div>
-              <div class="flex gap-2">
+              <div v-if="editEnabled" class="flex gap-2">
                 <MdiLinkVariantRemove
                   class="text-xs text-grey hover:(!text-red-500) cursor-pointer"
                   @click.stop="unlinkRow(row)"