Additional event informations can be added

2026-08-12 15:01:35 +02:00
parent 554166803b
commit 9581176a0c
28 changed files with 675 additions and 39 deletions
@@ -0,0 +1,155 @@
+<script setup>
+import {ref} from "vue";
+import {toast} from "vue3-toastify";
+import {request} from "../../../../../resources/js/components/HttpClient.js";
+
+const emit = defineEmits(['close'])
+
+const props = defineProps({
+    event: Object,
+})
+
+// Fragen-Definition dieses Events: [ { key, label, options: [ { value, label } ] } ].
+// key/value bleiben für bestehende Einträge erhalten (Bestandsschutz für bereits gespeicherte Antworten);
+// neue Einträge bekommen serverseitig beim Speichern einen stabilen Slug.
+const questions = ref((props.event.participationOptions ?? []).map(q => ({
+    key: q.key ?? '',
+    label: q.label ?? '',
+    options: (q.options ?? []).map(o => ({value: o.value ?? '', label: o.label ?? ''})),
+})))
+
+function addQuestion() {
+    questions.value.push({key: '', label: '', options: [{value: '', label: ''}, {value: '', label: ''}]})
+}
+
+function removeQuestion(index) {
+    questions.value.splice(index, 1)
+}
+
+function addOption(question) {
+    question.options.push({value: '', label: ''})
+}
+
+function removeOption(question, index) {
+    question.options.splice(index, 1)
+}
+
+function validate() {
+    for (const question of questions.value) {
+        if (question.label.trim() === '') {
+            toast.error('Bitte für jede Frage eine Beschriftung angeben.')
+            return false
+        }
+
+        const validOptions = question.options.filter(o => o.label.trim() !== '')
+        if (validOptions.length < 1) {
+            toast.error('Jede Frage braucht mindestens eine Auswahlmöglichkeit.')
+            return false
+        }
+    }
+
+    return true
+}
+
+async function save() {
+    if (!validate()) {
+        return
+    }
+
+    const response = await request('/api/v1/event/details/' + props.event.id + '/participation-options', {
+        method: 'POST',
+        body: {
+            questions: questions.value,
+        }
+    })
+
+    if (response.status !== 'success') {
+        toast.error(response.message ?? 'Die Teilnahmeoptionen konnten nicht gespeichert werden.')
+        return
+    }
+
+    toast.success('Die Teilnahmeoptionen wurden gespeichert')
+    emit('close')
+}
+</script>
+
+<template>
+    <div class="participation-options">
+        <h3>Teilnahmeoptionen</h3>
+        <p style="color: #6b7280; font-size: 0.9rem;">
+            Pflicht-Auswahlfragen für die Anmeldung (z. B. Kurs oder Stufe). Je Frage ist genau eine Option wählbar.
+            Ohne Fragen wird dieser Schritt in der Anmeldung übersprungen.
+        </p>
+
+        <div v-for="(question, qIndex) in questions" :key="qIndex" class="question-card">
+            <div class="question-head">
+                <input
+                    type="text"
+                    v-model="question.label"
+                    class="width-full"
+                    placeholder="Frage, z. B. „Welchen Kurs möchtest du belegen?“"
+                />
+                <label class="link remove-link" @click="removeQuestion(qIndex)">Frage entfernen</label>
+            </div>
+
+            <div class="options">
+                <div v-for="(option, oIndex) in question.options" :key="oIndex" class="option-row">
+                    <input
+                        type="text"
+                        v-model="option.label"
+                        class="width-full"
+                        placeholder="Auswahlmöglichkeit"
+                    />
+                    <label class="link remove-link" @click="removeOption(question, oIndex)">✕</label>
+                </div>
+                <label class="link" @click="addOption(question)">+ Option hinzufügen</label>
+            </div>
+        </div>
+
+        <div style="margin-top: 16px;">
+            <label class="link" @click="addQuestion">+ Frage hinzufügen</label>
+        </div>
+
+        <div style="margin-top: 24px;">
+            <input type="button" value="Speichern" @click="save"/>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.question-card {
+    margin-top: 16px;
+    padding: 14px;
+    background: #f8fafc;
+    border: 1px solid #e5e7eb;
+    border-radius: 10px;
+}
+
+.question-head {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.options {
+    margin-top: 12px;
+    padding-left: 12px;
+}
+
+.option-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 8px;
+}
+
+.width-full {
+    width: 100%;
+}
+
+.remove-link {
+    white-space: nowrap;
+    color: #ef4444;
+    font-size: 0.85rem;
+}
+</style>