# 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