From cb57ceb54192df9a0dfef5c9d4550ba648e8bac5 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 31 Aug 2024 14:32:25 +0300
Subject: [PATCH] client: Add basic year navigation to calendar

---
 src/public/app/widgets/buttons/calendar.js | 63 +++++++++++++++-------
 src/public/stylesheets/calendar.css        |  5 ++
 2 files changed, 49 insertions(+), 19 deletions(-)

diff --git a/src/public/app/widgets/buttons/calendar.js b/src/public/app/widgets/buttons/calendar.js
index 3980ca8b3..8140c8720 100644
--- a/src/public/app/widgets/buttons/calendar.js
+++ b/src/public/app/widgets/buttons/calendar.js
@@ -9,24 +9,35 @@ import toastService from "../../services/toast.js";
 
 const DROPDOWN_TPL = `
 <div class="calendar-dropdown-widget">
-  <style>
-  .calendar-dropdown-widget {
-      width: 350px;
-  }
-  </style>
+    <style>
+        .calendar-dropdown-widget {
+            width: 350px;
+        }
+    </style>
 
-  <div class="calendar-header">
-    <button class="calendar-btn bx bx-left-arrow-alt" data-calendar-toggle="previous"></button>
+    <div class="calendar-header">
+        <div class="calendar-month-selector">
+            <button class="calendar-btn bx bx-left-arrow-alt" data-calendar-toggle="previous"></button>
 
-    <div class="calendar-header-label" data-calendar-label="month"></div>
+            <div class="calendar-header-label" data-calendar-label="month"></div>
 
-    <button class="calendar-btn bx bx-right-arrow-alt" data-calendar-toggle="next"></button>
-  </div>
+            <button class="calendar-btn bx bx-right-arrow-alt" data-calendar-toggle="next"></button>
+        </div>
 
-  <div class="calendar-week">
-    <span>${t("calendar.mon")}</span> <span>${t("calendar.tue")}</span><span>${t("calendar.wed")}</span> <span>${t("calendar.thu")}</span> <span>${t("calendar.fri")}</span> <span>${t("calendar.sat")}</span> <span>${t("calendar.sun")}</span>
-  </div>
-  <div class="calendar-body" data-calendar-area="month"></div>
+        <div class="calendar-year-selector">
+            <button class="calendar-btn bx bx-left-arrow-alt" data-calendar-toggle="previousYear"></button>
+
+            <div class="calendar-header-label" data-calendar-label="year"></div>
+
+            <button class="calendar-btn bx bx-right-arrow-alt" data-calendar-toggle="nextYear"></button>
+        </div>
+    </div>
+
+    <div class="calendar-week">
+        <span>${t("calendar.mon")}</span> <span>${t("calendar.tue")}</span><span>${t("calendar.wed")}</span> <span>${t("calendar.thu")}</span> <span>${t("calendar.fri")}</span> <span>${t("calendar.sat")}</span> <span>${t("calendar.sun")}</span>
+    </div>
+
+    <div class="calendar-body" data-calendar-area="month"></div>
 </div>`;
 
 export default class CalendarWidget extends RightDropdownButtonWidget {
@@ -38,20 +49,33 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
         super.doRender();
 
         this.$month = this.$dropdownContent.find('[data-calendar-area="month"]');
-        this.$next = this.$dropdownContent.find('[data-calendar-toggle="next"]');
-        this.$previous = this.$dropdownContent.find('[data-calendar-toggle="previous"]');
+        
+        // Month navigation
         this.$label = this.$dropdownContent.find('[data-calendar-label="month"]');
-
+        this.$next = this.$dropdownContent.find('[data-calendar-toggle="next"]');
+        this.$previous = this.$dropdownContent.find('[data-calendar-toggle="previous"]');        
         this.$next.on('click', () => {
             this.date.setMonth(this.date.getMonth() + 1);
             this.createMonth();
         });
-
         this.$previous.on('click', e => {
             this.date.setMonth(this.date.getMonth() - 1);
             this.createMonth();
         });
 
+        // Year navigation
+        this.$yearLabel = this.$dropdownContent.find('[data-calendar-label="year"]');
+        this.$nextYear = this.$dropdownContent.find('[data-calendar-toggle="nextYear"]');
+        this.$previousYear = this.$dropdownContent.find('[data-calendar-toggle="previousYear"]');        
+        this.$nextYear.on('click', () => {
+            this.date.setFullYear(this.date.getFullYear() + 1);
+            this.createMonth();
+        });
+        this.$previousYear.on('click', e => {
+            this.date.setFullYear(this.date.getFullYear() - 1);
+            this.createMonth();
+        });
+
         this.$dropdownContent.find('.calendar-header').on("click", e => e.stopPropagation());
 
         this.$dropdownContent.on('click', '.calendar-date', async ev => {
@@ -154,7 +178,8 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
         this.date.setDate(1);
         this.date.setMonth(this.date.getMonth() - 1);
 
-        this.$label.html(`${t(this.monthsAsString(this.date.getMonth()).toLowerCase())} ${this.date.getFullYear()}`);
+        this.$label.html(t(this.monthsAsString(this.date.getMonth()).toLowerCase()));
+        this.$yearLabel.html(this.date.getFullYear());
     }
 
     monthsAsString(monthIndex) {
diff --git a/src/public/stylesheets/calendar.css b/src/public/stylesheets/calendar.css
index d9900222f..61efba0dc 100644
--- a/src/public/stylesheets/calendar.css
+++ b/src/public/stylesheets/calendar.css
@@ -31,6 +31,11 @@
   padding: 0 0.5rem 0.5rem 0.5rem;
 }
 
+.calendar-dropdown-widget .calendar-header > div {
+  display: flex;
+  flex-grow: 1;
+}
+
 .calendar-dropdown-widget .calendar-header-label {
   font-weight: bold;
   text-align: center;