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

Refactors event system to use CoreEvents

Browse source 
Migrates the application to use a new CoreEvents system.

This change removes the legacy EventTypes constant file and updates all managers, renderers, and core components to use the CoreEvents constant file for event emission and subscription.

This improves code maintainability and promotes a consistent eventing strategy across the application. Adds validation to EventBus emit and extractCategory functions.
This commit is contained in:
Janus Knudsen 2025-08-20 20:22:51 +02:00
parent 414ef1caaf
commit 4b4dbdc0d6
11 changed files with 76 additions and 228 deletions
Download patch file Download diff file Expand all files Collapse all files

119
src/constants/EventTypes.ts
View file

@ -1,119 +0,0 @@
// Legacy Calendar event type constants
/**
* Legacy event type constants for DOM CustomEvents
*
* IMPORTANT: This file contains events for specific UI interactions and config updates.
* For initialization and coordination events, use StateEvents from ../types/CalendarState.ts
*
* This file has been cleaned up to remove redundant/unused events.
*/
export const EventTypes = {
// Configuration events
CONFIG_UPDATE: 'calendar:configupdate',
CALENDAR_TYPE_CHANGED: 'calendar:calendartypechanged',
SELECTED_DATE_CHANGED: 'calendar:selecteddatechanged',
WORKWEEK_CHANGED: 'calendar:workweekchanged',
// View change events
VIEW_CHANGE: 'calendar:viewchange',
VIEW_CHANGED: 'calendar:viewchanged',
VIEW_CHANGE_REQUESTED: 'calendar:viewchangerequested',
VIEW_RENDERED: 'calendar:viewrendered',
PERIOD_CHANGE: 'calendar:periodchange',
// Navigation events
WEEK_CHANGED: 'calendar:weekchanged',
WEEK_INFO_UPDATED: 'calendar:weekinfoupdated',
WEEK_CONTENT_RENDERED: 'calendar:weekcontentrendered',
NAVIGATION_ANIMATION_COMPLETE: 'calendar:navigationanimationcomplete',
NAV_PREV: 'calendar:navprev',
NAV_NEXT: 'calendar:navnext',
NAV_TODAY: 'calendar:navtoday',
NAVIGATE_TO_DATE: 'calendar:navigatetodate',
NAVIGATE_TO_TODAY: 'calendar:navigatetotoday',
NAVIGATE_NEXT: 'calendar:navigatenext',
NAVIGATE_PREVIOUS: 'calendar:navigateprevious',
// Event CRUD (still used for UI layer)
EVENT_CREATE: 'calendar:eventcreate',
EVENT_CREATED: 'calendar:eventcreated',
EVENT_UPDATE: 'calendar:eventupdate',
EVENT_UPDATED: 'calendar:eventupdated',
EVENT_DELETE: 'calendar:eventdelete',
EVENT_DELETED: 'calendar:eventdeleted',
EVENT_RENDERED: 'calendar:eventrendered',
EVENT_SELECTED: 'calendar:eventselected',
EVENTS_LOADED: 'calendar:eventsloaded',
// User interaction events
GRID_CLICK: 'calendar:gridclick',
GRID_DBLCLICK: 'calendar:griddblclick',
// Drag and drop events
DRAG_START: 'calendar:dragstart',
DRAG_MOVE: 'calendar:dragmove',
DRAG_END: 'calendar:dragend',
DRAG_CANCEL: 'calendar:dragcancel',
RESIZE_START: 'calendar:resizestart',
RESIZE_MOVE: 'calendar:resizemove',
RESIZE_END: 'calendar:resizeend',
RESIZE_CANCEL: 'calendar:resizecancel',
// UI events
POPUP_SHOW: 'calendar:popupshow',
POPUP_HIDE: 'calendar:popuphide',
SEARCH_START: 'calendar:searchstart',
SEARCH_UPDATE: 'calendar:searchupdate',
SEARCH_CLEAR: 'calendar:searchclear',
// Data events (legacy - prefer StateEvents)
DATE_CHANGED: 'calendar:datechanged',
DATA_FETCH_START: 'calendar:datafetchstart',
DATA_FETCH_SUCCESS: 'calendar:datafetchsuccess',
DATA_FETCH_ERROR: 'calendar:datafetcherror',
DATA_SYNC_START: 'calendar:datasyncstart',
DATA_SYNC_SUCCESS: 'calendar:datasyncsuccess',
DATA_SYNC_ERROR: 'calendar:datasyncerror',
// Initialization events (legacy - prefer StateEvents)
CALENDAR_INITIALIZED: 'calendar:initialized',
CALENDAR_DATA_LOADED: 'calendar:calendardataloaded',
GRID_RENDERED: 'calendar:gridrendered',
CONTAINER_READY_FOR_EVENTS: 'calendar:containerreadyforevents',
// Management events (legacy - prefer StateEvents)
REFRESH_REQUESTED: 'calendar:refreshrequested',
RESET_REQUESTED: 'calendar:resetrequested',
CALENDAR_REFRESH_REQUESTED: 'calendar:calendarrefreshrequested',
CALENDAR_RESET: 'calendar:reset',
// System events
ERROR: 'calendar:error',
// Time events
TIME_UPDATE: 'calendar:timeupdate',
// Loading events
LOADING_START: 'calendar:loadingstart',
LOADING_END: 'calendar:loadingend'
} as const;
// Type for event bus event type values
export type EventBusType = typeof EventTypes[keyof typeof EventTypes];
/**
* REMOVED EVENTS (now handled by StateEvents):
* - CALENDAR_INITIALIZING: Use StateEvents.CALENDAR_STATE_CHANGED
* - CALENDAR_INITIALIZED: Use StateEvents.CALENDAR_STATE_CHANGED
* - CALENDAR_DATA_LOADED: Use StateEvents.DATA_LOADED
* - GRID_RENDERED: Use StateEvents.GRID_RENDERED
* - VIEW_CHANGE_REQUESTED: Use StateEvents.VIEW_CHANGE_REQUESTED
* - VIEW_CHANGED: Use StateEvents.VIEW_CHANGED
* - DATA_FETCH_*: Use StateEvents.DATA_LOADING_STARTED/DATA_LOADED/DATA_FAILED
* - DATA_SYNC_*: Use StateEvents for better coordination
* - CALENDAR_READY: Use StateEvents.CALENDAR_READY
* - RENDERING_*: Use StateEvents.RENDERING_STARTED/RENDERING_COMPLETE
*/

16
src/core/CalendarConfig.ts
View file

@ -1,7 +1,7 @@
// Calendar configuration management // Calendar configuration management
import { eventBus } from './EventBus'; import { eventBus } from './EventBus';
import { EventTypes } from '../constants/EventTypes'; import { CoreEvents } from '../constants/CoreEvents';
import { CalendarConfig as ICalendarConfig, ViewPeriod, CalendarMode, DateViewType, CalendarType } from '../types/CalendarTypes'; import { CalendarConfig as ICalendarConfig, ViewPeriod, CalendarMode, DateViewType, CalendarType } from '../types/CalendarTypes';
/** /**
@ -215,7 +215,7 @@ export class CalendarConfig {
// Update computed values handled in specific update methods // Update computed values handled in specific update methods
// Emit config update event // Emit config update event
eventBus.emit(EventTypes.CONFIG_UPDATE, { eventBus.emit(CoreEvents.CONFIG_UPDATE, {
key, key,
value, value,
oldValue oldValue
@ -292,7 +292,7 @@ export class CalendarConfig {
} }
// Emit grid settings update event // Emit grid settings update event
eventBus.emit(EventTypes.CONFIG_UPDATE, { eventBus.emit(CoreEvents.CONFIG_UPDATE, {
key: 'gridSettings', key: 'gridSettings',
value: this.gridSettings, value: this.gridSettings,
oldValue: this.gridSettings oldValue: this.gridSettings
@ -320,7 +320,7 @@ export class CalendarConfig {
this.dateViewSettings = { ...this.dateViewSettings, ...updates }; this.dateViewSettings = { ...this.dateViewSettings, ...updates };
// Emit date view settings update event // Emit date view settings update event
eventBus.emit(EventTypes.CONFIG_UPDATE, { eventBus.emit(CoreEvents.CONFIG_UPDATE, {
key: 'dateViewSettings', key: 'dateViewSettings',
value: this.dateViewSettings, value: this.dateViewSettings,
oldValue: this.dateViewSettings oldValue: this.dateViewSettings
@ -355,7 +355,7 @@ export class CalendarConfig {
this.resourceViewSettings = { ...this.resourceViewSettings, ...updates }; this.resourceViewSettings = { ...this.resourceViewSettings, ...updates };
// Emit resource view settings update event // Emit resource view settings update event
eventBus.emit(EventTypes.CONFIG_UPDATE, { eventBus.emit(CoreEvents.CONFIG_UPDATE, {
key: 'resourceViewSettings', key: 'resourceViewSettings',
value: this.resourceViewSettings, value: this.resourceViewSettings,
oldValue: this.resourceViewSettings oldValue: this.resourceViewSettings
@ -409,7 +409,7 @@ export class CalendarConfig {
this.calendarMode = mode; this.calendarMode = mode;
// Emit calendar mode change event // Emit calendar mode change event
eventBus.emit(EventTypes.CALENDAR_TYPE_CHANGED, { eventBus.emit(CoreEvents.CALENDAR_TYPE_CHANGED, {
oldType: oldMode, oldType: oldMode,
newType: mode newType: mode
}); });
@ -429,7 +429,7 @@ export class CalendarConfig {
this.selectedDate = date; this.selectedDate = date;
// Emit date change event // Emit date change event
eventBus.emit(EventTypes.SELECTED_DATE_CHANGED, { eventBus.emit(CoreEvents.SELECTED_DATE_CHANGED, {
date: date date: date
}); });
} }
@ -492,7 +492,7 @@ export class CalendarConfig {
this.dateViewSettings.weekDays = presets[workWeekId].totalDays; this.dateViewSettings.weekDays = presets[workWeekId].totalDays;
// Emit work week change event // Emit work week change event
eventBus.emit(EventTypes.WORKWEEK_CHANGED, { eventBus.emit(CoreEvents.WORKWEEK_CHANGED, {
workWeekId: workWeekId, workWeekId: workWeekId,
settings: presets[workWeekId] settings: presets[workWeekId]
}); });

11
src/core/EventBus.ts
View file

@ -60,6 +60,12 @@ export class EventBus implements IEventBus {
* Emit an event via DOM CustomEvent * Emit an event via DOM CustomEvent
*/ */
emit(eventType: string, detail: any = {}): boolean { emit(eventType: string, detail: any = {}): boolean {
// Validate eventType
if (!eventType || typeof eventType !== 'string') {
console.error('EventBus.emit: Invalid eventType provided', eventType);
return false;
}
const event = new CustomEvent(eventType, { const event = new CustomEvent(eventType, {
detail, detail,
bubbles: true, bubbles: true,
@ -106,6 +112,11 @@ export class EventBus implements IEventBus {
* Extract category from event type * Extract category from event type
*/ */
private extractCategory(eventType: string): string { private extractCategory(eventType: string): string {
if (!eventType || typeof eventType !== 'string') {
console.error('EventBus.extractCategory: Invalid eventType', eventType);
return 'unknown';
}
if (eventType.includes(':')) { if (eventType.includes(':')) {
return eventType.split(':')[0]; return eventType.split(':')[0];
} }

73
src/managers/CalendarManager.ts
View file

@ -1,5 +1,5 @@
import { EventBus } from '../core/EventBus.js'; import { EventBus } from '../core/EventBus.js';
import { EventTypes } from '../constants/EventTypes.js'; import { CoreEvents } from '../constants/CoreEvents.js';
import { CalendarConfig } from '../core/CalendarConfig.js'; import { CalendarConfig } from '../core/CalendarConfig.js';
import { CalendarEvent, CalendarView, IEventBus } from '../types/CalendarTypes.js'; import { CalendarEvent, CalendarView, IEventBus } from '../types/CalendarTypes.js';
import { EventManager } from './EventManager.js'; import { EventManager } from './EventManager.js';
@ -87,7 +87,7 @@ export class CalendarManager {
console.log('✅ CalendarManager: Simple initialization complete'); console.log('✅ CalendarManager: Simple initialization complete');
// Emit initialization complete event // Emit initialization complete event
this.eventBus.emit(EventTypes.CALENDAR_INITIALIZED, { this.eventBus.emit(CoreEvents.INITIALIZED, {
currentDate: this.currentDate, currentDate: this.currentDate,
currentView: this.currentView currentView: this.currentView
}); });
@ -112,7 +112,7 @@ export class CalendarManager {
console.log(`Changing view from ${previousView} to ${view}`); console.log(`Changing view from ${previousView} to ${view}`);
// Emit view change event // Emit view change event
this.eventBus.emit(EventTypes.VIEW_CHANGED, { this.eventBus.emit(CoreEvents.VIEW_CHANGED, {
previousView, previousView,
currentView: view, currentView: view,
date: this.currentDate date: this.currentDate
@ -125,13 +125,23 @@ export class CalendarManager {
* Sæt aktuel dato * Sæt aktuel dato
*/ */
public setCurrentDate(date: Date): void { public setCurrentDate(date: Date): void {
// Validate input date
if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
console.error('CalendarManager.setCurrentDate: Invalid date provided', date);
return;
}
const previousDate = this.currentDate; const previousDate = this.currentDate;
this.currentDate = new Date(date); this.currentDate = new Date(date);
console.log(`Changing date from ${previousDate.toISOString()} to ${date.toISOString()}`); // Validate that both dates are valid before logging
const prevDateStr = previousDate && !isNaN(previousDate.getTime()) ? previousDate.toISOString() : 'Invalid Date';
const newDateStr = this.currentDate.toISOString();
console.log(`Changing date from ${prevDateStr} to ${newDateStr}`);
// Emit date change event // Emit date change event
this.eventBus.emit(EventTypes.DATE_CHANGED, { this.eventBus.emit(CoreEvents.DATE_CHANGED, {
previousDate, previousDate,
currentDate: this.currentDate, currentDate: this.currentDate,
view: this.currentView view: this.currentView
@ -209,7 +219,7 @@ export class CalendarManager {
public refresh(): void { public refresh(): void {
console.log('Refreshing calendar...'); console.log('Refreshing calendar...');
this.eventBus.emit(EventTypes.CALENDAR_REFRESH_REQUESTED, { this.eventBus.emit(CoreEvents.REFRESH_REQUESTED, {
view: this.currentView, view: this.currentView,
date: this.currentDate date: this.currentDate
}); });
@ -224,7 +234,7 @@ export class CalendarManager {
this.currentView = 'week'; this.currentView = 'week';
this.currentDate = new Date(); this.currentDate = new Date();
this.eventBus.emit(EventTypes.CALENDAR_RESET, { this.eventBus.emit(CoreEvents.REFRESH_REQUESTED, {
view: this.currentView, view: this.currentView,
date: this.currentDate date: this.currentDate
}); });
@ -234,41 +244,8 @@ export class CalendarManager {
* Setup event listeners for at håndtere events fra andre managers * Setup event listeners for at håndtere events fra andre managers
*/ */
private setupEventListeners(): void { private setupEventListeners(): void {
// Lyt efter navigation events // Listen for workweek changes only
this.eventBus.on(EventTypes.NAVIGATE_TO_DATE, (event) => { this.eventBus.on(CoreEvents.WORKWEEK_CHANGED, (event: Event) => {
const customEvent = event as CustomEvent;
const { date } = customEvent.detail;
this.setCurrentDate(new Date(date));
});
// Lyt efter view change requests
this.eventBus.on(EventTypes.VIEW_CHANGE_REQUESTED, (event) => {
const customEvent = event as CustomEvent;
const { view } = customEvent.detail;
this.setView(view);
});
// Lyt efter today navigation
this.eventBus.on(EventTypes.NAVIGATE_TO_TODAY, () => {
this.goToToday();
});
// Lyt efter next/previous navigation
this.eventBus.on(EventTypes.NAVIGATE_NEXT, () => {
this.goToNext();
});
this.eventBus.on(EventTypes.NAVIGATE_PREVIOUS, () => {
this.goToPrevious();
});
// Lyt efter refresh requests
this.eventBus.on(EventTypes.REFRESH_REQUESTED, () => {
this.refresh();
});
// Lyt efter workweek changes
this.eventBus.on(EventTypes.WORKWEEK_CHANGED, (event: Event) => {
const customEvent = event as CustomEvent; const customEvent = event as CustomEvent;
console.log('CalendarManager: Workweek changed to', customEvent.detail.workWeekId); console.log('CalendarManager: Workweek changed to', customEvent.detail.workWeekId);
this.handleWorkweekChange(); this.handleWorkweekChange();
@ -276,16 +253,6 @@ export class CalendarManager {
// Also update week info display since workweek affects date range display // Also update week info display since workweek affects date range display
this.updateWeekInfoForWorkweekChange(); this.updateWeekInfoForWorkweekChange();
}); });
// Lyt efter reset requests
this.eventBus.on(EventTypes.RESET_REQUESTED, () => {
this.reset();
});
// Update week info when grid is rendered with actual column dates
this.eventBus.on(EventTypes.GRID_RENDERED, () => {
this.updateWeekInfoFromRenderedColumns();
});
} }
/** /**
@ -487,7 +454,7 @@ export class CalendarManager {
}); });
// Emit week info update // Emit week info update
this.eventBus.emit(EventTypes.WEEK_INFO_UPDATED, { this.eventBus.emit(CoreEvents.WEEK_CHANGED, {
weekNumber, weekNumber,
dateRange, dateRange,
weekStart: firstDate, weekStart: firstDate,

10
src/managers/EventManager.ts
View file

@ -1,6 +1,6 @@
import { EventBus } from '../core/EventBus'; import { EventBus } from '../core/EventBus';
import { IEventBus, CalendarEvent, ResourceCalendarData } from '../types/CalendarTypes'; import { IEventBus, CalendarEvent, ResourceCalendarData } from '../types/CalendarTypes';
import { EventTypes } from '../constants/EventTypes'; import { CoreEvents } from '../constants/CoreEvents';
import { calendarConfig } from '../core/CalendarConfig'; import { calendarConfig } from '../core/CalendarConfig';
/** /**
@ -21,7 +21,7 @@ export class EventManager {
private setupEventListeners(): void { private setupEventListeners(): void {
// NOTE: Removed POC event listener to prevent interference with production code // NOTE: Removed POC event listener to prevent interference with production code
// POC sliding animation should not trigger separate event rendering // POC sliding animation should not trigger separate event rendering
// this.eventBus.on(EventTypes.WEEK_CONTENT_RENDERED, ...); // this.eventBus.on(CoreEvents.WEEK_CONTENT_RENDERED, ...);
} }
/** /**
@ -140,7 +140,7 @@ export class EventManager {
this.events.push(newEvent); this.events.push(newEvent);
this.syncEvents(); this.syncEvents();
this.eventBus.emit(EventTypes.EVENT_CREATED, { this.eventBus.emit(CoreEvents.EVENT_CREATED, {
event: newEvent event: newEvent
}); });
@ -156,7 +156,7 @@ export class EventManager {
this.syncEvents(); this.syncEvents();
this.eventBus.emit(EventTypes.EVENT_UPDATED, { this.eventBus.emit(CoreEvents.EVENT_UPDATED, {
event: updatedEvent event: updatedEvent
}); });
@ -172,7 +172,7 @@ export class EventManager {
this.syncEvents(); this.syncEvents();
this.eventBus.emit(EventTypes.EVENT_DELETED, { this.eventBus.emit(CoreEvents.EVENT_DELETED, {
event: deletedEvent event: deletedEvent
}); });

13
src/managers/GridManager.ts
View file

@ -5,7 +5,6 @@
import { eventBus } from '../core/EventBus'; import { eventBus } from '../core/EventBus';
import { calendarConfig } from '../core/CalendarConfig'; import { calendarConfig } from '../core/CalendarConfig';
import { EventTypes } from '../constants/EventTypes';
import { CoreEvents } from '../constants/CoreEvents'; import { CoreEvents } from '../constants/CoreEvents';
import { ResourceCalendarData, CalendarView } from '../types/CalendarTypes'; import { ResourceCalendarData, CalendarView } from '../types/CalendarTypes';
import { AllDayEvent } from '../types/EventTypes'; import { AllDayEvent } from '../types/EventTypes';
@ -48,7 +47,7 @@ export class GridManager {
private subscribeToEvents(): void { private subscribeToEvents(): void {
// Listen for view changes to switch strategies // Listen for view changes to switch strategies
this.eventCleanup.push( this.eventCleanup.push(
eventBus.on(EventTypes.VIEW_CHANGED, (e: Event) => { eventBus.on(CoreEvents.VIEW_CHANGED, (e: Event) => {
const detail = (e as CustomEvent).detail; const detail = (e as CustomEvent).detail;
this.switchViewStrategy(detail.currentView); this.switchViewStrategy(detail.currentView);
}) })
@ -56,7 +55,7 @@ export class GridManager {
// Listen for data changes // Listen for data changes
this.eventCleanup.push( this.eventCleanup.push(
eventBus.on(EventTypes.DATE_CHANGED, (e: Event) => { eventBus.on(CoreEvents.DATE_CHANGED, (e: Event) => {
const detail = (e as CustomEvent).detail; const detail = (e as CustomEvent).detail;
this.currentDate = detail.currentDate; this.currentDate = detail.currentDate;
this.render(); this.render();
@ -64,7 +63,7 @@ export class GridManager {
); );
this.eventCleanup.push( this.eventCleanup.push(
eventBus.on(EventTypes.WEEK_CHANGED, (e: Event) => { eventBus.on(CoreEvents.WEEK_CHANGED, (e: Event) => {
const detail = (e as CustomEvent).detail; const detail = (e as CustomEvent).detail;
this.currentDate = detail.weekStart; this.currentDate = detail.weekStart;
this.render(); this.render();
@ -72,7 +71,7 @@ export class GridManager {
); );
this.eventCleanup.push( this.eventCleanup.push(
eventBus.on(EventTypes.EVENTS_LOADED, (e: Event) => { eventBus.on(CoreEvents.DATA_LOADED, (e: Event) => {
const detail = (e as CustomEvent).detail; const detail = (e as CustomEvent).detail;
this.updateAllDayEvents(detail.events); this.updateAllDayEvents(detail.events);
}) })
@ -80,13 +79,13 @@ export class GridManager {
// Listen for config changes that affect rendering // Listen for config changes that affect rendering
this.eventCleanup.push( this.eventCleanup.push(
eventBus.on(EventTypes.CONFIG_UPDATE, (e: Event) => { eventBus.on(CoreEvents.REFRESH_REQUESTED, (e: Event) => {
this.render(); this.render();
}) })
); );
this.eventCleanup.push( this.eventCleanup.push(
eventBus.on(EventTypes.WORKWEEK_CHANGED, () => { eventBus.on(CoreEvents.WORKWEEK_CHANGED, () => {
this.render(); this.render();
}) })
); );

16
src/managers/NavigationManager.ts
View file

@ -1,7 +1,7 @@
import { IEventBus } from '../types/CalendarTypes.js'; import { IEventBus } from '../types/CalendarTypes.js';
import { EventRenderingService } from '../renderers/EventRendererManager.js'; import { EventRenderingService } from '../renderers/EventRendererManager.js';
import { DateCalculator } from '../utils/DateCalculator.js'; import { DateCalculator } from '../utils/DateCalculator.js';
import { EventTypes } from '../constants/EventTypes.js'; import { CoreEvents } from '../constants/CoreEvents.js';
import { NavigationRenderer } from '../renderers/NavigationRenderer.js'; import { NavigationRenderer } from '../renderers/NavigationRenderer.js';
import { calendarConfig } from '../core/CalendarConfig.js'; import { calendarConfig } from '../core/CalendarConfig.js';
@ -35,7 +35,7 @@ export class NavigationManager {
private setupEventListeners(): void { private setupEventListeners(): void {
// Initial DOM update when calendar is initialized // Initial DOM update when calendar is initialized
this.eventBus.on(EventTypes.CALENDAR_INITIALIZED, () => { this.eventBus.on(CoreEvents.CALENDAR_INITIALIZED, () => {
console.log('NavigationManager: Received CALENDAR_INITIALIZED, updating week info'); console.log('NavigationManager: Received CALENDAR_INITIALIZED, updating week info');
this.updateWeekInfo(); this.updateWeekInfo();
}); });
@ -63,7 +63,7 @@ export class NavigationManager {
}); });
// Listen for external navigation requests // Listen for external navigation requests
this.eventBus.on(EventTypes.NAVIGATE_TO_DATE, (event: Event) => { this.eventBus.on(CoreEvents.NAVIGATE_TO_DATE, (event: Event) => {
const customEvent = event as CustomEvent; const customEvent = event as CustomEvent;
const targetDate = new Date(customEvent.detail.date); const targetDate = new Date(customEvent.detail.date);
this.navigateToDate(targetDate); this.navigateToDate(targetDate);
@ -189,13 +189,13 @@ export class NavigationManager {
// Update week info and notify other managers // Update week info and notify other managers
this.updateWeekInfo(); this.updateWeekInfo();
this.eventBus.emit(EventTypes.WEEK_CHANGED, { this.eventBus.emit(CoreEvents.WEEK_CHANGED, {
weekStart: this.currentWeek, weekStart: this.currentWeek,
weekEnd: this.dateCalculator.addDays(this.currentWeek, 6) weekEnd: this.dateCalculator.addDays(this.currentWeek, 6)
}); });
// Emit animation complete event for ScrollManager // Emit period change event for ScrollManager
this.eventBus.emit(EventTypes.NAVIGATION_ANIMATION_COMPLETE, { this.eventBus.emit(CoreEvents.PERIOD_CHANGED, {
direction, direction,
weekStart: this.currentWeek weekStart: this.currentWeek
}); });
@ -211,7 +211,7 @@ export class NavigationManager {
const dateRange = this.dateCalculator.formatDateRange(this.currentWeek, weekEnd); const dateRange = this.dateCalculator.formatDateRange(this.currentWeek, weekEnd);
// Notify other managers about week info update - DOM manipulation should happen via events // Notify other managers about week info update - DOM manipulation should happen via events
this.eventBus.emit(EventTypes.WEEK_INFO_UPDATED, { this.eventBus.emit(CoreEvents.WEEK_CHANGED, {
weekNumber, weekNumber,
dateRange, dateRange,
weekStart: this.currentWeek, weekStart: this.currentWeek,
@ -248,7 +248,7 @@ export class NavigationManager {
this.targetWeek = new Date(weekStart); this.targetWeek = new Date(weekStart);
this.updateWeekInfo(); this.updateWeekInfo();
this.eventBus.emit(EventTypes.WEEK_CHANGED, { this.eventBus.emit(CoreEvents.WEEK_CHANGED, {
weekStart: this.currentWeek, weekStart: this.currentWeek,
weekEnd: DateUtils.addDays(this.currentWeek, 6) weekEnd: DateUtils.addDays(this.currentWeek, 6)
}); });

4
src/managers/ScrollManager.ts
View file

@ -2,7 +2,7 @@
import { eventBus } from '../core/EventBus'; import { eventBus } from '../core/EventBus';
import { calendarConfig } from '../core/CalendarConfig'; import { calendarConfig } from '../core/CalendarConfig';
import { EventTypes } from '../constants/EventTypes'; import { CoreEvents } from '../constants/CoreEvents';
/** /**
* Manages scrolling functionality for the calendar using native scrollbars * Manages scrolling functionality for the calendar using native scrollbars
@ -31,7 +31,7 @@ export class ScrollManager {
private subscribeToEvents(): void { private subscribeToEvents(): void {
// Handle navigation animation completion - sync time axis position // Handle navigation animation completion - sync time axis position
eventBus.on(EventTypes.NAVIGATION_ANIMATION_COMPLETE, () => { eventBus.on(CoreEvents.NAVIGATION_ANIMATION_COMPLETE, () => {
this.syncTimeAxisPosition(); this.syncTimeAxisPosition();
this.setupScrolling(); this.setupScrolling();
}); });

16
src/managers/ViewManager.ts
View file

@ -1,7 +1,7 @@
import { EventBus } from '../core/EventBus'; import { EventBus } from '../core/EventBus';
import { CalendarView, IEventBus } from '../types/CalendarTypes'; import { CalendarView, IEventBus } from '../types/CalendarTypes';
import { calendarConfig } from '../core/CalendarConfig'; import { calendarConfig } from '../core/CalendarConfig';
import { EventTypes } from '../constants/EventTypes'; import { CoreEvents } from '../constants/CoreEvents';
/** /**
* ViewManager - Håndterer skift mellem dag/uge/måned visninger * ViewManager - Håndterer skift mellem dag/uge/måned visninger
@ -21,13 +21,13 @@ export class ViewManager {
private setupEventListeners(): void { private setupEventListeners(): void {
// Track event bus listeners for cleanup // Track event bus listeners for cleanup
this.eventCleanup.push( this.eventCleanup.push(
this.eventBus.on(EventTypes.CALENDAR_INITIALIZED, () => { this.eventBus.on(CoreEvents.INITIALIZED, () => {
this.initializeView(); this.initializeView();
}) })
); );
this.eventCleanup.push( this.eventCleanup.push(
this.eventBus.on(EventTypes.VIEW_CHANGE_REQUESTED, (event: Event) => { this.eventBus.on(CoreEvents.VIEW_CHANGED, (event: Event) => {
const customEvent = event as CustomEvent; const customEvent = event as CustomEvent;
const { currentView } = customEvent.detail; const { currentView } = customEvent.detail;
this.changeView(currentView); this.changeView(currentView);
@ -35,7 +35,7 @@ export class ViewManager {
); );
this.eventCleanup.push( this.eventCleanup.push(
this.eventBus.on(EventTypes.DATE_CHANGED, () => { this.eventBus.on(CoreEvents.DATE_CHANGED, () => {
this.refreshCurrentView(); this.refreshCurrentView();
}) })
); );
@ -83,7 +83,7 @@ export class ViewManager {
this.updateViewButtons(); this.updateViewButtons();
this.updateWorkweekButtons(); this.updateWorkweekButtons();
this.eventBus.emit(EventTypes.VIEW_RENDERED, { this.eventBus.emit(CoreEvents.VIEW_RENDERED, {
view: this.currentView view: this.currentView
}); });
} }
@ -98,7 +98,7 @@ export class ViewManager {
this.updateViewButtons(); this.updateViewButtons();
this.eventBus.emit(EventTypes.VIEW_CHANGED, { this.eventBus.emit(CoreEvents.VIEW_CHANGED, {
previousView, previousView,
currentView: newView currentView: newView
}); });
@ -114,7 +114,7 @@ export class ViewManager {
this.updateWorkweekButtons(); this.updateWorkweekButtons();
// Trigger a calendar refresh to apply the new workweek // Trigger a calendar refresh to apply the new workweek
this.eventBus.emit(EventTypes.REFRESH_REQUESTED); this.eventBus.emit(CoreEvents.REFRESH_REQUESTED);
} }
private updateViewButtons(): void { private updateViewButtons(): void {
@ -144,7 +144,7 @@ export class ViewManager {
} }
private refreshCurrentView(): void { private refreshCurrentView(): void {
this.eventBus.emit(EventTypes.VIEW_RENDERED, { this.eventBus.emit(CoreEvents.VIEW_RENDERED, {
view: this.currentView view: this.currentView
}); });
} }

22
src/renderers/EventRendererManager.ts
View file

@ -1,6 +1,5 @@
import { EventBus } from '../core/EventBus'; import { EventBus } from '../core/EventBus';
import { IEventBus, CalendarEvent, RenderContext } from '../types/CalendarTypes'; import { IEventBus, CalendarEvent, RenderContext } from '../types/CalendarTypes';
import { EventTypes } from '../constants/EventTypes';
import { CoreEvents } from '../constants/CoreEvents'; import { CoreEvents } from '../constants/CoreEvents';
import { calendarConfig } from '../core/CalendarConfig'; import { calendarConfig } from '../core/CalendarConfig';
import { CalendarTypeFactory } from '../factories/CalendarTypeFactory'; import { CalendarTypeFactory } from '../factories/CalendarTypeFactory';
@ -33,6 +32,10 @@ export class EventRenderingService {
public renderEvents(context: RenderContext): void { public renderEvents(context: RenderContext): void {
console.log(` 📅 Getting events for ${context.startDate.toDateString()} - ${context.endDate.toDateString()}`); console.log(` 📅 Getting events for ${context.startDate.toDateString()} - ${context.endDate.toDateString()}`);
// Clear existing events in the specific container first
this.strategy.clearEvents(context.container);
console.log(` 🧹 Cleared existing events in container`);
// Get events from EventManager for the period // Get events from EventManager for the period
const events = this.eventManager.getEventsForPeriod( const events = this.eventManager.getEventsForPeriod(
context.startDate, context.startDate,
@ -54,14 +57,8 @@ export class EventRenderingService {
private setupEventListeners(): void { private setupEventListeners(): void {
// Event-driven rendering: React to grid and container events // Event-driven rendering: React to grid and container events
this.eventBus.on(EventTypes.GRID_RENDERED, (event: 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) => { this.eventBus.on(CoreEvents.GRID_RENDERED, (event: Event) => {
console.log('EventRenderer: Received GRID_RENDERED event (core)'); console.log('EventRenderer: Received GRID_RENDERED event');
this.handleGridRendered(event as CustomEvent); this.handleGridRendered(event as CustomEvent);
}); });
@ -71,17 +68,10 @@ export class EventRenderingService {
// this.handleContainerReady(event as CustomEvent); // this.handleContainerReady(event as CustomEvent);
// }); // });
this.eventBus.on(EventTypes.VIEW_CHANGED, (event: Event) => { this.eventBus.on(CoreEvents.VIEW_CHANGED, (event: Event) => {
console.log('EventRenderer: Received VIEW_CHANGED event'); console.log('EventRenderer: Received VIEW_CHANGED event');
this.handleViewChanged(event as CustomEvent); this.handleViewChanged(event as CustomEvent);
}); });
// Handle calendar type changes - update cached strategy
this.eventBus.on(EventTypes.CALENDAR_TYPE_CHANGED, () => {
const calendarType = calendarConfig.getCalendarMode();
this.strategy = CalendarTypeFactory.getEventRenderer(calendarType);
console.log(`EventRenderer: Updated strategy to ${calendarType}`);
});
} }

4
src/renderers/NavigationRenderer.ts
View file

@ -1,5 +1,5 @@
import { IEventBus } from '../types/CalendarTypes'; import { IEventBus } from '../types/CalendarTypes';
import { EventTypes } from '../constants/EventTypes'; import { CoreEvents } from '../constants/CoreEvents';
import { CalendarConfig } from '../core/CalendarConfig'; import { CalendarConfig } from '../core/CalendarConfig';
import { DateCalculator } from '../utils/DateCalculator'; import { DateCalculator } from '../utils/DateCalculator';
import { EventRenderingService } from './EventRendererManager'; import { EventRenderingService } from './EventRendererManager';
@ -26,7 +26,7 @@ export class NavigationRenderer {
* Setup event listeners for DOM updates * Setup event listeners for DOM updates
*/ */
private setupEventListeners(): void { private setupEventListeners(): void {
this.eventBus.on(EventTypes.WEEK_INFO_UPDATED, (event: Event) => { this.eventBus.on(CoreEvents.WEEK_INFO_UPDATED, (event: Event) => {
const customEvent = event as CustomEvent; const customEvent = event as CustomEvent;
const { weekNumber, dateRange } = customEvent.detail; const { weekNumber, dateRange } = customEvent.detail;
this.updateWeekInfoInDOM(weekNumber, dateRange); this.updateWeekInfoInDOM(weekNumber, dateRange);