<!--
Feature Request: Validierungsfeedback & Auto-Scroll bei fehlenden Pflichtfeldern im Upload-Formular
Zielgruppe: Entwickler / KI-Implementierer
-->

# FEATURE_REQUEST: Upload-Formular – Validierungsfeedback bei fehlenden Pflichtfeldern

**Status**: ⏳ Geplant  
**Erstellt**: 1. April 2026

---

## Problem

Das Upload-Formular (`MultiUploadPage`) blockiert den Upload-Vorgang still, wenn Pflichtfelder
fehlen. Die Funktion `handleUpload` bricht ohne Benutzerrückmeldung ab:

```js
// Aktuelles Verhalten in handleUpload():
if (selectedImages.length === 0) return;
if (!metadata.year || !metadata.title.trim()) return;
if (!consents.workshopConsent) return;
```

Der Nutzer klickt auf den Upload-Button – nichts passiert. Kein Hinweis, welches Feld fehlt,
keine visuelle Hervorhebung, kein Scroll zum Problem.

### Betroffene Pflichtfelder

| Feld | Bedingung |
|---|---|
| Bilder auswählen | `selectedImages.length === 0` |
| Jahr | `!metadata.year` |
| Titel der Slideshow | `!metadata.title.trim()` |
| Workshop-Einwilligung (Checkbox) | `!consents.workshopConsent` |

---

## Gewünschtes Verhalten

1. **Klick auf Upload-Button** → Validierung aller Pflichtfelder
2. **Bei einem oder mehreren fehlenden Feldern:**
   - Das erste fehlende Feld wird visuell hervorgehoben (roter Rahmen / Fehlermeldung unterhalb)
   - Die Seite scrollt automatisch zum ersten fehlenden Feld
   - Der Upload wird nicht ausgeführt
3. **Fehlermeldungen verschwinden**, sobald der Nutzer das jeweilige Feld korrekt ausfüllt

---

## Use Cases

### UC-1: Kein Titel eingegeben
- Nutzer wählt Bilder aus, füllt Jahr aus, setzt Einwilligung, aber lässt Titel leer
- Klick auf Upload-Button
- → Seite scrollt zum Titel-Feld, Feld wird rot umrandet, Meldung: *„Bitte gib einen Titel für die Slideshow ein."*

### UC-2: Kein Jahr gewählt
- → Seite scrollt zum Jahr-Feld, Fehlermeldung: *„Bitte wähle ein Jahr aus."*

### UC-3: Einwilligung fehlt
- → Seite scrollt zur Checkbox, Fehlermeldung: *„Bitte bestätige die Einwilligung."*

### UC-4: Mehrere Felder fehlen gleichzeitig
- → Scroll zum **ersten** fehlenden Feld (Reihenfolge: Bilder → Jahr → Titel → Einwilligung)
- Alle fehlenden Felder werden gleichzeitig markiert

---

## Technische Umsetzung

### Implementierungsschritte

1. **Branch anlegen**: `feature/upload-form-validation`
2. **Plan-Datei anlegen**: `FeatureRequests/FEATURE_PLAN-upload-form-validation.md`
3. Fragen zur Umsetzung stellen (siehe unten)
4. Code-Implementierung

### Technischer Ansatz

**State für Validierungsfehler** in `MultiUploadPage`:

```js
const [validationErrors, setValidationErrors] = useState({
  images: false,
  year: false,
  title: false,
  workshopConsent: false,
});
```

**Refs für Auto-Scroll** zu jedem Pflichtfeld:

```js
const imagesSectionRef = useRef(null);
const yearFieldRef = useRef(null);
const titleFieldRef = useRef(null);
const consentRef = useRef(null);
```

**Validierungslogik** vor dem Upload:

```js
const validate = () => {
  const errors = {
    images: selectedImages.length === 0,
    year: !metadata.year,
    title: !metadata.title.trim(),
    workshopConsent: !consents.workshopConsent,
  };
  setValidationErrors(errors);

  // Zum ersten Fehler scrollen
  if (errors.images) imagesSectionRef.current?.scrollIntoView({ behavior: 'smooth' });
  else if (errors.year) yearFieldRef.current?.scrollIntoView({ behavior: 'smooth' });
  else if (errors.title) titleFieldRef.current?.scrollIntoView({ behavior: 'smooth' });
  else if (errors.workshopConsent) consentRef.current?.scrollIntoView({ behavior: 'smooth' });

  return !Object.values(errors).some(Boolean);
};
```

**Fehler-Reset** bei Änderungen an den Feldern (jeweils im jeweiligen onChange-Handler):

```js
setValidationErrors(prev => ({ ...prev, title: false }));
```

**Visuelle Hervorhebung**: Felder-Komponenten erhalten ein `error`-Prop (MUI-Standard):

```jsx
<TextField
  ref={titleFieldRef}
  error={validationErrors.title}
  helperText={validationErrors.title ? 'Bitte gib einen Titel ein.' : ''}
  ...
/>
```

---

## Klärungsfragen vor der Umsetzung

1. Werden die Eingabe-Komponenten für Jahr und Titel als MUI-`TextField`/`Select` gerendert
   oder als eigene Custom-Komponenten? (Bestimmt, ob `error`-Prop direkt nutzbar ist)
2. Soll die Einwilligungs-Checkbox ebenfalls eine inline Fehlermeldung erhalten oder reicht
   ein Scroll + farbliche Markierung des Checkbox-Labels?
3. Soll der Upload-Button während der Validierung deaktiviert (`disabled`) bleiben, oder erst
   nach dem ersten Klickversuch aktiviert werden? (aktuelle Implementierung: Button ist immer aktiv)