Fixes drag and drop to header issues

Addresses two key issues related to dragging events to the header: the premature removal of the original event element and the creation of duplicate all-day events.

The original event is no longer removed when dragging to the header; it is now only removed upon a successful drop.

Also, it prevents the creation of duplicate all-day events by checking for existing all-day events before creating new ones, using DOM queries to ensure accurate state.
This commit is contained in:
Janus Knudsen 2025-09-17 23:39:29 +02:00
parent b4af5a9211
commit 46b8bf9fb5
10 changed files with 684 additions and 61 deletions

View file

@ -380,6 +380,13 @@ export class CalendarManager {
// Re-render events in the new grid structure
this.rerenderEvents();
// Notify HeaderManager with correct current date after grid rebuild
this.eventBus.emit('workweek:header-update', {
currentDate: this.currentDate,
currentView: this.currentView,
workweek: calendarConfig.getCurrentWorkWeek()
});
}
/**

View file

@ -1,6 +1,9 @@
import { eventBus } from '../core/EventBus';
import { calendarConfig } from '../core/CalendarConfig';
import { CalendarTypeFactory } from '../factories/CalendarTypeFactory';
import { CoreEvents } from '../constants/CoreEvents';
import { HeaderRenderContext } from '../renderers/HeaderRenderer';
import { ResourceCalendarData } from '../types/CalendarTypes';
/**
* HeaderManager - Handles all header-related event logic
@ -15,6 +18,16 @@ export class HeaderManager {
// Bind methods for event listeners
this.setupHeaderDragListeners = this.setupHeaderDragListeners.bind(this);
this.destroy = this.destroy.bind(this);
// Listen for navigation events to update header
this.setupNavigationListener();
}
/**
* Initialize header with initial date
*/
public initializeHeader(currentDate: Date, resourceData: ResourceCalendarData | null = null): void {
this.updateHeader(currentDate, resourceData);
}
/**
@ -98,6 +111,81 @@ export class HeaderManager {
}
}
/**
* Setup navigation event listener
*/
private setupNavigationListener(): void {
eventBus.on(CoreEvents.NAVIGATION_COMPLETED, (event) => {
const { currentDate, resourceData } = (event as CustomEvent).detail;
this.updateHeader(currentDate, resourceData);
});
// Also listen for date changes (including initial setup)
eventBus.on(CoreEvents.DATE_CHANGED, (event) => {
const { currentDate } = (event as CustomEvent).detail;
this.updateHeader(currentDate, null);
});
// Listen for workweek header updates after grid rebuild
eventBus.on('workweek:header-update', (event) => {
const { currentDate } = (event as CustomEvent).detail;
this.clearCache(); // Clear cache since DOM was cleared
this.updateHeader(currentDate, null);
});
}
/**
* Update header content for navigation
*/
private updateHeader(currentDate: Date, resourceData: ResourceCalendarData | null = null): void {
const calendarHeader = this.getOrCreateCalendarHeader();
if (!calendarHeader) return;
// Clear existing content
calendarHeader.innerHTML = '';
// Render new header content
const calendarType = calendarConfig.getCalendarMode();
const headerRenderer = CalendarTypeFactory.getHeaderRenderer(calendarType);
const context: HeaderRenderContext = {
currentWeek: currentDate,
config: calendarConfig,
resourceData: resourceData
};
headerRenderer.render(calendarHeader, context);
// Re-setup event listeners
this.setupHeaderDragListeners();
// Notify other managers that header was rebuilt
eventBus.emit('header:rebuilt', {
headerElement: calendarHeader
});
}
/**
* Get or create calendar header element
*/
private getOrCreateCalendarHeader(): HTMLElement | null {
let calendarHeader = this.getCalendarHeader();
if (!calendarHeader) {
// Find grid container and create header
const gridContainer = document.querySelector('swp-grid-container');
if (gridContainer) {
calendarHeader = document.createElement('swp-calendar-header');
// Insert header as first child
gridContainer.insertBefore(calendarHeader, gridContainer.firstChild);
this.cachedCalendarHeader = calendarHeader;
}
}
return calendarHeader;
}
/**
* Clear cached header reference
*/

View file

@ -42,6 +42,16 @@ export class ScrollManager {
this.updateScrollableHeight();
});
// Handle header rebuild - refresh header reference and re-sync
eventBus.on('header:rebuilt', () => {
this.calendarHeader = document.querySelector('swp-calendar-header');
if (this.scrollableContent && this.calendarHeader) {
this.setupHorizontalScrollSynchronization();
this.syncCalendarHeaderPosition(); // Immediately sync position
}
this.updateScrollableHeight(); // Update height calculations
});
// Handle window resize
window.addEventListener('resize', () => {
this.updateScrollableHeight();

View file

@ -150,8 +150,8 @@ export class ViewManager {
// Update button states using cached elements
this.updateAllButtons();
// Trigger a calendar refresh to apply the new workweek
this.eventBus.emit(CoreEvents.REFRESH_REQUESTED);
// Trigger a workweek change to apply the new workweek
this.eventBus.emit(CoreEvents.WORKWEEK_CHANGED);
}
/**