From ccc0ed43fd3a1c79a1f9492520f7ca87e9238917 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sat, 30 Jul 2022 16:14:22 +0530
Subject: [PATCH 1/2] refactor/gui-v2-added-Year-Picker

---
 packages/nc-gui-v2/components.d.ts            |  2 +
 .../nc-gui-v2/components/cell/YearPicker.vue  | 62 +++++++++++++++++++
 .../nc-gui-v2/components/smartsheet/Cell.vue  |  2 +
 packages/nc-gui-v2/composables/useColumn.ts   |  2 +
 4 files changed, 68 insertions(+)
 create mode 100644 packages/nc-gui-v2/components/cell/YearPicker.vue

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 692c3f667c..460f7b9e11 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -7,6 +7,7 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    AAlert: typeof import('ant-design-vue/es')['Alert']
     AAnchorLink: typeof import('ant-design-vue/es')['AnchorLink']
     AAutoComplete: typeof import('ant-design-vue/es')['AutoComplete']
     AButton: typeof import('ant-design-vue/es')['Button']
@@ -15,6 +16,7 @@ declare module '@vue/runtime-core' {
     ACol: typeof import('ant-design-vue/es')['Col']
     ACollapse: typeof import('ant-design-vue/es')['Collapse']
     ACollapsePanel: typeof import('ant-design-vue/es')['CollapsePanel']
+    ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
     ADivider: typeof import('ant-design-vue/es')['Divider']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
     AForm: typeof import('ant-design-vue/es')['Form']
diff --git a/packages/nc-gui-v2/components/cell/YearPicker.vue b/packages/nc-gui-v2/components/cell/YearPicker.vue
new file mode 100644
index 0000000000..9ed5f86c42
--- /dev/null
+++ b/packages/nc-gui-v2/components/cell/YearPicker.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import dayjs from 'dayjs'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+
+import { ReadonlyInj } from '~/context'
+const { modelValue } = defineProps<Props>()
+
+const emit = defineEmits(['update:modelValue'])
+
+dayjs.extend(customParseFormat)
+
+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>
diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index c1b4bb7cbb..f643b37140 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -32,6 +32,7 @@ const {
   isEmail,
   isJSON,
   isDate,
+  isYear,
   isDateTime,
   isTime,
   isBoolean,
@@ -177,6 +178,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" />
diff --git a/packages/nc-gui-v2/composables/useColumn.ts b/packages/nc-gui-v2/composables/useColumn.ts
index decddd5778..9eb65f1195 100644
--- a/packages/nc-gui-v2/composables/useColumn.ts
+++ b/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,

From daf13f6c35ae8c69e03aad23468f19a8915451af Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sat, 30 Jul 2022 17:37:26 +0530
Subject: [PATCH 2/2] chore/gui-v2-year-picker-minor-cleanup

---
 packages/nc-gui-v2/components/cell/YearPicker.vue | 7 ++-----
 packages/nc-gui-v2/utils/dateTimeUtils.ts         | 3 +++
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/YearPicker.vue b/packages/nc-gui-v2/components/cell/YearPicker.vue
index 9ed5f86c42..3d07f68184 100644
--- a/packages/nc-gui-v2/components/cell/YearPicker.vue
+++ b/packages/nc-gui-v2/components/cell/YearPicker.vue
@@ -1,14 +1,11 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import customParseFormat from 'dayjs/plugin/customParseFormat'
-
 import { ReadonlyInj } from '~/context'
+
 const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-dayjs.extend(customParseFormat)
-
 interface Props {
   modelValue: number
 }
@@ -38,7 +35,7 @@ const localState = $computed({
     }
 
     if (val?.isValid()) {
-      emit('update:modelValue', Number(val?.format('YYYY')))
+      emit('update:modelValue', Number(val.format('YYYY')))
     }
   },
 })
diff --git a/packages/nc-gui-v2/utils/dateTimeUtils.ts b/packages/nc-gui-v2/utils/dateTimeUtils.ts
index e545ee290c..5f66d396df 100644
--- a/packages/nc-gui-v2/utils/dateTimeUtils.ts
+++ b/packages/nc-gui-v2/utils/dateTimeUtils.ts
@@ -2,8 +2,11 @@ import dayjs from 'dayjs'
 
 import relativeTime from 'dayjs/plugin/relativeTime'
 import utc from 'dayjs/plugin/utc'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+
 dayjs.extend(utc)
 dayjs.extend(relativeTime)
+dayjs.extend(customParseFormat)
 
 export const timeAgo = (date: any) => {
   return dayjs.utc(date).fromNow()