# Dialog-Komponenten Übersicht

> Hinweis: Alle Beispiele verwenden unsere Dialog-Komponenten (`InfoDialog`, `ConfirmDialog`). Klassische Browser-Dialoge (`alert`, `confirm`) werden ausschließlich zu Vergleichszwecken genannt und sollen nicht in produktivem Code eingesetzt werden.

## 📋 Alle verfügbaren Dialog-Komponenten

### Basis-Komponenten

#### 1. **BaseDialog.vue**
Basis-Template für alle Dialoge (modal und nicht-modal).

**Props:** `modelValue`, `isModal`, `title`, `size`, `position`, `zIndex`, `closable`, `minimizable`, `draggable`, `closeOnOverlay`

**Verwendung:**
```vue
<BaseDialog v-model="isOpen" title="Titel" size="medium">
  Content
</BaseDialog>
```

---

### Informations-Dialoge

#### 2. **InfoDialog.vue**
Einfache Informationsmeldungen mit OK-Button.

**Props:** `modelValue`, `title`, `message`, `details`, `type` (info/success/warning/error), `icon`, `okText`

**Verwendung:**
```vue
<InfoDialog
  v-model="showInfo"
  title="Erfolg"
  message="Gespeichert!"
  type="success"
/>
```

#### 3. **ConfirmDialog.vue**
Bestätigungsdialoge mit OK/Abbrechen.

**Props:** `modelValue`, `title`, `message`, `details`, `type` (info/warning/danger/success), `confirmText`, `cancelText`, `showCancel`

**Events:** `@confirm`, `@cancel`

**Verwendung:**
```vue
<ConfirmDialog
  v-model="showConfirm"
  title="Löschen?"
  message="Wirklich löschen?"
  type="danger"
  @confirm="handleDelete"
  @cancel="handleCancel"
/>
```

---

### Bild-Dialoge

#### 4. **ImageDialog.vue**
Einfache Bildanzeige.

**Props:** `modelValue`, `title`, `imageUrl`

**Verwendung:**
```vue
<ImageDialog
  v-model="showImage"
  title="Bild"
  :image-url="imageUrl"
/>
```

#### 5. **ImageViewerDialog.vue**
Erweiterte Bildanzeige mit Aktionen (Drehen, Zoom).

**Props:** `modelValue`, `title`, `imageUrl`, `memberId`, `showActions`, `allowRotate`, `allowZoom`

**Events:** `@rotate`

**Verwendung:**
```vue
<ImageViewerDialog
  v-model="showImage"
  :image-url="imageUrl"
  :member-id="memberId"
  :allow-rotate="true"
  @rotate="handleRotate"
/>
```

---

### Spezifische Dialoge

#### 6. **MemberNotesDialog.vue**
Notizen-Verwaltung für Mitglieder mit Bild, Tags und Notizliste.

**Props:** `modelValue`, `member`, `notes`, `selectedTags`, `availableTags`, `noteContent`

**Events:** `@add-note`, `@delete-note`, `@add-tag`, `@remove-tag`

**Verwendung:**
```vue
<MemberNotesDialog
  v-model="showNotes"
  :member="selectedMember"
  :notes="notes"
  v-model:note-content="newNote"
  v-model:selected-tags="tags"
  :available-tags="allTags"
  @add-note="addNote"
  @delete-note="deleteNote"
/>
```

#### 7. **TagHistoryDialog.vue**
Tag-Historie für Mitglieder.

**Props:** `modelValue`, `member`, `tagHistory`, `selectedTags`, `activityTags`

**Events:** `@select-tag`

**Verwendung:**
```vue
<TagHistoryDialog
  v-model="showHistory"
  :member="member"
  :tag-history="history"
  v-model:selected-tags="tags"
  :activity-tags="allTags"
  @select-tag="handleSelectTag"
/>
```

#### 8. **AccidentFormDialog.vue**
Unfall-Meldungs-Formular.

**Props:** `modelValue`, `accident`, `members`, `participants`, `accidents`

**Events:** `@submit`

**Verwendung:**
```vue
<AccidentFormDialog
  v-model="showAccident"
  v-model:accident="accidentData"
  :members="members"
  :participants="participants"
  :accidents="reportedAccidents"
  @submit="saveAccident"
/>
```

#### 9. **QuickAddMemberDialog.vue**
Schnelles Hinzufügen von Mitgliedern.

**Props:** `modelValue`, `member`

**Events:** `@submit`

**Verwendung:**
```vue
<QuickAddMemberDialog
  v-model="showQuickAdd"
  v-model:member="newMember"
  @submit="createMember"
/>
```

#### 10. **CsvImportDialog.vue**
CSV-Datei-Import mit Dateiauswahl.

**Props:** `modelValue`

**Events:** `@import`

**Verwendung:**
```vue
<CsvImportDialog
  v-model="showImport"
  @import="handleImport"
/>
```

#### 11. **TrainingDetailsDialog.vue**
Trainings-Details und Statistiken für Mitglieder.

**Props:** `modelValue`, `member`

**Verwendung:**
```vue
<TrainingDetailsDialog
  v-model="showDetails"
  :member="selectedMember"
/>
```

#### 12. **MemberSelectionDialog.vue**
Mitglieder-Auswahl mit Empfehlungen (für PDF-Generierung).

**Props:** `modelValue`, `members`, `selectedIds`, `activeMemberId`, `recommendations`, `recommendedKeys`, `showRecommendations`

**Events:** `@select-all`, `@deselect-all`, `@toggle-member`, `@toggle-recommendation`, `@generate-pdf`

**Verwendung:**
```vue
<MemberSelectionDialog
  v-model="showSelection"
  :members="members"
  v-model:selected-ids="selectedIds"
  :recommendations="recommendations"
  @generate-pdf="generatePdf"
/>
```

---

## 🎨 Dialog-Typen und Icons

| Typ | Icon | Farbe | Verwendung |
|-----|------|-------|-----------|
| `info` | ℹ️ | Blau | Informationen |
| `success` | ✅ | Grün | Erfolgsmeldungen |
| `warning` | ⚠️ | Gelb | Warnungen |
| `error` | ⛔ | Rot | Fehler |
| `danger` | ⛔ | Rot | Gefährliche Aktionen (Löschen) |

---

## 📏 Dialog-Größen

| Größe | Breite | Verwendung |
|-------|--------|-----------|
| `small` | 400px | Einfache Meldungen, Bestätigungen |
| `medium` | 600px | Standard-Formulare, Notizen |
| `large` | 900px | Komplexe Inhalte, Listen, Details |
| `fullscreen` | 90vw × 90vh | Maximale Fläche |

---

## 🔧 Composables

### useDialog()
```javascript
import { useDialog } from '@/composables/useDialog.js';

const { isOpen, open, close, toggle } = useDialog();
```

### useConfirm()
```javascript
import { useConfirm } from '@/composables/useDialog.js';

const { confirm } = useConfirm();
const result = await confirm({
  title: 'Löschen?',
  message: 'Wirklich löschen?',
  type: 'danger'
});
```

### useInfo()
```javascript
import { useInfo } from '@/composables/useDialog.js';

const { showInfo } = useInfo();
await showInfo({
  title: 'Erfolg',
  message: 'Gespeichert!',
  type: 'success'
});
```

---

## 🎯 Migration Guide

### Von JavaScript-Alert/Confirm:

**Vorher:**
```javascript
// Nicht mehr verwenden:
// alert('Fehler!');
// if (confirm('Löschen?')) { ... }
```

**Nachher:**
```javascript
// In setup() oder data():
const infoDialog = ref({ isOpen: false, title: '', message: '', details: '', type: 'info' });
const confirmDialog = ref({ isOpen: false, title: '', message: '', details: '', type: 'info', resolveCallback: null });

// Methods:
async showInfo(title, message, details = '', type = 'info') {
  this.infoDialog = { isOpen: true, title, message, details, type };
}

async showConfirm(title, message, details = '', type = 'info') {
  return new Promise((resolve) => {
    this.confirmDialog = { isOpen: true, title, message, details, type, resolveCallback: resolve };
  });
}

// Verwenden:
this.showInfo('Fehler', 'Fehler!', '', 'error');
const confirmed = await this.showConfirm('Bestätigung', 'Löschen?', '', 'danger');
if (confirmed) { ... }
```

### Von Inline-Modal:

**Vorher:**
```vue
<div v-if="showModal" class="modal-overlay">
  <div class="modal">
    <span class="close" @click="showModal = false">&times;</span>
    <h3>Titel</h3>
    <!-- Content -->
  </div>
</div>
```

**Nachher:**
```vue
<BaseDialog v-model="showModal" title="Titel">
  <!-- Content -->
</BaseDialog>
```

---

## ✅ Best Practices

1. **v-model verwenden** für Sichtbarkeit
2. **Slots nutzen** für flexible Inhalte (#footer, #header-actions)
3. **Events emittieren** statt direkte Manipulation
4. **Props validieren** mit `validator` Funktionen
5. **Responsive Design** berücksichtigen
6. **Memory Management** bei Blob URLs (revokeObjectURL)
7. **Eigene Komponenten** für wiederverwendbare Dialoge erstellen

---

## 📚 Weitere Informationen

Siehe `DIALOG_TEMPLATES.md` für detaillierte API-Dokumentation und erweiterte Beispiele.

