Calendar/docs/drag-drop-header-bug-analysis-corrected.md
Janus Knudsen 46b8bf9fb5 Fixes drag and drop to header issues
Addresses two key issues related to dragging events to the header: the premature removal of the original event element and the creation of duplicate all-day events.

The original event is no longer removed when dragging to the header; it is now only removed upon a successful drop.

Also, it prevents the creation of duplicate all-day events by checking for existing all-day events before creating new ones, using DOM queries to ensure accurate state.
2025-09-17 23:39:29 +02:00

3.2 KiB

Korrigeret Analyse: Day Event Drag til Header og Tilbage

Korrekt Flow Design

Elementer i Spil

  1. Original Event: Skal forblive i DOM uændret indtil drag:end
  2. Clone Event: Det visuelle element der dragges rundt
  3. All-Day Event: Midlertidig repræsentation i header

Nuværende Problem

AllDayManager.handleConvertToAllDay() (linje 274)

// PROBLEM: Fjerner original for tidligt!
originalElement.remove();  // ❌ FORKERT

Original element fjernes når man hover over header, men det skal først fjernes ved faktisk drop.

Korrekt Flow

sequenceDiagram
    participant User
    participant Original as Original Event
    participant Clone as Clone Event
    participant AllDay as All-Day Event
    
    Note over Original: Start: Original synlig
    User->>Clone: Drag start
    Note over Clone: Clone oprettes og vises
    Note over Original: Original bliver semi-transparent
    
    User->>AllDay: Enter header
    Note over Clone: Clone skjules (display:none)
    Note over AllDay: All-day event oprettes
    Note over Original: Original forbliver (semi-transparent)
    
    User->>Clone: Leave header (tilbage til grid)
    Note over AllDay: All-day event fjernes
    Note over Clone: Clone vises igen
    Note over Original: Original stadig der
    
    User->>Original: Drop
    Note over Original: NU fjernes original
    Note over Clone: Clone bliver til ny position

Nødvendige Ændringer

1. AllDayManager.handleConvertToAllDay() (linje 232-285)

// FØR (linje 274):
originalElement.remove();  // ❌

// EFTER:
// originalElement.remove();  // Kommenteret ud - skal IKKE fjernes her
// Original forbliver i DOM med opacity 0.3 fra drag start

2. AllDayManager.handleConvertFromAllDay() (linje 290-311)

// Nuværende kode er faktisk korrekt - den:
// 1. Fjerner all-day event
// 2. Viser clone igen
// Original er stadig der (blev aldrig fjernet)

3. EventRenderer - handleDragEnd()

// Her skal original FAKTISK fjernes
// Efter successful drop:
if (this.originalEvent) {
    this.originalEvent.remove();  // ✅ Korrekt tidspunkt
}

Problem Opsummering

Hovedproblem: originalElement.remove() på linje 274 i AllDayManager sker for tidligt.

Løsning:

  1. Fjern/kommenter linje 274 i AllDayManager.handleConvertToAllDay()
  2. Original element skal kun fjernes i EventRenderer ved faktisk drop (drag:end)
  3. Clone håndterer al visuel feedback under drag

Test Scenarios

  1. Drag → Header → Grid → Drop

    • Original forbliver hele tiden
    • Clone skjules/vises korrekt
    • Original fjernes kun ved drop
  2. Drag → Header → Drop i Header

    • Original forbliver indtil drop
    • All-day event bliver permanent
    • Original fjernes ved drop
  3. Drag → Header → ESC

    • Original forbliver
    • Drag cancelled, alt tilbage til start

Affected Code

AllDayManager.ts

  • Linje 274: Skal fjernes/kommenteres
  • Original element må IKKE fjernes her

EventRenderer.ts

  • handleDragEnd(): Skal sikre original fjernes her
  • Dette er det ENESTE sted original må fjernes

DragDropManager.ts

  • Koden ser faktisk korrekt ud
  • Holder styr på både original og clone