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:
parent
b4af5a9211
commit
46b8bf9fb5
10 changed files with 684 additions and 61 deletions
|
|
@ -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()
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue