Handling of event addons

2026-08-12 17:18:45 +02:00
parent 085299336e
commit 6e4e6b645c
74 changed files with 3072 additions and 95 deletions
@@ -0,0 +1,166 @@
+<script setup>
+import {ref} from "vue";
+import {toast} from "vue3-toastify";
+import {request} from "../../../../../resources/js/components/HttpClient.js";
+import AmountInput from "../../../../Views/Components/AmountInput.vue";
+
+const emit = defineEmits(['close'])
+
+const props = defineProps({
+    event: Object,
+})
+
+// Addon-Definition dieses Events: [ { key, title, description, price, flat } ].
+// key bleibt für bestehende Einträge erhalten (Bestandsschutz für bereits gebuchte Zusätze).
+const addons = ref((props.event.addons ?? []).map(a => ({
+    key: a.key ?? '',
+    title: a.title ?? '',
+    description: a.description ?? '',
+    price: a.price != null ? String(a.price).replace('.', ',') : '0',
+    flat: a.flat ?? false,
+})))
+
+function addAddon() {
+    addons.value.push({key: '', title: '', description: '', price: '0', flat: true})
+}
+
+function removeAddon(index) {
+    addons.value.splice(index, 1)
+}
+
+function validate() {
+    for (const addon of addons.value) {
+        if (addon.title.trim() === '') {
+            toast.error('Bitte für jeden Zusatz einen Titel angeben.')
+            return false
+        }
+    }
+
+    return true
+}
+
+async function save() {
+    if (!validate()) {
+        return
+    }
+
+    const response = await request('/api/v1/event/details/' + props.event.id + '/event-addons', {
+        method: 'POST',
+        body: {
+            addons: addons.value,
+        }
+    })
+
+    if (response.status !== 'success') {
+        toast.error(response.message ?? 'Die Zusatzoptionen konnten nicht gespeichert werden.')
+        return
+    }
+
+    toast.success('Die Zusatzoptionen wurden gespeichert')
+    emit('close')
+}
+</script>
+
+<template>
+    <div class="event-addons">
+        <h3>Zusatzoptionen</h3>
+        <p style="color: #6b7280; font-size: 0.9rem;">
+            Buchbare Zusätze zur Veranstaltung (z. B. Parkticket, Aufnäher). Jede Position ist eine Ja/Nein-Auswahl.
+            Preis 0 wird dem Teilnehmenden als „Kostenfrei" angezeigt. Ist „Pauschale" nicht gesetzt, wird der Preis
+            mit der Anzahl der Teilnahmetage multipliziert. Ohne Zusätze wird dieser Schritt in der Anmeldung
+            übersprungen.
+        </p>
+
+        <div v-for="(addon, index) in addons" :key="index" class="addon-card">
+            <div class="addon-head">
+                <div class="addon-fields">
+                    <label class="field-label">Titel</label>
+                    <input type="text" v-model="addon.title" class="width-full" placeholder="z. B. „Parkticket“"/>
+
+                    <label class="field-label">Beschreibung (optional)</label>
+                    <input type="text" v-model="addon.description" class="width-full" placeholder="Kurze Erläuterung"/>
+
+                    <div class="addon-price-row">
+                        <span>
+                            <label class="field-label">Preis</label>
+                            <AmountInput v-model="addon.price" class="width-small"/> Euro
+                        </span>
+                        <label class="flat-label">
+                            <input type="checkbox" v-model="addon.flat"/>
+                            Pauschale (nicht pro Tag)
+                        </label>
+                    </div>
+                </div>
+                <label class="link remove-link" @click="removeAddon(index)">Entfernen</label>
+            </div>
+        </div>
+
+        <div style="margin-top: 16px;">
+            <label class="link" @click="addAddon">+ Zusatz hinzufügen</label>
+        </div>
+
+        <div style="margin-top: 24px;">
+            <input type="button" value="Speichern" @click="save"/>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.addon-card {
+    margin-top: 16px;
+    padding: 14px;
+    background: #f8fafc;
+    border: 1px solid #e5e7eb;
+    border-radius: 10px;
+}
+
+.addon-head {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+}
+
+.addon-fields {
+    flex: 1;
+}
+
+.field-label {
+    display: block;
+    font-size: 0.78rem;
+    color: #6b7280;
+    margin: 6px 0 2px;
+}
+
+.addon-fields .field-label:first-child {
+    margin-top: 0;
+}
+
+.addon-price-row {
+    display: flex;
+    align-items: flex-end;
+    gap: 24px;
+    margin-top: 6px;
+}
+
+.flat-label {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.9rem;
+    color: #374151;
+}
+
+.width-full {
+    width: 100%;
+}
+
+.width-small {
+    width: 90px;
+}
+
+.remove-link {
+    white-space: nowrap;
+    color: #ef4444;
+    font-size: 0.85rem;
+}
+</style>