82 lines
3 KiB
Markdown
82 lines
3 KiB
Markdown
|
# 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
|