Merge pull request #2890 from nocodb/refactor/gui-v2-year-selector

refactor(gui-v2): Added YearPicker

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

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import dayjs from 'dayjs'
+import { ReadonlyInj } from '~/context'
+
+const { modelValue } = defineProps<Props>()
+
+const emit = defineEmits(['update:modelValue'])
+
+interface Props {
+  modelValue: number
+}
+
+const readOnlyMode = inject(ReadonlyInj, false)
+
+let isYearInvalid = $ref(false)
+
+const localState = $computed({
+  get() {
+    if (!modelValue) {
+      return undefined
+    }
+
+    const yearDate = dayjs(modelValue.toString(), 'YYYY')
+    if (!yearDate.isValid()) {
+      isYearInvalid = true
+      return undefined
+    }
+
+    return yearDate
+  },
+  set(val?: dayjs.Dayjs) {
+    if (!val) {
+      emit('update:modelValue', null)
+      return
+    }
+
+    if (val?.isValid()) {
+      emit('update:modelValue', Number(val.format('YYYY')))
+    }
+  },
+})
+</script>
+
+<template>
+  <a-date-picker
+    v-model:value="localState"
+    picker="year"
+    :bordered="false"
+    class="!w-full px-1"
+    :placeholder="isYearInvalid ? 'Invalid year' : !readOnlyMode ? 'Select year' : ''"
+    :allow-clear="!readOnlyMode"
+    :input-read-only="true"
+    :open="readOnlyMode ? false : undefined"
+  >
+    <template v-if="readOnlyMode" #suffixIcon></template>
+  </a-date-picker>
+</template>
+
+<style scoped></style>

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

@@ -32,6 +32,7 @@ const {
   isEmail,
   isJSON,
   isDate,
+  isYear,
   isDateTime,
   isTime,
   isBoolean,
@@ -175,6 +176,7 @@ todo :
     <CellSingleSelect v-else-if="isSingleSelect" v-model="localState" />
     <CellMultiSelect v-else-if="isMultiSelect" v-model="localState" />
     <CellDatePicker v-else-if="isDate" v-model="localState" />
+    <CellYearPicker v-else-if="isYear" v-model="localState" />
     <CellDateTimePicker v-else-if="isDateTime" v-model="localState" />
     <CellDateTimePicker v-else-if="isTime" v-model="localState" />
     <CellRating v-else-if="isRating" v-model="localState" />

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

@@ -17,6 +17,7 @@ export default (column: ColumnType) => {
   const isInt = abstractType === 'integer'
   const isFloat = abstractType === 'float'
   const isDate = abstractType === 'date' || uiDatatype === 'Date'
+  const isYear = abstractType === 'year' || uiDatatype === 'Year'
   const isTime = abstractType === 'time' || uiDatatype === 'Time'
   const isDateTime = abstractType === 'datetime' || uiDatatype === 'DateTime'
   const isJSON = uiDatatype === 'JSON'
@@ -55,6 +56,7 @@ export default (column: ColumnType) => {
     isInt,
     isFloat,
     isDate,
+    isYear,
     isTime,
     isDateTime,
     isJSON,