From efe4a87b63021980bc441dc38dfc9522089a48f5 Mon Sep 17 00:00:00 2001 From: marlon-erler Date: Fri, 26 Jul 2024 07:07:07 +0200 Subject: [PATCH] implement drag&drop in calendar --- dist/index.js | 36 ++++++++++++++++---- src/Model/Files/calendarModel.ts | 12 ++++++- src/View/ChatPages/calendarPage.tsx | 18 +++++++--- src/View/Components/monthGrid.tsx | 10 +++++- src/ViewModel/Pages/calendarPageViewModel.ts | 9 +++++ src/ViewModel/Pages/taskViewModel.ts | 5 +++ 6 files changed, 76 insertions(+), 14 deletions(-) diff --git a/dist/index.js b/dist/index.js index 95988e12..b4bda586 100644 --- a/dist/index.js +++ b/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( - calendarPageViewModel.monthGrid.value, - calendarPageViewModel.selectedDate - ); + let drop = function(date) { + calendarPageViewModel.handleDrop( + monthGrid.year.toString(), + monthGrid.month.toString(), + date + ); + }; + return MonthGrid2(monthGrid, calendarPageViewModel.selectedDate, drop); } } ); diff --git a/src/Model/Files/calendarModel.ts b/src/Model/Files/calendarModel.ts index 50126694..b0ed9401 100644 --- a/src/Model/Files/calendarModel.ts +++ b/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 { offset: number; firstDayOfWeek: number; isCurrentMonth: boolean; + + year: number; + month: number; + days: { [date: string]: T }; } diff --git a/src/View/ChatPages/calendarPage.tsx b/src/View/ChatPages/calendarPage.tsx index 11e23bea..5996a666 100644 --- a/src/View/ChatPages/calendarPage.tsx +++ b/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
; } 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); } } ); diff --git a/src/View/Components/monthGrid.tsx b/src/View/Components/monthGrid.tsx index cbf33862..925672a7 100644 --- a/src/View/Components/monthGrid.tsx +++ b/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( monthGrid: MonthGrid>, - selectedDate: React.State + selectedDate: React.State, + handleDrop: (date: string) => void ) { const dayLabels: HTMLElement[] = []; let currentWeekday = monthGrid.firstDayOfWeek; @@ -61,12 +63,18 @@ export function MonthGrid( selectedDate.value = parseInt(date); } + function drop() { + handleDrop(date); + } + return (