diff --git a/src/core/CalendarConfig.ts b/src/core/CalendarConfig.ts index 1eed8a0..0e6b1ab 100644 --- a/src/core/CalendarConfig.ts +++ b/src/core/CalendarConfig.ts @@ -215,7 +215,7 @@ export class CalendarConfig { // Update computed values handled in specific update methods // Emit config update event - eventBus.emit(CoreEvents.CONFIG_UPDATE, { + eventBus.emit(CoreEvents.REFRESH_REQUESTED, { key, value, oldValue @@ -292,7 +292,7 @@ export class CalendarConfig { } // Emit grid settings update event - eventBus.emit(CoreEvents.CONFIG_UPDATE, { + eventBus.emit(CoreEvents.REFRESH_REQUESTED, { key: 'gridSettings', value: this.gridSettings, oldValue: this.gridSettings @@ -320,7 +320,7 @@ export class CalendarConfig { this.dateViewSettings = { ...this.dateViewSettings, ...updates }; // Emit date view settings update event - eventBus.emit(CoreEvents.CONFIG_UPDATE, { + eventBus.emit(CoreEvents.REFRESH_REQUESTED, { key: 'dateViewSettings', value: this.dateViewSettings, oldValue: this.dateViewSettings @@ -355,7 +355,7 @@ export class CalendarConfig { this.resourceViewSettings = { ...this.resourceViewSettings, ...updates }; // Emit resource view settings update event - eventBus.emit(CoreEvents.CONFIG_UPDATE, { + eventBus.emit(CoreEvents.REFRESH_REQUESTED, { key: 'resourceViewSettings', value: this.resourceViewSettings, oldValue: this.resourceViewSettings @@ -409,7 +409,7 @@ export class CalendarConfig { this.calendarMode = mode; // Emit calendar mode change event - eventBus.emit(CoreEvents.CALENDAR_TYPE_CHANGED, { + eventBus.emit(CoreEvents.VIEW_CHANGED, { oldType: oldMode, newType: mode }); @@ -429,7 +429,7 @@ export class CalendarConfig { this.selectedDate = date; // Emit date change event - eventBus.emit(CoreEvents.SELECTED_DATE_CHANGED, { + eventBus.emit(CoreEvents.DATE_CHANGED, { date: date }); } diff --git a/src/managers/CalendarManager.ts b/src/managers/CalendarManager.ts index 19fefa8..cb10156 100644 --- a/src/managers/CalendarManager.ts +++ b/src/managers/CalendarManager.ts @@ -144,6 +144,7 @@ export class CalendarManager { this.eventBus.emit(CoreEvents.DATE_CHANGED, { previousDate, currentDate: this.currentDate, + date: this.currentDate, // Add for backward compatibility view: this.currentView }); diff --git a/src/managers/GridManager.ts b/src/managers/GridManager.ts index 5bf032c..dededf7 100644 --- a/src/managers/GridManager.ts +++ b/src/managers/GridManager.ts @@ -54,21 +54,25 @@ export class GridManager { ); // Listen for data changes - this.eventCleanup.push( - eventBus.on(CoreEvents.DATE_CHANGED, (e: Event) => { - const detail = (e as CustomEvent).detail; - this.currentDate = detail.currentDate; - this.render(); - }) - ); + // REMOVED: GridManager should not re-render on DATE_CHANGED + // Date navigation is handled by NavigationManager + // this.eventCleanup.push( + // eventBus.on(CoreEvents.DATE_CHANGED, (e: Event) => { + // const detail = (e as CustomEvent).detail; + // this.currentDate = detail.currentDate; + // this.render(); + // }) + // ); - this.eventCleanup.push( - eventBus.on(CoreEvents.WEEK_CHANGED, (e: Event) => { - const detail = (e as CustomEvent).detail; - this.currentDate = detail.weekStart; - this.render(); - }) - ); + // REMOVED: GridManager should not re-render on WEEK_CHANGED + // Navigation is handled by NavigationManager + NavigationRenderer + // this.eventCleanup.push( + // eventBus.on(CoreEvents.WEEK_CHANGED, (e: Event) => { + // const detail = (e as CustomEvent).detail; + // this.currentDate = detail.weekStart; + // this.render(); + // }) + // ); this.eventCleanup.push( eventBus.on(CoreEvents.DATA_LOADED, (e: Event) => { @@ -136,8 +140,7 @@ export class GridManager { return; } - console.group(`🎨 GRID RENDER: ${this.currentDate.toDateString()}`); - console.log(`Using strategy: ${this.currentStrategy.constructor.name}`); + console.log(`🎨 GridManager: Rendering ${this.currentDate.toDateString()} using ${this.currentStrategy.constructor.name}`); // Create context for strategy const context: ViewContext = { @@ -153,6 +156,8 @@ export class GridManager { // Get layout info from strategy const layoutConfig = this.currentStrategy.getLayoutConfig(); + console.log(`GridManager: Emitting GRID_RENDERED for main container`); + // Emit grid rendered event eventBus.emit(CoreEvents.GRID_RENDERED, { container: this.container, @@ -161,8 +166,7 @@ export class GridManager { columnCount: layoutConfig.columnCount }); - console.log(`Grid rendered with ${layoutConfig.columnCount} columns`); - console.groupEnd(); + console.log(`✅ Grid rendered with ${layoutConfig.columnCount} columns`); } /** diff --git a/src/managers/NavigationManager.ts b/src/managers/NavigationManager.ts index a13f4b0..908b822 100644 --- a/src/managers/NavigationManager.ts +++ b/src/managers/NavigationManager.ts @@ -35,7 +35,7 @@ export class NavigationManager { private setupEventListeners(): void { // Initial DOM update when calendar is initialized - this.eventBus.on(CoreEvents.CALENDAR_INITIALIZED, () => { + this.eventBus.on(CoreEvents.INITIALIZED, () => { console.log('NavigationManager: Received CALENDAR_INITIALIZED, updating week info'); this.updateWeekInfo(); }); @@ -63,9 +63,22 @@ export class NavigationManager { }); // Listen for external navigation requests - this.eventBus.on(CoreEvents.NAVIGATE_TO_DATE, (event: Event) => { + this.eventBus.on(CoreEvents.DATE_CHANGED, (event: Event) => { const customEvent = event as CustomEvent; - const targetDate = new Date(customEvent.detail.date); + const dateFromEvent = customEvent.detail.date || customEvent.detail.currentDate; + + // Validate date before processing + if (!dateFromEvent) { + console.warn('NavigationManager: No date provided in DATE_CHANGED event', customEvent.detail); + return; + } + + const targetDate = new Date(dateFromEvent); + if (isNaN(targetDate.getTime())) { + console.warn('NavigationManager: Invalid date in DATE_CHANGED event', dateFromEvent); + return; + } + this.navigateToDate(targetDate); }); } @@ -189,10 +202,6 @@ export class NavigationManager { // Update week info and notify other managers this.updateWeekInfo(); - this.eventBus.emit(CoreEvents.WEEK_CHANGED, { - weekStart: this.currentWeek, - weekEnd: this.dateCalculator.addDays(this.currentWeek, 6) - }); // Emit period change event for ScrollManager this.eventBus.emit(CoreEvents.PERIOD_CHANGED, { @@ -247,11 +256,6 @@ export class NavigationManager { this.currentWeek = new Date(weekStart); this.targetWeek = new Date(weekStart); this.updateWeekInfo(); - - this.eventBus.emit(CoreEvents.WEEK_CHANGED, { - weekStart: this.currentWeek, - weekEnd: DateUtils.addDays(this.currentWeek, 6) - }); } // Rendering methods moved to NavigationRenderer for better separation of concerns diff --git a/src/managers/ScrollManager.ts b/src/managers/ScrollManager.ts index ce52226..4d0dae9 100644 --- a/src/managers/ScrollManager.ts +++ b/src/managers/ScrollManager.ts @@ -31,7 +31,7 @@ export class ScrollManager { private subscribeToEvents(): void { // Handle navigation animation completion - sync time axis position - eventBus.on(CoreEvents.NAVIGATION_ANIMATION_COMPLETE, () => { + eventBus.on(CoreEvents.PERIOD_CHANGED, () => { this.syncTimeAxisPosition(); this.setupScrolling(); }); diff --git a/src/renderers/ColumnRenderer.ts b/src/renderers/ColumnRenderer.ts index 19a896e..642e67f 100644 --- a/src/renderers/ColumnRenderer.ts +++ b/src/renderers/ColumnRenderer.ts @@ -24,7 +24,7 @@ export interface ColumnRenderContext { * Date-based column renderer (original functionality) */ export class DateColumnRenderer implements ColumnRenderer { - private dateCalculator: DateCalculator; + private dateCalculator!: DateCalculator; render(columnContainer: HTMLElement, context: ColumnRenderContext): void { const { currentWeek, config } = context; diff --git a/src/renderers/EventRenderer.ts b/src/renderers/EventRenderer.ts index 4847a45..0920b8d 100644 --- a/src/renderers/EventRenderer.ts +++ b/src/renderers/EventRenderer.ts @@ -176,6 +176,7 @@ export class DateEventRenderer extends BaseEventRenderer { const matches = eventDateStr === columnDate; if (!matches) { + if(event.title == 'Architecture Planning') console.log(`DateEventRenderer: Event ${event.title} (${eventDateStr}) does not match column (${columnDate})`); } diff --git a/src/renderers/HeaderRenderer.ts b/src/renderers/HeaderRenderer.ts index 7650206..26e16c5 100644 --- a/src/renderers/HeaderRenderer.ts +++ b/src/renderers/HeaderRenderer.ts @@ -25,7 +25,7 @@ export interface HeaderRenderContext { * Date-based header renderer (original functionality) */ export class DateHeaderRenderer implements HeaderRenderer { - private dateCalculator: DateCalculator; + private dateCalculator!: DateCalculator; render(calendarHeader: HTMLElement, context: HeaderRenderContext): void { const { currentWeek, config, allDayEvents = [] } = context; @@ -34,7 +34,7 @@ export class DateHeaderRenderer implements HeaderRenderer { this.dateCalculator = new DateCalculator(config); const dates = this.dateCalculator.getWorkWeekDates(currentWeek); - const weekDays = config.get('weekDays'); + const weekDays = config.getDateViewSettings().weekDays; const daysToShow = dates.slice(0, weekDays); daysToShow.forEach((date, index) => { @@ -62,7 +62,7 @@ export class DateHeaderRenderer implements HeaderRenderer { const { currentWeek, config, allDayEvents = [] } = context; const dates = this.dateCalculator.getWorkWeekDates(currentWeek); - const weekDays = config.get('weekDays'); + const weekDays = config.getDateViewSettings().weekDays; const daysToShow = dates.slice(0, weekDays); // Process each all-day event to calculate its span diff --git a/src/renderers/NavigationRenderer.ts b/src/renderers/NavigationRenderer.ts index fecd1ff..8875365 100644 --- a/src/renderers/NavigationRenderer.ts +++ b/src/renderers/NavigationRenderer.ts @@ -26,7 +26,7 @@ export class NavigationRenderer { * Setup event listeners for DOM updates */ private setupEventListeners(): void { - this.eventBus.on(CoreEvents.WEEK_INFO_UPDATED, (event: Event) => { + this.eventBus.on(CoreEvents.WEEK_CHANGED, (event: Event) => { const customEvent = event as CustomEvent; const { weekNumber, dateRange } = customEvent.detail; this.updateWeekInfoInDOM(weekNumber, dateRange); @@ -83,14 +83,16 @@ export class NavigationRenderer { console.log('2. Rendering headers and columns...'); this.renderWeekContentInContainer(newGrid, weekStart); - console.log('3. Pre-rendering events synchronously...'); - this.eventRenderer.renderEvents({ - container: newGrid, + console.log('3. Emitting GRID_RENDERED for navigation container...'); + this.eventBus.emit(CoreEvents.GRID_RENDERED, { + container: newGrid, // Specific grid container, not parent + currentDate: weekStart, startDate: weekStart, - endDate: weekEnd + endDate: weekEnd, + isNavigation: true // Flag to indicate this is navigation rendering }); - console.log('✅ Container ready with pre-rendered events'); + console.log('✅ Container ready with GRID_RENDERED event emitted'); console.groupEnd(); return newGrid; }