Preserves event duration during drag and drop

Ensures all-day events maintain their original duration
when dragged and dropped to a new date.

Calculates and applies the correct end date based on the
original event's span.
This commit is contained in:
Janus C. H. Knudsen 2025-10-03 00:37:37 +02:00
parent 576367974b
commit 98ad46efab

View file

@ -343,10 +343,16 @@ export class AllDayManager {
if (!dragColumnChangeEventPayload.draggedClone)
return;
// Update clone position - ALWAYS keep in row 1 during drag
// Use simple grid positioning that matches all-day container structure
dragColumnChangeEventPayload.draggedClone.style.gridColumn = targetColumn.index.toString();
//dragColumnChangeEventPayload.draggedClone.style.gridRow = dragColumnChangeEventPayload.draggedClone.style.gridRow; // Bevar nuværende row
// Calculate event span from original grid positioning
const computedStyle = window.getComputedStyle(dragColumnChangeEventPayload.draggedClone);
const gridColumnStart = parseInt(computedStyle.gridColumnStart) || targetColumn.index;
const gridColumnEnd = parseInt(computedStyle.gridColumnEnd) || targetColumn.index + 1;
const span = gridColumnEnd - gridColumnStart;
// Update clone position maintaining the span
const newStartColumn = targetColumn.index;
const newEndColumn = newStartColumn + span;
dragColumnChangeEventPayload.draggedClone.style.gridColumn = `${newStartColumn} / ${newEndColumn}`;
}
private fadeOutAndRemove(element: HTMLElement): void {
@ -357,11 +363,25 @@ export class AllDayManager {
element.remove();
}, 300);
}
/**
* Handle drag end for all-day events - WITH DIFFERENTIAL UPDATES
*/
private handleDragEnd(dragEndEvent: DragEndEventPayload): void {
const getEventDurationDays = (start: string|undefined, end: string|undefined): number => {
if(!start || !end)
throw new Error('Undefined start or end - date');
const startDate = new Date(start);
const endDate = new Date(end);
if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
throw new Error('Ugyldig start eller slut-dato i dataset');
}
return Math.round((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24));
};
if (dragEndEvent.draggedClone == null)
return;
@ -378,12 +398,21 @@ export class AllDayManager {
return;
// Calculate original event duration
const durationDays = getEventDurationDays(dragEndEvent.draggedClone.dataset.start, dragEndEvent.draggedClone.dataset.end);
const newStartDate = new Date(eventDate);
const newEndDate = new Date(newStartDate);
newEndDate.setDate(newEndDate.getDate() + durationDays);
const droppedEvent: CalendarEvent = {
id: eventId,
title: dragEndEvent.draggedClone.dataset.title || '',
start: new Date(eventDate),
end: new Date(eventDate),
start: newStartDate,
end: newEndDate,
type: eventType,
allDay: true,
syncStatus: 'synced'