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,62 @@
+<script setup>
+import {computed} from "vue";
+import {nextVisibleFrom, prevVisibleFrom, STEP_PARTICIPATION_OPTIONS} from "../composables/stepFlow.js";
+
+const props = defineProps({formData: Object, event: Object})
+const emit = defineEmits(['next', 'back'])
+
+const questions = computed(() => props.event.participationOptions ?? [])
+
+// Pflichtfeld: "Weiter" erst möglich, wenn jede Frage beantwortet ist.
+const canProceed = computed(() =>
+    questions.value.every(q => {
+        const value = props.formData.participationOptions[q.key]
+        return value !== undefined && value !== null && String(value).trim() !== ''
+    })
+)
+
+const back = () => emit('back', prevVisibleFrom(props.event, STEP_PARTICIPATION_OPTIONS))
+const next = () => emit('next', nextVisibleFrom(props.event, STEP_PARTICIPATION_OPTIONS))
+</script>
+
+<template>
+    <div>
+        <h3>Teilnahmeoptionen</h3>
+        <p style="color: #6b7280; font-size: 0.95rem; margin-bottom: 20px;">
+            Bitte triff für jede Auswahl eine Entscheidung.
+        </p>
+
+        <table class="form-table">
+            <tr v-for="question in questions" :key="question.key">
+                <td>
+                    {{ question.title || question.label }}:
+                    <span v-if="question.title && question.label" class="option-hint">{{ question.label }}</span>
+                </td>
+                <td>
+                    <select v-model="formData.participationOptions[question.key]">
+                        <option value="">Bitte wählen</option>
+                        <option v-for="option in question.options" :key="option.value" :value="option.value">
+                            {{ option.label }}
+                        </option>
+                    </select>
+                </td>
+            </tr>
+        </table>
+
+        <div class="btn-row">
+            <button type="button" class="btn-secondary" @click="back">← Zurück</button>
+            <button type="button" class="btn-primary" :disabled="!canProceed" @click="next">Weiter →</button>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.option-hint {
+    display: block;
+    margin-top: 2px;
+    font-size: 0.8rem;
+    font-style: italic;
+    font-weight: 400;
+    color: #6b7280;
+}
+</style>