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

Remove resource calendar mode support

Browse source 
Simplifies calendar configuration and removes resource-specific code paths

Eliminates complexity around resource-based calendar rendering by:
- Removing ResourceCalendarData type
- Removing resource-specific renderers and managers
- Streamlining event and grid management logic
- Consolidating to single date-based calendar implementation
This commit is contained in:
Janus C. H. Knudsen 2025-11-01 01:10:10 +01:00
parent 349e1e8293
commit cda201301c
16 changed files with 65 additions and 323 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/renderers/ColumnRenderer.ts
View file

@ -1,7 +1,6 @@
// Column rendering strategy interface and implementations
import { CalendarConfig } from '../core/CalendarConfig';
import { ResourceCalendarData } from '../types/CalendarTypes';
import { DateService } from '../utils/DateService';
import { WorkHoursManager } from '../managers/WorkHoursManager';
@ -18,7 +17,6 @@ export interface ColumnRenderer {
export interface ColumnRenderContext {
currentWeek: Date;
config: CalendarConfig;
resourceData?: ResourceCalendarData | null;
}
/**
@ -80,29 +78,3 @@ export class DateColumnRenderer implements ColumnRenderer {
}
}
/**
* 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);
});
}
}

24
src/renderers/GridRenderer.ts
View file

@ -1,5 +1,5 @@
import { CalendarConfig } from '../core/CalendarConfig';
import { ResourceCalendarData, CalendarView } from '../types/CalendarTypes';
import { CalendarView } from '../types/CalendarTypes';
import { ColumnRenderer, ColumnRenderContext } from './ColumnRenderer';
import { eventBus } from '../core/EventBus';
import { DateService } from '../utils/DateService';
@ -30,7 +30,6 @@ export class GridRenderer {
public renderGrid(
grid: HTMLElement,
currentDate: Date,
resourceData: ResourceCalendarData | null,
view: CalendarView = 'week'
): void {
@ -43,12 +42,12 @@ export class GridRenderer {
// Only clear and rebuild if grid is empty (first render)
if (grid.children.length === 0) {
this.createCompleteGridStructure(grid, currentDate, resourceData, view);
this.createCompleteGridStructure(grid, currentDate, view);
// Setup grid-related event listeners on first render
// this.setupGridEventListeners();
} else {
// Optimized update - only refresh dynamic content
this.updateGridContent(grid, currentDate, resourceData, view);
this.updateGridContent(grid, currentDate, view);
}
}
@ -58,7 +57,6 @@ export class GridRenderer {
private createCompleteGridStructure(
grid: HTMLElement,
currentDate: Date,
resourceData: ResourceCalendarData | null,
view: CalendarView
): void {
// Create all elements in memory first for better performance
@ -74,7 +72,7 @@ export class GridRenderer {
fragment.appendChild(timeAxis);
// Create grid container with caching
const gridContainer = this.createOptimizedGridContainer(currentDate, resourceData, view);
const gridContainer = this.createOptimizedGridContainer(currentDate, view);
this.cachedGridContainer = gridContainer;
fragment.appendChild(gridContainer);
@ -105,7 +103,6 @@ export class GridRenderer {
private createOptimizedGridContainer(
currentDate: Date,
resourceData: ResourceCalendarData | null,
view: CalendarView
): HTMLElement {
const gridContainer = document.createElement('swp-grid-container');
@ -124,7 +121,7 @@ export class GridRenderer {
// Create column container
const columnContainer = document.createElement('swp-day-columns');
this.renderColumnContainer(columnContainer, currentDate, resourceData, view);
this.renderColumnContainer(columnContainer, currentDate, view);
timeGrid.appendChild(columnContainer);
scrollableContent.appendChild(timeGrid);
@ -142,13 +139,11 @@ export class GridRenderer {
private renderColumnContainer(
columnContainer: HTMLElement,
currentDate: Date,
resourceData: ResourceCalendarData | null,
view: CalendarView
): void {
const context: ColumnRenderContext = {
currentWeek: currentDate, // ColumnRenderer expects currentWeek property
config: this.config,
resourceData: resourceData
config: this.config
};
this.columnRenderer.render(columnContainer, context);
@ -160,14 +155,13 @@ export class GridRenderer {
private updateGridContent(
grid: HTMLElement,
currentDate: Date,
resourceData: ResourceCalendarData | null,
view: CalendarView
): void {
// Update column container if needed
const columnContainer = grid.querySelector('swp-day-columns');
if (columnContainer) {
columnContainer.innerHTML = '';
this.renderColumnContainer(columnContainer as HTMLElement, currentDate, resourceData, view);
this.renderColumnContainer(columnContainer as HTMLElement, currentDate, view);
}
}
/**
@ -182,8 +176,8 @@ export class GridRenderer {
const weekEnd = this.dateService.addDays(weekStart, 6);
// Use SAME method as initial load - respects workweek and resource settings
const newGrid = this.createOptimizedGridContainer(weekStart, null, 'week');
// Use SAME method as initial load - respects workweek settings
const newGrid = this.createOptimizedGridContainer(weekStart, 'week');
// Position new grid for animation - NO transform here, let Animation API handle it
newGrid.style.position = 'absolute';

50
src/renderers/GridStyleManager.ts
View file

@ -1,5 +1,4 @@
import { CalendarConfig } from '../core/CalendarConfig';
import { ResourceCalendarData } from '../types/CalendarTypes';
interface GridSettings {
hourHeight: number;
@ -25,27 +24,26 @@ export class GridStyleManager {
/**
* Update all grid CSS variables
*/
public updateGridStyles(resourceData: ResourceCalendarData | null = null): void {
public updateGridStyles(): void {
const root = document.documentElement;
const gridSettings = this.config.getGridSettings();
const calendar = document.querySelector('swp-calendar') as HTMLElement;
const calendarType = this.config.getCalendarMode();
// Set CSS variables for time and grid measurements
this.setTimeVariables(root, gridSettings);
// Set column count based on calendar type
const columnCount = this.calculateColumnCount(calendarType, resourceData);
// Set column count based on view
const columnCount = this.calculateColumnCount();
root.style.setProperty('--grid-columns', columnCount.toString());
// Set column width based on fitToWidth setting
this.setColumnWidth(root, gridSettings);
// Set fitToWidth data attribute for CSS targeting
if (calendar) {
calendar.setAttribute('data-fit-to-width', gridSettings.fitToWidth.toString());
}
}
/**
@ -63,28 +61,22 @@ export class GridStyleManager {
}
/**
* Calculate number of columns based on calendar type and view
* Calculate number of columns based on view
*/
private calculateColumnCount(calendarType: string, resourceData: ResourceCalendarData | null): number {
if (calendarType === 'resource' && resourceData) {
return resourceData.resources.length;
} else if (calendarType === 'date') {
const dateSettings = this.config.getDateViewSettings();
const workWeekSettings = this.config.getWorkWeekSettings();
private calculateColumnCount(): number {
const dateSettings = this.config.getDateViewSettings();
const workWeekSettings = this.config.getWorkWeekSettings();
switch (dateSettings.period) {
case 'day':
return 1;
case 'week':
return workWeekSettings.totalDays;
case 'month':
return workWeekSettings.totalDays; // Use work week for month view too
default:
return workWeekSettings.totalDays;
}
switch (dateSettings.period) {
case 'day':
return 1;
case 'week':
return workWeekSettings.totalDays;
case 'month':
return workWeekSettings.totalDays; // Use work week for month view too
default:
return workWeekSettings.totalDays;
}
return this.config.getWorkWeekSettings().totalDays; // Default to work week
}
/**

30
src/renderers/HeaderRenderer.ts
View file

@ -1,7 +1,6 @@
// Header rendering strategy interface and implementations
import { CalendarConfig } from '../core/CalendarConfig';
import { ResourceCalendarData } from '../types/CalendarTypes';
import { DateService } from '../utils/DateService';
/**
@ -18,7 +17,6 @@ export interface HeaderRenderer {
export interface HeaderRenderContext {
currentWeek: Date;
config: CalendarConfig;
resourceData?: ResourceCalendarData | null;
}
/**
@ -58,34 +56,6 @@ export class DateHeaderRenderer implements HeaderRenderer {
`;
(header as any).dataset.date = this.dateService.formatISODate(date);
calendarHeader.appendChild(header);
});
}
}
/**
* Resource-based header renderer
*/
export class ResourceHeaderRenderer implements HeaderRenderer {
render(calendarHeader: HTMLElement, context: HeaderRenderContext): void {
const { resourceData } = context;
if (!resourceData) {
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>
`;
calendarHeader.appendChild(header);
});
}