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

Implements strategy pattern for calendar views

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

376
src/managers/GridManager.ts
View file

@ -1,41 +1,35 @@
// Grid structure management - Simple CSS Grid Implementation with Strategy Pattern /**
* GridManager - Simplified grid manager using Strategy Pattern
* Now delegates view-specific logic to strategy implementations
*/
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 { EventTypes } from '../constants/EventTypes';
import { DateCalculator } from '../utils/DateCalculator'; import { CoreEvents } from '../constants/CoreEvents';
import { ResourceCalendarData } from '../types/CalendarTypes'; import { ResourceCalendarData, CalendarView } from '../types/CalendarTypes';
import { AllDayEvent } from '../types/EventTypes'; import { AllDayEvent } from '../types/EventTypes';
import { GridRenderer } from '../renderers/GridRenderer'; import { ViewStrategy, ViewContext } from '../strategies/ViewStrategy';
import { GridStyleManager } from '../renderers/GridStyleManager'; import { WeekViewStrategy } from '../strategies/WeekViewStrategy';
import { MonthViewStrategy } from '../strategies/MonthViewStrategy';
/** /**
* Grid position interface * Simplified GridManager focused on coordination, not implementation
*/
interface GridPosition {
minutes: number;
time: string;
y: number;
}
/**
* Manages the calendar grid structure using simple CSS Grid with Strategy Pattern
*/ */
export class GridManager { export class GridManager {
private container: HTMLElement | null = null; private container: HTMLElement | null = null;
private grid: HTMLElement | null = null; private currentDate: Date = new Date();
private currentWeek: Date | null = null; private allDayEvents: AllDayEvent[] = [];
private allDayEvents: AllDayEvent[] = []; // Store all-day events for current week private resourceData: ResourceCalendarData | null = null;
private resourceData: ResourceCalendarData | null = null; // Store resource data for resource calendar private currentStrategy: ViewStrategy;
private gridRenderer: GridRenderer; private eventCleanup: (() => void)[] = [];
private styleManager: GridStyleManager;
private dateCalculator: DateCalculator;
constructor() { constructor() {
console.log('🏗️ GridManager: Constructor called'); console.log('🏗️ GridManager: Constructor called with Strategy Pattern');
this.gridRenderer = new GridRenderer(calendarConfig);
this.styleManager = new GridStyleManager(calendarConfig); // Default to week view strategy
this.dateCalculator = new DateCalculator(calendarConfig); this.currentStrategy = new WeekViewStrategy();
this.init(); this.init();
} }
@ -43,77 +37,86 @@ export class GridManager {
this.findElements(); this.findElements();
this.subscribeToEvents(); this.subscribeToEvents();
// Set initial current week to today if not set console.log('GridManager: Initialized with strategy pattern');
if (!this.currentWeek) {
this.currentWeek = this.dateCalculator.getISOWeekStart(new Date());
console.log('GridManager: Set initial currentWeek to', this.currentWeek);
// Don't render immediately - wait for proper initialization event
console.log('GridManager: Waiting for initialization complete before rendering');
}
}
private getWeekStart(date: Date): Date {
// Use DateCalculator for ISO week (Monday = start)
return this.dateCalculator.getISOWeekStart(date);
} }
private findElements(): void { private findElements(): void {
this.grid = document.querySelector('swp-calendar-container'); this.container = document.querySelector('swp-calendar-container');
console.log('GridManager: findElements called, found swp-calendar-container:', !!this.grid); console.log('GridManager: Found container:', !!this.container);
} }
private subscribeToEvents(): void { private subscribeToEvents(): void {
// State-driven events removed - render() is now called directly by CalendarManager // Listen for view changes to switch strategies
this.eventCleanup.push(
eventBus.on(EventTypes.VIEW_CHANGED, (e: Event) => {
const detail = (e as CustomEvent).detail;
this.switchViewStrategy(detail.currentView);
})
);
// Re-render grid on config changes // Listen for data changes
eventBus.on(EventTypes.CONFIG_UPDATE, (e: Event) => { this.eventCleanup.push(
const detail = (e as CustomEvent).detail; eventBus.on(EventTypes.DATE_CHANGED, (e: Event) => {
if (['dayStartHour', 'dayEndHour', 'hourHeight', 'view', 'weekDays', 'fitToWidth'].includes(detail.key)) { const detail = (e as CustomEvent).detail;
this.currentDate = detail.currentDate;
this.render(); this.render();
} })
}); );
// Re-render on calendar type change this.eventCleanup.push(
eventBus.on(EventTypes.CALENDAR_TYPE_CHANGED, () => { eventBus.on(EventTypes.WEEK_CHANGED, (e: Event) => {
this.render(); const detail = (e as CustomEvent).detail;
}); this.currentDate = detail.weekStart;
this.render();
})
);
// Re-render on view change this.eventCleanup.push(
eventBus.on(EventTypes.VIEW_CHANGE, () => { eventBus.on(EventTypes.EVENTS_LOADED, (e: Event) => {
this.render(); const detail = (e as CustomEvent).detail;
}); this.updateAllDayEvents(detail.events);
})
);
// Re-render on period change // Listen for config changes that affect rendering
eventBus.on(EventTypes.PERIOD_CHANGE, (e: Event) => { this.eventCleanup.push(
const detail = (e as CustomEvent).detail; eventBus.on(EventTypes.CONFIG_UPDATE, (e: Event) => {
this.currentWeek = this.dateCalculator.getISOWeekStart(detail.week); this.render();
this.render(); })
}); );
// Handle week changes from NavigationManager this.eventCleanup.push(
eventBus.on(EventTypes.WEEK_CHANGED, (e: Event) => { eventBus.on(EventTypes.WORKWEEK_CHANGED, () => {
const detail = (e as CustomEvent).detail; this.render();
this.currentWeek = this.dateCalculator.getISOWeekStart(detail.weekStart); })
this.render(); );
}); }
// Handle date changes from CalendarManager /**
eventBus.on(EventTypes.DATE_CHANGED, (e: Event) => { * Switch to a different view strategy
const detail = (e as CustomEvent).detail; */
this.currentWeek = this.dateCalculator.getISOWeekStart(detail.currentDate); public switchViewStrategy(view: CalendarView): void {
this.render(); console.log(`GridManager: Switching to ${view} strategy`);
});
// Clean up current strategy
this.currentStrategy.destroy();
// Handle events loaded // Create new strategy based on view
eventBus.on(EventTypes.EVENTS_LOADED, (e: Event) => { switch (view) {
const detail = (e as CustomEvent).detail; case 'week':
this.updateAllDayEvents(detail.events); case 'day':
}); this.currentStrategy = new WeekViewStrategy();
break;
case 'month':
this.currentStrategy = new MonthViewStrategy();
break;
default:
console.warn(`GridManager: Unknown view type ${view}, defaulting to week`);
this.currentStrategy = new WeekViewStrategy();
}
// Re-render with new strategy
// Handle grid clicks this.render();
this.setupGridInteractions();
} }
/** /**
@ -121,174 +124,133 @@ export class GridManager {
*/ */
public setResourceData(resourceData: ResourceCalendarData | null): void { public setResourceData(resourceData: ResourceCalendarData | null): void {
this.resourceData = resourceData; this.resourceData = resourceData;
console.log('GridManager: Set resource data:', resourceData ? `${resourceData.resources.length} resources` : 'null'); console.log('GridManager: Updated resource data');
this.render();
} }
/** /**
* Render the complete grid structure - now returns Promise for direct calls * Main render method - delegates to current strategy
*/ */
async render(): Promise<void> { public async render(): Promise<void> {
if (!this.grid) { if (!this.container) {
console.warn('GridManager: render() called but this.grid is null, re-finding elements'); console.warn('GridManager: No container found, cannot render');
this.findElements(); return;
if (!this.grid) {
throw new Error('GridManager: swp-calendar-container not found, cannot render');
}
} }
console.group(`🏗️ GRID RENDER: ${this.currentWeek?.toDateString()}`); console.group(`🎨 GRID RENDER: ${this.currentDate.toDateString()}`);
console.log('Updating grid styles and rendering structure...'); console.log(`Using strategy: ${this.currentStrategy.constructor.name}`);
this.styleManager.updateGridStyles(this.resourceData); // Create context for strategy
this.gridRenderer.renderGrid(this.grid, this.currentWeek!, this.resourceData, this.allDayEvents); const context: ViewContext = {
currentDate: this.currentDate,
container: this.container,
allDayEvents: this.allDayEvents,
resourceData: this.resourceData
};
const columnCount = this.styleManager.getColumnCount(this.resourceData); // Delegate to current strategy
console.log(`Grid structure complete - ${columnCount} columns created`); this.currentStrategy.renderGrid(context);
// Emit GRID_RENDERED event to trigger event rendering // Get layout info from strategy
const weekEnd = this.currentWeek ? new Date(this.currentWeek.getTime() + 6 * 24 * 60 * 60 * 1000) : null; const layoutConfig = this.currentStrategy.getLayoutConfig();
eventBus.emit(EventTypes.GRID_RENDERED, {
container: this.grid, // Emit grid rendered event
currentWeek: this.currentWeek, eventBus.emit(CoreEvents.GRID_RENDERED, {
startDate: this.currentWeek, container: this.container,
endDate: weekEnd, currentDate: this.currentDate,
columnCount: columnCount layoutConfig: layoutConfig,
columnCount: layoutConfig.columnCount
}); });
console.log(`Grid rendered with ${layoutConfig.columnCount} columns`);
console.groupEnd(); console.groupEnd();
} }
// Column count calculation moved to GridStyleManager
// Grid rendering methods moved to GridRenderer
/** /**
* Update all-day events data and re-render if needed * Update all-day events and re-render
*/ */
private updateAllDayEvents(events: AllDayEvent[]): void { private updateAllDayEvents(events: AllDayEvent[]): void {
if (!this.currentWeek) return; console.log(`GridManager: Updating ${events.length} all-day events`);
this.allDayEvents = events.filter(event => event.allDay);
this.render();
}
// Filter all-day events for current week /**
const weekStart = this.currentWeek; * Get current period label from strategy
const weekEnd = new Date(weekStart); */
weekEnd.setDate(weekStart.getDate() + 6); public getCurrentPeriodLabel(): string {
return this.currentStrategy.getPeriodLabel(this.currentDate);
}
this.allDayEvents = events.filter(event => { /**
if (!event.allDay) return false; * Navigate to next period using strategy
*/
public navigateNext(): void {
const nextDate = this.currentStrategy.getNextPeriod(this.currentDate);
this.currentDate = nextDate;
const eventDate = new Date(event.start); eventBus.emit(CoreEvents.PERIOD_CHANGED, {
return eventDate >= weekStart && eventDate <= weekEnd; direction: 'next',
newDate: nextDate,
periodLabel: this.getCurrentPeriodLabel()
}); });
console.log('GridManager: Updated all-day events:', this.allDayEvents.length); this.render();
// Update only the calendar header if grid is already rendered
if (this.grid && this.grid.children.length > 0) {
this.gridRenderer.renderGrid(this.grid, this.currentWeek!, this.resourceData, this.allDayEvents);
}
} }
// CSS management methods moved to GridStyleManager
/** /**
* Setup grid interaction handlers for POC structure * Navigate to previous period using strategy
*/ */
private setupGridInteractions(): void { public navigatePrevious(): void {
if (!this.grid) return; const prevDate = this.currentStrategy.getPreviousPeriod(this.currentDate);
this.currentDate = prevDate;
// Click handler for day columns (works for both date and resource columns) eventBus.emit(CoreEvents.PERIOD_CHANGED, {
this.grid.addEventListener('click', (e: MouseEvent) => { direction: 'previous',
// Ignore if clicking on an event newDate: prevDate,
if ((e.target as Element).closest('swp-event')) return; periodLabel: this.getCurrentPeriodLabel()
const dayColumn = (e.target as Element).closest('swp-day-column, swp-resource-column') as HTMLElement;
if (!dayColumn) return;
const position = this.getClickPosition(e, dayColumn);
eventBus.emit(EventTypes.GRID_CLICK, {
date: (dayColumn as any).dataset.date,
resource: (dayColumn as any).dataset.resource,
employeeId: (dayColumn as any).dataset.employeeId,
time: position.time,
minutes: position.minutes
});
}); });
// Double click handler for day columns this.render();
this.grid.addEventListener('dblclick', (e: MouseEvent) => { }
// Ignore if clicking on an event
if ((e.target as Element).closest('swp-event')) return;
const dayColumn = (e.target as Element).closest('swp-day-column, swp-resource-column') as HTMLElement; /**
if (!dayColumn) return; * Navigate to today
*/
public navigateToToday(): void {
this.currentDate = new Date();
const position = this.getClickPosition(e, dayColumn); eventBus.emit(CoreEvents.DATE_CHANGED, {
newDate: this.currentDate,
eventBus.emit(EventTypes.GRID_DBLCLICK, { periodLabel: this.getCurrentPeriodLabel()
date: (dayColumn as any).dataset.date,
resource: (dayColumn as any).dataset.resource,
employeeId: (dayColumn as any).dataset.employeeId,
time: position.time,
minutes: position.minutes
});
}); });
this.render();
} }
/** /**
* Get click position in day column (POC structure) * Get current view's display dates
*/ */
private getClickPosition(event: MouseEvent, dayColumn: HTMLElement): GridPosition { public getDisplayDates(): Date[] {
const rect = dayColumn.getBoundingClientRect(); return this.currentStrategy.getDisplayDates(this.currentDate);
const y = event.clientY - rect.top;
const gridSettings = calendarConfig.getGridSettings();
const hourHeight = gridSettings.hourHeight;
const minuteHeight = hourHeight / 60;
const snapInterval = gridSettings.snapInterval;
const dayStartHour = gridSettings.dayStartHour;
// Calculate total minutes from day start
let totalMinutes = Math.floor(y / minuteHeight);
// Snap to interval
totalMinutes = Math.round(totalMinutes / snapInterval) * snapInterval;
// Add day start offset
totalMinutes += dayStartHour * 60;
return {
minutes: totalMinutes,
time: this.minutesToTime(totalMinutes),
y: y
};
} }
/** /**
* Scroll to specific hour * Clean up all resources
*/ */
scrollToHour(hour: number): void { public destroy(): void {
if (!this.grid) return; console.log('GridManager: Cleaning up');
const gridSettings = calendarConfig.getGridSettings(); // Clean up event listeners
const hourHeight = gridSettings.hourHeight; this.eventCleanup.forEach(cleanup => cleanup());
const dayStartHour = gridSettings.dayStartHour; this.eventCleanup = [];
const headerHeight = 80; // Header row height
const scrollTop = headerHeight + ((hour - dayStartHour) * hourHeight);
this.grid.scrollTop = scrollTop; // Clean up current strategy
} this.currentStrategy.destroy();
/** // Clear references
* Utility methods this.container = null;
*/ this.allDayEvents = [];
this.resourceData = null;
private minutesToTime(totalMinutes: number): string {
const hours = Math.floor(totalMinutes / 60);
const minutes = totalMinutes % 60;
const period = hours >= 12 ? 'PM' : 'AM';
const displayHour = hours > 12 ? hours - 12 : (hours === 0 ? 12 : hours);
return `${displayHour}:${minutes.toString().padStart(2, '0')} ${period}`;
} }
} }

33
src/renderers/EventRendererManager.ts
View file

@ -1,6 +1,7 @@
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 { EventTypes } from '../constants/EventTypes';
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';
import { EventManager } from '../managers/EventManager'; import { EventManager } from '../managers/EventManager';
@ -54,7 +55,13 @@ 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) => { 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); this.handleGridRendered(event as CustomEvent);
}); });
@ -82,16 +89,32 @@ export class EventRenderingService {
* Handle GRID_RENDERED event - render events in the current grid * Handle GRID_RENDERED event - render events in the current grid
*/ */
private handleGridRendered(event: CustomEvent): void { private handleGridRendered(event: CustomEvent): void {
const { container, startDate, endDate } = event.detail; const { container, startDate, endDate, currentDate } = event.detail;
if (!container) { if (!container) {
console.error('EventRenderer: No container in GRID_RENDERED event', event.detail); console.error('EventRenderer: No container in GRID_RENDERED event', event.detail);
return; return;
} }
// Use period from event or fallback to calculated period let periodStart: Date;
const periodStart = startDate; let periodEnd: Date;
const periodEnd = endDate;
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({ this.renderEvents({
container: container, container: container,

148
src/strategies/MonthViewStrategy.ts Normal file
View file

@ -0,0 +1,148 @@
/**
* MonthViewStrategy - Strategy for month view rendering
* Completely different from week view - no time axis, cell-based events
*/
import { ViewStrategy, ViewContext, ViewLayoutConfig } from './ViewStrategy';
import { DateCalculator } from '../utils/DateCalculator';
import { calendarConfig } from '../core/CalendarConfig';
export class MonthViewStrategy implements ViewStrategy {
private dateCalculator: DateCalculator;
constructor() {
this.dateCalculator = new DateCalculator(calendarConfig);
}
getLayoutConfig(): ViewLayoutConfig {
return {
needsTimeAxis: false, // No time axis in month view!
columnCount: 7, // Always 7 days (Mon-Sun)
scrollable: false, // Month fits in viewport
eventPositioning: 'cell-based' // Events go in day cells
};
}
renderGrid(context: ViewContext): void {
console.group(`📅 MONTH VIEW: Rendering grid for ${context.currentDate.toDateString()}`);
// Clear existing content
context.container.innerHTML = '';
// Create month grid (completely different from week!)
this.createMonthGrid(context);
console.log('Month grid rendered with 7x6 layout');
console.groupEnd();
}
private createMonthGrid(context: ViewContext): void {
const monthGrid = document.createElement('div');
monthGrid.className = 'month-grid';
monthGrid.style.display = 'grid';
monthGrid.style.gridTemplateColumns = 'repeat(7, 1fr)';
monthGrid.style.gridTemplateRows = 'auto repeat(6, 1fr)';
monthGrid.style.height = '100%';
// Add day headers (Mon, Tue, Wed, etc.)
this.createDayHeaders(monthGrid);
// Add 6 weeks of day cells
this.createDayCells(monthGrid, context.currentDate);
// Render events in day cells
this.renderMonthEvents(monthGrid, context.allDayEvents);
context.container.appendChild(monthGrid);
}
private createDayHeaders(container: HTMLElement): void {
const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
dayNames.forEach(dayName => {
const header = document.createElement('div');
header.className = 'month-day-header';
header.textContent = dayName;
header.style.padding = '8px';
header.style.fontWeight = 'bold';
header.style.textAlign = 'center';
header.style.borderBottom = '1px solid #e0e0e0';
container.appendChild(header);
});
}
private createDayCells(container: HTMLElement, monthDate: Date): void {
const dates = this.getMonthDates(monthDate);
dates.forEach(date => {
const cell = document.createElement('div');
cell.className = 'month-day-cell';
cell.dataset.date = this.dateCalculator.formatISODate(date);
cell.style.border = '1px solid #e0e0e0';
cell.style.minHeight = '100px';
cell.style.padding = '4px';
cell.style.position = 'relative';
// Day number
const dayNumber = document.createElement('div');
dayNumber.className = 'month-day-number';
dayNumber.textContent = date.getDate().toString();
dayNumber.style.fontWeight = 'bold';
dayNumber.style.marginBottom = '4px';
// Check if today
if (this.dateCalculator.isToday(date)) {
dayNumber.style.color = '#1976d2';
cell.style.backgroundColor = '#f5f5f5';
}
cell.appendChild(dayNumber);
container.appendChild(cell);
});
}
private getMonthDates(monthDate: Date): Date[] {
// Get first day of month
const firstOfMonth = new Date(monthDate.getFullYear(), monthDate.getMonth(), 1);
// Get Monday of the week containing first day
const startDate = this.dateCalculator.getISOWeekStart(firstOfMonth);
// Generate 42 days (6 weeks)
const dates: Date[] = [];
for (let i = 0; i < 42; i++) {
dates.push(this.dateCalculator.addDays(startDate, i));
}
return dates;
}
private renderMonthEvents(container: HTMLElement, events: any[]): void {
// TODO: Implement month event rendering
// Events will be small blocks in day cells
console.log(`MonthViewStrategy: Would render ${events.length} events`);
}
getNextPeriod(currentDate: Date): Date {
return new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1);
}
getPreviousPeriod(currentDate: Date): Date {
return new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1);
}
getPeriodLabel(date: Date): string {
const monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'];
return `${monthNames[date.getMonth()]} ${date.getFullYear()}`;
}
getDisplayDates(baseDate: Date): Date[] {
return this.getMonthDates(baseDate);
}
destroy(): void {
console.log('MonthViewStrategy: Cleaning up');
}
}

67
src/strategies/ViewStrategy.ts Normal file
View file

@ -0,0 +1,67 @@
/**
* ViewStrategy - Strategy pattern for different calendar view types
* Allows clean separation between week view, month view, day view etc.
*/
import { AllDayEvent } from '../types/EventTypes';
import { ResourceCalendarData } from '../types/CalendarTypes';
/**
* Context object passed to strategy methods
*/
export interface ViewContext {
currentDate: Date;
container: HTMLElement;
allDayEvents: AllDayEvent[];
resourceData: ResourceCalendarData | null;
}
/**
* Layout configuration specific to each view type
*/
export interface ViewLayoutConfig {
needsTimeAxis: boolean;
columnCount: number;
scrollable: boolean;
eventPositioning: 'time-based' | 'cell-based';
}
/**
* Base strategy interface for all view types
*/
export interface ViewStrategy {
/**
* Get the layout configuration for this view
*/
getLayoutConfig(): ViewLayoutConfig;
/**
* Render the grid structure for this view
*/
renderGrid(context: ViewContext): void;
/**
* Calculate next period for navigation
*/
getNextPeriod(currentDate: Date): Date;
/**
* Calculate previous period for navigation
*/
getPreviousPeriod(currentDate: Date): Date;
/**
* Get display label for current period
*/
getPeriodLabel(date: Date): string;
/**
* Get the dates that should be displayed in this view
*/
getDisplayDates(baseDate: Date): Date[];
/**
* Clean up any view-specific resources
*/
destroy(): void;
}

75
src/strategies/WeekViewStrategy.ts Normal file
View 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');
}
}

2
wwwroot/index.html
View file

@ -46,7 +46,7 @@
<swp-view-selector> <swp-view-selector>
<swp-view-button data-view="day">Day</swp-view-button> <swp-view-button data-view="day">Day</swp-view-button>
<swp-view-button data-view="week" data-active="true">Week</swp-view-button> <swp-view-button data-view="week" data-active="true">Week</swp-view-button>
<swp-view-button data-view="month" disabled>Month</swp-view-button> <swp-view-button data-view="month">Month</swp-view-button>
</swp-view-selector> </swp-view-selector>
<swp-workweek-presets> <swp-workweek-presets>