Browse Source

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>
pull/3139/head
Pranav C 2 years ago
parent
commit
91e2b06a4e
  1. 2
      packages/nc-gui-v2/components/cell/Currency.vue
  2. 2
      packages/nc-gui-v2/components/cell/DatePicker.vue
  3. 2
      packages/nc-gui-v2/components/cell/DateTimePicker.vue
  4. 2
      packages/nc-gui-v2/components/cell/Decimal.vue
  5. 2
      packages/nc-gui-v2/components/cell/Duration.vue
  6. 2
      packages/nc-gui-v2/components/cell/Email.vue
  7. 2
      packages/nc-gui-v2/components/cell/Float.vue
  8. 2
      packages/nc-gui-v2/components/cell/Integer.vue
  9. 7
      packages/nc-gui-v2/components/cell/Json.vue
  10. 2
      packages/nc-gui-v2/components/cell/MultiSelect.vue
  11. 2
      packages/nc-gui-v2/components/cell/Percent.vue
  12. 2
      packages/nc-gui-v2/components/cell/Rating.vue
  13. 2
      packages/nc-gui-v2/components/cell/SingleSelect.vue
  14. 2
      packages/nc-gui-v2/components/cell/Text.vue
  15. 2
      packages/nc-gui-v2/components/cell/TextArea.vue
  16. 2
      packages/nc-gui-v2/components/cell/TimePicker.vue
  17. 2
      packages/nc-gui-v2/components/cell/Url.vue
  18. 2
      packages/nc-gui-v2/components/cell/YearPicker.vue
  19. 2
      packages/nc-gui-v2/components/smartsheet/Grid.vue
  20. 3
      packages/nc-gui-v2/context/index.ts

2
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' import { ColumnInj, ReadonlyInj, computed, inject, useVModel } from '#imports'
interface Props { interface Props {
modelValue: number | null modelValue: number | null | undefined
} }
const props = defineProps<Props>() const props = defineProps<Props>()

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

@ -3,7 +3,7 @@ import dayjs from 'dayjs'
import { ColumnInj, ReadonlyInj } from '#imports' import { ColumnInj, ReadonlyInj } from '#imports'
interface Props { interface Props {
modelValue: string | null modelValue: string | null | undefined
} }
const { modelValue } = defineProps<Props>() const { modelValue } = defineProps<Props>()

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

@ -3,7 +3,7 @@ import dayjs from 'dayjs'
import { ReadonlyInj } from '#imports' import { ReadonlyInj } from '#imports'
interface Props { interface Props {
modelValue: string | null modelValue: string | null | undefined
} }
const { modelValue } = defineProps<Props>() const { modelValue } = defineProps<Props>()

2
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' import { ReadonlyInj, inject, useVModel } from '#imports'
interface Props { interface Props {
modelValue: number | null | string modelValue: number | null | string | undefined
} }
interface Emits { interface Emits {

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

@ -11,7 +11,7 @@ import {
} from '#imports' } from '#imports'
interface Props { interface Props {
modelValue: number | string | null modelValue: number | string | null | undefined
} }
const { modelValue } = defineProps<Props>() const { modelValue } = defineProps<Props>()

2
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' import { ReadonlyInj, computed, inject, isEmail, useVModel } from '#imports'
interface Props { interface Props {
modelValue: string | null modelValue: string | null | undefined
} }
interface Emits { interface Emits {

2
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' import { ReadonlyInj, inject, useVModel } from '#imports'
interface Props { interface Props {
modelValue: number | null modelValue: number | null | undefined
} }
interface Emits { interface Emits {

2
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' import { ReadonlyInj, inject, useVModel } from '#imports'
interface Props { interface Props {
modelValue: number | null modelValue: number | null | undefined
} }
interface Emits { interface Emits {

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

@ -2,6 +2,7 @@
import { Modal as AModal } from 'ant-design-vue' import { Modal as AModal } from 'ant-design-vue'
import Editor from '~/components/monaco/Editor.vue' import Editor from '~/components/monaco/Editor.vue'
import { ReadonlyInj, computed, inject, ref, useVModel, watch } from '#imports' import { ReadonlyInj, computed, inject, ref, useVModel, watch } from '#imports'
import { EditModeInj } from '~/context'
interface Props { interface Props {
modelValue: string | Record<string, any> | undefined modelValue: string | Record<string, any> | undefined
@ -15,7 +16,9 @@ const props = defineProps<Props>()
const emits = defineEmits<Emits>() const emits = defineEmits<Emits>()
const editEnabled = inject(ReadonlyInj) const editEnabled = inject(EditModeInj, ref(false))
const readonly = inject(ReadonlyInj)
const vModel = useVModel(props, 'modelValue', emits) const vModel = useVModel(props, 'modelValue', emits)
@ -87,7 +90,7 @@ watch(editEnabled, () => {
<template> <template>
<component :is="isExpanded ? AModal : 'div'" v-model:visible="isExpanded" :closable="false" centered :footer="null"> <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"> <div class="flex flex-row justify-between pt-1 pb-2">
<a-button type="text" size="small" @click="isExpanded = !isExpanded"> <a-button type="text" size="small" @click="isExpanded = !isExpanded">
<CilFullscreenExit v-if="isExpanded" class="h-2.5" /> <CilFullscreenExit v-if="isExpanded" class="h-2.5" />

2
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' import MdiCloseCircle from '~icons/mdi/close-circle'
interface Props { interface Props {
modelValue?: string | string[] modelValue?: string | string[] | undefined
} }
const { modelValue } = defineProps<Props>() const { modelValue } = defineProps<Props>()

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

@ -2,7 +2,7 @@
import { ColumnInj, ReadonlyInj, computed, getPercentStep, inject, isValidPercent, renderPercent } from '#imports' import { ColumnInj, ReadonlyInj, computed, getPercentStep, inject, isValidPercent, renderPercent } from '#imports'
interface Props { interface Props {
modelValue: number | string | null modelValue: number | string | null | undefined
} }
const { modelValue } = defineProps<Props>() const { modelValue } = defineProps<Props>()

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

@ -2,7 +2,7 @@
import { ColumnInj, ReadonlyInj, computed, inject } from '#imports' import { ColumnInj, ReadonlyInj, computed, inject } from '#imports'
interface Props { interface Props {
modelValue?: number | null modelValue?: number | null | undefined
} }
const { modelValue } = defineProps<Props>() const { modelValue } = defineProps<Props>()

2
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' import { ActiveCellInj, ColumnInj, ReadonlyInj, computed, inject } from '#imports'
interface Props { interface Props {
modelValue?: string modelValue?: string | undefined
} }
const { modelValue } = defineProps<Props>() const { modelValue } = defineProps<Props>()

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

@ -3,7 +3,7 @@ import type { VNodeRef } from '@vue/runtime-core'
import { ReadonlyInj, inject } from '#imports' import { ReadonlyInj, inject } from '#imports'
interface Props { interface Props {
modelValue: string | null modelValue: string | null | undefined
} }
const props = defineProps<Props>() const props = defineProps<Props>()

2
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' import { ReadonlyInj, computed, inject } from '#imports'
interface Props { interface Props {
modelValue: string | null modelValue: string | null | undefined
} }
const { modelValue } = defineProps<Props>() const { modelValue } = defineProps<Props>()

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

@ -4,7 +4,7 @@ import dayjs from 'dayjs'
import { ReadonlyInj } from '#imports' import { ReadonlyInj } from '#imports'
interface Props { interface Props {
modelValue?: string | null modelValue?: string | null | undefined
} }
const { modelValue } = defineProps<Props>() const { modelValue } = defineProps<Props>()

2
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' import { ColumnInj, ReadonlyInj, computed, inject, isValidURL } from '#imports'
interface Props { interface Props {
modelValue: string | null modelValue: string | null | undefined
} }
const { modelValue: value } = defineProps<Props>() const { modelValue: value } = defineProps<Props>()

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

@ -4,7 +4,7 @@ import dayjs from 'dayjs'
import { ReadonlyInj } from '#imports' import { ReadonlyInj } from '#imports'
interface Props { interface Props {
modelValue: number | string | null modelValue: number | string | null | undefined
} }
const { modelValue } = defineProps<Props>() const { modelValue } = defineProps<Props>()

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

@ -92,7 +92,7 @@ provide(PaginationDataInj, paginationData)
provide(ChangePageInj, changePage) provide(ChangePageInj, changePage)
provide(ReadonlyInj, isUIAllowed('xcDatatableEditable')) provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
reloadViewDataHook?.on(async () => { reloadViewDataHook?.on(async () => {
await loadData() await loadData()

3
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 ReloadViewDataHookInj: InjectionKey<EventHook<void>> = Symbol('reload-view-data-injection')
export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection') export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')
export const ViewListInj: InjectionKey<Ref<ViewType[]>> = Symbol('view-list-injection') export const ViewListInj: InjectionKey<Ref<ViewType[]>> = Symbol('view-list-injection')
export const RightSidebarInj: InjectionKey<Ref<boolean>> = Symbol('right-sidebar-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')

Loading…
Cancel
Save