feat(nc-gui): year selector fix: refactored month selector to support year selector fix: renamed DateSelector.vue to DateWeekSelector.vue

packages/nc-gui/components/nc/DateWeekSelector.vue

@@ -45,7 +45,7 @@ const currentMonth = computed(() => {
 });
 
 const selectWeek = (date: Date) => {
-  if(!date) return;
+  if (!date) return;
   const dayOffset = props.isMondayFirst ? 1 : 0;
   const dayOfWeek = (date.getDay() - dayOffset + 7) % 7;
   const startDate = new Date(date);
@@ -101,7 +101,7 @@ const isDateInCurrentMonth = (date: Date) => {
 
 // Used to check if two dates are the same
 const isSameDate = (date1: Date, date2: Date) => {
-  if(!date1 || !date2) return false;
+  if (!date1 || !date2) return false;
   return date1.getDate() === date2.getDate() &&
       date1.getMonth() === date2.getMonth() &&
       date1.getFullYear() === date2.getFullYear();
@@ -154,7 +154,8 @@ const paginate = (action: 'next' | 'prev') => {
         }" class="h-9 w-9 px-1 py-2 relative font-medium flex items-center cursor-pointer justify-center"
               @click="handleSelectDate(date)"
         >
-          <span v-if="isActiveDate(date)" class="absolute z-2 h-1.5 w-1.5 rounded-full bg-brand-500 top-1 right-1"></span>
+          <span v-if="isActiveDate(date)"
+                class="absolute z-2 h-1.5 w-1.5 rounded-full bg-brand-500 top-1 right-1"></span>
           <span class="z-2">
           {{ date.getDate() }}
           </span>
@@ -179,11 +180,11 @@ const paginate = (action: 'next' | 'prev') => {
   height: 100%;
 }
 
-.nc-selected-week-start:before{
+.nc-selected-week-start:before {
   @apply !border-l-2 !rounded-l-lg;
 }
 
-.nc-selected-week-end:before{
+.nc-selected-week-end:before {
   width: 100%;
   @apply !border-r-2 !rounded-r-lg;
 }

packages/nc-gui/components/nc/MonthYearSelector.vue

@@ -0,0 +1,176 @@
+<script lang="ts" setup>
+
+interface Props {
+  selectedDate?: Date | null;
+  isDisabled?: boolean;
+  pageDate?: Date;
+  yearPicker?: boolean;
+}
+
+const emit = defineEmits(['update:selected-date', 'update:page-date']);
+const props = withDefaults(defineProps<Props>(), {
+  selectedDate: null,
+  isDisabled: false,
+  pageDate: new Date(),
+  yearPicker: false,
+});
+
+const pageDate = useVModel(props, 'pageDate', emit);
+const selectedDate = useVModel(props, 'selectedDate', emit);
+
+const years = computed(() => {
+  const date = new Date(pageDate.value);
+  const startYear = date.getFullYear() - 5;
+  const endYear = date.getFullYear() + 6;
+  const years = [];
+  for (let i = startYear; i <= endYear; i++) {
+    years.push({
+      label: i,
+      value: new Date(i, 0, 1)
+    });
+  }
+  return years;
+});
+
+const currentYear = computed(() => {
+  return pageDate.value.getFullYear();
+});
+
+const months = computed(() => {
+  const date = new Date(pageDate.value);
+  return [
+    {
+      label: 'January',
+      value: new Date(date.getFullYear(), 0, 1)
+    },
+    {
+      label: 'February',
+      value: new Date(date.getFullYear(), 1, 1)
+    },
+    {
+      label: 'March',
+      value: new Date(date.getFullYear(), 2, 1)
+    },
+    {
+      label: 'April',
+      value: new Date(date.getFullYear(), 3, 1)
+    },
+    {
+      label: 'May',
+      value: new Date(date.getFullYear(), 4, 1)
+    },
+    {
+      label: 'June',
+      value: new Date(date.getFullYear(), 5, 1)
+    },
+    {
+      label: 'July',
+      value: new Date(date.getFullYear(), 6, 1)
+    },
+    {
+      label: 'August',
+      value: new Date(date.getFullYear(), 7, 1)
+    },
+    {
+      label: 'September',
+      value: new Date(date.getFullYear(), 8, 1)
+    },
+    {
+      label: 'October',
+      value: new Date(date.getFullYear(), 9, 1)
+    },
+    {
+      label: 'November',
+      value: new Date(date.getFullYear(), 10, 1)
+    },
+    {
+      label: 'December',
+      value: new Date(date.getFullYear(), 11, 1)
+    }
+  ]
+})
+
+const compareDates = (date1: Date, date2: Date) => {
+  if (!date1 || !date2) return false;
+  return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth();
+}
+
+const isMonthSelected = (date: Date) => {
+  if (!selectedDate.value) return false;
+  return compareDates(date, selectedDate.value);
+}
+
+const paginateMonth = (action: 'next' | 'prev') => {
+  const date = new Date(pageDate.value);
+  if (action === 'next') {
+    date.setFullYear(date.getFullYear() + 1);
+  } else {
+    date.setFullYear(date.getFullYear() - 1);
+  }
+  pageDate.value = date;
+};
+
+const paginateYear = (action: 'next' | 'prev') => {
+  const date = new Date(pageDate.value);
+  if (action === 'next') {
+    date.setFullYear(date.getFullYear() + 12);
+  } else {
+    date.setFullYear(date.getFullYear() - 12);
+  }
+  pageDate.value = date;
+};
+
+const paginate = (action: 'next' | 'prev') => {
+  if (props.yearPicker) {
+    paginateYear(action);
+  } else {
+    paginateMonth(action);
+  }
+};
+
+const compareYear = (date1: Date, date2: Date) => {
+  if (!date1 || !date2) return false;
+  return date1.getFullYear() === date2.getFullYear();
+}
+
+</script>
+
+<template>
+  <div class="p-4 flex flex-col gap-4">
+    <div class="flex justify-between items-center">
+      <NcButton size="small" type="secondary" @click="paginate('prev')">
+        <component :is="iconMap.doubleLeftArrow" class="h-4 w-4"/>
+      </NcButton>
+      <span class="font-bold text-gray-700">{{ yearPicker ? 'Select Year' : currentYear }}</span>
+      <NcButton size="small" type="secondary" @click="paginate('next')">
+        <component :is="iconMap.doubleRightArrow" class="h-4 w-4"/>
+      </NcButton>
+    </div>
+    <div class="border-1 border-gray-200 rounded-y-xl max-w-[320px]">
+      <div class="grid grid-cols-4 gap-2 p-2">
+        <span v-for="(month) in months" v-if="!yearPicker" :key="month.value" :class="{
+          '!bg-brand-50 !border-2 !border-brand-500' : isMonthSelected(month.value),
+        }"
+              class="h-9 rounded-lg flex font-medium items-center justify-center hover:(border-1 border-gray-200 bg-gray-100) text-gray-500 cursor-pointer"
+              @click="selectedDate = month.value"
+        >
+          {{ month.label.slice(0, 3) }}
+        </span>
+        <span v-for="(year) in years" v-if="yearPicker" :key="year" :class="{
+          '!bg-brand-50 !border-2 !border-brand-500' : compareYear(year.value, selectedDate)
+        }"
+              class="h-9 rounded-lg flex font-medium items-center justify-center hover:(border-1 border-gray-200 bg-gray-100) text-gray-500 cursor-pointer"
+              @click="selectedDate = year.value"
+        >
+          {{ year.label }}
+        </span>
+      </div>
+    </div>
+
+
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

packages/nc-gui/components/smartsheet/calendar/SideMenu.vue

@@ -6,7 +6,7 @@ const props = defineProps<{
   visible: boolean
 }>()
 
-const activeCalendarView = inject(CalendarViewTypeInj, ref<'month' | 'day' | 'year' | 'week'>('day' as const))
+const activeCalendarView = inject(CalendarViewTypeInj, ref<'month' | 'day' | 'year' | 'week'>('month' as const))
 
 const {t} = useI18n()
 
@@ -60,8 +60,11 @@ const selectedDate = ref(null);
     'w-1/4 min-w-[22.1rem]': props.visible,
     'transition-all': true,
   }" class="h-full border-l-1 border-gray-200">
-    <NcDateSelector v-if="activeCalendarView === ('day' as const)" v-model:page-date="pageDate" v-model:selected-date="selectedDate" :active-dates="activeDates" />
-    <NcDateSelector v-else-if="activeCalendarView === ('week' as const)" v-model:page-date="pageDate" week-picker v-model:selected-week="selectedDate" />
+    <NcDateWeekSelector v-if="activeCalendarView === ('day' as const)" v-model:page-date="pageDate" v-model:selected-date="selectedDate" :active-dates="activeDates" />
+    <NcDateWeekSelector v-else-if="activeCalendarView === ('week' as const)" v-model:page-date="pageDate" week-picker v-model:selected-week="selectedDate" />
+    <NcMonthYearSelector v-else-if="activeCalendarView === ('month' as const)" v-model:page-date="pageDate" v-model:selected-date="selectedDate" />
+    <NcMonthYearSelector v-else-if="activeCalendarView === ('year' as const)" year-picker v-model:page-date="pageDate" v-model:selected-date="selectedDate" />
+
     <div class="px-4 flex flex-col gap-y-6 pt-4">
       <div class="flex justify-between items-center">
         <span class="text-2xl font-bold">{{ t('objects.Records') }}</span>
@@ -73,8 +76,11 @@ const selectedDate = ref(null);
         </template>
       </a-input>
 
-      <div class="gap-2 flex flex-col nc-scrollbar-md overflow-y-auto nc-calendar-top-height">
-        <LazySmartsheetCalendarRecordCard v-for="(x, id) in Array(4)" :color="x%2 === 0 ? 'maroon': 'blue'"
+      <div :class="{
+        'h-[calc(100vh-40rem)]': activeCalendarView === ('day' as const) || activeCalendarView === ('week' as const),
+        'h-[calc(100vh-29rem)]': activeCalendarView === ('month' as const) || activeCalendarView === ('year' as const),
+      }" class="gap-2 flex flex-col nc-scrollbar-md overflow-y-auto nc-calendar-top-height">
+        <LazySmartsheetCalendarRecordCard v-for="(x, id) in Array(50)" :color="x%2 === 0 ? 'maroon': 'blue'"
                                           date="27 April 2003" name="Saturday HackNight" @click="emit('expand-record', id)"/>
       </div>
     </div>
@@ -82,7 +88,5 @@ const selectedDate = ref(null);
 </template>
 
 <style scoped lang="scss">
-.nc-calendar-top-height {
-  height: calc(100vh - 40rem);
-}
+
 </style>

packages/nc-gui/components/smartsheet/calendar/index.vue

@@ -33,7 +33,7 @@ provide(IsKanbanInj, ref(false))
 
 provide(IsCalendarInj, ref(true))
 
-provide(CalendarViewTypeInj, ref('day' as const))
+provide(CalendarViewTypeInj, ref('year' as const))
 
 const showSideMenu = ref(true)