From ad2df353b5b00df7671306c638161660cd530a37 Mon Sep 17 00:00:00 2001 From: "Janus C. H. Knudsen" Date: Mon, 15 Dec 2025 22:24:32 +0100 Subject: [PATCH] Adds workweek settings and dynamic view configuration Introduces settings service for managing tenant-specific calendar configurations Enables dynamic workweek presets with configurable work days Improves view switching with enhanced UI components Adds flexible calendar rendering based on tenant settings Extends DateService to support workweek date generation --- docs/filter-template-spec.md | 342 ++++++++++++++++++ src/v2/V2CompositionRoot.ts | 12 + src/v2/core/DateService.ts | 15 + src/v2/demo/DemoApp.ts | 59 +-- src/v2/repositories/MockSettingsRepository.ts | 47 +++ src/v2/storage/IndexedDBContext.ts | 2 +- src/v2/storage/settings/SettingsService.ts | 60 +++ src/v2/storage/settings/SettingsStore.ts | 16 + src/v2/types/CalendarTypes.ts | 2 +- src/v2/types/SettingsTypes.ts | 72 ++++ wwwroot/css/v2/calendar-v2-layout.css | 69 +++- wwwroot/data/tenant-settings.json | 57 +++ wwwroot/v2.html | 36 +- 13 files changed, 751 insertions(+), 38 deletions(-) create mode 100644 docs/filter-template-spec.md create mode 100644 src/v2/repositories/MockSettingsRepository.ts create mode 100644 src/v2/storage/settings/SettingsService.ts create mode 100644 src/v2/storage/settings/SettingsStore.ts create mode 100644 src/v2/types/SettingsTypes.ts create mode 100644 wwwroot/data/tenant-settings.json diff --git a/docs/filter-template-spec.md b/docs/filter-template-spec.md new file mode 100644 index 0000000..d709bd7 --- /dev/null +++ b/docs/filter-template-spec.md @@ -0,0 +1,342 @@ +# FilterTemplate & Grouping System Specification + +> **Version:** 1.0 +> **Dato:** 2025-12-15 +> **Status:** Godkendt + +## Formål + +Dette dokument specificerer hvordan kalenderen matcher events til kolonner i alle view-typer (Simple, Dag, Resource, Team, Department). Formålet er at sikre konsistent opførsel og undgå fremtidige hacks. + +--- + +## Kerneprincipper + +### 1. Én sandhedskilde for key-format + +**FilterTemplate** er den ENESTE kilde til key-format for event-kolonne matching. + +``` +KORREKT: filterTemplate.buildKeyFromColumn(column) +KORREKT: filterTemplate.buildKeyFromEvent(event) +FORKERT: column.dataset.columnKey (bruger DateService-format) +FORKERT: Manuel key-konstruktion med string concatenation +``` + +### 2. Fields-rækkefølge bestemmer key-format + +Keys bygges fra `fields` array i samme rækkefølge som defineret i ViewConfig groupings. + +```typescript +// ViewConfig groupings: [resource, date] +// Resultat: "EMP001:2025-12-09" + +// ViewConfig groupings: [date, resource] +// Resultat: "2025-12-09:EMP001" +``` + +### 3. Kolonner og events bruger SAMME template + +```typescript +// Opret template fra ViewConfig +const filterTemplate = new FilterTemplate(dateService); +for (const grouping of viewConfig.groupings) { + if (grouping.idProperty) { + filterTemplate.addField(grouping.idProperty, grouping.derivedFrom); + } +} + +// Brug til BÅDE kolonner og events +const columnKey = filterTemplate.buildKeyFromColumn(column); +const eventKey = filterTemplate.buildKeyFromEvent(event); +const matches = columnKey === eventKey; +``` + +--- + +## API Kontrakt + +### FilterTemplate + +```typescript +class FilterTemplate { + constructor(dateService: DateService, entityResolver?: IEntityResolver) + + // Tilføj felt til template + addField(idProperty: string, derivedFrom?: string): this + + // Byg key fra kolonne (læser fra dataset) + buildKeyFromColumn(column: HTMLElement): string + + // Byg key fra event (læser fra event properties) + buildKeyFromEvent(event: ICalendarEvent): string + + // Convenience: matcher event mod kolonne + matches(event: ICalendarEvent, column: HTMLElement): boolean +} +``` + +### Field Definition + +| Parameter | Type | Beskrivelse | +|-----------|------|-------------| +| `idProperty` | `string` | Property-navn på event ELLER dot-notation | +| `derivedFrom` | `string?` | Kilde-property hvis værdi skal udledes | + +### Dot-Notation + +For hierarkiske relationer bruges dot-notation: + +```typescript +idProperty: 'resource.teamId' +// Betyder: event.resourceId → opslag i resource → teamId +``` + +**Convention:** `{entityType}.{property}` → foreignKey er `{entityType}Id` + +--- + +## Kolonne Dataset Krav + +Kolonner (`swp-day-column`) SKAL have dataset-attributter for alle felter i template: + +```html + + + + + + + + + + +``` + +### Dataset Key Mapping + +| idProperty | Dataset Key | Eksempel | +|------------|-------------|----------| +| `date` | `data-date` | `"2025-12-09"` | +| `resourceId` | `data-resource-id` | `"EMP001"` | +| `resource.teamId` | `data-team-id` | `"team-1"` | + +**Regel:** Dot-notation bruger sidste segment som dataset-key. + +--- + +## Event Property Krav + +Events SKAL have properties der matcher template fields: + +```typescript +interface ICalendarEvent { + id: string; + start: Date; // derivedFrom: 'start' → date key + end: Date; + resourceId?: string; // Direkte match + // ... andre properties +} +``` + +### Derived Values + +| idProperty | derivedFrom | Transformation | +|------------|-------------|----------------| +| `date` | `start` | `Date → "YYYY-MM-DD"` | + +--- + +## ViewConfig Groupings + +### Struktur + +```typescript +interface GroupingConfig { + type: string; // 'date', 'resource', 'team', 'department' + values: string[]; // Synlige værdier + idProperty?: string; // Felt til key-matching + derivedFrom?: string; // Kilde hvis udledt + belongsTo?: string; // Parent-child relation +} +``` + +### Eksempler + +```typescript +// Simple view +groupings: [ + { type: 'date', values: ['2025-12-09', ...], idProperty: 'date', derivedFrom: 'start' } +] + +// Resource view +groupings: [ + { type: 'resource', values: ['EMP001', 'EMP002'], idProperty: 'resourceId' }, + { type: 'date', values: ['2025-12-09', ...], idProperty: 'date', derivedFrom: 'start' } +] + +// Team view +groupings: [ + { type: 'team', values: ['team-1', 'team-2'], idProperty: 'resource.teamId' }, + { type: 'resource', values: ['EMP001', ...], idProperty: 'resourceId', belongsTo: 'team.resourceIds' }, + { type: 'date', values: ['2025-12-09', ...], idProperty: 'date', derivedFrom: 'start' } +] +``` + +--- + +## BelongsTo Resolution + +### Formål + +`belongsTo` definerer parent-child relationer for nested groupings. + +### Syntax + +``` +belongsTo: '{parentEntityType}.{childArrayProperty}' +``` + +### Eksempel + +```typescript +// Team har resourceIds array +{ type: 'resource', belongsTo: 'team.resourceIds' } + +// Resolver: +// 1. Hent team entities fra filter['team'] +// 2. For hver team, læs team.resourceIds +// 3. Byg map: { 'team-1': ['EMP001', 'EMP002'], 'team-2': ['EMP003'] } +``` + +### Implementering + +```typescript +// CalendarOrchestrator.resolveBelongsTo() +const [entityType, property] = belongsTo.split('.'); +const service = entityServices.find(s => s.entityType === entityType); +const entities = await service.getAll(); +// Byg parent-child map +``` + +--- + +## HeaderDrawerRenderer Regler + +### Key Matching for AllDay Events + +```typescript +// KORREKT: Brug FilterTemplate +private getVisibleColumnKeysFromDOM(): string[] { + const columns = document.querySelectorAll('swp-day-column'); + return Array.from(columns).map(col => + this.filterTemplate.buildKeyFromColumn(col as HTMLElement) + ); +} + +// FORKERT: Læs dataset.columnKey direkte +// (bruger DateService-format som ikke matcher FilterTemplate) +``` + +### Layout Beregning + +1. Hent synlige columnKeys via `getVisibleColumnKeysFromDOM()` +2. For hver event, byg key via `filterTemplate.buildKeyFromEvent(event)` +3. Find kolonne-index via `columnKeys.indexOf(eventKey)` +4. Beregn row via track-algoritme + +--- + +## Anti-Patterns (UNDGÅ) + +### 1. Manuel Key Konstruktion + +```typescript +// FORKERT +const key = `${resourceId}:${dateStr}`; + +// KORREKT +const key = filterTemplate.buildKeyFromEvent(event); +``` + +### 2. Direkte Dataset Læsning for Matching + +```typescript +// FORKERT +const columnKey = column.dataset.columnKey; + +// KORREKT +const columnKey = filterTemplate.buildKeyFromColumn(column); +``` + +### 3. Hardcoded Field Order + +```typescript +// FORKERT +const key = [event.resourceId, dateStr].join(':'); + +// KORREKT +// Lad FilterTemplate håndtere rækkefølge fra ViewConfig +``` + +### 4. Separate Key-Formater + +```typescript +// FORKERT: DateService til kolonner, FilterTemplate til events +DateService.buildColumnKey(segments) // "2025-12-09:EMP001" +FilterTemplate.buildKeyFromEvent(e) // "EMP001:2025-12-09" + +// KORREKT: FilterTemplate til begge +FilterTemplate.buildKeyFromColumn(col) +FilterTemplate.buildKeyFromEvent(event) +``` + +--- + +## Testcases + +### TC1: Simple View Matching + +``` +Given: ViewConfig med [date] grouping +When: Event har start=2025-12-09 +Then: Event matcher kolonne med data-date="2025-12-09" +``` + +### TC2: Resource View Matching + +``` +Given: ViewConfig med [resource, date] groupings +When: Event har resourceId=EMP001, start=2025-12-09 +Then: Event matcher kolonne med data-resource-id="EMP001" OG data-date="2025-12-09" +``` + +### TC3: Team View Matching + +``` +Given: ViewConfig med [team, resource, date] groupings + Resource EMP001 tilhører team-1 +When: Event har resourceId=EMP001, start=2025-12-09 +Then: Event matcher kolonne med data-team-id="team-1" OG data-resource-id="EMP001" OG data-date="2025-12-09" +``` + +### TC4: Multi-Day Event + +``` +Given: Event spænder 2025-12-09 til 2025-12-11 +When: HeaderDrawerRenderer beregner layout +Then: Event vises fra kolonne 09 til kolonne 11 (inclusive) +``` + +--- + +## Ændringslog + +| Version | Dato | Ændring | +|---------|------|---------| +| 1.0 | 2025-12-15 | Initial specifikation | diff --git a/src/v2/V2CompositionRoot.ts b/src/v2/V2CompositionRoot.ts index db696f0..b8728f9 100644 --- a/src/v2/V2CompositionRoot.ts +++ b/src/v2/V2CompositionRoot.ts @@ -35,6 +35,9 @@ import { TeamStore } from './storage/teams/TeamStore'; import { TeamService } from './storage/teams/TeamService'; import { DepartmentStore } from './storage/departments/DepartmentStore'; import { DepartmentService } from './storage/departments/DepartmentService'; +import { SettingsStore } from './storage/settings/SettingsStore'; +import { SettingsService } from './storage/settings/SettingsService'; +import { ITenantSettings } from './types/SettingsTypes'; // Audit import { AuditStore } from './storage/audit/AuditStore'; @@ -50,6 +53,7 @@ import { MockCustomerRepository } from './repositories/MockCustomerRepository'; import { MockAuditRepository } from './repositories/MockAuditRepository'; import { MockTeamRepository } from './repositories/MockTeamRepository'; import { MockDepartmentRepository } from './repositories/MockDepartmentRepository'; +import { MockSettingsRepository } from './repositories/MockSettingsRepository'; // Workers import { DataSeeder } from './workers/DataSeeder'; @@ -113,6 +117,7 @@ export function createV2Container(): Container { builder.registerType(DepartmentStore).as(); builder.registerType(ScheduleOverrideStore).as(); builder.registerType(AuditStore).as(); + builder.registerType(SettingsStore).as(); // Entity services (for DataSeeder polymorphic array) builder.registerType(EventService).as>(); @@ -139,6 +144,10 @@ export function createV2Container(): Container { builder.registerType(DepartmentService).as>(); builder.registerType(DepartmentService).as(); + builder.registerType(SettingsService).as>(); + builder.registerType(SettingsService).as>(); + builder.registerType(SettingsService).as(); + // Repositories (for DataSeeder polymorphic array) builder.registerType(MockEventRepository).as>(); builder.registerType(MockEventRepository).as>(); @@ -161,6 +170,9 @@ export function createV2Container(): Container { builder.registerType(MockDepartmentRepository).as>(); builder.registerType(MockDepartmentRepository).as>(); + builder.registerType(MockSettingsRepository).as>(); + builder.registerType(MockSettingsRepository).as>(); + // Audit service (listens to ENTITY_SAVED/DELETED events automatically) builder.registerType(AuditService).as(); diff --git a/src/v2/core/DateService.ts b/src/v2/core/DateService.ts index f230378..760388a 100644 --- a/src/v2/core/DateService.ts +++ b/src/v2/core/DateService.ts @@ -48,6 +48,21 @@ export class DateService { ); } + /** + * Get dates for specific weekdays within a week + * @param offset - Week offset from base date (0 = current week) + * @param workDays - Array of ISO weekday numbers (1=Monday, 7=Sunday) + * @returns Array of date strings in YYYY-MM-DD format + */ + getWorkWeekDates(offset: number, workDays: number[]): string[] { + const monday = this.baseDate.startOf('week').add(1, 'day').add(offset, 'week'); + return workDays.map(isoDay => { + // ISO: 1=Monday, 7=Sunday → days from Monday: 0-6 + const daysFromMonday = isoDay === 7 ? 6 : isoDay - 1; + return monday.add(daysFromMonday, 'day').format('YYYY-MM-DD'); + }); + } + // ============================================ // FORMATTING // ============================================ diff --git a/src/v2/demo/DemoApp.ts b/src/v2/demo/DemoApp.ts index 9c3dc56..47c1746 100644 --- a/src/v2/demo/DemoApp.ts +++ b/src/v2/demo/DemoApp.ts @@ -13,12 +13,15 @@ import { ResizeManager } from '../managers/ResizeManager'; import { EventPersistenceManager } from '../managers/EventPersistenceManager'; import { HeaderDrawerRenderer } from '../features/headerdrawer/HeaderDrawerRenderer'; import { AuditService } from '../storage/audit/AuditService'; +import { SettingsService } from '../storage/settings/SettingsService'; +import { IWorkweekPreset } from '../types/SettingsTypes'; export class DemoApp { private animator!: NavigationAnimator; private container!: HTMLElement; private weekOffset = 0; private currentView: 'day' | 'simple' | 'resource' | 'team' | 'department' = 'simple'; + private workweekPreset: IWorkweekPreset | null = null; constructor( private orchestrator: CalendarOrchestrator, @@ -33,7 +36,8 @@ export class DemoApp { private resizeManager: ResizeManager, private headerDrawerRenderer: HeaderDrawerRenderer, private eventPersistenceManager: EventPersistenceManager, - private auditService: AuditService + private auditService: AuditService, + private settingsService: SettingsService ) {} async init(): Promise { @@ -48,6 +52,10 @@ export class DemoApp { await this.dataSeeder.seedIfEmpty(); console.log('[DemoApp] Data seeding complete'); + // Load default workweek preset from settings + this.workweekPreset = await this.settingsService.getDefaultWorkweekPreset(); + console.log('[DemoApp] Workweek preset loaded:', this.workweekPreset?.id); + this.container = document.querySelector('swp-calendar-container') as HTMLElement; // NavigationAnimator har DOM-dependencies - tilladt med new @@ -90,7 +98,9 @@ export class DemoApp { } private buildViewConfig(): ViewConfig { - const dates = this.dateService.getWeekDates(this.weekOffset, 3); + // Use workweek preset to determine which days to show + const workDays = this.workweekPreset?.workDays || [1, 2, 3, 4, 5]; // Fallback to Mon-Fri + const dates = this.dateService.getWorkWeekDates(this.weekOffset, workDays); const today = this.dateService.getWeekDates(this.weekOffset, 1); switch (this.currentView) { @@ -155,29 +165,32 @@ export class DemoApp { } private setupViewSwitching(): void { - document.getElementById('btn-day')?.addEventListener('click', () => { - this.currentView = 'day'; - this.render(); + // View chip buttons + const chips = document.querySelectorAll('.view-chip'); + chips.forEach(chip => { + chip.addEventListener('click', () => { + // Update active state + chips.forEach(c => c.classList.remove('active')); + chip.classList.add('active'); + + // Switch view + const view = (chip as HTMLElement).dataset.view as typeof this.currentView; + if (view) { + this.currentView = view; + this.render(); + } + }); }); - document.getElementById('btn-simple')?.addEventListener('click', () => { - this.currentView = 'simple'; - this.render(); - }); - - document.getElementById('btn-resource')?.addEventListener('click', () => { - this.currentView = 'resource'; - this.render(); - }); - - document.getElementById('btn-team')?.addEventListener('click', () => { - this.currentView = 'team'; - this.render(); - }); - - document.getElementById('btn-department')?.addEventListener('click', () => { - this.currentView = 'department'; - this.render(); + // Workweek preset dropdown + const workweekSelect = document.getElementById('workweek-select') as HTMLSelectElement; + workweekSelect?.addEventListener('change', async () => { + const presetId = workweekSelect.value; + const preset = await this.settingsService.getWorkweekPreset(presetId); + if (preset) { + this.workweekPreset = preset; + this.render(); + } }); } diff --git a/src/v2/repositories/MockSettingsRepository.ts b/src/v2/repositories/MockSettingsRepository.ts new file mode 100644 index 0000000..9507fec --- /dev/null +++ b/src/v2/repositories/MockSettingsRepository.ts @@ -0,0 +1,47 @@ +import { EntityType } from '../types/CalendarTypes'; +import { ITenantSettings } from '../types/SettingsTypes'; +import { IApiRepository } from './IApiRepository'; + +/** + * MockSettingsRepository - Loads tenant settings from local JSON file + * + * Settings is a single document, but we wrap it in an array to match + * the IApiRepository interface used by DataSeeder. + */ +export class MockSettingsRepository implements IApiRepository { + public readonly entityType: EntityType = 'Settings'; + private readonly dataUrl = 'data/tenant-settings.json'; + + public async fetchAll(): Promise { + try { + const response = await fetch(this.dataUrl); + + if (!response.ok) { + throw new Error(`Failed to load tenant settings: ${response.status} ${response.statusText}`); + } + + const rawData = await response.json(); + // Ensure syncStatus is set + const settings: ITenantSettings = { + ...rawData, + syncStatus: rawData.syncStatus || 'synced' + }; + return [settings]; + } catch (error) { + console.error('Failed to load tenant settings:', error); + throw error; + } + } + + public async sendCreate(_settings: ITenantSettings): Promise { + throw new Error('MockSettingsRepository does not support sendCreate. Mock data is read-only.'); + } + + public async sendUpdate(_id: string, _updates: Partial): Promise { + throw new Error('MockSettingsRepository does not support sendUpdate. Mock data is read-only.'); + } + + public async sendDelete(_id: string): Promise { + throw new Error('MockSettingsRepository does not support sendDelete. Mock data is read-only.'); + } +} diff --git a/src/v2/storage/IndexedDBContext.ts b/src/v2/storage/IndexedDBContext.ts index c399c85..a0e80f0 100644 --- a/src/v2/storage/IndexedDBContext.ts +++ b/src/v2/storage/IndexedDBContext.ts @@ -10,7 +10,7 @@ import { IStore } from './IStore'; */ export class IndexedDBContext { private static readonly DB_NAME = 'CalendarV2DB'; - private static readonly DB_VERSION = 3; + private static readonly DB_VERSION = 4; private db: IDBDatabase | null = null; private initialized: boolean = false; diff --git a/src/v2/storage/settings/SettingsService.ts b/src/v2/storage/settings/SettingsService.ts new file mode 100644 index 0000000..535fcc0 --- /dev/null +++ b/src/v2/storage/settings/SettingsService.ts @@ -0,0 +1,60 @@ +import { EntityType, IEventBus } from '../../types/CalendarTypes'; +import { ITenantSettings, IWorkweekPreset } from '../../types/SettingsTypes'; +import { SettingsStore } from './SettingsStore'; +import { BaseEntityService } from '../BaseEntityService'; +import { IndexedDBContext } from '../IndexedDBContext'; + +/** + * Default settings ID - single document per tenant + */ +const TENANT_SETTINGS_ID = 'tenant-settings'; + +/** + * SettingsService - CRUD operations for tenant settings + * + * Settings are stored as a single document with sections. + * This service provides convenience methods for accessing specific sections. + */ +export class SettingsService extends BaseEntityService { + readonly storeName = SettingsStore.STORE_NAME; + readonly entityType: EntityType = 'Settings'; + + constructor(context: IndexedDBContext, eventBus: IEventBus) { + super(context, eventBus); + } + + /** + * Get the tenant settings document + * Returns null if not yet loaded from backend + */ + async getSettings(): Promise { + return this.get(TENANT_SETTINGS_ID); + } + + /** + * Get workweek preset by ID + */ + async getWorkweekPreset(presetId: string): Promise { + const settings = await this.getSettings(); + if (!settings) return null; + return settings.workweek.presets[presetId] || null; + } + + /** + * Get the default workweek preset + */ + async getDefaultWorkweekPreset(): Promise { + const settings = await this.getSettings(); + if (!settings) return null; + return settings.workweek.presets[settings.workweek.defaultPreset] || null; + } + + /** + * Get all available workweek presets + */ + async getWorkweekPresets(): Promise { + const settings = await this.getSettings(); + if (!settings) return []; + return Object.values(settings.workweek.presets); + } +} diff --git a/src/v2/storage/settings/SettingsStore.ts b/src/v2/storage/settings/SettingsStore.ts new file mode 100644 index 0000000..a28cc79 --- /dev/null +++ b/src/v2/storage/settings/SettingsStore.ts @@ -0,0 +1,16 @@ +import { IStore } from '../IStore'; + +/** + * SettingsStore - IndexedDB ObjectStore definition for tenant settings + * + * Single store for all settings sections. Settings are stored as one document + * per tenant with id='tenant-settings'. + */ +export class SettingsStore implements IStore { + static readonly STORE_NAME = 'settings'; + readonly storeName = SettingsStore.STORE_NAME; + + create(db: IDBDatabase): void { + db.createObjectStore(SettingsStore.STORE_NAME, { keyPath: 'id' }); + } +} diff --git a/src/v2/types/CalendarTypes.ts b/src/v2/types/CalendarTypes.ts index 0f6ef6e..7c24479 100644 --- a/src/v2/types/CalendarTypes.ts +++ b/src/v2/types/CalendarTypes.ts @@ -6,7 +6,7 @@ import { IWeekSchedule } from './ScheduleTypes'; export type SyncStatus = 'synced' | 'pending' | 'error'; -export type EntityType = 'Event' | 'Booking' | 'Customer' | 'Resource' | 'Team' | 'Department' | 'Audit'; +export type EntityType = 'Event' | 'Booking' | 'Customer' | 'Resource' | 'Team' | 'Department' | 'Audit' | 'Settings'; /** * CalendarEventType - Used by ICalendarEvent.type diff --git a/src/v2/types/SettingsTypes.ts b/src/v2/types/SettingsTypes.ts new file mode 100644 index 0000000..1b10728 --- /dev/null +++ b/src/v2/types/SettingsTypes.ts @@ -0,0 +1,72 @@ +/** + * Tenant Settings Type Definitions + * + * Settings are tenant-specific configuration that comes from the backend + * and is stored in IndexedDB for offline access. + */ + +import { ISync } from './CalendarTypes'; + +/** + * Workweek preset - defines which ISO weekdays to display + * ISO: 1=Monday, 7=Sunday + */ +export interface IWorkweekPreset { + id: string; + workDays: number[]; + label: string; +} + +/** + * Workweek settings section + */ +export interface IWorkweekSettings { + presets: Record; + defaultPreset: string; + firstDayOfWeek: number; // ISO: 1=Monday +} + +/** + * Grid display settings section + */ +export interface IGridSettings { + dayStartHour: number; + dayEndHour: number; + workStartHour: number; + workEndHour: number; + hourHeight: number; + snapInterval: number; +} + +/** + * Time format settings section + */ +export interface ITimeFormatSettings { + timezone: string; + locale: string; + use24HourFormat: boolean; +} + +/** + * View settings section + */ +export interface IViewSettings { + availableViews: string[]; + defaultView: string; +} + +/** + * ITenantSettings - Complete tenant configuration + * + * Single document stored in IndexedDB 'settings' store. + * Sections can be extended as needed without schema changes. + */ +export interface ITenantSettings extends ISync { + id: string; + lastModified?: string; + + workweek: IWorkweekSettings; + grid: IGridSettings; + timeFormat: ITimeFormatSettings; + views: IViewSettings; +} diff --git a/wwwroot/css/v2/calendar-v2-layout.css b/wwwroot/css/v2/calendar-v2-layout.css index 3ef668c..5dedc79 100644 --- a/wwwroot/css/v2/calendar-v2-layout.css +++ b/wwwroot/css/v2/calendar-v2-layout.css @@ -16,20 +16,78 @@ swp-calendar { /* Nav */ swp-calendar-nav { display: flex; - gap: 16px; - padding: 12px 16px; + gap: 12px; + padding: 8px 16px; border-bottom: 1px solid var(--color-border); align-items: center; + font-size: 13px; +} + +/* View switcher - small chips */ +swp-view-switcher { + display: flex; + gap: 4px; + background: var(--color-background-alt); + padding: 3px; + border-radius: 6px; +} + +.view-chip { + padding: 4px 10px; + border: none; + border-radius: 4px; + cursor: pointer; + background: transparent; + color: var(--color-text-secondary); + font-size: 12px; + font-weight: 500; + transition: all 0.15s ease; + + &:hover { + background: var(--color-surface); + color: var(--color-text); + } + + &.active { + background: var(--color-surface); + color: var(--color-text); + box-shadow: 0 1px 2px rgba(0,0,0,0.1); + } +} + +/* Workweek dropdown */ +.workweek-dropdown { + padding: 4px 8px; + border: 1px solid var(--color-border); + border-radius: 4px; + background: var(--color-surface); + font-size: 12px; + cursor: pointer; + + &:hover { border-color: var(--color-text-secondary); } + &:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; } +} + +/* Navigation group */ +swp-nav-group { + display: flex; + gap: 2px; } swp-nav-button { - padding: 8px 16px; + padding: 6px 12px; border: 1px solid var(--color-border); border-radius: 4px; cursor: pointer; background: var(--color-surface); + font-size: 12px; &:hover { background: var(--color-background-hover); } + + &.btn-small { + padding: 4px 8px; + font-size: 11px; + } } swp-week-info { @@ -38,11 +96,12 @@ swp-week-info { swp-week-number { font-weight: 600; + font-size: 12px; display: block; } swp-date-range { - font-size: 12px; + font-size: 11px; color: var(--color-text-secondary); } } @@ -70,6 +129,8 @@ swp-time-axis { swp-header-spacer { border-bottom: 1px solid var(--color-border); + background: var(--color-surface); + z-index: 1; } swp-header-drawer { diff --git a/wwwroot/data/tenant-settings.json b/wwwroot/data/tenant-settings.json new file mode 100644 index 0000000..be14e4c --- /dev/null +++ b/wwwroot/data/tenant-settings.json @@ -0,0 +1,57 @@ +{ + "id": "tenant-settings", + "syncStatus": "synced", + "lastModified": "2025-12-15T10:00:00Z", + + "workweek": { + "presets": { + "standard": { + "id": "standard", + "workDays": [1, 2, 3, 4, 5], + "label": "Man-Fre" + }, + "compressed": { + "id": "compressed", + "workDays": [1, 2, 3, 4], + "label": "Man-Tor" + }, + "midweek": { + "id": "midweek", + "workDays": [3, 4, 5], + "label": "Ons-Fre" + }, + "weekend": { + "id": "weekend", + "workDays": [6, 7], + "label": "Weekend" + }, + "fullweek": { + "id": "fullweek", + "workDays": [1, 2, 3, 4, 5, 6, 7], + "label": "Alle dage" + } + }, + "defaultPreset": "standard", + "firstDayOfWeek": 1 + }, + + "grid": { + "dayStartHour": 6, + "dayEndHour": 22, + "workStartHour": 8, + "workEndHour": 17, + "hourHeight": 80, + "snapInterval": 15 + }, + + "timeFormat": { + "timezone": "Europe/Copenhagen", + "locale": "da-DK", + "use24HourFormat": true + }, + + "views": { + "availableViews": ["simple", "resource", "team", "department"], + "defaultView": "simple" + } +} diff --git a/wwwroot/v2.html b/wwwroot/v2.html index a3f57d2..c19150c 100644 --- a/wwwroot/v2.html +++ b/wwwroot/v2.html @@ -10,18 +10,36 @@
- Dag - Datoer - Resources - Teams - Departments + + + + + + + + + + + + + + + ← + → + + - V2 + V2 Demo - ← - → - Toggle + + Drawer