implement drag&drop in calendar

dist/index.js

@@ -662,6 +662,8 @@
         offset,
         firstDayOfWeek: parseInt(this.settingsModel.firstDayOfWeek),
         isCurrentMonth,
+        year,
+        month,
         days: {}
       };
       for (let i = 0; i < daysInMonth; i++) {
@@ -1491,6 +1493,10 @@
       this.boardId.value = boardId;
       this.save();
     };
+    setDate = (dateISOString) => {
+      this.date.value = dateISOString;
+      this.save();
+    };
     // view
     open = () => {
       this.containingModel.selectTask(this);
@@ -1729,6 +1735,12 @@
         this.selectedMonth.value = 1;
       }
     };
+    handleDrop = (year, month, date) => {
+      const ISOString = CalendarModel.getISODateString(year, month, date);
+      const draggedObject = this.coreViewModel.draggedObject.value;
+      if (draggedObject instanceof TaskViewModel == false) return;
+      draggedObject.setDate(ISOString);
+    };
     // load
     loadMonthTasks = () => {
       this.monthGrid.value = this.calendarModel.generateMonthGrid(
@@ -2560,7 +2572,7 @@
   var translations = allTranslations[language] || allTranslations.en;
 
   // src/View/Components/monthGrid.tsx
-  function MonthGrid2(monthGrid, selectedDate) {
+  function MonthGrid2(monthGrid, selectedDate, handleDrop) {
     const dayLabels = [];
     let currentWeekday = monthGrid.firstDayOfWeek;
     while (dayLabels.length < 7) {
@@ -2591,13 +2603,18 @@
       function select() {
         selectedDate.value = parseInt(date);
       }
+      function drop() {
+        handleDrop(date);
+      }
       return /* @__PURE__ */ createElement(
         "button",
         {
           class: "tile",
           "on:click": select,
           "toggle:selected": isSelected,
-          "toggle:today": isToday
+          "toggle:today": isToday,
+          "on:dragover": allowDrop,
+          "on:drop": drop
         },
         /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, date), /* @__PURE__ */ createElement(
           "div",
@@ -2730,13 +2747,18 @@
     const mainContent = createProxyState(
       [calendarPageViewModel.monthGrid],
       () => {
-        if (calendarPageViewModel.monthGrid.value == void 0) {
+        const monthGrid = calendarPageViewModel.monthGrid.value;
+        if (monthGrid == void 0) {
           return /* @__PURE__ */ createElement("div", null);
         } else {
-          return MonthGrid2(
+          let drop = function(date) {
-            calendarPageViewModel.monthGrid.value,
+            calendarPageViewModel.handleDrop(
-            calendarPageViewModel.selectedDate
+              monthGrid.year.toString(),
+              monthGrid.month.toString(),
+              date
             );
+          };
+          return MonthGrid2(monthGrid, calendarPageViewModel.selectedDate, drop);
         }
       }
     );

src/Model/Files/calendarModel.ts

@@ -75,6 +75,8 @@ export default class CalendarModel {
       offset,
       firstDayOfWeek: parseInt(this.settingsModel.firstDayOfWeek),
       isCurrentMonth,
+      year,
+      month,
       days: {},
     };
 
@@ -113,7 +115,11 @@ export default class CalendarModel {
     return `${paddedYear}-${paddedMonth}`;
   };
 
-  static getISODateString = (year: string, month: string, date: string): string => {
+  static getISODateString = (
+    year: string,
+    month: string,
+    date: string
+  ): string => {
     const monthString: string = CalendarModel.getMonthString(year, month);
     const paddedDate: string = date.padStart(2, "0");
     return `${monthString}-${paddedDate}`;
@@ -129,5 +135,9 @@ export interface MonthGrid<T> {
   offset: number;
   firstDayOfWeek: number;
   isCurrentMonth: boolean;
+
+  year: number;
+  month: number;
+
   days: { [date: string]: T };
 }

src/View/ChatPages/calendarPage.tsx

@@ -2,6 +2,7 @@ import "./calendarPage.css";
 
 import * as React from "bloatless-react";
 
+import CalendarModel from "../../Model/Files/calendarModel";
 import CalendarPageViewModel from "../../ViewModel/Pages/calendarPageViewModel";
 import { MonthGrid } from "../Components/monthGrid";
 import { TaskSettingsModal } from "../Modals/taskSettingsModal";
@@ -14,14 +15,21 @@ export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) {
   const mainContent = React.createProxyState(
     [calendarPageViewModel.monthGrid],
     () => {
-      if (calendarPageViewModel.monthGrid.value == undefined) {
+      const monthGrid = calendarPageViewModel.monthGrid.value;
+
+      if (monthGrid == undefined) {
         return <div></div>;
       } else {
-        return MonthGrid(
+        function drop(date: string) {
-          calendarPageViewModel.monthGrid.value,
+          calendarPageViewModel.handleDrop(
-          calendarPageViewModel.selectedDate
+            monthGrid!.year.toString(),
+            monthGrid!.month.toString(),
+            date
           );
         }
+
+        return MonthGrid(monthGrid, calendarPageViewModel.selectedDate, drop);
+      }
     }
   );
 

src/View/Components/monthGrid.tsx

@@ -4,10 +4,12 @@ import * as React from "bloatless-react";
 import { MonthGrid } from "../../Model/Files/calendarModel";
 import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
 import { translations } from "../translations";
+import { allowDrop } from "../utility";
 
 export function MonthGrid<T>(
   monthGrid: MonthGrid<React.MapState<T>>,
-  selectedDate: React.State<number>
+  selectedDate: React.State<number>,
+  handleDrop: (date: string) => void
 ) {
   const dayLabels: HTMLElement[] = [];
   let currentWeekday = monthGrid.firstDayOfWeek;
@@ -61,12 +63,18 @@ export function MonthGrid<T>(
             selectedDate.value = parseInt(date);
           }
 
+          function drop() {
+            handleDrop(date);
+          }
+
           return (
             <button
               class="tile"
               on:click={select}
               toggle:selected={isSelected}
               toggle:today={isToday}
+              on:dragover={allowDrop}
+              on:drop={drop}
             >
               <div>
                 <b>{date}</b>

src/ViewModel/Pages/calendarPageViewModel.ts

@@ -128,6 +128,15 @@ export default class CalendarPageViewModel extends TaskContainingPageViewModel {
     }
   };
 
+  handleDrop = (year: string, month: string, date: string): void => {
+    const ISOString: string = CalendarModel.getISODateString(year, month, date);
+
+    const draggedObject: any = this.coreViewModel.draggedObject.value;
+    if (draggedObject instanceof TaskViewModel == false) return;
+
+    draggedObject.setDate(ISOString);
+  };
+
   // load
   loadMonthTasks = (): void => {
     this.monthGrid.value = this.calendarModel.generateMonthGrid(

src/ViewModel/Pages/taskViewModel.ts

@@ -75,6 +75,11 @@ export default class TaskViewModel {
     this.save();
   };
 
+  setDate = (dateISOString: string): void => {
+    this.date.value = dateISOString;
+    this.save();
+  }
+
   // view
   open = (): void => {
     this.containingModel.selectTask(this);