implement drag&drop in calendar

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,13 +15,20 @@ 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(
-          calendarPageViewModel.monthGrid.value,
-          calendarPageViewModel.selectedDate
-        );
+        function drop(date: string) {
+          calendarPageViewModel.handleDrop(
+            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);