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

Introduces uniform column key concept for calendar events

Browse source 
Refactors column identification with a new buildColumnKey method to support flexible date and resource tracking

Replaces separate dateKey and resourceId handling with a unified columnKey approach
Improves column rendering and event management with more consistent key generation
Simplifies cross-component event tracking and column lookups
This commit is contained in:
Janus C. H. Knudsen 2025-12-13 11:46:57 +01:00
parent 7da88bb977
commit 0eb3bacb41
9 changed files with 99 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/v2/features/date/DateRenderer.ts
View file

@ -19,9 +19,15 @@ export class DateRenderer implements IRenderer {
for (const dateStr of dates) {
const date = this.dateService.parseISO(dateStr);
// Build columnKey for uniform identification
const segments: Record<string, string> = { date: dateStr };
if (resourceId) segments.resource = resourceId;
const columnKey = this.dateService.buildColumnKey(segments);
// Header
const header = document.createElement('swp-day-header');
header.dataset.date = dateStr;
header.dataset.columnKey = columnKey;
if (resourceId) {
header.dataset.resourceId = resourceId;
}
@ -34,6 +40,7 @@ export class DateRenderer implements IRenderer {
// Column
const column = document.createElement('swp-day-column');
column.dataset.date = dateStr;
column.dataset.columnKey = columnKey;
if (resourceId) {
column.dataset.resourceId = resourceId;
}

34
src/v2/features/event/EventRenderer.ts
View file

@ -116,22 +116,24 @@ export class EventRenderer {
*/
private async handleEventUpdated(payload: IEventUpdatedPayload): Promise<void> {
// Re-render source column (if different from target)
if (payload.sourceDateKey !== payload.targetDateKey ||
payload.sourceResourceId !== payload.targetResourceId) {
await this.rerenderColumn(payload.sourceDateKey, payload.sourceResourceId);
if (payload.sourceColumnKey !== payload.targetColumnKey) {
await this.rerenderColumn(payload.sourceColumnKey);
}
// Re-render target column
await this.rerenderColumn(payload.targetDateKey, payload.targetResourceId);
await this.rerenderColumn(payload.targetColumnKey);
}
/**
* Re-render a single column with fresh data from IndexedDB
*/
private async rerenderColumn(dateKey: string, resourceId?: string): Promise<void> {
const column = this.findColumn(dateKey, resourceId);
private async rerenderColumn(columnKey: string): Promise<void> {
const column = this.findColumn(columnKey);
if (!column) return;
// Parse dateKey and resourceId from columnKey
const { date: dateKey, resource: resourceId } = this.dateService.parseColumnKey(columnKey);
// Get date range for this day
const startDate = new Date(dateKey);
const endDate = new Date(dateKey);
@ -174,25 +176,11 @@ export class EventRenderer {
}
/**
* Find a column element by dateKey and optional resourceId
* Find a column element by columnKey
*/
private findColumn(dateKey: string, resourceId?: string): HTMLElement | null {
private findColumn(columnKey: string): HTMLElement | null {
if (!this.container) return null;
const columns = this.container.querySelectorAll('swp-day-column');
for (const col of columns) {
const colEl = col as HTMLElement;
if (colEl.dataset.date !== dateKey) continue;
// If resourceId specified, must match
if (resourceId && colEl.dataset.resourceId !== resourceId) continue;
// If no resourceId specified but column has one, skip (simple view case)
if (!resourceId && colEl.dataset.resourceId) continue;
return colEl;
}
return null;
return this.container.querySelector(`swp-day-column[data-column-key="${columnKey}"]`) as HTMLElement;
}
/**