156 lines
4.3 KiB
Vue
156 lines
4.3 KiB
Vue
<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>
|