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

@ -1,7 +1,6 @@
import { calendarConfig } from '../core/CalendarConfig';
import { ResourceCalendarData, CalendarView } from '../types/CalendarTypes';
import { CalendarTypeFactory } from '../factories/CalendarTypeFactory';
import { HeaderRenderContext } from './HeaderRenderer';
import { ColumnRenderContext } from './ColumnRenderer';
import { eventBus } from '../core/EventBus';
import { DateCalculator } from '../utils/DateCalculator';
@ -12,7 +11,6 @@ import { DateCalculator } from '../utils/DateCalculator';
*/
export class GridRenderer {
private cachedGridContainer: HTMLElement | null = null;
private cachedCalendarHeader: HTMLElement | null = null;
private cachedTimeAxis: HTMLElement | null = null;
constructor() {
@ -38,6 +36,8 @@ export class GridRenderer {
// Only clear and rebuild if grid is empty (first render)
if (grid.children.length === 0) {
this.createCompleteGridStructure(grid, currentDate, resourceData, view);
// Setup grid-related event listeners on first render
this.setupGridEventListeners();
} else {
// Optimized update - only refresh dynamic content
this.updateGridContent(grid, currentDate, resourceData, view);
@ -109,12 +109,6 @@ export class GridRenderer {
): HTMLElement {
const gridContainer = document.createElement('swp-grid-container');
// Create calendar header with caching
const calendarHeader = document.createElement('swp-calendar-header');
this.renderCalendarHeader(calendarHeader, currentDate, resourceData, view);
this.cachedCalendarHeader = calendarHeader;
gridContainer.appendChild(calendarHeader);
// Create scrollable content structure
const scrollableContent = document.createElement('swp-scrollable-content');
const timeGrid = document.createElement('swp-time-grid');
@ -134,30 +128,6 @@ export class GridRenderer {
return gridContainer;
}
/**
* Render calendar header with view awareness
*/
private renderCalendarHeader(
calendarHeader: HTMLElement,
currentDate: Date,
resourceData: ResourceCalendarData | null,
view: CalendarView
): void {
const calendarType = calendarConfig.getCalendarMode();
const headerRenderer = CalendarTypeFactory.getHeaderRenderer(calendarType);
const context: HeaderRenderContext = {
currentWeek: currentDate, // HeaderRenderer expects currentWeek property
config: calendarConfig,
resourceData: resourceData
};
headerRenderer.render(calendarHeader, context);
// Setup only grid-related event listeners
this.setupGridEventListeners();
}
/**
* Render column container with view awareness
@ -189,14 +159,6 @@ export class GridRenderer {
resourceData: ResourceCalendarData | null,
view: CalendarView
): void {
// Use cached elements if available
const calendarHeader = this.cachedCalendarHeader || grid.querySelector('swp-calendar-header');
if (calendarHeader) {
// Clear and re-render header content
calendarHeader.innerHTML = '';
this.renderCalendarHeader(calendarHeader as HTMLElement, currentDate, resourceData, view);
}
// Update column container if needed
const columnContainer = grid.querySelector('swp-day-columns');
if (columnContainer) {
@ -271,7 +233,6 @@ export class GridRenderer {
// Clear cached references
this.cachedGridContainer = null;
this.cachedCalendarHeader = null;
this.cachedTimeAxis = null;
(this as any).gridBodyEventListener = null;
(this as any).cachedColumnContainer = null;