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 · 2025-09-17 23:39:29 +02:00 · 46b8bf9fb5
commit 46b8bf9fb5
parent b4af5a9211
10 changed files with 684 additions and 61 deletions
--- a/docs/drag-drop-header-bug-analysis-corrected.md
+++ b/docs/drag-drop-header-bug-analysis-corrected.md
@ -0,0 +1,114 @@
+# 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)
+```typescript
+// 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
+
+```mermaid
+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)
+```typescript
+// 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)
+```typescript
+// 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()
+```typescript
+// 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
--- a/docs/drag-drop-header-bug-analysis.md
+++ b/docs/drag-drop-header-bug-analysis.md
@ -0,0 +1,104 @@
+# Bug Analyse: Day Event Drag til Header og Tilbage
+
+## Problem Beskrivelse
+Når en day event dragges op til headeren (for at konvertere til all-day) og derefter dragges tilbage til grid UDEN at droppe, opstår der et kritisk problem hvor original event forsvinder.
+
+## Flow Analyse
+
+### Trin 1: Drag Start (Day Event)
+- **DragDropManager** (linje 139-182): `handleMouseDown()` registrerer drag start
+- Original event element gemmes
+- `isDragStarted = false` indtil movement threshold nås
+
+### Trin 2: Drag bevæger sig op mod Header
+- **DragDropManager** (linje 187-253): `handleMouseMove()` tracker bevægelse
+- Når threshold nås: `drag:start` event emitted
+- **EventRenderer** opretter drag clone
+
+### Trin 3: Mouse enters Header ⚠️ PROBLEM STARTER HER
+- **DragDropManager** (linje 95-112): Lytter til `header:mouseover`
+- Emitter `drag:convert-to-allday` event
+- **AllDayManager** (linje 232-285): `handleConvertToAllDay()`:
+  - Opretter all-day event i header
+  - **FJERNER original timed event permanent** (linje 274: `originalElement.remove()`)
+  - Skjuler drag clone
+
+### Trin 4: Mouse leaves Header (tilbage til grid) ⚠️ PROBLEM FORTSÆTTER
+- **DragDropManager** (linje 128-136): Lytter til `header:mouseleave`
+- Emitter `drag:convert-from-allday` event
+- **AllDayManager** (linje 290-311): `handleConvertFromAllDay()`:
+  - Fjerner all-day event fra container
+  - Viser drag clone igen
+  - **MEN: Original event er allerede fjernet og kan ikke genskabes!**
+
+### Trin 5: Drop i Grid ⚠️ DATA TABT
+- **DragDropManager** (linje 258-291): `handleMouseUp()`
+- Emitter `drag:end` event
+- Original element eksisterer ikke længere
+- Kun clone eksisterer med ID "clone-{id}"
+
+## Root Cause
+**AllDayManager.handleConvertToAllDay()** fjerner permanent det originale element (linje 274) i stedet for at skjule det midlertidigt.
+
+## Konsekvenser
+1. Original event data går tabt
+2. Event ID bliver "clone-{id}" i stedet for "{id}"
+3. Event metadata kan mangle
+4. Potentielle styling/positioning problemer
+
+## Løsningsforslag
+
+### Option 1: Behold Original Element (Anbefalet)
+```typescript
+// AllDayManager.handleConvertToAllDay() - linje 274
+// FØR: originalElement.remove();
+// EFTER: 
+originalElement.style.display = 'none';
+originalElement.dataset.temporarilyHidden = 'true';
+```
+
+### Option 2: Gem Original Data
+```typescript
+// Gem original element data før fjernelse
+const originalData = {
+  id: originalElement.dataset.eventId,
+  title: originalElement.dataset.title,
+  start: originalElement.dataset.start,
+  end: originalElement.dataset.end,
+  // ... andre properties
+};
+// Gem i DragDropManager eller AllDayManager
+```
+
+### Option 3: Re-create Original on Leave
+```typescript
+// AllDayManager.handleConvertFromAllDay()
+// Genskab original element fra all-day event data
+const originalElement = this.recreateTimedEvent(allDayEvent);
+```
+
+## Implementeringsplan
+
+1. **Modificer AllDayManager.handleConvertToAllDay()**
+   - Skjul original element i stedet for at fjerne
+   - Marker element som midlertidigt skjult
+
+2. **Modificer AllDayManager.handleConvertFromAllDay()**
+   - Find original element (ikke kun clone)
+   - Vis original element igen
+   - Synkroniser position med clone
+
+3. **Opdater DragDropManager**
+   - Hold reference til både original og clone
+   - Ved drop: opdater original, fjern clone
+
+4. **Test Scenarios**
+   - Drag day event → header → tilbage → drop
+   - Drag day event → header → drop i header
+   - Drag day event → header → ESC key
+   - Multiple hurtige hover over header
+
+## Affected Files
+- `src/managers/AllDayManager.ts` (linje 274, 290-311)
+- `src/managers/DragDropManager.ts` (linje 95-136)
+- `src/renderers/EventRenderer.ts` (potentielt)
--- a/docs/drag-drop-header-complete-bug-analysis.md
+++ b/docs/drag-drop-header-complete-bug-analysis.md
@ -0,0 +1,123 @@
+# Komplet Bug Analyse: Drag-Drop Header Problemer
+
+## Identificerede Problemer
+
+### Problem 1: Original Element Fjernes For Tidligt
+**Lokation**: AllDayManager.handleConvertToAllDay() linje 274
+```typescript
+originalElement.remove();  // ❌ FORKERT - skal ikke fjernes her
+```
+
+### Problem 2: Duplicate All-Day Events ved Mouseover
+**Lokation**: AllDayManager.handleConvertToAllDay() linje 232-285
+
+Hver gang `header:mouseover` fyrer (hvilket kan ske mange gange under drag), oprettes et NYT all-day event uden at checke om det allerede eksisterer.
+
+## Event Flow Problem
+
+```mermaid
+sequenceDiagram
+    participant Mouse
+    participant Header
+    participant AllDay as AllDayManager
+    
+    Note over Mouse: Dragger over header
+    loop Hver mouseover event
+        Mouse->>Header: mouseover
+        Header->>AllDay: drag:convert-to-allday
+        AllDay->>AllDay: Opretter NYT all-day event ❌
+        Note over AllDay: Ingen check for eksisterende!
+    end
+    Note over AllDay: Resultat: Multiple all-day events!
+```
+
+## Løsning
+
+### Fix 1: Check for Eksisterende All-Day Event
+```typescript
+// AllDayManager.handleConvertToAllDay()
+private handleConvertToAllDay(targetDate: string, originalElement: HTMLElement): void {
+    const eventId = originalElement.dataset.eventId;
+    
+    // CHECK: Eksisterer all-day event allerede?
+    const existingAllDay = document.querySelector(
+        `swp-allday-container swp-allday-event[data-event-id="${eventId}"]`
+    );
+    
+    if (existingAllDay) {
+        console.log('All-day event already exists, skipping creation');
+        return; // Exit early - don't create duplicate
+    }
+    
+    // Fortsæt med at oprette all-day event...
+}
+```
+
+### Fix 2: Fjern IKKE Original Element
+```typescript
+// Linje 274 - skal fjernes eller kommenteres ud:
+// originalElement.remove();  // <-- FJERN DENNE LINJE
+```
+
+### Fix 3: Track Conversion State (Optional)
+For at undgå gentagne conversions, kunne vi tracke state:
+
+```typescript
+// AllDayManager
+private convertedEventIds = new Set<string>();
+
+private handleConvertToAllDay(targetDate: string, originalElement: HTMLElement): void {
+    const eventId = originalElement.dataset.eventId;
+    
+    // Check if already converted
+    if (this.convertedEventIds.has(eventId)) {
+        return;
+    }
+    
+    // Mark as converted
+    this.convertedEventIds.add(eventId);
+    
+    // Create all-day event...
+}
+
+private handleConvertFromAllDay(draggedEventId: string): void {
+    // Clear conversion state
+    this.convertedEventIds.delete(draggedEventId);
+    
+    // Remove all-day event...
+}
+```
+
+## Komplet Fix Checklist
+
+1. **AllDayManager.handleConvertToAllDay()**
+   - [ ] Tilføj check for eksisterende all-day event
+   - [ ] Fjern/kommenter `originalElement.remove()` linje 274
+   - [ ] Log når duplicate undgås
+
+2. **AllDayManager.handleConvertFromAllDay()**
+   - [ ] Verificer at all-day event faktisk fjernes
+   - [ ] Clear evt. conversion state
+
+3. **Test Scenarios**
+   - [ ] Hurtig mouseover frem og tilbage over header
+   - [ ] Langsom drag over header
+   - [ ] Drag ind i header → ud → ind igen
+   - [ ] Multiple events dragges samtidig (hvis muligt)
+
+## Root Causes
+
+1. **Manglende idempotency**: handleConvertToAllDay() er ikke idempotent
+2. **Forkert element lifecycle**: Original fjernes for tidligt
+3. **Manglende state tracking**: Ingen tracking af hvilke events der er konverteret
+
+## Performance Overvejelser
+
+HeaderManager throttler mouseover events (linje 41-49), men det er ikke nok når musen bevæger sig langsomt over header. Vi skal have idempotent logik.
+
+## Implementeringsrækkefølge
+
+1. **Først**: Fix duplicate all-day events (check for existing)
+2. **Derefter**: Fjern originalElement.remove()
+3. **Test**: Verificer at begge problemer er løst
+4. **Optional**: Implementer conversion state tracking for bedre performance
--- a/docs/drag-drop-header-implementation-details.md
+++ b/docs/drag-drop-header-implementation-details.md
@ -0,0 +1,143 @@
+# Implementeringsdetaljer: Check for Eksisterende All-Day Event
+
+## Hvor skal checket implementeres?
+
+**Fil**: `src/managers/AllDayManager.ts`
+**Metode**: `handleConvertToAllDay()`
+**Linje**: Lige efter linje 232 (start af metoden)
+
+## Præcis Implementation
+
+```typescript
+// AllDayManager.ts - handleConvertToAllDay metode (linje 232)
+private handleConvertToAllDay(targetDate: string, originalElement: HTMLElement): void {
+    // Extract event data from original element
+    const eventId = originalElement.dataset.eventId;
+    const title = originalElement.dataset.title || originalElement.textContent || 'Untitled';
+    const type = originalElement.dataset.type || 'work';
+    const startStr = originalElement.dataset.start;
+    const endStr = originalElement.dataset.end;
+
+    if (!eventId || !startStr || !endStr) {
+        console.error('Original element missing required data (eventId, start, end)');
+        return;
+    }
+
+    // ===== NY KODE STARTER HER (efter linje 243) =====
+    
+    // CHECK 1: Er dette faktisk clone elementet?
+    const isClone = eventId.startsWith('clone-');
+    const actualEventId = isClone ? eventId.replace('clone-', '') : eventId;
+    
+    // CHECK 2: Eksisterer all-day event allerede?
+    const container = this.getAllDayContainer();
+    if (container) {
+        const existingAllDay = container.querySelector(
+            `swp-allday-event[data-event-id="${actualEventId}"]`
+        );
+        
+        if (existingAllDay) {
+            console.log(`All-day event for ${actualEventId} already exists, skipping creation`);
+            return; // Exit early - don't create duplicate
+        }
+    }
+    
+    // ===== NY KODE SLUTTER HER =====
+    
+    // Fortsæt med normal oprettelse...
+    // Create CalendarEvent for all-day conversion - preserve original times
+    const originalStart = new Date(startStr);
+    // ... resten af koden
+}
+```
+
+## Hvorfor virker dette?
+
+1. **Check for clone ID**: Vi checker om det draggede element er clone (starter med "clone-")
+2. **Normalisér ID**: Vi får det faktiske event ID uden "clone-" prefix
+3. **Query DOM**: Vi søger i all-day container efter eksisterende element med samme ID
+4. **Early exit**: Hvis det findes, logger vi og returnerer uden at oprette duplicate
+
+## Alternative Implementeringer
+
+### Option A: Track med Set (Hurtigere)
+```typescript
+// AllDayManager class property
+private activeAllDayEvents = new Set<string>();
+
+private handleConvertToAllDay(targetDate: string, originalElement: HTMLElement): void {
+    const eventId = originalElement.dataset.eventId;
+    const actualEventId = eventId?.startsWith('clone-') 
+        ? eventId.replace('clone-', '') 
+        : eventId;
+    
+    // Check i memory først (hurtigere)
+    if (this.activeAllDayEvents.has(actualEventId)) {
+        return;
+    }
+    
+    // Marker som aktiv
+    this.activeAllDayEvents.add(actualEventId);
+    
+    // ... opret all-day event
+}
+
+private handleConvertFromAllDay(draggedEventId: string): void {
+    // Fjern fra tracking
+    this.activeAllDayEvents.delete(draggedEventId);
+    
+    // ... fjern all-day event
+}
+```
+
+### Option B: Data Attribute Flag
+```typescript
+private handleConvertToAllDay(targetDate: string, originalElement: HTMLElement): void {
+    // Check flag på original element
+    if (originalElement.dataset.hasAllDayVersion === 'true') {
+        return;
+    }
+    
+    // Sæt flag
+    originalElement.dataset.hasAllDayVersion = 'true';
+    
+    // ... opret all-day event
+}
+
+private handleConvertFromAllDay(draggedEventId: string): void {
+    // Find original og fjern flag
+    const original = document.querySelector(`[data-event-id="${draggedEventId}"]`);
+    if (original) {
+        delete original.dataset.hasAllDayVersion;
+    }
+    
+    // ... fjern all-day event
+}
+```
+
+## Anbefalet Løsning
+
+**DOM Query Check** (første løsning) er mest robust fordi:
+1. Den checker faktisk DOM state
+2. Ingen ekstra state at vedligeholde
+3. Fungerer selv hvis events kommer ud af sync
+
+## Test Verification
+
+For at teste om det virker:
+1. Åbn browser console
+2. Drag et event langsomt over header
+3. Se efter "already exists" log messages
+4. Verificer kun ÉT all-day event i DOM med: 
+   ```javascript
+   document.querySelectorAll('swp-allday-event').length
+   ```
+
+## Linje 274 Fix
+
+Samtidig skal vi fjerne/kommentere linje 274:
+```typescript
+// originalElement.remove();  // <-- KOMMENTER DENNE UD
+```
+
+Dette sikrer original element ikke fjernes for tidligt.