Renaming part 1

src/renderers/HeaderRenderer.ts

@@ -0,0 +1,158 @@
+// Header rendering strategy interface and implementations
+
+import { CalendarConfig } from '../core/CalendarConfig';
+import { ResourceCalendarData } from '../types/CalendarTypes';
+
+/**
+ * Interface for header rendering strategies
+ */
+export interface HeaderRenderer {
+  render(weekHeader: HTMLElement, context: HeaderRenderContext): void;
+}
+
+/**
+ * Context for header rendering
+ */
+export interface HeaderRenderContext {
+  currentWeek: Date;
+  config: CalendarConfig;
+  allDayEvents?: any[];
+  resourceData?: ResourceCalendarData | null;
+}
+
+/**
+ * Date-based header renderer (original functionality)
+ */
+export class DateHeaderRenderer implements HeaderRenderer {
+  render(weekHeader: HTMLElement, context: HeaderRenderContext): void {
+    const { currentWeek, config, allDayEvents = [] } = context;
+    
+    const dates = this.getWeekDates(currentWeek);
+    const weekDays = config.get('weekDays');
+    const daysToShow = dates.slice(0, weekDays);
+
+    daysToShow.forEach((date) => {
+      const header = document.createElement('swp-day-header');
+      if (this.isToday(date)) {
+        (header as any).dataset.today = 'true';
+      }
+      
+      header.innerHTML = `
+        <swp-day-name>${this.getDayName(date)}</swp-day-name>
+        <swp-day-date>${date.getDate()}</swp-day-date>
+      `;
+      (header as any).dataset.date = this.formatDate(date);
+      
+      weekHeader.appendChild(header);
+    });
+
+    // Render all-day events in row 2
+    this.renderAllDayEvents(weekHeader, context);
+  }
+
+  private renderAllDayEvents(weekHeader: HTMLElement, context: HeaderRenderContext): void {
+    const { currentWeek, config, allDayEvents = [] } = context;
+    
+    const dates = this.getWeekDates(currentWeek);
+    const weekDays = config.get('weekDays');
+    const daysToShow = dates.slice(0, weekDays);
+
+    // Process each all-day event to calculate its span
+    allDayEvents.forEach(event => {
+      const startDate = new Date(event.start);
+      const endDate = new Date(event.end);
+      
+      // Find start and end column indices
+      let startColumnIndex = -1;
+      let endColumnIndex = -1;
+      
+      daysToShow.forEach((date, index) => {
+        const dateStr = this.formatDate(date);
+        const startDateStr = this.formatDate(startDate);
+        
+        if (dateStr === startDateStr) {
+          startColumnIndex = index;
+        }
+        
+        // For end date, we need to check if the event spans to this day
+        if (date <= endDate) {
+          endColumnIndex = index;
+        }
+      });
+      
+      // Only render if the event starts within the visible week
+      if (startColumnIndex >= 0) {
+        // If end column is not found or is before start, default to single day
+        if (endColumnIndex < startColumnIndex) {
+          endColumnIndex = startColumnIndex;
+        }
+        
+        const allDayEvent = document.createElement('swp-allday-event');
+        allDayEvent.textContent = event.title;
+        
+        // Set grid column span: start column (1-based) to end column + 1 (1-based)
+        const gridColumnStart = startColumnIndex + 1;
+        const gridColumnEnd = endColumnIndex + 2;
+        allDayEvent.style.gridColumn = `${gridColumnStart} / ${gridColumnEnd}`;
+        allDayEvent.style.backgroundColor = event.metadata?.color || '#ff9800';
+        
+        weekHeader.appendChild(allDayEvent);
+      }
+    });
+  }
+
+  private getWeekDates(weekStart: Date): Date[] {
+    const dates: Date[] = [];
+    for (let i = 0; i < 7; i++) {
+      const date = new Date(weekStart);
+      date.setDate(weekStart.getDate() + i);
+      dates.push(date);
+    }
+    return dates;
+  }
+
+  private isToday(date: Date): boolean {
+    const today = new Date();
+    return date.toDateString() === today.toDateString();
+  }
+
+  private formatDate(date: Date): string {
+    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+  }
+
+  private getDayName(date: Date): string {
+    const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+    return days[date.getDay()];
+  }
+}
+
+/**
+ * Resource-based header renderer
+ */
+export class ResourceHeaderRenderer implements HeaderRenderer {
+  render(weekHeader: HTMLElement, context: HeaderRenderContext): void {
+    const { resourceData } = context;
+    
+    if (!resourceData) {
+      console.warn('ResourceHeaderRenderer: No resource data available for resource headers');
+      return;
+    }
+
+    resourceData.resources.forEach((resource) => {
+      const header = document.createElement('swp-resource-header');
+      header.setAttribute('data-resource', resource.name);
+      header.setAttribute('data-employee-id', resource.employeeId);
+      
+      header.innerHTML = `
+        <swp-resource-avatar>
+          <img src="${resource.avatarUrl}" alt="${resource.displayName}" onerror="this.style.display='none'">
+        </swp-resource-avatar>
+        <swp-resource-name>${resource.displayName}</swp-resource-name>
+      `;
+      
+      weekHeader.appendChild(header);
+    });
+
+    console.log(`ResourceHeaderRenderer: Rendered ${resourceData.resources.length} resource headers`);
+  }
+}