feat(nc-gui): refresh year view

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

@@ -2,6 +2,7 @@
 import dayjs from 'dayjs'
 
 interface Props {
+  size?: 'small' | 'medium'
   selectedDate?: dayjs.Dayjs | null
   isDisabled?: boolean
   pageDate?: dayjs.Dayjs
@@ -16,6 +17,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  size: 'medium',
   selectedDate: null,
   isDisabled: false,
   isMondayFirst: true,
@@ -135,7 +137,7 @@ const paginate = (action: 'next' | 'prev') => {
 </script>
 
 <template>
-  <div class="px-4 pt-3 pb-4 flex flex-col gap-4">
+  <div class="flex flex-col gap-4">
     <div
       :class="{
         'justify-center': disablePagination,
@@ -163,12 +165,31 @@ const paginate = (action: 'next' | 'prev') => {
       </NcTooltip>
     </div>
     <div class="border-1 border-gray-200 rounded-y-xl max-w-[320px]">
-      <div class="flex flex-row bg-gray-100 gap-2 rounded-t-xl justify-between px-2">
+      <div
-        <span v-for="(day, index) in days" :key="index" class="h-9 flex items-center justify-center w-9 text-gray-500">{{
+        :class="{
-          day
+          'gap-1 px-1': size === 'small',
-        }}</span>
+          'gap-2 px-2': size === 'medium',
+        }"
+        class="flex flex-row bg-gray-100 rounded-t-xl justify-between"
+      >
+        <span
+          v-for="(day, index) in days"
+          :key="index"
+          :class="{
+            'w-9 h-9': size === 'medium',
+            'w-8 h-8': size === 'small',
+          }"
+          class="flex items-center justify-center text-gray-500"
+          >{{ day }}</span
+        >
       </div>
-      <div class="grid grid-cols-7 gap-2 p-2">
+      <div
+        :class="{
+          'gap-2 p-2': size === 'medium',
+          'gap-1 p-1': size === 'small',
+        }"
+        class="grid grid-cols-7"
+      >
         <span
           v-for="(date, index) in dates"
           :key="index"
@@ -181,12 +202,21 @@ const paginate = (action: 'next' | 'prev') => {
             'nc-selected-week-start': isSameDate(date, selectedWeek?.start),
             'nc-selected-week-end': isSameDate(date, selectedWeek?.end),
             'rounded-md bg-brand-50 nc-calendar-today text-brand-500': isSameDate(date, dayjs()) && isDateInCurrentMonth(date),
+            'h-9 w-9': size === 'medium',
+            'h-8 w-8': size === 'small',
           }"
-          class="h-9 w-9 px-1 py-2 relative font-medium flex items-center cursor-pointer justify-center"
+          class="px-1 py-1 relative font-medium flex items-center cursor-pointer justify-center"
           data-testid="nc-calendar-date"
           @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="{
+              'h-1.5 w-1.5': size === 'medium',
+              'h-1 w-1': size === 'small',
+            }"
+            class="absolute z-2 rounded-full bg-brand-500 top-1 right-1"
+          ></span>
           <span class="z-2">
             {{ date.get('date') }}
           </span>

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

@@ -269,18 +269,18 @@ const newRecord = () => {
   emit('newRecord', { row, oldRow: {}, rowMeta: { new: true } })
 }
 
-const height = ref(0)
+const width = ref(0)
 
-const heightListener = () => {
+const widthListener = () => {
-  height.value = window.innerHeight
+  width.value = window.innerWidth
 }
 
 onMounted(() => {
-  window.addEventListener('resize', heightListener)
+  window.addEventListener('resize', widthListener)
 })
 
 onUnmounted(() => {
-  window.removeEventListener('resize', heightListener)
+  window.removeEventListener('resize', widthListener)
 })
 </script>
 
@@ -295,7 +295,8 @@ onUnmounted(() => {
   >
     <div
       :class="{
-        '!hidden': height < 918,
+        '!hidden': width < 1440,
+        'px-4 pt-3 pb-4 ': activeCalendarView === ('day' as const) || activeCalendarView === ('week' as const),
       }"
       class="flex flex-col"
     >
@@ -327,7 +328,7 @@ onUnmounted(() => {
 
     <div
       :class="{
-        '!border-t-0': height < 918,
+        '!border-t-0': width < 1440,
       }"
       class="px-4 border-t-1 border-gray-200 relative flex flex-col gap-y-4 pt-3"
     >
@@ -369,9 +370,9 @@ onUnmounted(() => {
         v-if="calendarRange"
         :ref="sideBarListRef"
         :class="{
-          '!h-[calc(100vh-10.5rem)]': height < 918,
+          '!h-[calc(100vh-10.5rem)]': width < 1440,
-        'h-[calc(100vh-36.2rem)]': activeCalendarView === ('day' as const) || activeCalendarView === ('week' as const) && height > 918,
+        'h-[calc(100vh-36.2rem)]': activeCalendarView === ('day' as const) || activeCalendarView === ('week' as const) && width > 1440,
-        'h-[calc(100vh-25.1rem)]': activeCalendarView === ('month' as const) || activeCalendarView === ('year' as const)  && height > 918,
+        'h-[calc(100vh-25.1rem)]': activeCalendarView === ('month' as const) || activeCalendarView === ('year' as const)  && width > 1440,
       }"
         class="gap-2 flex flex-col nc-scrollbar-md overflow-y-auto nc-calendar-top-height"
         data-testid="nc-calendar-side-menu-list"

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

@@ -12,7 +12,7 @@ const months = computed(() => {
 
 <template>
   <div
-    class="flex flex-wrap gap-6 pb-4 items-center justify-center overflow-auto nc-scrollbar-md"
+    class="flex flex-wrap gap-3 py-3 items-center justify-center overflow-auto nc-scrollbar-md"
     data-testid="nc-calendar-year-view"
   >
     <NcDateWeekSelector
@@ -21,6 +21,7 @@ const months = computed(() => {
       v-model:active-dates="activeDates"
       v-model:page-date="months[index]"
       v-model:selected-date="selectedDate"
+      size="small"
       class="max-w-[350px]"
       data-testid="nc-calendar-year-view-month-selector"
       disable-pagination

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

@@ -194,7 +194,14 @@ const headerText = computed(() => {
             </NcButton>
 
             <template #overlay>
-              <div v-if="calendarRangeDropdown" class="min-w-[22.1rem]" @click.stop>
+              <div
+                v-if="calendarRangeDropdown"
+                :class="{
+                  'px-4 pt-3 pb-4 ': activeCalendarView === 'week' || activeCalendarView === 'day',
+                }"
+                class="min-w-[22.1rem]"
+                @click.stop
+              >
                 <NcDateWeekSelector
                   v-if="activeCalendarView === ('day' as const)"
                   v-model:active-dates="activeDates"