refactor(nc-gui): use ref for readonly injection

2 years ago · 8b255f3096
18 changed files with 24 additions and 20 deletions
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/packages/nc-gui/components/cell/DatePicker.vue
@ -12,7 +12,7 @@ const emit = defineEmits(['update:modelValue'])

 const columnMeta = inject(ColumnInj, null)!

-const readOnly = inject(ReadonlyInj, false)
+const readOnly = inject(ReadonlyInj, ref(false))

 let isDateInvalid = $ref(false)

--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@ -12,7 +12,7 @@ const emit = defineEmits(['update:modelValue'])

 const { isMysql } = useProject()

-const readOnly = inject(ReadonlyInj, false)
+const readOnly = inject(ReadonlyInj, ref(false))

 let isDateInvalid = $ref(false)

--- a/packages/nc-gui/components/cell/TimePicker.vue
+++ b/packages/nc-gui/components/cell/TimePicker.vue
@ -12,7 +12,7 @@ const emit = defineEmits(['update:modelValue'])

 const { isMysql } = useProject()

-const readOnly = inject(ReadonlyInj, false)
+const readOnly = inject(ReadonlyInj, ref(false))

 let isTimeInvalid = $ref(false)

--- a/packages/nc-gui/components/cell/YearPicker.vue
+++ b/packages/nc-gui/components/cell/YearPicker.vue
@ -10,7 +10,7 @@ const { modelValue } = defineProps<Props>()

 const emit = defineEmits(['update:modelValue'])

-const readOnly = inject(ReadonlyInj, false)
+const readOnly = inject(ReadonlyInj, ref(false))

 let isYearInvalid = $ref(false)

--- a/packages/nc-gui/components/cell/attachment/utils.ts
+++ b/packages/nc-gui/components/cell/attachment/utils.ts
@ -33,7 +33,7 @@ interface AttachmentProps extends File {

 export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
  (updateModelValue: (data: string | Record<string, any>[]) => void) => {
-    const isReadonly = inject(ReadonlyInj, false)
+    const isReadonly = inject(ReadonlyInj, ref(false))

    const isPublic = inject(IsPublicInj, ref(false))

--- a/packages/nc-gui/components/shared-view/Gallery.vue
+++ b/packages/nc-gui/components/shared-view/Gallery.vue
@ -7,7 +7,7 @@ const reloadEventHook = createEventHook()

 provide(ReloadViewDataHookInj, reloadEventHook)

-provide(ReadonlyInj, true)
+provide(ReadonlyInj, ref(true))

 provide(MetaInj, meta)

--- a/packages/nc-gui/components/shared-view/Grid.vue
+++ b/packages/nc-gui/components/shared-view/Grid.vue
@ -28,7 +28,7 @@ useProvideSmartsheetStore(sharedView, meta, true, sorts, nestedFilters)
 const reloadEventHook = createEventHook()

 provide(ReloadViewDataHookInj, reloadEventHook)
-provide(ReadonlyInj, true)
+provide(ReadonlyInj, ref(true))
 provide(MetaInj, meta)
 provide(ActiveViewInj, sharedView)
 provide(FieldsInj, ref(meta.value?.columns || []))
--- a/packages/nc-gui/components/shared-view/Kanban.vue
+++ b/packages/nc-gui/components/shared-view/Kanban.vue
@ -15,7 +15,7 @@ const reloadEventHook = createEventHook()

 provide(ReloadViewDataHookInj, reloadEventHook)

-provide(ReadonlyInj, true)
+provide(ReadonlyInj, ref(true))

 provide(MetaInj, meta)

--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/Cell.vue
@ -8,6 +8,7 @@ import {
  IsFormInj,
  IsLockedInj,
  IsPublicInj,
+  ReadonlyInj,
  computed,
  inject,
  provide,
@ -47,7 +48,7 @@ provide(EditModeInj, useVModel(props, 'editEnabled', emit))
 provide(ActiveCellInj, active)

 if (readOnly?.value) {
-  provide(ReadonlyInj, readOnly.value)
+  provide(ReadonlyInj, readOnly)
 }

 const isForm = inject(IsFormInj, ref(false))
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@ -51,7 +51,7 @@ const view = inject(ActiveViewInj, ref())
 // keep a root fields variable and will get modified from
 // fields menu and get used in grid and gallery
 const fields = inject(FieldsInj, ref([]))
-const readOnly = inject(ReadonlyInj, false)
+const readOnly = inject(ReadonlyInj, ref(false))
 const isLocked = inject(IsLockedInj, ref(false))

 const reloadViewDataHook = inject(ReloadViewDataHookInj, createEventHook())
--- a/packages/nc-gui/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui/components/tabs/Smartsheet.vue
@ -59,7 +59,10 @@ provide(OpenNewRecordFormHookInj, openNewRecordFormHook)
 provide(FieldsInj, fields)
 provide(IsFormInj, isForm)
 provide(TabMetaInj, activeTab)
-provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
+provide(
+  ReadonlyInj,
+  computed(() => !isUIAllowed('xcDatatableEditable')),
+)
 </script>

 <template>
--- a/packages/nc-gui/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui/components/virtual-cell/BelongsTo.vue
@ -31,7 +31,7 @@ const row = inject(RowInj)!

 const active = inject(ActiveCellInj)!

-const readOnly = inject(ReadonlyInj, false)
+const readOnly = inject(ReadonlyInj, ref(false))

 const isForm = inject(IsFormInj, ref(false))

--- a/packages/nc-gui/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui/components/virtual-cell/HasMany.vue
@ -27,7 +27,7 @@ const reloadRowTrigger = inject(ReloadRowDataHookInj, createEventHook())

 const isForm = inject(IsFormInj)

-const readOnly = inject(ReadonlyInj, false)
+const readOnly = inject(ReadonlyInj, ref(false))

 const isLocked = inject(IsLockedInj)

--- a/packages/nc-gui/components/virtual-cell/Lookup.vue
+++ b/packages/nc-gui/components/virtual-cell/Lookup.vue
@ -17,7 +17,7 @@ import {

 const { metas, getMeta } = useMetas()

-provide(ReadonlyInj, true)
+provide(ReadonlyInj, ref(true))

 const column = inject(ColumnInj)! as Ref<ColumnType & { colOptions: LookupType }>

--- a/packages/nc-gui/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui/components/virtual-cell/ManyToMany.vue
@ -28,7 +28,7 @@ const reloadRowTrigger = inject(ReloadRowDataHookInj, createEventHook())

 const isForm = inject(IsFormInj)

-const readOnly = inject(ReadonlyInj, false)
+const readOnly = inject(ReadonlyInj, ref(false))

 const isLocked = inject(IsLockedInj)

--- a/packages/nc-gui/components/virtual-cell/components/ItemChip.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ItemChip.vue
@ -24,7 +24,7 @@ const { relatedTableMeta } = useLTARStoreOrThrow()!

 const { isUIAllowed } = useUIPermission()

-const readOnly = inject(ReadonlyInj, false)
+const readOnly = inject(ReadonlyInj, ref(false))

 const active = inject(ActiveCellInj, ref(false))

--- a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
@ -29,7 +29,7 @@ const isPublic = inject(IsPublicInj, ref(false))

 const column = inject(ColumnInj)

-const readonly = inject(ReadonlyInj, false)
+const readonly = inject(ReadonlyInj, ref(false))

 const {
  childrenList,
@ -72,8 +72,8 @@ const unlinkIfNewRow = async (row: Record<string, any>) => {
 const container = computed(() =>
  isForm.value
    ? h('div', {
-      class: 'w-full p-2',
-    })
+        class: 'w-full p-2',
+      })
    : Modal,
 )

--- a/packages/nc-gui/context/index.ts
+++ b/packages/nc-gui/context/index.ts
@ -20,7 +20,7 @@ export const IsKanbanInj: InjectionKey<Ref<boolean>> = Symbol('is-kanban-injecti
 export const IsLockedInj: InjectionKey<Ref<boolean>> = Symbol('is-locked-injection')
 export const CellValueInj: InjectionKey<Ref<any>> = Symbol('cell-value-injection')
 export const ActiveViewInj: InjectionKey<Ref<ViewType>> = Symbol('active-view-injection')
-export const ReadonlyInj: InjectionKey<boolean> = Symbol('readonly-injection')
+export const ReadonlyInj: InjectionKey<Ref<boolean>> = Symbol('readonly-injection')
 /** when bool is passed, it indicates if a loading spinner should be visible while reloading */
 export const ReloadViewDataHookInj: InjectionKey<EventHook<boolean | void>> = Symbol('reload-view-data-injection')
 export const ReloadViewMetaHookInj: InjectionKey<EventHook<boolean | void>> = Symbol('reload-view-meta-injection')