From a99c86ea9f1fd80d6f46e24b2c91ada2a6caa8b4 Mon Sep 17 00:00:00 2001
From: Jin <22962980+JYC333@users.noreply.github.com>
Date: Fri, 28 Feb 2025 14:41:30 +0100
Subject: [PATCH] port calender to ts

---
 .../buttons/{calendar.js => calendar.ts}      | 76 +++++++++++++------
 1 file changed, 52 insertions(+), 24 deletions(-)
 rename src/public/app/widgets/buttons/{calendar.js => calendar.ts} (78%)

diff --git a/src/public/app/widgets/buttons/calendar.js b/src/public/app/widgets/buttons/calendar.ts
similarity index 78%
rename from src/public/app/widgets/buttons/calendar.js
rename to src/public/app/widgets/buttons/calendar.ts
index d7f2f7514..92312ae13 100644
--- a/src/public/app/widgets/buttons/calendar.js
+++ b/src/public/app/widgets/buttons/calendar.ts
@@ -8,6 +8,7 @@ import RightDropdownButtonWidget from "./right_dropdown_button.js";
 import toastService from "../../services/toast.js";
 import options from "../../services/options.js";
 import { Dropdown } from "bootstrap";
+import type { EventData } from "../../components/app_context.js";
 
 const MONTHS = [
     t("calendar.january"),
@@ -37,7 +38,7 @@ const DROPDOWN_TPL = `
             <button class="calendar-btn tn-tool-button bx bx-chevron-left" data-calendar-toggle="previous"></button>
 
             <button class="btn dropdown-toggle select-button" type="button"
-                data-bs-toggle="dropdown" data-bs-auto-close="true"
+                data-bs-toggle="dropdown" data-bs-auto-close="outside"
                 aria-expanded="false"
                 data-calendar-input="month"></button>
             <ul class="dropdown-menu" data-calendar-input="month-list">
@@ -66,8 +67,26 @@ const DROPDOWN_TPL = `
 
 const DAYS_OF_WEEK = [t("calendar.sun"), t("calendar.mon"), t("calendar.tue"), t("calendar.wed"), t("calendar.thu"), t("calendar.fri"), t("calendar.sat")];
 
+interface DateNotesForMonth {
+    [date: string]: string;
+}
+
 export default class CalendarWidget extends RightDropdownButtonWidget {
-    constructor(title, icon) {
+    private $month!: JQuery<HTMLElement>;
+    private $weekHeader!: JQuery<HTMLElement>;
+    private $monthSelect!: JQuery<HTMLElement>;
+    private $yearSelect!: JQuery<HTMLElement>;
+    private $next!: JQuery<HTMLElement>;
+    private $previous!: JQuery<HTMLElement>;
+    private $nextYear!: JQuery<HTMLElement>;
+    private $previousYear!: JQuery<HTMLElement>;
+    private monthDropdown!: Dropdown;
+    private firstDayOfWeek!: number;
+    private activeDate: Date | null = null;
+    private todaysDate!: Date;
+    private date!: Date;
+
+    constructor(title: string = "", icon: string = "") {
         super(title, icon, DROPDOWN_TPL);
     }
 
@@ -85,11 +104,15 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
             // Don't trigger dropdownShown() at widget level when the month selection dropdown is shown, since it would cause a redundant refresh.
             e.stopPropagation();
         });
-        this.monthDropdown = Dropdown.getOrCreateInstance(this.$monthSelect);
+        this.monthDropdown = Dropdown.getOrCreateInstance(this.$monthSelect[0]);
         this.$dropdownContent.find('[data-calendar-input="month-list"] button').on("click", (e) => {
-            this.date.setMonth(e.target.dataset.value);
-            this.createMonth();
-            this.monthDropdown.hide();
+            const target = e.target as HTMLElement;
+            const value = target.dataset.value;
+            if (value) {
+                this.date.setMonth(parseInt(value));
+                this.createMonth();
+                this.monthDropdown.hide();
+            }
         });
         this.$next = this.$dropdownContent.find('[data-calendar-toggle="next"]');
         this.$next.on("click", () => {
@@ -97,7 +120,7 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
             this.createMonth();
         });
         this.$previous = this.$dropdownContent.find('[data-calendar-toggle="previous"]');
-        this.$previous.on("click", (e) => {
+        this.$previous.on("click", () => {
             this.date.setMonth(this.date.getMonth() - 1);
             this.createMonth();
         });
@@ -105,7 +128,8 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
         // Year navigation
         this.$yearSelect = this.$dropdownContent.find('[data-calendar-input="year"]');
         this.$yearSelect.on("input", (e) => {
-            this.date.setFullYear(e.target.value);
+            const target = e.target as HTMLInputElement;
+            this.date.setFullYear(parseInt(target.value));
             this.createMonth();
         });
         this.$nextYear = this.$dropdownContent.find('[data-calendar-toggle="nextYear"]');
@@ -114,7 +138,7 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
             this.createMonth();
         });
         this.$previousYear = this.$dropdownContent.find('[data-calendar-toggle="previousYear"]');
-        this.$previousYear.on("click", (e) => {
+        this.$previousYear.on("click", () => {
             this.date.setFullYear(this.date.getFullYear() - 1);
             this.createMonth();
         });
@@ -124,13 +148,15 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
         this.$dropdownContent.on("click", ".calendar-date", async (ev) => {
             const date = $(ev.target).closest(".calendar-date").attr("data-calendar-date");
 
-            const note = await dateNoteService.getDayNote(date);
+            if (date) {
+                const note = await dateNoteService.getDayNote(date);
 
-            if (note) {
-                appContext.tabManager.getActiveContext().setNote(note.noteId);
-                this.dropdown.hide();
-            } else {
-                toastService.showError(t("calendar.cannot_find_day_note"));
+                if (note) {
+                    appContext.tabManager.getActiveContext().setNote(note.noteId);
+                    this.dropdown?.hide();
+                } else {
+                    toastService.showError(t("calendar.cannot_find_day_note"));
+                }
             }
 
             ev.stopPropagation();
@@ -141,13 +167,13 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
     }
 
     manageFirstDayOfWeek() {
-        this.firstDayOfWeek = options.getInt("firstDayOfWeek");
+        this.firstDayOfWeek = options.getInt("firstDayOfWeek") || 0;
 
         // Generate the list of days of the week taking into consideration the user's selected first day of week.
         let localeDaysOfWeek = [...DAYS_OF_WEEK];
         const daysToBeAddedAtEnd = localeDaysOfWeek.splice(0, this.firstDayOfWeek);
         localeDaysOfWeek = [...localeDaysOfWeek, ...daysToBeAddedAtEnd];
-        this.$weekHeader.html(localeDaysOfWeek.map((el) => `<span>${el}</span>`));
+        this.$weekHeader.html(localeDaysOfWeek.map((el) => `<span>${el}</span>`).join(''));
     }
 
     async dropdownShown() {
@@ -158,7 +184,7 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
         this.init(activeNote?.getOwnedLabelValue("dateNote"));
     }
 
-    init(activeDate) {
+    init(activeDate: string | null) {
         // attaching time fixes local timezone handling
         this.activeDate = activeDate ? new Date(`${activeDate}T12:00:00`) : null;
         this.todaysDate = new Date();
@@ -168,9 +194,9 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
         this.createMonth();
     }
 
-    createDay(dateNotesForMonth, num, day) {
+    createDay(dateNotesForMonth: DateNotesForMonth, num: number, day: number) {
         const $newDay = $("<a>").addClass("calendar-date").attr("data-calendar-date", utils.formatDateISO(this.date));
-        const $date = $("<span>").html(num);
+        const $date = $("<span>").html(String(num));
 
         // if it's the first day of the month
         if (num === 1) {
@@ -202,23 +228,25 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
         return $newDay;
     }
 
-    isEqual(a, b) {
+    isEqual(a: Date, b: Date | null) {
         if ((!a && b) || (a && !b)) {
             return false;
         }
 
+        if (!b) return false;
+
         return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
     }
 
     async createMonth() {
         const month = utils.formatDateISO(this.date).substr(0, 7);
-        const dateNotesForMonth = await server.get(`special-notes/notes-for-month/${month}`);
+        const dateNotesForMonth: DateNotesForMonth = await server.get(`special-notes/notes-for-month/${month}`);
 
         this.$month.empty();
 
         const currentMonth = this.date.getMonth();
         while (this.date.getMonth() === currentMonth) {
-            const $day = this.createDay(dateNotesForMonth, this.date.getDate(), this.date.getDay(), this.date.getFullYear());
+            const $day = this.createDay(dateNotesForMonth, this.date.getDate(), this.date.getDay());
 
             this.$month.append($day);
 
@@ -232,7 +260,7 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
         this.$yearSelect.val(this.date.getFullYear());
     }
 
-    async entitiesReloadedEvent({ loadResults }) {
+    async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
         if (!loadResults.getOptionNames().includes("firstDayOfWeek")) {
             return;
         }