From 92d18706bf809ab5051752b523bbe1aa165caa74 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Tue, 20 Feb 2024 07:15:44 +0000
Subject: [PATCH] feat(nc-gui): year view for calendar view

---
 .../smartsheet/calendar/YearView.vue          | 29 +++++++++++++++++++
 .../components/smartsheet/calendar/index.vue  |  1 +
 2 files changed, 30 insertions(+)
 create mode 100644 packages/nc-gui/components/smartsheet/calendar/YearView.vue

diff --git a/packages/nc-gui/components/smartsheet/calendar/YearView.vue b/packages/nc-gui/components/smartsheet/calendar/YearView.vue
new file mode 100644
index 0000000000..d7ed1de761
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/calendar/YearView.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+
+
+const {t} = useI18n()
+
+const { pageDate, selectedDate, selectedDateRange } = useCalendarViewStoreOrThrow()
+
+const months = computed(() => {
+  const date = new Date()
+  const months = []
+  for (let i = 0; i < 12; i++) {
+    months.push(new Date(date.getFullYear(), i, selectedDate.value.getDate()))
+  }
+  return months
+})
+
+</script>
+
+<template>
+
+  <div class="grid justify-items-center gap-6 grid-cols-3 overflow-auto nc-scrollbar-md">
+      <NcDateWeekSelector v-for="(month, index) in months" disable-pagination :key="month" v-model:page-date="months[index]" v-model:selected-date="selectedDate" class="max-w-[350px]"/>
+  </div>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/packages/nc-gui/components/smartsheet/calendar/index.vue b/packages/nc-gui/components/smartsheet/calendar/index.vue
index 9b4af5b632..85788991e8 100644
--- a/packages/nc-gui/components/smartsheet/calendar/index.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/index.vue
@@ -97,6 +97,7 @@ const headerText = computed(() => {
           }" class="h-4 w-4 transition-all"/>
         </NcButton>
       </div>
+      <LazySmartsheetCalendarYearView v-if="activeCalendarView === 'year'" />
     </div>
     <LazySmartsheetCalendarSideMenu v-if="!isMobileMode" :visible="showSideMenu" @expand-record="expandRecord"/>
   </div>