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:
parent
2656bae054
commit
818ed50176
2 changed files with 19 additions and 14 deletions
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue