// Column rendering strategy interface and implementations import { CalendarConfig } from '../core/CalendarConfig'; import { ResourceCalendarData } from '../types/CalendarTypes'; /** * Interface for column rendering strategies */ export interface ColumnRenderer { render(columnContainer: HTMLElement, context: ColumnRenderContext): void; } /** * Context for column rendering */ export interface ColumnRenderContext { currentWeek: Date; config: CalendarConfig; resourceData?: ResourceCalendarData | null; } /** * Date-based column renderer (original functionality) */ export class DateColumnRenderer implements ColumnRenderer { render(columnContainer: HTMLElement, context: ColumnRenderContext): void { const { currentWeek, config } = context; const dates = this.getWeekDates(currentWeek, config); const dateSettings = config.getDateViewSettings(); const daysToShow = dates.slice(0, dateSettings.weekDays); console.log('DateColumnRenderer: About to render', daysToShow.length, 'date columns'); daysToShow.forEach((date) => { const column = document.createElement('swp-day-column'); (column as any).dataset.date = this.formatDate(date); const eventsLayer = document.createElement('swp-events-layer'); column.appendChild(eventsLayer); columnContainer.appendChild(column); }); } private getWeekDates(weekStart: Date, config: CalendarConfig): Date[] { const dates: Date[] = []; const workWeekSettings = config.getWorkWeekSettings(); // Calculate dates based on actual work days (e.g., [1,2,3,4] for Mon-Thu) workWeekSettings.workDays.forEach(dayOfWeek => { const date = new Date(weekStart); // Set to the start of the week (Sunday = 0) date.setDate(weekStart.getDate() - weekStart.getDay()); // Add the specific day of week date.setDate(date.getDate() + dayOfWeek); dates.push(date); }); return dates; } private formatDate(date: Date): string { return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`; } } /** * Resource-based column renderer */ export class ResourceColumnRenderer implements ColumnRenderer { render(columnContainer: HTMLElement, context: ColumnRenderContext): void { const { resourceData } = context; if (!resourceData) { console.warn('ResourceColumnRenderer: No resource data available for resource columns'); return; } console.log('ResourceColumnRenderer: About to render', resourceData.resources.length, 'resource columns'); resourceData.resources.forEach((resource) => { const column = document.createElement('swp-resource-column'); (column as any).dataset.resource = resource.name; (column as any).dataset.employeeId = resource.employeeId; (column as any).dataset.date = resourceData.date; const eventsLayer = document.createElement('swp-events-layer'); column.appendChild(eventsLayer); columnContainer.appendChild(column); }); } }