feat: add reordering feature plan and task breakdown
- Created comprehensive FEATURE_PLAN-reordering.md with 9 tasks in 3 phases - Must-Have: Touch-Support for mobile drag-and-drop - Admin-only: Reordering restricted to ModerationGroupImagesPage - Public users cannot reorder images (security restriction) - Technical approach: @dnd-kit/core + PUT /api/groups/:groupId/reorder - Estimated: 10-12 hours over 2-3 days
This commit is contained in:
parent
b3739fee75
commit
abd12923aa
7
TODO.md
7
TODO.md
|
|
@ -32,7 +32,12 @@ Neue Struktur: Datenbank in src/data/db und bilder in src/data/images
|
||||||
- [x] Die neue Komponente `ImageGallery` soll so aussehen wir die GroupCard im Grid -> siehe Pages/ModerationGroupPage.js und Pages/GroupOverviewPage.js und auch die gleichen Funktionalitäten besitzen.
|
- [x] Die neue Komponente `ImageGallery` soll so aussehen wir die GroupCard im Grid -> siehe Pages/ModerationGroupPage.js und Pages/GroupOverviewPage.js und auch die gleichen Funktionalitäten besitzen.
|
||||||
- [x] Klärung SimpleMultiDropzone vs. MultiImageUploadDropzone (MultiImageUploadDropzone wurde gelösch, SimpleMultiDropzone umbenannt in MultiImageDropzone)
|
- [x] Klärung SimpleMultiDropzone vs. MultiImageUploadDropzone (MultiImageUploadDropzone wurde gelösch, SimpleMultiDropzone umbenannt in MultiImageDropzone)
|
||||||
- [x] alte group-card css styles aus ImageGallery.css entfernen
|
- [x] alte group-card css styles aus ImageGallery.css entfernen
|
||||||
- [ ] Persistentes Reordering: Drag-and-drop in `ImagePreviewGallery` + Backend-Endpunkt
|
- [ ] **Persistentes Reordering: Drag-and-drop in `ImageGallery` + Backend-Endpunkt** 🚧
|
||||||
|
- **Status**: In Planung
|
||||||
|
- **Feature Plan**: `docs/FEATURE_PLAN-reordering.md`
|
||||||
|
- **Aufgaben**: 9 Tasks (Backend API + Frontend DnD + Integration)
|
||||||
|
- **Geschätzte Zeit**: 2-3 Tage
|
||||||
|
- **Library**: @dnd-kit/core für moderne DnD-Funktionalität
|
||||||
---
|
---
|
||||||
|
|
||||||
# Zusätzliche Funktionen
|
# Zusätzliche Funktionen
|
||||||
|
|
|
||||||
301
docs/FEATURE_PLAN-reordering.md
Normal file
301
docs/FEATURE_PLAN-reordering.md
Normal file
|
|
@ -0,0 +1,301 @@
|
||||||
|
# Feature Plan: Persistentes Drag-and-Drop Reordering
|
||||||
|
|
||||||
|
## 📋 Übersicht
|
||||||
|
|
||||||
|
**Feature**: Persistentes Reordering von Bildern in Gruppen mittels Drag-and-Drop
|
||||||
|
**Ziel**: Benutzer können die Reihenfolge von Bildern in einer Gruppe durch Ziehen und Ablegen ändern, und diese Änderung wird dauerhaft gespeichert.
|
||||||
|
**Priorität**: Medium
|
||||||
|
**Geschätzte Implementierungszeit**: 2-3 Tage
|
||||||
|
|
||||||
|
## 🎯 Funktionale Anforderungen
|
||||||
|
|
||||||
|
### Must-Have
|
||||||
|
- [x] **Drag-and-Drop Interface**: Bilder in ImageGallery können per Maus verschoben werden
|
||||||
|
- [x] **Visuelle Feedback**: Placeholder/Drop-Zone während des Ziehens anzeigen
|
||||||
|
- [x] **Persistierung**: Neue Reihenfolge wird in der Datenbank gespeichert
|
||||||
|
- [x] **Sofortige UI-Aktualisierung**: Änderungen sind sofort sichtbar ohne Page-Reload
|
||||||
|
- [x] **Slideshow-Integration**: Geänderte Reihenfolge wird in der Slideshow übernommen
|
||||||
|
- [x] **Touch-Support**: Drag-and-Drop auf Mobile-Geräten
|
||||||
|
|
||||||
|
### Nice-to-Have
|
||||||
|
- [ ] **Batch-Reordering**: Mehrere Bilder gleichzeitig verschieben
|
||||||
|
- [ ] **Undo/Redo**: Rückgängig-Funktion für Änderungen
|
||||||
|
- [ ] **Keyboard-Support**: Pfeiltasten für Reordering
|
||||||
|
|
||||||
|
## 🔧 Technische Umsetzung
|
||||||
|
|
||||||
|
### Frontend-Komponenten
|
||||||
|
|
||||||
|
#### 1. DragDropContext Integration
|
||||||
|
**Library**: `react-beautiful-dnd` oder `@dnd-kit/core` (moderne Alternative)
|
||||||
|
**Grund**: Bewährte Libraries mit guter Performance und Accessibility
|
||||||
|
|
||||||
|
**Installation:**
|
||||||
|
```bash
|
||||||
|
cd frontend
|
||||||
|
npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 2. ImageGallery Erweiterung
|
||||||
|
**Datei**: `frontend/src/Components/ComponentUtils/ImageGallery.js`
|
||||||
|
**Neue Props**:
|
||||||
|
- `enableReordering: boolean` (default: false)
|
||||||
|
- `onReorder: (oldIndex, newIndex) => void`
|
||||||
|
|
||||||
|
#### 3. Betroffene Pages
|
||||||
|
- `ModerationGroupImagesPage.js` - Admin kann Reihenfolge ändern
|
||||||
|
- `PublicGroupImagesPage.js` - ❌ **Kein Reordering** für öffentliche Benutzer
|
||||||
|
|
||||||
|
### Backend-Erweiterung
|
||||||
|
|
||||||
|
#### 1. Database Schema Update
|
||||||
|
**Aktuelle Spalte**: `upload_order INTEGER NOT NULL`
|
||||||
|
**Status**: ✅ Bereits vorhanden - kann wiederverwendet werden
|
||||||
|
|
||||||
|
#### 2. API-Endpoint
|
||||||
|
**Route**: `PUT /api/groups/:groupId/reorder`
|
||||||
|
**Payload**:
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"imageIds": [123, 456, 789, 234] // Neue Reihenfolge der Image-IDs
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Response**:
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"success": true,
|
||||||
|
"message": "Image order updated successfully"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 3. Repository-Methoden
|
||||||
|
**Datei**: `backend/src/repositories/GroupRepository.js`
|
||||||
|
**Neue Methode**: `updateImageOrder(groupId, imageIds)`
|
||||||
|
|
||||||
|
## 📝 Implementierungs-Aufgaben
|
||||||
|
|
||||||
|
### Phase 1: Backend API (Aufgaben 1-3)
|
||||||
|
|
||||||
|
#### Aufgabe 1: Repository-Methode für Reordering
|
||||||
|
- [ ] `GroupRepository.updateImageOrder()` implementieren
|
||||||
|
- [ ] SQL-Transaction für Batch-Update der upload_order Werte
|
||||||
|
- [ ] Error-Handling für ungültige imageIds oder groupId
|
||||||
|
- [ ] Unit-Tests für die Repository-Methode
|
||||||
|
|
||||||
|
**Akzeptanzkriterien:**
|
||||||
|
- Methode akzeptiert groupId und Array von imageIds
|
||||||
|
- upload_order wird basierend auf Array-Index gesetzt (1, 2, 3, ...)
|
||||||
|
- Rollback bei Fehlern in der Transaction
|
||||||
|
- Nur Bilder der angegebenen Gruppe werden aktualisiert
|
||||||
|
|
||||||
|
#### Aufgabe 2: API-Route für Reordering
|
||||||
|
- [ ] Route `PUT /api/groups/:groupId/reorder` erstellen
|
||||||
|
- [ ] Request-Validation (groupId muss existieren, imageIds müssen zur Gruppe gehören)
|
||||||
|
- [ ] Aufruf der Repository-Methode
|
||||||
|
- [ ] Error-Handling und HTTP-Status-Codes
|
||||||
|
|
||||||
|
**Akzeptanzkriterien:**
|
||||||
|
- Route akzeptiert JSON-Body mit imageIds Array
|
||||||
|
- 200 bei Erfolg, 400 bei ungültigen Daten, 404 wenn Gruppe nicht existiert
|
||||||
|
- Response enthält Erfolgs-Status und Message
|
||||||
|
- Logging für Reordering-Aktionen
|
||||||
|
|
||||||
|
#### Aufgabe 3: Backend-Integration testen
|
||||||
|
- [ ] Manuelle API-Tests mit curl/Postman
|
||||||
|
- [ ] Verifizierung der Datenbankänderungen
|
||||||
|
- [ ] Performance-Test mit großen Bildergruppen (50+ Bilder)
|
||||||
|
|
||||||
|
**Akzeptanzkriterien:**
|
||||||
|
- API funktioniert mit verschiedenen Gruppengrößen
|
||||||
|
- Datenbank-Transaktionen sind atomar
|
||||||
|
- Keine Race-Conditions bei mehrfachen Requests
|
||||||
|
|
||||||
|
### Phase 2: Frontend Drag-and-Drop (Aufgaben 4-6)
|
||||||
|
|
||||||
|
#### Aufgabe 4: Drag-and-Drop Library integrieren
|
||||||
|
- [ ] `@dnd-kit/core` und zugehörige Packages installieren
|
||||||
|
- [ ] DragDropContext in relevanten Pages einrichten
|
||||||
|
- [ ] Basis-Drag-and-Drop ohne Backend-Anbindung implementieren
|
||||||
|
|
||||||
|
**Akzeptanzkriterien:**
|
||||||
|
- Bilder können visuell verschoben werden
|
||||||
|
- Placeholder wird während Drag-Operation angezeigt
|
||||||
|
- Drop-Operation aktualisiert lokale State
|
||||||
|
- Keine Konsolen-Fehler oder Performance-Issues
|
||||||
|
|
||||||
|
#### Aufgabe 5: ImageGallery Komponente erweitern
|
||||||
|
- [ ] `enableReordering` Prop hinzufügen
|
||||||
|
- [ ] Conditional Rendering für Drag-and-Drop Elements
|
||||||
|
- [ ] `onReorder` Callback implementieren
|
||||||
|
- [ ] Visuelle Indikatoren für "draggable" Items
|
||||||
|
|
||||||
|
**Akzeptanzkriterien:**
|
||||||
|
- Reordering kann per Prop aktiviert/deaktiviert werden
|
||||||
|
- Drag-Handles oder visueller Hinweis für bewegbare Items
|
||||||
|
- Smooth Animationen während Drag-Operation
|
||||||
|
- Responsive Design bleibt erhalten
|
||||||
|
|
||||||
|
#### Aufgabe 6: API-Integration im Frontend
|
||||||
|
- [ ] Service-Funktion für Reordering-API erstellen
|
||||||
|
- [ ] Loading-State während API-Call
|
||||||
|
- [ ] Error-Handling mit User-Feedback (Toast/Snackbar)
|
||||||
|
- [ ] Optimistic Updates mit Rollback bei Fehlern
|
||||||
|
|
||||||
|
**Akzeptanzkriterien:**
|
||||||
|
- Reordering wird sofort in UI angezeigt (optimistic update)
|
||||||
|
- Loading-Indicator während Backend-Synchronisation
|
||||||
|
- Fehlermeldung und UI-Rollback bei API-Fehlern
|
||||||
|
- Success-Feedback nach erfolgreicher Speicherung
|
||||||
|
|
||||||
|
### Phase 3: Integration & Testing (Aufgaben 7-9)
|
||||||
|
|
||||||
|
#### Aufgabe 7: Pages-Integration
|
||||||
|
- [ ] ModerationGroupImagesPage: Reordering für Admins aktivieren
|
||||||
|
- [ ] PublicGroupImagesPage: Reordering explizit DEAKTIVIERT für öffentliche User
|
||||||
|
- [ ] Permissions/Authentication für Reordering-Feature prüfen
|
||||||
|
|
||||||
|
**Akzeptanzkriterien:**
|
||||||
|
- Admins können in Moderation-Interface Bilder neu ordnen
|
||||||
|
- Öffentliche Benutzer können NICHT reordern (UI zeigt keine Drag-Handles)
|
||||||
|
- UI zeigt deutlich an, wo Reordering möglich ist
|
||||||
|
|
||||||
|
#### Aufgabe 8: Slideshow-Integration
|
||||||
|
- [ ] SlideshowPage respektiert die neue upload_order
|
||||||
|
- [ ] Testen der Slideshow nach Reordering-Operationen
|
||||||
|
- [ ] Sicherstellen dass Slideshow-Navigation weiterhin funktioniert
|
||||||
|
|
||||||
|
**Akzeptanzkriterien:**
|
||||||
|
- Slideshow zeigt Bilder in der vom Admin festgelegten Reihenfolge
|
||||||
|
- Navigation (Vor/Zurück) folgt der neuen Reihenfolge
|
||||||
|
- Automatische Slideshow-Progression respektiert die Reihenfolge
|
||||||
|
|
||||||
|
#### Aufgabe 9: End-to-End Testing
|
||||||
|
- [ ] Manuelles Testing aller Drag-and-Drop Szenarien
|
||||||
|
- [ ] Cross-Browser Testing (Chrome, Firefox, Safari)
|
||||||
|
- [ ] Mobile-Testing (Touch-Devices)
|
||||||
|
- [ ] Performance-Testing mit großen Bildergruppen
|
||||||
|
|
||||||
|
**Akzeptanzkriterien:**
|
||||||
|
- Feature funktioniert in allen unterstützten Browsern
|
||||||
|
- Keine Performance-Probleme bei 50+ Bildern
|
||||||
|
- Mobile-Usability ist akzeptabel (auch ohne Touch-DnD)
|
||||||
|
- Keine Regressionen in existierenden Features
|
||||||
|
|
||||||
|
## 🔗 Betroffene Dateien
|
||||||
|
|
||||||
|
### Neue Dateien
|
||||||
|
- `backend/src/routes/reorder.js` - API-Route für Reordering
|
||||||
|
- `frontend/src/services/reorderService.js` - API-Client für Reordering
|
||||||
|
- `frontend/src/hooks/useReordering.js` - Custom Hook für Drag-and-Drop Logic
|
||||||
|
|
||||||
|
### Zu modifizierende Dateien
|
||||||
|
|
||||||
|
#### Backend
|
||||||
|
- `backend/src/repositories/GroupRepository.js` - Neue updateImageOrder() Methode
|
||||||
|
- `backend/src/routes/index.js` - Route-Registration
|
||||||
|
- `backend/package.json` - Evtl. neue Dependencies
|
||||||
|
|
||||||
|
#### Frontend
|
||||||
|
- `frontend/package.json` - @dnd-kit Dependencies
|
||||||
|
- `frontend/src/Components/ComponentUtils/ImageGallery.js` - Drag-and-Drop Integration
|
||||||
|
- `frontend/src/Components/ComponentUtils/ImageGalleryCard.js` - Drag-Handle hinzufügen
|
||||||
|
- `frontend/src/Components/Pages/ModerationGroupImagesPage.js` - Reordering aktivieren
|
||||||
|
- `frontend/src/Components/Pages/PublicGroupImagesPage.js` - Reordering deaktiviert
|
||||||
|
- `frontend/src/Utils/sendRequest.js` - Evtl. neue API-Calls
|
||||||
|
|
||||||
|
## 🎨 UI/UX Konzept
|
||||||
|
|
||||||
|
### Visual Design
|
||||||
|
- **Drag-Handle**: Subtiles "≡≡" Icon am ImageGalleryCard
|
||||||
|
- **Hover-State**: Leichte Elevation und Cursor-Änderung
|
||||||
|
- **Drag-State**: Reduzierte Opacity des gezogenen Elements
|
||||||
|
- **Drop-Zone**: Gestrichelte Linie oder Highlight der Drop-Position
|
||||||
|
|
||||||
|
### User Flow
|
||||||
|
1. **Aktivierung**: Admin geht zu "Gruppe bearbeiten" Seite
|
||||||
|
2. **Visual Cue**: Drag-Handles werden sichtbar
|
||||||
|
3. **Drag-Interaction**: User klickt und zieht ein Bild
|
||||||
|
4. **Drop-Feedback**: Neue Position wird visuell hervorgehoben
|
||||||
|
5. **Confirmation**: Loading-Spinner → Success-Message
|
||||||
|
6. **Verification**: User kann Slideshow öffnen und neue Reihenfolge bestätigen
|
||||||
|
|
||||||
|
## ⚠️ Risiken & Mitigation
|
||||||
|
|
||||||
|
### Technische Risiken
|
||||||
|
**Risk**: Performance-Probleme bei großen Bildergruppen
|
||||||
|
**Mitigation**: Virtualisierung oder Paginierung für 100+ Bilder
|
||||||
|
|
||||||
|
**Risk**: Race-Conditions bei gleichzeitigen Reordering-Operationen
|
||||||
|
**Mitigation**: Optimistic Locking oder Request-Debouncing
|
||||||
|
|
||||||
|
**Risk**: Mobile-Usability ohne native Touch-DnD
|
||||||
|
**Mitigation**: Alternative UI (Up/Down Buttons) für Mobile
|
||||||
|
|
||||||
|
### UX-Risiken
|
||||||
|
**Risk**: Versehentliches Reordering durch Admins
|
||||||
|
**Mitigation**: Undo-Funktion oder Confirmation-Dialog
|
||||||
|
|
||||||
|
**Risk**: Unklare UI-Signale für Drag-Möglichkeit
|
||||||
|
**Mitigation**: Deutliche Visual-Cues und Hover-States
|
||||||
|
|
||||||
|
## 📊 Success Metrics
|
||||||
|
|
||||||
|
### Funktionale Metriken
|
||||||
|
- [ ] 100% der Drag-and-Drop Operationen werden korrekt persistiert
|
||||||
|
- [ ] <500ms Latenz für Reordering-API-Calls
|
||||||
|
- [ ] 0 Datenverluste durch Race-Conditions
|
||||||
|
|
||||||
|
### User Experience Metriken
|
||||||
|
- [ ] Admin kann 20 Bilder in <2 Minuten neu ordnen
|
||||||
|
- [ ] Feature ist intuitiv nutzbar ohne Dokumentation
|
||||||
|
- [ ] Keine User-Complaints über versehentliches Reordering
|
||||||
|
|
||||||
|
### Technical Metrics
|
||||||
|
- [ ] <100ms zusätzliche JavaScript-Bundle-Größe
|
||||||
|
- [ ] Kompatibilität mit 95% der Target-Browser
|
||||||
|
- [ ] Keine Performance-Regression in bestehenden Features
|
||||||
|
|
||||||
|
## 🚀 Rollout-Strategie
|
||||||
|
|
||||||
|
### Phase 1: Backend-Only Deployment
|
||||||
|
- API wird deployed, aber Frontend-Feature bleibt disabled
|
||||||
|
- Manuelle API-Tests in Production-Umgebung
|
||||||
|
|
||||||
|
### Phase 2: Admin-Only Feature
|
||||||
|
- Feature nur für Admins in Moderation-Interface aktiviert
|
||||||
|
- Feedback-Collection und Bug-Fixes
|
||||||
|
|
||||||
|
### Phase 3: Full Rollout
|
||||||
|
- Feature für alle berechtigten User verfügbar
|
||||||
|
- Monitoring und Performance-Optimierung
|
||||||
|
|
||||||
|
## 📚 Dokumentation
|
||||||
|
|
||||||
|
### README Updates
|
||||||
|
- [ ] Reordering-Feature in Features-Liste aufnehmen
|
||||||
|
- [ ] User-Guide für Admin-Interface erweitern
|
||||||
|
|
||||||
|
### API Documentation
|
||||||
|
- [ ] OpenAPI/Swagger-Doc für neue Reordering-Endpoints
|
||||||
|
- [ ] Beispiel-Requests und -Responses
|
||||||
|
|
||||||
|
### Code Documentation
|
||||||
|
- [ ] JSDoc für neue Frontend-Komponenten
|
||||||
|
- [ ] Inline-Comments für komplexe Drag-and-Drop Logic
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🏁 Definition of Done
|
||||||
|
|
||||||
|
Das Feature ist fertig, wenn:
|
||||||
|
- [x] Alle 9 Aufgaben sind abgeschlossen
|
||||||
|
- [x] Code-Review ist durchgeführt
|
||||||
|
- [x] Manuelle Tests in allen Target-Browsern bestanden
|
||||||
|
- [x] Backend-API ist dokumentiert
|
||||||
|
- [x] README.md ist aktualisiert
|
||||||
|
- [x] Feature ist in Production deployed und funktional
|
||||||
|
|
||||||
|
**Geschätzte Implementierungsdauer**: 10-12 Stunden verteilt auf 2-3 Tage
|
||||||
|
**Abhängigkeiten**: Keine - Feature kann parallel zu anderen Entwicklungen implementiert werden
|
||||||
|
**Rollback-Plan**: Feature-Flag zum Deaktivieren, alte upload_order bleibt unverändert
|
||||||
Loading…
Reference in New Issue
Block a user