# Workweek Preset Click Sequence Diagram

Dette diagram viser hvad der sker når brugeren klikker på en workweek preset knap (f.eks. "Mon-Fri", "Mon-Thu", etc.)

```mermaid
sequenceDiagram
    actor User
    participant HTML as swp-preset-button
    participant VM as ViewManager
    participant Config as Configuration
    participant CM as ConfigManager
    participant EventBus
    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->>VM: click event

    Note over VM: setupButtonGroup handler
    VM->>VM: getAttribute('data-workweek')<br/>→ "compressed"
    VM->>VM: changeWorkweek("compressed")

    VM->>Config: setWorkWeek("compressed")
    Note over Config: Opdaterer currentWorkWeek<br/>og workweek settings

    VM->>CM: updateCSSProperties(config)
    Note over CM: Opdaterer CSS custom properties
    CM->>DOM: setProperty('--grid-columns', '4')
    CM->>DOM: setProperty('--hour-height', '80px')
    CM->>DOM: setProperty('--day-start-hour', '6')
    CM->>DOM: setProperty('--work-start-hour', '8')
    Note over DOM: CSS grid layout opdateres

    VM->>VM: updateAllButtons()
    VM->>DOM: Update data-active attributter<br/>på alle preset buttons
    Note over DOM: Compressed knap får<br/>data-active="true"<br/>Andre knapper mister active

    VM->>Config: getWorkWeekSettings()
    Config-->>VM: { id: 'compressed',<br/>workDays: [1,2,3,4],<br/>totalDays: 4 }

    VM->>EventBus: emit(WORKWEEK_CHANGED, payload)
    Note over EventBus: Event: 'workweek:changed'<br/>Payload: { workWeekId, settings }

    EventBus->>GM: WORKWEEK_CHANGED event
    Note over GM: Listener setup i subscribeToEvents()
    GM->>GM: render()
    GM->>GR: renderGrid(container, currentDate)

    alt First render (empty grid)
        GR->>GR: createCompleteGridStructure()
        GR->>DOM: Create time axis
        GR->>DOM: Create grid container
        GR->>DOM: Create 4 columns (Mon-Thu)
    else Update existing grid
        GR->>GR: updateGridContent()
        GR->>DOM: Update existing columns
    end

    GM->>EventBus: emit(GRID_RENDERED)

    EventBus->>HM: WORKWEEK_CHANGED event
    Note over HM: Via 'workweek:header-update'<br/>from CalendarManager
    HM->>HM: updateHeader(currentDate)
    HM->>HR: render(context)
    HR->>DOM: Update header med 4 dage<br/>(Mon, Tue, Wed, Thu)

    Note over DOM: Grid viser nu kun<br/>Man-Tor (4 dage)<br/>med opdaterede headers

    DOM-->>User: Visuelt feedback:<br/>4-dages arbejdsuge