Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixes drag and drop to header issues

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

109
src/elements/SwpEventElement.ts
View file

@ -170,10 +170,11 @@ export class SwpAllDayEventElement extends BaseEventElement {
*/
private setAllDayAttributes(): void {
this.element.dataset.allDay = "true";
// Override start/end times to be full day
const dateStr = this.event.start.toISOString().split('T')[0];
this.element.dataset.start = `${dateStr}T00:00:00`;
this.element.dataset.end = `${dateStr}T23:59:59`;
// For all-day events, preserve original start/end dates but set to full day times
const startDateStr = this.event.start.toISOString().split('T')[0];
const endDateStr = this.event.end.toISOString().split('T')[0];
this.element.dataset.start = `${startDateStr}T00:00:00`;
this.element.dataset.end = `${endDateStr}T23:59:59`;
}
/**
@ -197,28 +198,36 @@ export class SwpAllDayEventElement extends BaseEventElement {
this.element.style.gridRow = row.toString();
}
/**
* Set grid column span for this all-day event
*/
public setColumnSpan(startColumn: number, endColumn: number): void {
this.element.style.gridColumn = `${startColumn} / ${endColumn + 1}`;
}
/**
* Factory method to create from CalendarEvent and target date
*/
public static fromCalendarEvent(event: CalendarEvent, targetDate: string): SwpAllDayEventElement {
// Calculate column index
const dayHeaders = document.querySelectorAll('swp-day-header');
let columnIndex = 1;
dayHeaders.forEach((header, index) => {
if ((header as HTMLElement).dataset.date === targetDate) {
columnIndex = index + 1;
}
});
public static fromCalendarEvent(event: CalendarEvent, targetDate?: string): SwpAllDayEventElement {
// Calculate column span based on event start and end dates
const { startColumn, endColumn, columnSpan } = this.calculateColumnSpan(event);
// For backwards compatibility, use targetDate if provided, otherwise use calculated start column
const finalStartColumn = targetDate ? this.getColumnIndexForDate(targetDate) : startColumn;
const finalEndColumn = targetDate ? finalStartColumn : endColumn;
const finalColumnSpan = targetDate ? 1 : columnSpan;
// Find occupied rows in this column using computedStyle
// Find occupied rows in the spanned columns using computedStyle
const existingEvents = document.querySelectorAll('swp-allday-event');
const occupiedRows = new Set<number>();
existingEvents.forEach(existingEvent => {
const style = getComputedStyle(existingEvent);
const eventCol = parseInt(style.gridColumnStart);
const eventStartCol = parseInt(style.gridColumnStart);
const eventEndCol = parseInt(style.gridColumnEnd);
if (eventCol === columnIndex) {
// Check if this existing event overlaps with our column span
if (this.columnsOverlap(eventStartCol, eventEndCol, finalStartColumn, finalEndColumn)) {
const eventRow = parseInt(style.gridRowStart) || 1;
occupiedRows.add(eventRow);
}
@ -230,9 +239,73 @@ export class SwpAllDayEventElement extends BaseEventElement {
targetRow++;
}
// Create element with both column and row
const element = new SwpAllDayEventElement(event, columnIndex);
// Create element with calculated column span
const element = new SwpAllDayEventElement(event, finalStartColumn);
element.setGridRow(targetRow);
element.setColumnSpan(finalStartColumn, finalEndColumn);
return element;
}
/**
* Calculate column span based on event start and end dates
*/
private static calculateColumnSpan(event: CalendarEvent): { startColumn: number; endColumn: number; columnSpan: number } {
const dayHeaders = document.querySelectorAll('swp-day-header');
// Extract dates from headers
const headerDates: string[] = [];
dayHeaders.forEach(header => {
const date = (header as HTMLElement).dataset.date;
if (date) {
headerDates.push(date);
}
});
// Format event dates for comparison (YYYY-MM-DD format)
const eventStartDate = event.start.toISOString().split('T')[0];
const eventEndDate = event.end.toISOString().split('T')[0];
// Find start and end column indices
let startColumn = 1;
let endColumn = headerDates.length;
headerDates.forEach((dateStr, index) => {
if (dateStr === eventStartDate) {
startColumn = index + 1;
}
if (dateStr === eventEndDate) {
endColumn = index + 1;
}
});
// Ensure end column is at least start column
if (endColumn < startColumn) {
endColumn = startColumn;
}
const columnSpan = endColumn - startColumn + 1;
return { startColumn, endColumn, columnSpan };
}
/**
* Get column index for a specific date
*/
private static getColumnIndexForDate(targetDate: string): number {
const dayHeaders = document.querySelectorAll('swp-day-header');
let columnIndex = 1;
dayHeaders.forEach((header, index) => {
if ((header as HTMLElement).dataset.date === targetDate) {
columnIndex = index + 1;
}
});
return columnIndex;
}
/**
* Check if two column ranges overlap
*/
private static columnsOverlap(startA: number, endA: number, startB: number, endB: number): boolean {
return !(endA < startB || endB < startA);
}
}

7
src/managers/CalendarManager.ts
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()
});
}
/**

88
src/managers/HeaderManager.ts
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
*/

10
src/managers/ScrollManager.ts
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();

4
src/managers/ViewManager.ts
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);
}
/**

43
src/renderers/GridRenderer.ts
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;