2083c6921e
Streamlines calendar configuration by adopting a singleton pattern for consistent access and simplifies event handling.
- Removes direct `CalendarConfig` dependency injection in favor of the `calendarConfig` singleton, reducing code complexity.
- Replaces specific event emissions for grid, date, and resource settings updates with a general `REFRESH_REQUESTED` event.
- Updates event names to be more descriptive and consistent ("NAVIGATION_COMPLETED", "PERIOD_INFO_UPDATE").
- Removes the need to pass the calendar config to renderers since it is now a singleton.
This improves code maintainability and simplifies the event emission process.
104 lines
No EOL
3.3 KiB
TypeScript
104 lines
No EOL
3.3 KiB
TypeScript
// Column rendering strategy interface and implementations
|
|
|
|
import { CalendarConfig } from '../core/CalendarConfig';
|
|
import { ResourceCalendarData } from '../types/CalendarTypes';
|
|
import { DateCalculator } from '../utils/DateCalculator';
|
|
import { WorkHoursManager } from '../managers/WorkHoursManager';
|
|
|
|
/**
|
|
* 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 {
|
|
private dateCalculator!: DateCalculator;
|
|
private workHoursManager!: WorkHoursManager;
|
|
|
|
render(columnContainer: HTMLElement, context: ColumnRenderContext): void {
|
|
const { currentWeek, config } = context;
|
|
|
|
// Initialize date calculator and work hours manager
|
|
DateCalculator.initialize(config);
|
|
this.dateCalculator = new DateCalculator();
|
|
this.workHoursManager = new WorkHoursManager();
|
|
|
|
const dates = DateCalculator.getWorkWeekDates(currentWeek);
|
|
const dateSettings = config.getDateViewSettings();
|
|
const daysToShow = dates.slice(0, dateSettings.weekDays);
|
|
|
|
|
|
daysToShow.forEach((date) => {
|
|
const column = document.createElement('swp-day-column');
|
|
(column as any).dataset.date = DateCalculator.formatISODate(date);
|
|
|
|
// Apply work hours styling
|
|
this.applyWorkHoursToColumn(column, date);
|
|
|
|
const eventsLayer = document.createElement('swp-events-layer');
|
|
column.appendChild(eventsLayer);
|
|
|
|
columnContainer.appendChild(column);
|
|
});
|
|
}
|
|
|
|
private applyWorkHoursToColumn(column: HTMLElement, date: Date): void {
|
|
const workHours = this.workHoursManager.getWorkHoursForDate(date);
|
|
|
|
if (workHours === 'off') {
|
|
// No work hours - mark as off day (full day will be colored)
|
|
(column as any).dataset.workHours = 'off';
|
|
} else {
|
|
// Calculate and apply non-work hours overlays (before and after work)
|
|
const nonWorkStyle = this.workHoursManager.calculateNonWorkHoursStyle(workHours);
|
|
if (nonWorkStyle) {
|
|
// Before work overlay (::before pseudo-element)
|
|
column.style.setProperty('--before-work-height', `${nonWorkStyle.beforeWorkHeight}px`);
|
|
|
|
// After work overlay (::after pseudo-element)
|
|
column.style.setProperty('--after-work-top', `${nonWorkStyle.afterWorkTop}px`);
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
/**
|
|
* Resource-based column renderer
|
|
*/
|
|
export class ResourceColumnRenderer implements ColumnRenderer {
|
|
render(columnContainer: HTMLElement, context: ColumnRenderContext): void {
|
|
const { resourceData } = context;
|
|
|
|
if (!resourceData) {
|
|
return;
|
|
}
|
|
|
|
|
|
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);
|
|
});
|
|
}
|
|
} |