Refactor workweek presets into dedicated manager

Extracts workweek preset logic from ViewManager into WorkweekPresetsManager Improves separation of concerns by: - Creating a dedicated manager for workweek preset UI - Simplifying ViewManager to focus only on view selector - Implementing event-driven CSS updates - Reducing code duplication in ConfigManager Follows "each UI element has its own manager" architectural principle
2025-11-07 21:50:07 +01:00 · 2025-11-07 21:50:07 +01:00 · c1e0da056c
commit c1e0da056c
parent c72ab9aaf1
8 changed files with 988 additions and 68 deletions
--- a/workweek-preset-sequence-AFTER.md
+++ b/workweek-preset-sequence-AFTER.md
@ -0,0 +1,81 @@
+# Workweek Preset Click Sequence Diagram - EFTER REFAKTORERING
+
+Dette diagram viser hvad der sker når brugeren klikker på en workweek preset knap EFTER refaktoreringen.
+
+```mermaid
+sequenceDiagram
+    actor User
+    participant HTML as swp-preset-button
+    participant WPM as WorkweekPresetsManager
+    participant Config as Configuration
+    participant EventBus
+    participant CM as ConfigManager
+    participant GM as GridManager
+    participant GR as GridRenderer
+    participant HM as HeaderManager
+    participant HR as HeaderRenderer
+    participant DOM
+
+    User->>HTML: Click på preset button<br/>(data-workweek="compressed")
+    HTML->>WPM: click event
+
+    Note over WPM: setupButtonListeners handler
+    WPM->>WPM: changePreset("compressed")
+
+    WPM->>Config: Validate WORK_WEEK_PRESETS["compressed"]
+    Note over WPM: Guard: if (!WORK_WEEK_PRESETS[presetId]) return
+
+    WPM->>Config: Check if (presetId === currentWorkWeek)
+    Note over WPM: Guard: No change? Return early
+
+    WPM->>Config: config.currentWorkWeek = "compressed"
+    Note over Config: State updated: "standard" → "compressed"
+
+    WPM->>WPM: updateButtonStates()
+    WPM->>DOM: querySelectorAll('swp-preset-button')
+    WPM->>DOM: Update data-active attributes
+    Note over DOM: Compressed button får active<br/>Andre mister active
+
+    WPM->>EventBus: emit(WORKWEEK_CHANGED, payload)
+    Note over EventBus: Event: 'workweek:changed'<br/>Payload: {<br/>  workWeekId: "compressed",<br/>  previousWorkWeekId: "standard",<br/>  settings: { totalDays: 4, ... }<br/>}
+
+    par Parallel Event Subscribers
+        EventBus->>CM: WORKWEEK_CHANGED event
+        Note over CM: setupEventListeners listener
+        CM->>CM: syncWorkweekCSSVariables(settings)
+        CM->>DOM: setProperty('--grid-columns', '4')
+        Note over DOM: CSS variable opdateret
+
+    and
+        EventBus->>GM: WORKWEEK_CHANGED event
+        Note over GM: subscribeToEvents listener
+        GM->>GM: render()
+        GM->>GR: renderGrid(container, currentDate)
+
+        alt Grid allerede eksisterer
+            GR->>GR: updateGridContent()
+            GR->>DOM: Update 4 columns (Mon-Thu)
+        else First render
+            GR->>GR: createCompleteGridStructure()
+            GR->>DOM: Create 4 columns (Mon-Thu)
+        end
+
+        GM->>EventBus: emit(GRID_RENDERED)
+
+    and
+        EventBus->>CalendarManager: WORKWEEK_CHANGED event
+        Note over CalendarManager: handleWorkweekChange listener
+        CalendarManager->>EventBus: emit('workweek:header-update')
+
+        EventBus->>HM: 'workweek:header-update' event
+        Note over HM: setupNavigationListener
+        HM->>HM: updateHeader(currentDate)
+        HM->>HR: render(context)
+        HR->>Config: getWorkWeekSettings()
+        Config-->>HR: { totalDays: 4, workDays: [1,2,3,4] }
+        HR->>DOM: Render 4 day headers<br/>(Mon, Tue, Wed, Thu)
+    end
+
+    Note over DOM: Grid viser nu kun<br/>Man-Tor (4 dage)<br/>med opdaterede headers
+
+    DOM-->>User: Visuelt feedback:<br/>4-dages arbejdsuge