# Dialog-Templates Dokumentation

## Übersicht

Das Dialog-System bietet wiederverwendbare Templates für modale und nicht-modale Dialoge.

## Komponenten

### 1. BaseDialog.vue

Die Basis-Komponente für alle Dialoge. Unterstützt sowohl modale als auch nicht-modale Dialoge.

#### Props

| Prop | Typ | Default | Beschreibung |
|------|-----|---------|--------------|
| `modelValue` | Boolean | `false` | v-model Binding für Sichtbarkeit |
| `isModal` | Boolean | `true` | Modaler Dialog (mit Overlay) oder nicht-modal |
| `title` | String | - | Dialog-Titel (erforderlich) |
| `size` | String | `'medium'` | Größe: `'small'`, `'medium'`, `'large'`, `'fullscreen'` |
| `position` | Object | `{ x: 100, y: 100 }` | Position für nicht-modale Dialoge |
| `zIndex` | Number | `1000` | z-Index des Dialogs |
| `closable` | Boolean | `true` | Schließen-Button anzeigen |
| `minimizable` | Boolean | `false` | Minimieren-Button anzeigen |
| `draggable` | Boolean | `true` | Dialog verschiebbar (nur nicht-modal) |
| `closeOnOverlay` | Boolean | `true` | Bei Klick auf Overlay schließen (nur modal) |

#### Events

| Event | Parameter | Beschreibung |
|-------|-----------|--------------|
| `update:modelValue` | Boolean | Wird beim Öffnen/Schließen gefeuert |
| `close` | - | Wird beim Schließen gefeuert |
| `minimize` | - | Wird beim Minimieren gefeuert |
| `focus` | - | Wird bei Klick auf nicht-modalen Dialog gefeuert |
| `update:position` | Object | Neue Position nach Verschieben |

#### Slots

| Slot | Beschreibung |
|------|--------------|
| `default` | Dialog-Inhalt |
| `header-actions` | Zusätzliche Aktionen im Header |
| `footer` | Dialog-Footer (optional) |

#### Beispiel: Modaler Dialog

```vue
<template>
  <BaseDialog
    v-model="isOpen"
    title="Mein Dialog"
    size="medium"
    @close="handleClose"
  >
    <p>Dialog-Inhalt hier</p>
    
    <template #footer>
      <button @click="isOpen = false">Schließen</button>
    </template>
  </BaseDialog>
</template>

<script>
import { ref } from 'vue';
import BaseDialog from '@/components/BaseDialog.vue';

export default {
  components: { BaseDialog },
  setup() {
    const isOpen = ref(false);
    
    const handleClose = () => {
      // Reagiere auf das Schließen des Dialogs
    };
    
    return { isOpen, handleClose };
  }
};
</script>
```

#### Beispiel: Nicht-modaler Dialog

```vue
<template>
  <BaseDialog
    v-model="isOpen"
    title="Nicht-modaler Dialog"
    :is-modal="false"
    :position="position"
    @update:position="position = $event"
    :draggable="true"
    :minimizable="true"
    size="medium"
  >
    <p>Dieser Dialog kann verschoben werden!</p>
  </BaseDialog>
</template>

<script>
import { ref, reactive } from 'vue';
import BaseDialog from '@/components/BaseDialog.vue';

export default {
  components: { BaseDialog },
  setup() {
    const isOpen = ref(false);
    const position = reactive({ x: 100, y: 100 });
    
    return { isOpen, position };
  }
};
</script>
```

## 2. ConfirmDialog.vue

Spezialisierter Dialog für Bestätigungen.

#### Props

| Prop | Typ | Default | Beschreibung |
|------|-----|---------|--------------|
| `modelValue` | Boolean | `false` | v-model Binding |
| `title` | String | `'Bestätigung'` | Dialog-Titel |
| `message` | String | - | Hauptnachricht (erforderlich) |
| `details` | String | `''` | Zusätzliche Details |
| `type` | String | `'info'` | Typ: `'info'`, `'warning'`, `'danger'`, `'success'` |
| `confirmText` | String | `'OK'` | Text für Bestätigen-Button |
| `cancelText` | String | `'Abbrechen'` | Text für Abbrechen-Button |
| `showCancel` | Boolean | `true` | Abbrechen-Button anzeigen |

#### Events

| Event | Beschreibung |
|-------|--------------|
| `confirm` | Wird bei Bestätigung gefeuert |
| `cancel` | Wird bei Abbruch gefeuert |

#### Beispiel

```vue
<template>
  <ConfirmDialog
    v-model="showConfirm"
    title="Löschen bestätigen"
    message="Möchten Sie diesen Eintrag wirklich löschen?"
    type="danger"
    confirm-text="Löschen"
    @confirm="handleDelete"
    @cancel="handleCancel"
  />
</template>

<script>
import { ref } from 'vue';
import ConfirmDialog from '@/components/ConfirmDialog.vue';

export default {
  components: { ConfirmDialog },
  setup() {
    const showConfirm = ref(false);
    
    const handleDelete = () => {
      // Lösche den Eintrag
    };
    
    const handleCancel = () => {
      // Brich die Aktion ab
    };
    
    return { showConfirm, handleDelete, handleCancel };
  }
};
</script>
```

## 3. ImageDialog.vue

Einfacher Dialog zur Anzeige von Bildern.

#### Props

| Prop | Typ | Default | Beschreibung |
|------|-----|---------|--------------|
| `modelValue` | Boolean | `false` | v-model Binding |
| `title` | String | `'Bild'` | Dialog-Titel |
| `imageUrl` | String | `''` | URL des anzuzeigenden Bildes |

#### Events

| Event | Beschreibung |
|-------|--------------|
| `close` | Wird beim Schließen gefeuert |

#### Beispiel

```vue
<template>
  <ImageDialog
    v-model="showImage"
    title="Aktivitätsbild"
    :image-url="imageUrl"
  />
</template>

<script>
import { ref } from 'vue';
import ImageDialog from '@/components/ImageDialog.vue';

export default {
  components: { ImageDialog },
  setup() {
    const showImage = ref(false);
    const imageUrl = ref('');
    
    return { showImage, imageUrl };
  }
};
</script>
```

## 4. ImageViewerDialog.vue

Erweiterter Bild-Dialog mit Aktionen (Drehen, Zoom).

#### Props

| Prop | Typ | Default | Beschreibung |
|------|-----|---------|--------------|
| `modelValue` | Boolean | `false` | v-model Binding |
| `title` | String | `'Bild'` | Dialog-Titel |
| `imageUrl` | String | `''` | URL des anzuzeigenden Bildes |
| `memberId` | Number/String | `null` | ID des zugehörigen Members (optional) |
| `showActions` | Boolean | `true` | Aktions-Buttons anzeigen |
| `allowRotate` | Boolean | `true` | Drehen-Buttons anzeigen |
| `allowZoom` | Boolean | `false` | Zoom-Button anzeigen |

#### Events

| Event | Parameter | Beschreibung |
|-------|-----------|--------------|
| `close` | - | Wird beim Schließen gefeuert |
| `rotate` | Object | Wird beim Drehen gefeuert: `{ direction, memberId, rotation }` |

#### Beispiel

```vue
<template>
  <ImageViewerDialog
    v-model="showImageModal"
    title="Mitgliedsbild"
    :image-url="selectedImageUrl"
    :member-id="selectedMemberId"
    :allow-rotate="true"
    @rotate="handleRotate"
  />
</template>

<script>
import { ref } from 'vue';
import ImageViewerDialog from '@/components/ImageViewerDialog.vue';
import apiClient from '@/apiClient.js';

export default {
  components: { ImageViewerDialog },
  setup() {
    const showImageModal = ref(false);
    const selectedImageUrl = ref('');
    const selectedMemberId = ref(null);
    
    const handleRotate = async (event) => {
      const { direction, memberId } = event;
      // API-Aufruf zum Drehen des Bildes
      await apiClient.post(`/members/${memberId}/rotate`, { direction });
    };
    
    return { showImageModal, selectedImageUrl, selectedMemberId, handleRotate };
  }
};
</script>
```

## 5. Composables

### useDialog()

Einfaches Composable für Dialog-Verwaltung.

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

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

// Dialog öffnen
open();

// Dialog schließen
close();

// Dialog umschalten
toggle();
```

## useConfirm()

Promise-basiertes Composable für Bestätigungsdialoge.

```