From 91e2b06a4ef437c5572dd30ad65f37b0c001d7da Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sun, 14 Aug 2022 00:04:08 +0530
Subject: [PATCH] refactor(gui-v2): use edit and readonly injection keys
 properly

- add `undefined` type for all cell value since initially(new row) model value for all cell will be undefined

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/cell/Currency.vue       | 2 +-
 packages/nc-gui-v2/components/cell/DatePicker.vue     | 2 +-
 packages/nc-gui-v2/components/cell/DateTimePicker.vue | 2 +-
 packages/nc-gui-v2/components/cell/Decimal.vue        | 2 +-
 packages/nc-gui-v2/components/cell/Duration.vue       | 2 +-
 packages/nc-gui-v2/components/cell/Email.vue          | 2 +-
 packages/nc-gui-v2/components/cell/Float.vue          | 2 +-
 packages/nc-gui-v2/components/cell/Integer.vue        | 2 +-
 packages/nc-gui-v2/components/cell/Json.vue           | 7 +++++--
 packages/nc-gui-v2/components/cell/MultiSelect.vue    | 2 +-
 packages/nc-gui-v2/components/cell/Percent.vue        | 2 +-
 packages/nc-gui-v2/components/cell/Rating.vue         | 2 +-
 packages/nc-gui-v2/components/cell/SingleSelect.vue   | 2 +-
 packages/nc-gui-v2/components/cell/Text.vue           | 2 +-
 packages/nc-gui-v2/components/cell/TextArea.vue       | 2 +-
 packages/nc-gui-v2/components/cell/TimePicker.vue     | 2 +-
 packages/nc-gui-v2/components/cell/Url.vue            | 2 +-
 packages/nc-gui-v2/components/cell/YearPicker.vue     | 2 +-
 packages/nc-gui-v2/components/smartsheet/Grid.vue     | 2 +-
 packages/nc-gui-v2/context/index.ts                   | 3 +--
 20 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Currency.vue b/packages/nc-gui-v2/components/cell/Currency.vue
index fa6c0a6b22..789ef8457e 100644
--- a/packages/nc-gui-v2/components/cell/Currency.vue
+++ b/packages/nc-gui-v2/components/cell/Currency.vue
@@ -3,7 +3,7 @@ import type { VNodeRef } from '@vue/runtime-core'
 import { ColumnInj, ReadonlyInj, computed, inject, useVModel } from '#imports'
 
 interface Props {
-  modelValue: number | null
+  modelValue: number | null | undefined
 }
 
 const props = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/DatePicker.vue b/packages/nc-gui-v2/components/cell/DatePicker.vue
index 412626ddff..2ff27e5000 100644
--- a/packages/nc-gui-v2/components/cell/DatePicker.vue
+++ b/packages/nc-gui-v2/components/cell/DatePicker.vue
@@ -3,7 +3,7 @@ import dayjs from 'dayjs'
 import { ColumnInj, ReadonlyInj } from '#imports'
 
 interface Props {
-  modelValue: string | null
+  modelValue: string | null | undefined
 }
 
 const { modelValue } = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/DateTimePicker.vue b/packages/nc-gui-v2/components/cell/DateTimePicker.vue
index 8b76ef12c2..22e15ed384 100644
--- a/packages/nc-gui-v2/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui-v2/components/cell/DateTimePicker.vue
@@ -3,7 +3,7 @@ import dayjs from 'dayjs'
 import { ReadonlyInj } from '#imports'
 
 interface Props {
-  modelValue: string | null
+  modelValue: string | null | undefined
 }
 
 const { modelValue } = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/Decimal.vue b/packages/nc-gui-v2/components/cell/Decimal.vue
index c29f365437..bada15abc1 100644
--- a/packages/nc-gui-v2/components/cell/Decimal.vue
+++ b/packages/nc-gui-v2/components/cell/Decimal.vue
@@ -3,7 +3,7 @@ import type { VNodeRef } from '@vue/runtime-core'
 import { ReadonlyInj, inject, useVModel } from '#imports'
 
 interface Props {
-  modelValue: number | null | string
+  modelValue: number | null | string | undefined
 }
 
 interface Emits {
diff --git a/packages/nc-gui-v2/components/cell/Duration.vue b/packages/nc-gui-v2/components/cell/Duration.vue
index 5182e3514f..b267e13dce 100644
--- a/packages/nc-gui-v2/components/cell/Duration.vue
+++ b/packages/nc-gui-v2/components/cell/Duration.vue
@@ -11,7 +11,7 @@ import {
 } from '#imports'
 
 interface Props {
-  modelValue: number | string | null
+  modelValue: number | string | null | undefined
 }
 
 const { modelValue } = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/Email.vue b/packages/nc-gui-v2/components/cell/Email.vue
index e59cb95992..f85ef871ee 100644
--- a/packages/nc-gui-v2/components/cell/Email.vue
+++ b/packages/nc-gui-v2/components/cell/Email.vue
@@ -3,7 +3,7 @@ import type { VNodeRef } from '@vue/runtime-core'
 import { ReadonlyInj, computed, inject, isEmail, useVModel } from '#imports'
 
 interface Props {
-  modelValue: string | null
+  modelValue: string | null | undefined
 }
 
 interface Emits {
diff --git a/packages/nc-gui-v2/components/cell/Float.vue b/packages/nc-gui-v2/components/cell/Float.vue
index 09f23fa791..ff9b02b877 100644
--- a/packages/nc-gui-v2/components/cell/Float.vue
+++ b/packages/nc-gui-v2/components/cell/Float.vue
@@ -3,7 +3,7 @@ import type { VNodeRef } from '@vue/runtime-core'
 import { ReadonlyInj, inject, useVModel } from '#imports'
 
 interface Props {
-  modelValue: number | null
+  modelValue: number | null | undefined
 }
 
 interface Emits {
diff --git a/packages/nc-gui-v2/components/cell/Integer.vue b/packages/nc-gui-v2/components/cell/Integer.vue
index 2fe13c4d0c..f3686409c1 100644
--- a/packages/nc-gui-v2/components/cell/Integer.vue
+++ b/packages/nc-gui-v2/components/cell/Integer.vue
@@ -3,7 +3,7 @@ import type { VNodeRef } from '@vue/runtime-core'
 import { ReadonlyInj, inject, useVModel } from '#imports'
 
 interface Props {
-  modelValue: number | null
+  modelValue: number | null | undefined
 }
 
 interface Emits {
diff --git a/packages/nc-gui-v2/components/cell/Json.vue b/packages/nc-gui-v2/components/cell/Json.vue
index 14297ffa9f..3e621b870f 100644
--- a/packages/nc-gui-v2/components/cell/Json.vue
+++ b/packages/nc-gui-v2/components/cell/Json.vue
@@ -2,6 +2,7 @@
 import { Modal as AModal } from 'ant-design-vue'
 import Editor from '~/components/monaco/Editor.vue'
 import { ReadonlyInj, computed, inject, ref, useVModel, watch } from '#imports'
+import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue: string | Record<string, any> | undefined
@@ -15,7 +16,9 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const editEnabled = inject(ReadonlyInj)
+const editEnabled = inject(EditModeInj, ref(false))
+
+const readonly = inject(ReadonlyInj)
 
 const vModel = useVModel(props, 'modelValue', emits)
 
@@ -87,7 +90,7 @@ watch(editEnabled, () => {
 
 <template>
   <component :is="isExpanded ? AModal : 'div'" v-model:visible="isExpanded" :closable="false" centered :footer="null">
-    <div v-if="editEnabled" class="flex flex-col w-full">
+    <div v-if="editEnabled && !readonly" class="flex flex-col w-full">
       <div class="flex flex-row justify-between pt-1 pb-2">
         <a-button type="text" size="small" @click="isExpanded = !isExpanded">
           <CilFullscreenExit v-if="isExpanded" class="h-2.5" />
diff --git a/packages/nc-gui-v2/components/cell/MultiSelect.vue b/packages/nc-gui-v2/components/cell/MultiSelect.vue
index 4a6e90b403..7450b851cd 100644
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/packages/nc-gui-v2/components/cell/MultiSelect.vue
@@ -5,7 +5,7 @@ import { ActiveCellInj, ColumnInj, ReadonlyInj, computed, inject } from '#import
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
 interface Props {
-  modelValue?: string | string[]
+  modelValue?: string | string[] | undefined
 }
 
 const { modelValue } = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/Percent.vue b/packages/nc-gui-v2/components/cell/Percent.vue
index 0aa05f2f40..45655e9657 100644
--- a/packages/nc-gui-v2/components/cell/Percent.vue
+++ b/packages/nc-gui-v2/components/cell/Percent.vue
@@ -2,7 +2,7 @@
 import { ColumnInj, ReadonlyInj, computed, getPercentStep, inject, isValidPercent, renderPercent } from '#imports'
 
 interface Props {
-  modelValue: number | string | null
+  modelValue: number | string | null | undefined
 }
 
 const { modelValue } = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/Rating.vue b/packages/nc-gui-v2/components/cell/Rating.vue
index 7a5c0fdaf4..7125c6051e 100644
--- a/packages/nc-gui-v2/components/cell/Rating.vue
+++ b/packages/nc-gui-v2/components/cell/Rating.vue
@@ -2,7 +2,7 @@
 import { ColumnInj, ReadonlyInj, computed, inject } from '#imports'
 
 interface Props {
-  modelValue?: number | null
+  modelValue?: number | null | undefined
 }
 
 const { modelValue } = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/SingleSelect.vue b/packages/nc-gui-v2/components/cell/SingleSelect.vue
index 9dd259f97c..35325a777d 100644
--- a/packages/nc-gui-v2/components/cell/SingleSelect.vue
+++ b/packages/nc-gui-v2/components/cell/SingleSelect.vue
@@ -4,7 +4,7 @@ import type { SelectOptionType } from 'nocodb-sdk'
 import { ActiveCellInj, ColumnInj, ReadonlyInj, computed, inject } from '#imports'
 
 interface Props {
-  modelValue?: string
+  modelValue?: string | undefined
 }
 
 const { modelValue } = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/Text.vue b/packages/nc-gui-v2/components/cell/Text.vue
index 76a8689d5a..9636897ff6 100644
--- a/packages/nc-gui-v2/components/cell/Text.vue
+++ b/packages/nc-gui-v2/components/cell/Text.vue
@@ -3,7 +3,7 @@ import type { VNodeRef } from '@vue/runtime-core'
 import { ReadonlyInj, inject } from '#imports'
 
 interface Props {
-  modelValue: string | null
+  modelValue: string | null | undefined
 }
 
 const props = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/TextArea.vue b/packages/nc-gui-v2/components/cell/TextArea.vue
index 47fdbed547..73b193f35b 100644
--- a/packages/nc-gui-v2/components/cell/TextArea.vue
+++ b/packages/nc-gui-v2/components/cell/TextArea.vue
@@ -3,7 +3,7 @@ import type { VNodeRef } from '@vue/runtime-core'
 import { ReadonlyInj, computed, inject } from '#imports'
 
 interface Props {
-  modelValue: string | null
+  modelValue: string | null | undefined
 }
 
 const { modelValue } = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/TimePicker.vue b/packages/nc-gui-v2/components/cell/TimePicker.vue
index 81f5318733..a1fccd25aa 100644
--- a/packages/nc-gui-v2/components/cell/TimePicker.vue
+++ b/packages/nc-gui-v2/components/cell/TimePicker.vue
@@ -4,7 +4,7 @@ import dayjs from 'dayjs'
 import { ReadonlyInj } from '#imports'
 
 interface Props {
-  modelValue?: string | null
+  modelValue?: string | null | undefined
 }
 
 const { modelValue } = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/Url.vue b/packages/nc-gui-v2/components/cell/Url.vue
index 9ae7a1251a..cfbfd0727c 100644
--- a/packages/nc-gui-v2/components/cell/Url.vue
+++ b/packages/nc-gui-v2/components/cell/Url.vue
@@ -3,7 +3,7 @@ import type { VNodeRef } from '@vue/runtime-core'
 import { ColumnInj, ReadonlyInj, computed, inject, isValidURL } from '#imports'
 
 interface Props {
-  modelValue: string | null
+  modelValue: string | null | undefined
 }
 
 const { modelValue: value } = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/YearPicker.vue b/packages/nc-gui-v2/components/cell/YearPicker.vue
index 13d1d81fd7..39ca6edaf1 100644
--- a/packages/nc-gui-v2/components/cell/YearPicker.vue
+++ b/packages/nc-gui-v2/components/cell/YearPicker.vue
@@ -4,7 +4,7 @@ import dayjs from 'dayjs'
 import { ReadonlyInj } from '#imports'
 
 interface Props {
-  modelValue: number | string | null
+  modelValue: number | string | null | undefined
 }
 
 const { modelValue } = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 57be5f45dd..81f2b65a8e 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -92,7 +92,7 @@ provide(PaginationDataInj, paginationData)
 
 provide(ChangePageInj, changePage)
 
-provide(ReadonlyInj, isUIAllowed('xcDatatableEditable'))
+provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
 
 reloadViewDataHook?.on(async () => {
   await loadData()
diff --git a/packages/nc-gui-v2/context/index.ts b/packages/nc-gui-v2/context/index.ts
index a20176ca5a..d955c93802 100644
--- a/packages/nc-gui-v2/context/index.ts
+++ b/packages/nc-gui-v2/context/index.ts
@@ -22,6 +22,5 @@ export const ReadonlyInj: InjectionKey<any> = Symbol('readonly-injection')
 export const ReloadViewDataHookInj: InjectionKey<EventHook<void>> = Symbol('reload-view-data-injection')
 export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')
 export const ViewListInj: InjectionKey<Ref<ViewType[]>> = Symbol('view-list-injection')
-
 export const RightSidebarInj: InjectionKey<Ref<boolean>> = Symbol('right-sidebar-injection')
-export const EditModeInj: InjectionKey<ComputedRef<boolean>> = Symbol('edit-mode-injection')
+export const EditModeInj: InjectionKey<Ref<boolean>> = Symbol('edit-mode-injection')