63 lines
2.2 KiB
Vue
63 lines
2.2 KiB
Vue
<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>
|