127 lines
6.0 KiB
Vue
127 lines
6.0 KiB
Vue
<script setup>
|
|
import {useSignupForm} from './composables/useSignupForm.js'
|
|
import StepAge from './steps/StepAge.vue'
|
|
import StepContactPerson from './steps/StepContactPerson.vue'
|
|
import StepPersonalData from './steps/StepPersonalData.vue'
|
|
import StepRegistrationMode from './steps/StepRegistrationMode.vue'
|
|
import StepArrival from './steps/StepArrival.vue'
|
|
import StepAddons from './steps/StepAddons.vue'
|
|
import StepParticipationOptions from './steps/StepParticipationOptions.vue'
|
|
import StepPhotoPermissions from './steps/StepPhotoPermissions.vue'
|
|
import StepAllergies from './steps/StepAllergies.vue'
|
|
import StepPaymentMethod from './steps/StepPaymentMethod.vue'
|
|
import StepSummary from './steps/StepSummary.vue'
|
|
import SubmitSuccess from './after-submit/SubmitSuccess.vue'
|
|
import SubmitAlreadyExists from './after-submit/SubmitAlreadyExists.vue'
|
|
|
|
const props = defineProps({
|
|
event: Object,
|
|
participantData: Object,
|
|
localGroups: Array,
|
|
})
|
|
|
|
const emit = defineEmits(['registrationDone'])
|
|
|
|
const {
|
|
currentStep, goToStep, formData, selectedAddons,
|
|
submit, submitting, submitResult, summaryLoading, summaryAmount, summaryAmountValue,
|
|
summaryBaseAmount, summaryAddonLines
|
|
} = useSignupForm(props.event, props.participantData)
|
|
|
|
const steps = [
|
|
{ step: 1, label: 'Alter' },
|
|
{ step: 2, label: 'Kontaktperson' },
|
|
{ step: 3, label: 'Persönliche Daten' },
|
|
{ step: 4, label: 'An-/Abreise' },
|
|
{ step: 5, label: 'Teilnahmegruppe' },
|
|
{ step: 6, label: 'Zusatzoptionen' },
|
|
{step: 7, label: 'Teilnahmeoptionen'},
|
|
{step: 8, label: 'Fotoerlaubnis'},
|
|
{step: 9, label: 'Allergien'},
|
|
{step: 10, label: 'Zahlungsart'},
|
|
{step: 11, label: 'Zusammenfassung'},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<!-- Nach Submit -->
|
|
<SubmitSuccess
|
|
v-if="submitResult?.status === 'success'"
|
|
:participant="submitResult?.participant"
|
|
:event="event"
|
|
/>
|
|
<SubmitAlreadyExists v-else-if="submitResult?.status === 'exists'" :event="event" />
|
|
|
|
<template v-else>
|
|
<!-- Fortschrittsleiste (ab Step 2) -->
|
|
<div v-if="currentStep > 1" class="signup-progress">
|
|
<div class="signup-progress-pills">
|
|
<template v-for="(s, index) in steps.filter(s => s.step > 1)" :key="s.step">
|
|
<div v-if="index > 0" class="signup-progress-separator"></div>
|
|
<div
|
|
class="signup-pill"
|
|
:class="{
|
|
'signup-pill--active': currentStep === s.step,
|
|
'signup-pill--done': currentStep > s.step,
|
|
'signup-pill--upcoming': currentStep < s.step,
|
|
}"
|
|
@click="currentStep > s.step ? goToStep(s.step) : null"
|
|
>
|
|
<span v-if="currentStep > s.step" class="signup-pill__check">✓</span>
|
|
{{ s.label }}
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<!-- Fortschrittsbalken -->
|
|
<div class="signup-progress-bar">
|
|
<div
|
|
class="signup-progress-bar__fill"
|
|
:style="{ width: ((currentStep - 2) / (steps.length - 2) * 100) + '%' }"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- Mobile Step-Anzeige -->
|
|
<div class="signup-progress-mobile">
|
|
Schritt {{ currentStep - 1 }} von {{ steps.length - 1 }}:
|
|
<strong>{{ steps.find(s => s.step === currentStep)?.label }}</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Steps -->
|
|
<form @submit.prevent="submit">
|
|
<StepAge v-if="currentStep === 1" :event="event" @next="goToStep" />
|
|
<StepContactPerson v-if="currentStep === 2" :formData="formData" :event="event" @next="goToStep" @back="goToStep" />
|
|
<StepPersonalData v-if="currentStep === 3" :formData="formData" :localGroups="localGroups" @next="goToStep" @back="goToStep" />
|
|
<StepArrival v-if="currentStep === 4" :formData="formData" :event="event" @next="goToStep" @back="goToStep" />
|
|
<StepRegistrationMode v-if="currentStep === 5" :formData="formData" :event="event" @next="goToStep" @back="goToStep" />
|
|
<StepAddons v-if="currentStep === 6" :formData="formData" :event="event" :selectedAddons="selectedAddons" @next="goToStep" @back="goToStep" />
|
|
<StepParticipationOptions v-if="currentStep === 7" :formData="formData" :event="event" @next="goToStep"
|
|
@back="goToStep"/>
|
|
<StepPhotoPermissions v-if="currentStep === 8" :formData="formData" :event="event" @next="goToStep"
|
|
@back="goToStep"/>
|
|
<StepAllergies v-if="currentStep === 9" :formData="formData" :event="event" @next="goToStep"
|
|
@back="goToStep"/>
|
|
<StepPaymentMethod v-if="currentStep === 10" :formData="formData" :event="event" @next="goToStep"
|
|
@back="goToStep"/>
|
|
<StepSummary
|
|
v-if="currentStep === 11"
|
|
:formData="formData"
|
|
:event="event"
|
|
:summaryBaseAmount="summaryBaseAmount"
|
|
:summaryAddonLines="summaryAddonLines"
|
|
:summaryAmount="summaryAmount"
|
|
:summaryAmountValue="summaryAmountValue"
|
|
:summaryLoading="summaryLoading"
|
|
:submitting="submitting"
|
|
@back="goToStep"
|
|
@submit="submit"
|
|
/>
|
|
</form>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Unscoped und mit der Kurzanmeldung geteilt (ShortSignupForm.vue bindet dieselbe Datei ein). -->
|
|
<style src="./signupForm.css"></style>
|