add dag&drop for calendar

This commit is contained in:
marlon-erler
2024-07-19 15:53:24 +02:00
parent 4d50ee1b06
commit e48a2be044
3 changed files with 42 additions and 6 deletions
+19 -3
View File
@@ -1693,8 +1693,8 @@
); );
} }
// src/Views/Objects/miniatureDayView.tsx // src/Views/Objects/monthGridCell.tsx
function MiniatureDayView(chat, messageObjects, dateObject) { function MonthGridCell(chat, messageObjects, dateObject) {
const objectsForDayView = new ListState(); const objectsForDayView = new ListState();
const dateString = dateObject.toISOString().split("T")[0]; const dateString = dateObject.toISOString().split("T")[0];
function processObject(messageObject) { function processObject(messageObject) {
@@ -1722,10 +1722,26 @@
}); });
return view; return view;
}; };
function dragOver(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var id = event.dataTransfer?.getData("text");
if (!id) return;
const messageObject = chat.objects.value.get(id);
if (!messageObject) return;
const newContent = chat.createObjectContent();
newContent.date = dateString;
chat.updateObjectContent(messageObject, newContent);
chat.addObjectAndSend(messageObject);
}
return /* @__PURE__ */ createElement( return /* @__PURE__ */ createElement(
"button", "button",
{ {
"on:click": select, "on:click": select,
"on:dragover": dragOver,
"on:drop": drop,
"toggle:selected": isSelected, "toggle:selected": isSelected,
"toggle:today": isToday, "toggle:today": isToday,
class: "day-miniature tile flex-column align-start", class: "day-miniature tile flex-column align-start",
@@ -1794,7 +1810,7 @@
} }
while (currentDate.getUTCMonth() == newSelectedDate.getUTCMonth()) { while (currentDate.getUTCMonth() == newSelectedDate.getUTCMonth()) {
monthGridCells.value.push( monthGridCells.value.push(
MiniatureDayView(chat, messageObjects, currentDate) MonthGridCell(chat, messageObjects, currentDate)
); );
currentDate.setDate(currentDate.getDate() + 1); currentDate.setDate(currentDate.getDate() + 1);
} }
+2 -2
View File
@@ -3,7 +3,7 @@ import * as React from "bloatless-react";
import { Chat, MessageObject, MessageObjectWithIndex } from "../../Model/chatModel"; import { Chat, MessageObject, MessageObjectWithIndex } from "../../Model/chatModel";
import { DayView } from "./dayView"; import { DayView } from "./dayView";
import { MiniatureDayView } from "./miniatureDayView"; import { MonthGridCell } from "./monthGridCell";
import { dayInCalendar } from "../../Model/model"; import { dayInCalendar } from "../../Model/model";
import { translation } from "../../translations"; import { translation } from "../../translations";
@@ -76,7 +76,7 @@ export function CalendarView(
// add day views // add day views
while (currentDate.getUTCMonth() == newSelectedDate.getUTCMonth()) { while (currentDate.getUTCMonth() == newSelectedDate.getUTCMonth()) {
monthGridCells.value.push( monthGridCells.value.push(
MiniatureDayView(chat, messageObjects, currentDate) MonthGridCell(chat, messageObjects, currentDate)
); );
currentDate.setDate(currentDate.getDate() + 1); currentDate.setDate(currentDate.getDate() + 1);
} }
@@ -5,7 +5,7 @@ import { Chat, MessageObject, MessageObjectWithIndex } from "../../Model/chatMod
import { dayInCalendar } from "../../Model/model"; import { dayInCalendar } from "../../Model/model";
import { getRawObjectIndex } from "../../utility"; import { getRawObjectIndex } from "../../utility";
export function MiniatureDayView( export function MonthGridCell(
chat: Chat, chat: Chat,
messageObjects: messageObjects:
| React.ListState<MessageObjectWithIndex> | React.ListState<MessageObjectWithIndex>
@@ -56,9 +56,29 @@ export function MiniatureDayView(
return view; return view;
}; };
function dragOver(event: DragEvent) {
event.preventDefault();
}
function drop(event: DragEvent) {
event.preventDefault();
var id = event.dataTransfer?.getData("text");
if (!id) return;
const messageObject = chat.objects.value.get(id);
if (!messageObject) return;
const newContent = chat.createObjectContent();
newContent.date = dateString;
chat.updateObjectContent(messageObject, newContent);
chat.addObjectAndSend(messageObject);
}
return ( return (
<button <button
on:click={select} on:click={select}
on:dragover={dragOver}
on:drop={drop}
toggle:selected={isSelected} toggle:selected={isSelected}
toggle:today={isToday} toggle:today={isToday}
class="day-miniature tile flex-column align-start" class="day-miniature tile flex-column align-start"