th.guenther/mareike
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Handling of event addons

Browse Source
This commit is contained in:
th.guenther
2026-08-12 17:18:45 +02:00
parent 085299336e
commit 6e4e6b645c
74 changed files with 3072 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Domains/Event/Views/Partials/SignUpForm/steps/StepAddons.vue
+18 -6
View File
@@ -1,6 +1,10 @@
<script setup>
import {nextVisibleFrom, STEP_ADDONS} from "../composables/stepFlow.js";
const props = defineProps({ formData: Object, event: Object, selectedAddons: Object })
const emit = defineEmits(['next', 'back'])
const next = () => emit('next', nextVisibleFrom(props.event, STEP_ADDONS))
</script>
<template>
@@ -25,13 +29,21 @@ const emit = defineEmits(['next', 'back'])
<!-- Addons -->
<div v-if="event.addons?.length > 0">
<h3>Zusatzoptionen</h3>
<div v-for="addon in event.addons" :key="addon.id" style="margin-bottom: 16px; padding: 12px; background: #f8fafc; border-radius: 8px;">
<div v-for="addon in event.addons" :key="addon.key"
style="margin-bottom: 16px; padding: 12px; background: #f8fafc; border-radius: 8px;">
<label style="display: flex; gap: 12px; cursor: pointer;">
<input type="checkbox" v-model="selectedAddons[addon.id]" style="margin-top: 4px;" />
<input type="checkbox" v-model="selectedAddons[addon.key]" style="margin-top: 4px;"/>
<span>
<strong>{{ addon.name }}</strong>
<span style="display: block; color: #6b7280; font-size: 0.875rem;">Betrag: {{ addon.amount }}</span>
<span style="display: block; color: #374151; font-size: 0.875rem; margin-top: 4px;">{{ addon.description }}</span>
<strong>{{ addon.title }}</strong>
<span style="display: block; color: #6b7280; font-size: 0.875rem;">
<template v-if="addon.free">Kostenfrei</template>
<template v-else>{{ addon.priceReadable }}<template
v-if="!addon.flat"> / Tag</template></template>
</span>
<span v-if="addon.description"
style="display: block; color: #374151; font-size: 0.875rem; margin-top: 4px;">{{
addon.description
}}</span>
</span>
</label>
</div>
@@ -39,7 +51,7 @@ const emit = defineEmits(['next', 'back'])
<div class="btn-row">
<button type="button" class="btn-secondary" @click="emit('back', 5)">← Zurück</button>
<button type="button" class="btn-primary" @click="emit('next', 7)">Weiter →</button>
<button type="button" class="btn-primary" @click="next">Weiter →</button>
</div>
</div>
</template>
app/Domains/Event/Views/Partials/SignUpForm/steps/StepAllergies.vue
+2 -2
View File
@@ -43,8 +43,8 @@ const emit = defineEmits(['next', 'back'])
</tr>
<tr>
<td colspan="2" class="btn-row">
<button type="button" class="btn-secondary" @click="emit('back', 7)">← Zurück</button>
<button type="button" class="btn-primary" @click="emit('next', 9)">Weiter →</button>
<button type="button" class="btn-secondary" @click="emit('back', 8)">← Zurück</button>
<button type="button" class="btn-primary" @click="emit('next', 10)">Weiter →</button>
</td>
</tr>
</table>
app/Domains/Event/Views/Partials/SignUpForm/steps/StepParticipationOptions.vue
+62
View File
@@ -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>
app/Domains/Event/Views/Partials/SignUpForm/steps/StepPaymentMethod.vue
+2 -2
View File
@@ -78,8 +78,8 @@ const canProceed = computed(() => {
</div>
<div class="btn-row">
<button type="button" class="btn-secondary" @click="emit('back', 8)">← Zurück</button>
<button type="button" class="btn-primary" :disabled="!canProceed" @click="emit('next', 10)">Weiter →
<button type="button" class="btn-secondary" @click="emit('back', 9)">← Zurück</button>
<button type="button" class="btn-primary" :disabled="!canProceed" @click="emit('next', 11)">Weiter →
</button>
</div>
</div>
app/Domains/Event/Views/Partials/SignUpForm/steps/StepPhotoPermissions.vue
+5 -6
View File
@@ -1,16 +1,15 @@
<script setup>
import {prevVisibleFrom, STEP_ALLERGIES, STEP_PHOTO} from "../composables/stepFlow.js";
const props = defineProps({ formData: Object, event: Object })
const emit = defineEmits(['next', 'back'])
const acceptAll = () => {
Object.keys(props.formData.foto).forEach(k => props.formData.foto[k] = true)
emit('next', 8)
emit('next', STEP_ALLERGIES)
}
const back = () => {
const hasAddons = (props.event.addons?.length > 0) || props.event.solidarityPayment
emit('back', hasAddons ? 6 : 5)
}
const back = () => emit('back', prevVisibleFrom(props.event, STEP_PHOTO))
</script>
<template>
@@ -27,7 +26,7 @@ const back = () => {
<div class="btn-row">
<button type="button" class="btn-secondary" @click="back">← Zurück</button>
<button type="button" class="btn-primary" style="background: #059669;" @click="acceptAll">Alle akzeptieren & weiter</button>
<button type="button" class="btn-primary" @click="emit('next', 8)">Weiter →</button>
<button type="button" class="btn-primary" @click="emit('next', 9)">Weiter →</button>
</div>
</div>
</template>
app/Domains/Event/Views/Partials/SignUpForm/steps/StepRegistrationMode.vue
+3 -3
View File
@@ -1,5 +1,6 @@
<script setup>
import { watch } from "vue";
import {watch} from "vue";
import {nextVisibleFrom, STEP_REGISTRATION} from "../composables/stepFlow.js";
const props = defineProps({ formData: Object, event: Object })
const emit = defineEmits(['next', 'back'])
@@ -17,8 +18,7 @@ watch(
)
const nextStep = () => {
const hasAddons = (props.event.addons?.length ?? 0) > 0
emit('next', hasAddons ? 6 : 7)
emit('next', nextVisibleFrom(props.event, STEP_REGISTRATION))
}
</script>
app/Domains/Event/Views/Partials/SignUpForm/steps/StepSummary.vue
+41 -2
View File
@@ -7,6 +7,8 @@ const PAYMENT_ACCOUNT_TRANSACTION = 'PAYMENT_ACCOUNT_TRANSACTION'
const props = defineProps({
formData: Object,
event: Object,
summaryBaseAmount: {type: String, default: ''},
summaryAddonLines: {type: Array, default: () => []},
summaryAmount: String,
summaryAmountValue: {type: Number, default: 0},
summaryLoading: Boolean,
@@ -32,8 +34,17 @@ const paymentConfirmationText = computed(() => {
return template.replaceAll('{amount}', props.summaryAmount ?? '')
})
// Zurück führt zur Zahlungsart (9), sofern dieser Schritt gezeigt wurde; bei 0 € direkt zu Allergien (8).
const backTarget = computed(() => props.summaryAmountValue > 0 ? 9 : 8)
// Zurück führt zur Zahlungsart (10), sofern dieser Schritt gezeigt wurde; bei 0 € direkt zu Allergien (9).
const backTarget = computed(() => props.summaryAmountValue > 0 ? 10 : 9)
// Gewählte Teilnahmeoptionen für die Zusammenfassung (label statt value anzeigen).
const selectedParticipationOptions = computed(() =>
(props.event.participationOptions ?? []).map(question => {
const value = props.formData.participationOptions[question.key]
const option = (question.options ?? []).find(o => o.value === value)
return {label: question.title || question.label, value: option?.label ?? ''}
}).filter(entry => entry.value !== '')
)
const canSubmit = computed(() =>
props.formData.summary_information_correct
@@ -115,6 +126,11 @@ function eatingHabit() {
<td>{{ participationGroup() }}</td>
</tr>
<tr v-for="option in selectedParticipationOptions" :key="option.label">
<td>{{ option.label }}:</td>
<td>{{ option.value }}</td>
</tr>
<tr>
<td>Foto-Erlaubnis:</td>
<td>
@@ -149,6 +165,22 @@ function eatingHabit() {
<tr><td>Abreise:</td><td>{{ formatDate(formData.departure) }}</td></tr>
</table>
<h4 style="margin: 0 0 8px 0;">Kostenübersicht</h4>
<table class="form-table cost-table" style="margin-bottom: 20px;">
<tr>
<td>Teilnahmebeitrag:</td>
<td>{{ summaryBaseAmount }}</td>
</tr>
<tr v-for="addon in summaryAddonLines" :key="addon.key">
<td>{{ addon.title }}:</td>
<td>{{ addon.free ? 'Kostenfrei' : addon.amount }}</td>
</tr>
<tr class="cost-total">
<td><strong>Gesamtbetrag:</strong></td>
<td><strong>{{ summaryAmount }}</strong></td>
</tr>
</table>
<div style="display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px;">
<label style="display: flex; gap: 10px; cursor: pointer;">
<input type="checkbox" v-model="formData.summary_information_correct" />
@@ -182,3 +214,10 @@ function eatingHabit() {
</div>
</div>
</template>
<style scoped>
.cost-table .cost-total td {
border-top: 1px solid #d1d5db;
padding-top: 8px;
}
</style>