Implements strategy pattern for calendar views

Refactors the grid management to use a strategy pattern, allowing for different calendar views (week, month, day) to be rendered using separate strategy implementations.

This approach improves code organization, reduces complexity within the main grid manager, and makes it easier to add new view types in the future.

The strategy pattern centralizes view-specific logic, improves testability, and reduces code duplication.

A month view strategy has been added and is now selectable via UI.
This commit is contained in:
Janus Knudsen 2025-08-20 19:52:18 +02:00
parent 3ddc6352f2
commit 414ef1caaf
6 changed files with 527 additions and 252 deletions

View file

@ -1,6 +1,7 @@
import { EventBus } from '../core/EventBus';
import { IEventBus, CalendarEvent, RenderContext } from '../types/CalendarTypes';
import { EventTypes } from '../constants/EventTypes';
import { CoreEvents } from '../constants/CoreEvents';
import { calendarConfig } from '../core/CalendarConfig';
import { CalendarTypeFactory } from '../factories/CalendarTypeFactory';
import { EventManager } from '../managers/EventManager';
@ -54,7 +55,13 @@ export class EventRenderingService {
private setupEventListeners(): void {
// Event-driven rendering: React to grid and container events
this.eventBus.on(EventTypes.GRID_RENDERED, (event: Event) => {
console.log('EventRenderer: Received GRID_RENDERED event');
console.log('EventRenderer: Received GRID_RENDERED event (legacy)');
this.handleGridRendered(event as CustomEvent);
});
// Listen to new CoreEvents system as well
this.eventBus.on(CoreEvents.GRID_RENDERED, (event: Event) => {
console.log('EventRenderer: Received GRID_RENDERED event (core)');
this.handleGridRendered(event as CustomEvent);
});
@ -82,16 +89,32 @@ export class EventRenderingService {
* Handle GRID_RENDERED event - render events in the current grid
*/
private handleGridRendered(event: CustomEvent): void {
const { container, startDate, endDate } = event.detail;
const { container, startDate, endDate, currentDate } = event.detail;
if (!container) {
console.error('EventRenderer: No container in GRID_RENDERED event', event.detail);
return;
}
// Use period from event or fallback to calculated period
const periodStart = startDate;
const periodEnd = endDate;
let periodStart: Date;
let periodEnd: Date;
if (startDate && endDate) {
// Legacy format with explicit dates
periodStart = startDate;
periodEnd = endDate;
} else if (currentDate) {
// New format - calculate period from current date
// For now, use a week period. This could be improved by getting the actual period from the strategy
const baseDate = new Date(currentDate);
periodStart = new Date(baseDate);
periodStart.setDate(baseDate.getDate() - baseDate.getDay() + 1); // Monday
periodEnd = new Date(periodStart);
periodEnd.setDate(periodStart.getDate() + 6); // Sunday
} else {
console.error('EventRenderer: No date information in GRID_RENDERED event', event.detail);
return;
}
this.renderEvents({
container: container,