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

disallow date picker from opening if column is primary key

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>

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"
   >

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"

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"

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" />

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,
   }
 }