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:
parent
3ddc6352f2
commit
414ef1caaf
6 changed files with 527 additions and 252 deletions
75
src/strategies/WeekViewStrategy.ts
Normal file
75
src/strategies/WeekViewStrategy.ts
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
/**
|
||||
* WeekViewStrategy - Strategy for week/day view rendering
|
||||
* Extracts the time-based grid logic from GridManager
|
||||
*/
|
||||
|
||||
import { ViewStrategy, ViewContext, ViewLayoutConfig } from './ViewStrategy';
|
||||
import { DateCalculator } from '../utils/DateCalculator';
|
||||
import { calendarConfig } from '../core/CalendarConfig';
|
||||
import { GridRenderer } from '../renderers/GridRenderer';
|
||||
import { GridStyleManager } from '../renderers/GridStyleManager';
|
||||
|
||||
export class WeekViewStrategy implements ViewStrategy {
|
||||
private dateCalculator: DateCalculator;
|
||||
private gridRenderer: GridRenderer;
|
||||
private styleManager: GridStyleManager;
|
||||
|
||||
constructor() {
|
||||
this.dateCalculator = new DateCalculator(calendarConfig);
|
||||
this.gridRenderer = new GridRenderer(calendarConfig);
|
||||
this.styleManager = new GridStyleManager(calendarConfig);
|
||||
}
|
||||
|
||||
getLayoutConfig(): ViewLayoutConfig {
|
||||
return {
|
||||
needsTimeAxis: true,
|
||||
columnCount: calendarConfig.getWorkWeekSettings().totalDays,
|
||||
scrollable: true,
|
||||
eventPositioning: 'time-based'
|
||||
};
|
||||
}
|
||||
|
||||
renderGrid(context: ViewContext): void {
|
||||
console.group(`🗓️ WEEK VIEW: Rendering grid for ${context.currentDate.toDateString()}`);
|
||||
|
||||
// Update grid styles
|
||||
this.styleManager.updateGridStyles(context.resourceData);
|
||||
|
||||
// Render the grid structure (time axis + day columns)
|
||||
this.gridRenderer.renderGrid(
|
||||
context.container,
|
||||
context.currentDate,
|
||||
context.resourceData,
|
||||
context.allDayEvents
|
||||
);
|
||||
|
||||
console.log(`Week grid rendered with ${this.getLayoutConfig().columnCount} columns`);
|
||||
console.groupEnd();
|
||||
}
|
||||
|
||||
getNextPeriod(currentDate: Date): Date {
|
||||
return this.dateCalculator.addWeeks(currentDate, 1);
|
||||
}
|
||||
|
||||
getPreviousPeriod(currentDate: Date): Date {
|
||||
return this.dateCalculator.addWeeks(currentDate, -1);
|
||||
}
|
||||
|
||||
getPeriodLabel(date: Date): string {
|
||||
const weekStart = this.dateCalculator.getISOWeekStart(date);
|
||||
const weekEnd = this.dateCalculator.addDays(weekStart, 6);
|
||||
const weekNumber = this.dateCalculator.getWeekNumber(date);
|
||||
|
||||
return `Week ${weekNumber}: ${this.dateCalculator.formatDateRange(weekStart, weekEnd)}`;
|
||||
}
|
||||
|
||||
getDisplayDates(baseDate: Date): Date[] {
|
||||
return this.dateCalculator.getWorkWeekDates(baseDate);
|
||||
}
|
||||
|
||||
destroy(): void {
|
||||
// Clean up any week-specific resources
|
||||
// For now, just log
|
||||
console.log('WeekViewStrategy: Cleaning up');
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue