Optimize all-day event management and removal

Improves event removal process with enhanced fade-out and logging
Adds data-removing attribute to exclude events during height calculations
Prevents unnecessary removal of all-day events during drag operations

Enhances event rendering and management for better performance and user experience
This commit is contained in:
Janus C. H. Knudsen 2025-11-11 20:03:42 +01:00
parent 2656bae054
commit 818ed50176
2 changed files with 19 additions and 14 deletions

View file

@ -128,10 +128,7 @@ export class AllDayManager {
console.log('🔄 AllDayManager: All-day → timed conversion', { eventId }); console.log('🔄 AllDayManager: All-day → timed conversion', { eventId });
// No need to filter currentLayouts - DOM is source of truth! this.fadeOutAndRemove(dragEndPayload.originalElement);
// The element is already removed from all-day container by DragDropManager
// Recalculate and animate header height based on remaining DOM elements
this.checkAndAnimateAllDayHeight(); this.checkAndAnimateAllDayHeight();
} }
}); });
@ -183,13 +180,14 @@ export class AllDayManager {
/** /**
* Read current max row from DOM elements * Read current max row from DOM elements
* Excludes events marked as removing (data-removing attribute)
*/ */
private getMaxRowFromDOM(): number { private getMaxRowFromDOM(): number {
const container = this.getAllDayContainer(); const container = this.getAllDayContainer();
if (!container) return 0; if (!container) return 0;
let maxRow = 0; let maxRow = 0;
const allDayEvents = container.querySelectorAll('swp-allday-event:not(.max-event-indicator)'); const allDayEvents = container.querySelectorAll('swp-allday-event:not(.max-event-indicator):not([data-removing])');
allDayEvents.forEach((element: Element) => { allDayEvents.forEach((element: Element) => {
const htmlElement = element as HTMLElement; const htmlElement = element as HTMLElement;
@ -258,13 +256,6 @@ export class AllDayManager {
return { targetHeight, currentHeight, heightDifference }; return { targetHeight, currentHeight, heightDifference };
} }
/**
* Collapse all-day row when no events
*/
public collapseAllDayRow(): void {
this.animateToRows(0);
}
/** /**
* Check current all-day events and animate to correct height * Check current all-day events and animate to correct height
* Reads max row directly from DOM elements * Reads max row directly from DOM elements
@ -312,6 +303,8 @@ export class AllDayManager {
willAnimate: displayRows !== this.actualRowCount willAnimate: displayRows !== this.actualRowCount
}); });
console.log(`🎯 AllDayManager: Animating to ${displayRows} rows`);
// Animate to required rows (0 = collapse, >0 = expand) // Animate to required rows (0 = collapse, >0 = expand)
this.animateToRows(displayRows); this.animateToRows(displayRows);
} }
@ -453,11 +446,20 @@ export class AllDayManager {
} }
private fadeOutAndRemove(element: HTMLElement): void { private fadeOutAndRemove(element: HTMLElement): void {
console.log('🗑️ AllDayManager: About to remove all-day event', {
eventId: element.dataset.eventId,
element: element.tagName
});
// Mark element as removing so it's excluded from height calculations
element.setAttribute('data-removing', 'true');
element.style.transition = 'opacity 0.3s ease-out'; element.style.transition = 'opacity 0.3s ease-out';
element.style.opacity = '0'; element.style.opacity = '0';
setTimeout(() => { setTimeout(() => {
element.remove(); element.remove();
console.log('✅ AllDayManager: All-day event removed from DOM');
}, 300); }, 300);
} }

View file

@ -172,8 +172,11 @@ export class DateEventRenderer implements IEventRenderer {
return; return;
} }
// Fade out original // Only fade out and remove if it's a swp-event (not swp-allday-event)
// AllDayManager handles removal of swp-allday-event elements
if (originalElement.tagName === 'SWP-EVENT') {
this.fadeOutAndRemove(originalElement); this.fadeOutAndRemove(originalElement);
}
// Remove clone prefix and normalize clone to be a regular event // Remove clone prefix and normalize clone to be a regular event
const cloneId = draggedClone.dataset.eventId; const cloneId = draggedClone.dataset.eventId;