Browse Source

Merge pull request #4253 from finn-auto/disallow-edit-of-date-pk

disallow date picker from opening if column is primary key
refactor/ui-updates
աɨռɢӄաօռɢ 2 years ago committed by GitHub
parent
commit
60c42abf7a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 7
      packages/nc-gui/components/cell/DatePicker.vue
  2. 9
      packages/nc-gui/components/cell/DateTimePicker.vue
  3. 7
      packages/nc-gui/components/cell/TimePicker.vue
  4. 7
      packages/nc-gui/components/cell/YearPicker.vue
  5. 9
      packages/nc-gui/components/smartsheet/Cell.vue
  6. 2
      packages/nc-gui/composables/useColumn.ts

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

@ -4,9 +4,10 @@ import { ColumnInj, ReadonlyInj, computed, inject, ref, watch } from '#imports'
interface Props {
modelValue?: string | null
isPk?: boolean
}
const { modelValue } = defineProps<Props>()
const { modelValue, isPk } = defineProps<Props>()
const emit = defineEmits(['update:modelValue'])
@ -65,10 +66,10 @@ const placeholder = computed(() => (isDateInvalid ? 'Invalid date' : ''))
class="!w-full !px-0 !border-none"
:format="dateFormat"
:placeholder="placeholder"
:allow-clear="!readOnly"
:allow-clear="!readOnly && !localState && !isPk"
:input-read-only="true"
:dropdown-class-name="`${randomClass} nc-picker-date`"
:open="readOnly ? false : open"
:open="readOnly || (localState && isPk) ? false : open"
@click="open = !open"
>
<template #suffixIcon></template>

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

@ -4,9 +4,10 @@ import { ReadonlyInj, inject, ref, useProject, watch } from '#imports'
interface Props {
modelValue?: string | null
isPk?: boolean
}
const { modelValue } = defineProps<Props>()
const { modelValue, isPk } = defineProps<Props>()
const emit = defineEmits(['update:modelValue'])
@ -65,11 +66,11 @@ watch(
class="!w-full !px-0 !border-none"
format="YYYY-MM-DD HH:mm"
:placeholder="isDateInvalid ? 'Invalid date' : ''"
:allow-clear="!readOnly"
:allow-clear="!readOnly && !localState && !isPk"
:input-read-only="true"
:dropdown-class-name="`${randomClass} nc-picker-datetime`"
:open="readOnly ? false : open"
:disabled="readOnly"
:open="readOnly || (localState && isPk) ? false : open"
:disabled="readOnly || (localState && isPk)"
@click="open = !open"
@ok="open = !open"
>

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

@ -4,9 +4,10 @@ import { ReadonlyInj, inject, onClickOutside, useProject, watch } from '#imports
interface Props {
modelValue?: string | null | undefined
isPk?: boolean
}
const { modelValue } = defineProps<Props>()
const { modelValue, isPk } = defineProps<Props>()
const emit = defineEmits(['update:modelValue'])
@ -76,9 +77,9 @@ watch(
format="HH:mm"
class="!w-full !px-0 !border-none"
:placeholder="isTimeInvalid ? 'Invalid time' : ''"
:allow-clear="!readOnly"
:allow-clear="!readOnly && !localState && !isPk"
:input-read-only="true"
:open="readOnly ? false : open"
:open="readOnly || (localState && isPk) ? false : open"
:popup-class-name="`${randomClass} nc-picker-time`"
@click="open = !open"
@ok="open = !open"

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

@ -4,9 +4,10 @@ import { ReadonlyInj, computed, inject, onClickOutside, ref, watch } from '#impo
interface Props {
modelValue?: number | string | null
isPk?: boolean
}
const { modelValue } = defineProps<Props>()
const { modelValue, isPk = false } = defineProps<Props>()
const emit = defineEmits(['update:modelValue'])
@ -63,9 +64,9 @@ const placeholder = computed(() => (isYearInvalid ? 'Invalid year' : ''))
:bordered="false"
class="!w-full !px-0 !border-none"
:placeholder="placeholder"
:allow-clear="!readOnly"
:allow-clear="!readOnly && !localState && !isPk"
:input-read-only="true"
:open="readOnly ? false : open"
:open="readOnly || (localState && isPk) ? false : open"
:dropdown-class-name="`${randomClass} nc-picker-year`"
@click="open = !open"
@change="open = !open"

9
packages/nc-gui/components/smartsheet/Cell.vue

@ -91,6 +91,7 @@ const {
isPhoneNumber,
isAutoSaved,
isManualSaved,
isPrimaryKey,
} = useColumn(column)
const vModel = computed({
@ -134,10 +135,10 @@ const syncAndNavigate = (dir: NavigateDir, e: KeyboardEvent) => {
<LazyCellAttachment v-else-if="isAttachment" v-model="vModel" :row-index="props.rowIndex" />
<LazyCellSingleSelect v-else-if="isSingleSelect" v-model="vModel" :row-index="props.rowIndex" />
<LazyCellMultiSelect v-else-if="isMultiSelect" v-model="vModel" :row-index="props.rowIndex" />
<LazyCellDatePicker v-else-if="isDate" v-model="vModel" />
<LazyCellYearPicker v-else-if="isYear" v-model="vModel" />
<LazyCellDateTimePicker v-else-if="isDateTime" v-model="vModel" />
<LazyCellTimePicker v-else-if="isTime" v-model="vModel" />
<LazyCellDatePicker v-else-if="isDate" v-model="vModel" :is-pk="isPrimaryKey" />
<LazyCellYearPicker v-else-if="isYear" v-model="vModel" :is-pk="isPrimaryKey" />
<LazyCellDateTimePicker v-else-if="isDateTime" v-model="vModel" :is-pk="isPrimaryKey" />
<LazyCellTimePicker v-else-if="isTime" v-model="vModel" :is-pk="isPrimaryKey" />
<LazyCellRating v-else-if="isRating" v-model="vModel" />
<LazyCellDuration v-else-if="isDuration" v-model="vModel" />
<LazyCellEmail v-else-if="isEmail" v-model="vModel" />

2
packages/nc-gui/composables/useColumn.ts

@ -61,6 +61,7 @@ export function useColumn(column: Ref<ColumnType | undefined>) {
)
const isManualSaved = computed(() => [UITypes.Currency].includes(uiDatatype.value))
const isPrimary = computed(() => column.value?.pv)
const isPrimaryKey = computed(() => !!column.value?.pk)
return {
abstractType,
@ -92,5 +93,6 @@ export function useColumn(column: Ref<ColumnType | undefined>) {
isPercent,
isPhoneNumber,
isSpecificDBType,
isPrimaryKey,
}
}

Loading…
Cancel
Save