fix(gui-v2): ReadonlyInj in Cell

packages/nc-gui-v2/components/cell/Checkbox.vue

@@ -14,11 +14,15 @@ interface Emits {
 const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
-const vModel = $(useVModel(props, 'modelValue', emits))
+
+let vModel = $(useVModel(props, 'modelValue', emits))
 
 const column = inject(ColumnInj)
+
 const isForm = inject(IsFormInj)
 
+const editEnabled = inject(ReadonlyInj)
+
 const checkboxMeta = $computed(() => {
   return {
     icon: {
@@ -29,11 +33,17 @@ const checkboxMeta = $computed(() => {
     ...(column?.value?.meta || {}),
   }
 })
+
+function onClick() {
+  if (editEnabled) {
+    vModel = !vModel
+  }
+}
 </script>
 
 <template>
   <div class="flex" :class="{ 'justify-center': !isForm, 'nc-cell-hover-show': !vModel }">
-    <div class="px-1 pt-1 rounded-full items-center" :class="{ 'bg-gray-100': !vModel }" @click="vModel = !vModel">
+    <div class="px-1 pt-1 rounded-full items-center" :class="{ 'bg-gray-100': !vModel }" @click="onClick">
       <component
         :is="getMdiIcon(vModel ? checkboxMeta.icon.checked : checkboxMeta.icon.unchecked)"
         :style="{

packages/nc-gui-v2/components/cell/Currency.vue

@@ -13,7 +13,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)!
 
-const editEnabled = inject(EditModeInj, ref(false))
+const editEnabled = inject(ReadonlyInj)
 
 const vModel = useVModel(props, 'modelValue', emit)
 

packages/nc-gui-v2/components/cell/DatePicker.vue

@@ -11,9 +11,11 @@ const { modelValue } = defineProps<Props>()
 const emit = defineEmits(['update:modelValue'])
 
 const columnMeta = inject(ColumnInj, null)
-const readOnlyMode = inject(ReadonlyInj, false)
+
+const editEnabled = inject(ReadonlyInj)
 
 let isDateInvalid = $ref(false)
+
 const dateFormat = columnMeta?.value?.meta?.date_format ?? 'YYYY-MM-DD'
 
 const localState = $computed({
@@ -61,10 +63,10 @@ watch(
     class="!w-full px-1"
     :format="dateFormat"
     :placeholder="isDateInvalid ? 'Invalid date' : !readOnlyMode ? 'Select date' : ''"
-    :allow-clear="!readOnlyMode"
+    :allow-clear="!editEnabled"
     :input-read-only="true"
     :dropdown-class-name="randomClass"
-    :open="readOnlyMode ? false : open"
+    :open="editEnabled ? false : open"
     @click="open = !open"
   >
     <template #suffixIcon></template>

packages/nc-gui-v2/components/cell/DateTimePicker.vue

@@ -12,9 +12,10 @@ const emit = defineEmits(['update:modelValue'])
 
 const { isMysql } = useProject()
 
-const readOnlyMode = inject(ReadonlyInj, false)
+const editEnabled = inject(ReadonlyInj)
 
 let isDateInvalid = $ref(false)
+
 const dateFormat = isMysql ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ'
 
 const localState = $computed({
@@ -64,10 +65,10 @@ watch(
     class="!w-full px-1"
     format="YYYY-MM-DD HH:mm"
     :placeholder="isDateInvalid ? 'Invalid date' : !readOnlyMode ? 'Select date and time' : ''"
-    :allow-clear="!readOnlyMode"
+    :allow-clear="!editEnabled"
     :input-read-only="true"
     :dropdown-class-name="randomClass"
-    :open="readOnlyMode ? false : open"
+    :open="editEnabled ? false : open"
     @click="open = !open"
     @ok="open = !open"
   >

packages/nc-gui-v2/components/cell/Decimal.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { VNodeRef } from '@vue/runtime-core'
 import { inject, ref, useVModel } from '#imports'
-import { EditModeInj } from '~/context'
+import {EditModeInj, ReadonlyInj} from '~/context'
 
 interface Props {
   modelValue: number | null | string
@@ -15,7 +15,7 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const editEnabled = inject(EditModeInj, ref(false))
+const editEnabled = inject(ReadonlyInj)
 
 const vModel = useVModel(props, 'modelValue', emits)
 

packages/nc-gui-v2/components/cell/Duration.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, inject, ref } from '#imports'
-import { ColumnInj } from '~/context'
+import {ColumnInj, ReadonlyInj} from '~/context'
 import { convertDurationToSeconds, convertMS2Duration, durationOptions } from '~/utils'
 
 interface Props {
@@ -13,12 +13,18 @@ const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)
 
+const editEnabled = inject(ReadonlyInj)
+
 const showWarningMessage = ref(false)
+
 const durationInMS = ref(0)
+
 const isEdited = ref(false)
+
 const durationType = ref(column?.value?.meta?.duration || 0)
 
 const durationPlaceholder = computed(() => durationOptions[durationType.value].title)
+
 const localState = computed({
   get: () => convertMS2Duration(modelValue, durationType.value),
   set: (val) => {
@@ -59,6 +65,7 @@ const submitDuration = () => {
 <template>
   <div class="duration-cell-wrapper">
     <input
+        v-if="editEnabled"
       ref="durationInput"
       v-model="localState"
       :placeholder="durationPlaceholder"
@@ -66,6 +73,7 @@ const submitDuration = () => {
       @keypress="checkDurationFormat($event)"
       @keydown.enter="submitDuration"
     />
+    <span v-else> {{ localState }}</span>
     <div v-if="showWarningMessage" class="duration-warning">
       <!-- TODO: i18n -->
       Please enter a number

packages/nc-gui-v2/components/cell/Email.vue

@@ -16,7 +16,7 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const editEnabled = inject(EditModeInj, ref(false))
+const editEnabled = inject(ReadonlyInj)
 
 const vModel = useVModel(props, 'modelValue', emits)
 

packages/nc-gui-v2/components/cell/Float.vue

@@ -15,7 +15,7 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const editEnabled = inject(EditModeInj, ref(false))
+const editEnabled = inject(ReadonlyInj)
 
 const vModel = useVModel(props, 'modelValue', emits)
 

packages/nc-gui-v2/components/cell/Integer.vue

@@ -15,7 +15,7 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const editEnabled = inject(EditModeInj, ref(false))
+const editEnabled = inject(ReadonlyInj)
 
 const vModel = useVModel(props, 'modelValue', emits)
 

packages/nc-gui-v2/components/cell/Json.vue

@@ -16,7 +16,7 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const editEnabled = inject(EditModeInj, ref(false))
+const editEnabled = inject(ReadonlyInj)
 
 const vModel = useVModel(props, 'modelValue', emits)
 

packages/nc-gui-v2/components/cell/MultiSelect.vue

@@ -16,12 +16,18 @@ const emit = defineEmits(['update:modelValue'])
 const { isMysql } = useProject()
 
 const column = inject(ColumnInj)
+
 // const isForm = inject<boolean>('isForm', false)
-// const editEnabled = inject(EditModeInj, ref(false))
+
+// FIXME: use editEnabled to control the UI permission
+const editEnabled = inject(ReadonlyInj)
+
 const active = inject(ActiveCellInj, ref(false))
 
 const selectedIds = ref<string[]>([])
+
 const aselect = ref<typeof AntSelect>()
+
 const isOpen = ref(false)
 
 const options = computed(() => {

packages/nc-gui-v2/components/cell/Percent.vue

@@ -11,6 +11,8 @@ const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
+const editEnabled = inject(ReadonlyInj)
+
 const column = inject(ColumnInj)
 
 const percent = ref()
@@ -63,5 +65,6 @@ function onKeyDownEnter() {
     @blur="onBlur"
     @keydown.enter="onKeyDownEnter"
   />
-  <input v-else v-model="localState" type="text" @focus="isEdited = true" />
+  <input v-if="editEnabled" v-model="localState" type="text" @focus="isEdited = true" />
+  <span v-else>{{ localState }}</span>
 </template>

packages/nc-gui-v2/components/cell/Rating.vue

@@ -4,15 +4,16 @@ import { ColumnInj } from '~/context'
 
 interface Props {
   modelValue?: number | null
-  readOnly?: boolean
 }
 
-const { modelValue, readOnly } = defineProps<Props>()
+const { modelValue } = defineProps<Props>()
 
 const emits = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)!
 
+const editEnabled = inject(ReadonlyInj)
+
 const ratingMeta = computed(() => {
   return {
     icon: {
@@ -32,7 +33,7 @@ const vModel = computed({
 </script>
 
 <template>
-  <a-rate v-model:value="vModel" :count="ratingMeta.max" :style="`color: ${ratingMeta.color}`" :disabled="readOnly">
+  <a-rate v-model:value="vModel" :count="ratingMeta.max" :style="`color: ${ratingMeta.color}`" :disabled="!editEnabled">
     <template #character>
       <MdiStar v-if="ratingMeta.icon.full === 'mdi-star'" class="text-sm" />
       <MdiHeart v-if="ratingMeta.icon.full === 'mdi-heart'" class="text-sm" />

packages/nc-gui-v2/components/cell/SingleSelect.vue

@@ -13,11 +13,16 @@ const { modelValue } = defineProps<Props>()
 const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)
+
 // const isForm = inject<boolean>('isForm', false)
-// const editEnabled = inject(EditModeInj, ref(false))
+
+// FIXME: use editEnabled to control the UI permission
+const editEnabled = inject(ReadonlyInj)
+
 const active = inject(ActiveCellInj, ref(false))
 
 const aselect = ref<typeof AntSelect>()
+
 const isOpen = ref(false)
 
 const vModel = computed({

packages/nc-gui-v2/components/cell/Text.vue

@@ -11,7 +11,7 @@ const props = defineProps<Props>()
 
 const emits = defineEmits(['update:modelValue'])
 
-const editEnabled = inject(EditModeInj, ref(false))
+const editEnabled = inject(ReadonlyInj)
 
 const vModel = useVModel(props, 'modelValue', emits)
 

packages/nc-gui-v2/components/cell/TextArea.vue

@@ -11,7 +11,7 @@ const { modelValue } = defineProps<Props>()
 
 const emits = defineEmits(['update:modelValue'])
 
-const editEnabled = inject(EditModeInj, ref(false))
+const editEnabled = inject(ReadonlyInj)
 
 const vModel = computed({
   get: () => modelValue ?? '',

packages/nc-gui-v2/components/cell/TimePicker.vue

@@ -13,9 +13,10 @@ const emit = defineEmits(['update:modelValue'])
 
 const { isMysql } = useProject()
 
-const readOnlyMode = inject(ReadonlyInj, false)
+const editEnabled = inject(EditModeInj)
 
 let isTimeInvalid = $ref(false)
+
 const dateFormat = isMysql ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ'
 
 const localState = $computed({
@@ -76,9 +77,9 @@ watch(
     format="HH:mm"
     class="!w-full px-1"
     :placeholder="isTimeInvalid ? 'Invalid time' : !readOnlyMode ? 'Select time' : ''"
-    :allow-clear="!readOnlyMode"
+    :allow-clear="!editEnabled"
     :input-read-only="true"
-    :open="readOnlyMode ? false : open"
+    :open="editEnabled ? false : open"
     :popup-class-name="randomClass"
     @click="open = !open"
     @ok="open = !open"

packages/nc-gui-v2/components/cell/Url.vue

@@ -14,7 +14,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)!
 
-const editEnabled = inject(EditModeInj, ref(false))
+const editEnabled = inject(EditModeInj)
 
 const vModel = computed({
   get: () => value,

packages/nc-gui-v2/components/cell/YearPicker.vue

@@ -11,7 +11,7 @@ const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-const readOnlyMode = inject(ReadonlyInj, false)
+const editEnabled = inject(EditModeInj)
 
 let isYearInvalid = $ref(false)
 
@@ -62,9 +62,9 @@ watch(
     :bordered="false"
     class="!w-full px-1"
     :placeholder="isYearInvalid ? 'Invalid year' : !readOnlyMode ? 'Select year' : ''"
-    :allow-clear="!readOnlyMode"
+    :allow-clear="!editEnabled"
     :input-read-only="true"
-    :open="readOnlyMode ? false : open"
+    :open="editEnabled ? false : open"
     :dropdown-class-name="randomClass"
     @click="open = !open"
     @change="open = !open"

packages/nc-gui-v2/components/smartsheet/Grid.vue

@@ -85,10 +85,15 @@ const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useG
 onMounted(loadGridViewColumns)
 
 provide(IsFormInj, ref(false))
+
 provide(IsGridInj, true)
+
 provide(PaginationDataInj, paginationData)
+
 provide(ChangePageInj, changePage)
 
+provide(ReadonlyInj, isUIAllowed('xcDatatableEditable'))
+
 reloadViewDataHook?.on(async () => {
   await loadData()
   loadAggCommentsCount()