refactor: remove access_requirements (toegangsbehoeften) from application
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -45,7 +45,6 @@ const { errors, defineField, validateField, setFieldValue } = useForm({
|
||||
tshirt_size: '',
|
||||
first_aid: false,
|
||||
allergies: '',
|
||||
access_requirements: '',
|
||||
driving_licence: false,
|
||||
motivation: '',
|
||||
motivation_other: '',
|
||||
@@ -60,7 +59,6 @@ const [phone] = defineField('phone')
|
||||
const [tshirtSize] = defineField('tshirt_size')
|
||||
const [firstAid] = defineField('first_aid')
|
||||
const [allergies] = defineField('allergies')
|
||||
const [accessRequirements] = defineField('access_requirements')
|
||||
const [drivingLicence] = defineField('driving_licence')
|
||||
const [motivation] = defineField('motivation')
|
||||
const [motivationOther] = defineField('motivation_other')
|
||||
@@ -159,11 +157,11 @@ const formattedDates = computed(() => {
|
||||
})
|
||||
|
||||
// Step field mapping for validation (0-based)
|
||||
type FormField = 'first_name' | 'last_name' | 'date_of_birth' | 'email' | 'phone' | 'tshirt_size' | 'first_aid' | 'allergies' | 'access_requirements' | 'driving_licence' | 'motivation' | 'motivation_other'
|
||||
type FormField = 'first_name' | 'last_name' | 'date_of_birth' | 'email' | 'phone' | 'tshirt_size' | 'first_aid' | 'allergies' | 'driving_licence' | 'motivation' | 'motivation_other'
|
||||
|
||||
const stepFields: Record<number, FormField[]> = {
|
||||
0: ['first_name', 'last_name', 'date_of_birth', 'email', 'phone'],
|
||||
1: ['tshirt_size', 'first_aid', 'allergies', 'access_requirements', 'driving_licence'],
|
||||
1: ['tshirt_size', 'first_aid', 'allergies', 'driving_licence'],
|
||||
2: ['motivation', 'motivation_other'],
|
||||
}
|
||||
|
||||
@@ -278,7 +276,6 @@ async function onSubmit() {
|
||||
tshirt_size: tshirtSize.value ?? '',
|
||||
first_aid: firstAid.value ?? false,
|
||||
allergies: allergies.value ?? '',
|
||||
access_requirements: accessRequirements.value ?? '',
|
||||
driving_licence: drivingLicence.value ?? false,
|
||||
motivation: motivation.value ?? '',
|
||||
motivation_other: motivationOther.value ?? '',
|
||||
@@ -623,20 +620,28 @@ async function onSubmit() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Step 0: Over jou -->
|
||||
<!-- Step 0: Over jou + contact (Vuexy: vertical fields, form separator, contact block) -->
|
||||
<div v-show="currentStep === 0">
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<label
|
||||
class="text-body-2 d-block mb-1 text-high-emphasis"
|
||||
for="volunteer-reg-first-name"
|
||||
>
|
||||
Voornaam <span class="text-error">*</span>
|
||||
</label>
|
||||
<VTextField
|
||||
id="volunteer-reg-first-name"
|
||||
v-model="firstName"
|
||||
label="Voornaam *"
|
||||
variant="outlined"
|
||||
placeholder="Je voornaam"
|
||||
:error-messages="errors.first_name"
|
||||
:disabled="authStore.isAuthenticated"
|
||||
density="comfortable"
|
||||
hide-details="auto"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
@@ -644,13 +649,21 @@ async function onSubmit() {
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<label
|
||||
class="text-body-2 d-block mb-1 text-high-emphasis"
|
||||
for="volunteer-reg-last-name"
|
||||
>
|
||||
Achternaam <span class="text-error">*</span>
|
||||
</label>
|
||||
<VTextField
|
||||
id="volunteer-reg-last-name"
|
||||
v-model="lastName"
|
||||
label="Achternaam *"
|
||||
variant="outlined"
|
||||
placeholder="Je achternaam"
|
||||
:error-messages="errors.last_name"
|
||||
:disabled="authStore.isAuthenticated"
|
||||
density="comfortable"
|
||||
hide-details="auto"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
@@ -658,40 +671,80 @@ async function onSubmit() {
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<label
|
||||
class="text-body-2 d-block mb-1 text-high-emphasis"
|
||||
for="volunteer-reg-dob"
|
||||
>
|
||||
Geboortedatum
|
||||
</label>
|
||||
<VTextField
|
||||
v-model="email"
|
||||
label="E-mailadres *"
|
||||
type="email"
|
||||
placeholder="je@email.nl"
|
||||
:error-messages="errors.email"
|
||||
:disabled="authStore.isAuthenticated"
|
||||
density="comfortable"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="phone"
|
||||
label="Telefoonnummer"
|
||||
placeholder="06 12345678"
|
||||
:error-messages="errors.phone"
|
||||
density="comfortable"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
id="volunteer-reg-dob"
|
||||
v-model="dateOfBirth"
|
||||
label="Geboortedatum"
|
||||
class="volunteer-reg-dob-field"
|
||||
variant="outlined"
|
||||
type="date"
|
||||
:error-messages="errors.date_of_birth"
|
||||
density="comfortable"
|
||||
hide-details="auto"
|
||||
>
|
||||
<template #prepend-inner>
|
||||
<VIcon
|
||||
icon="tabler-calendar"
|
||||
size="20"
|
||||
/>
|
||||
</template>
|
||||
</VTextField>
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<hr class="my-6 mx-n6">
|
||||
|
||||
<h6 class="text-h6 mb-2">
|
||||
Contactgegevens
|
||||
</h6>
|
||||
<p class="text-body-2 text-medium-emphasis mb-6">
|
||||
Vul deze gegevens zorgvuldig in: we gebruiken ze om alle informatie over het evenement naar je te versturen.
|
||||
Je e-mailadres is ook je gebruikersnaam voor Crewli, het systeem waar je straks alle informatie terugvindt.
|
||||
</p>
|
||||
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<label
|
||||
class="text-body-2 d-block mb-1 text-high-emphasis"
|
||||
for="volunteer-reg-email"
|
||||
>
|
||||
E-mailadres <span class="text-error">*</span>
|
||||
</label>
|
||||
<VTextField
|
||||
id="volunteer-reg-email"
|
||||
v-model="email"
|
||||
variant="outlined"
|
||||
type="email"
|
||||
placeholder="je@email.nl"
|
||||
prepend-inner-icon="tabler-mail"
|
||||
:error-messages="errors.email"
|
||||
:disabled="authStore.isAuthenticated"
|
||||
density="comfortable"
|
||||
hide-details="auto"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<label
|
||||
class="text-body-2 d-block mb-1 text-high-emphasis"
|
||||
for="volunteer-reg-phone"
|
||||
>
|
||||
Telefoonnummer
|
||||
</label>
|
||||
<VTextField
|
||||
id="volunteer-reg-phone"
|
||||
v-model="phone"
|
||||
variant="outlined"
|
||||
placeholder="06 12345678"
|
||||
prepend-inner-icon="tabler-phone"
|
||||
:error-messages="errors.phone"
|
||||
density="comfortable"
|
||||
hide-details="auto"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
@@ -704,21 +757,30 @@ async function onSubmit() {
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<label
|
||||
class="text-body-2 d-block mb-1 text-high-emphasis"
|
||||
for="volunteer-reg-tshirt"
|
||||
>
|
||||
Shirtmaat
|
||||
</label>
|
||||
<VSelect
|
||||
id="volunteer-reg-tshirt"
|
||||
v-model="tshirtSize"
|
||||
:items="tshirtSizeItems"
|
||||
label="Shirtmaat"
|
||||
variant="outlined"
|
||||
placeholder="Selecteer je maat"
|
||||
:error-messages="errors.tshirt_size"
|
||||
density="comfortable"
|
||||
hide-details="auto"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
class="d-flex align-end"
|
||||
>
|
||||
<div class="d-flex ga-6 pt-2">
|
||||
<div class="d-flex ga-6 flex-wrap pb-1 w-100">
|
||||
<VSwitch
|
||||
v-model="firstAid"
|
||||
label="EHBO-diploma"
|
||||
@@ -736,30 +798,26 @@ async function onSubmit() {
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<label
|
||||
class="text-body-2 d-block mb-1 text-high-emphasis"
|
||||
for="volunteer-reg-allergies"
|
||||
>
|
||||
Allergieën of dieetwensen
|
||||
</label>
|
||||
<VTextarea
|
||||
id="volunteer-reg-allergies"
|
||||
v-model="allergies"
|
||||
label="Allergieën of dieetwensen"
|
||||
variant="outlined"
|
||||
placeholder="Laat ons weten als je allergieën of dieetwensen hebt"
|
||||
:error-messages="errors.allergies"
|
||||
:counter="500"
|
||||
rows="2"
|
||||
auto-grow
|
||||
density="comfortable"
|
||||
hide-details="auto"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextarea
|
||||
v-model="accessRequirements"
|
||||
label="Toegangsbehoeften"
|
||||
placeholder="Heb je specifieke behoeften qua toegankelijkheid?"
|
||||
:error-messages="errors.access_requirements"
|
||||
:counter="500"
|
||||
rows="2"
|
||||
auto-grow
|
||||
density="comfortable"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</div>
|
||||
|
||||
@@ -770,14 +828,22 @@ async function onSubmit() {
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<label
|
||||
class="text-body-2 d-block mb-1 text-high-emphasis"
|
||||
for="volunteer-reg-motivation"
|
||||
>
|
||||
Waarom wil je vrijwilliger zijn?
|
||||
</label>
|
||||
<VSelect
|
||||
id="volunteer-reg-motivation"
|
||||
v-model="motivation"
|
||||
:items="motivationItems"
|
||||
label="Waarom wil je vrijwilliger zijn?"
|
||||
variant="outlined"
|
||||
placeholder="Selecteer je motivatie"
|
||||
:error-messages="errors.motivation"
|
||||
clearable
|
||||
density="comfortable"
|
||||
hide-details="auto"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
@@ -786,15 +852,23 @@ async function onSubmit() {
|
||||
v-if="motivation"
|
||||
cols="12"
|
||||
>
|
||||
<label
|
||||
class="text-body-2 d-block mb-1 text-high-emphasis"
|
||||
for="volunteer-reg-motivation-other"
|
||||
>
|
||||
Toelichting
|
||||
</label>
|
||||
<VTextarea
|
||||
id="volunteer-reg-motivation-other"
|
||||
v-model="motivationOther"
|
||||
label="Toelichting"
|
||||
variant="outlined"
|
||||
placeholder="Vertel ons meer over je motivatie..."
|
||||
:error-messages="errors.motivation_other"
|
||||
:counter="500"
|
||||
rows="3"
|
||||
auto-grow
|
||||
density="comfortable"
|
||||
hide-details="auto"
|
||||
/>
|
||||
</VCol>
|
||||
</VExpandTransition>
|
||||
@@ -1018,4 +1092,19 @@ async function onSubmit() {
|
||||
z-index: 1;
|
||||
max-inline-size: 1000px;
|
||||
}
|
||||
|
||||
/*
|
||||
Native date inputs have a large intrinsic min-width; without min-width: 0 the
|
||||
grid cell grows and the prepend-inner icon no longer sits inside the outline
|
||||
next to the value (Vuetify v-field grid: prepend-inner | field).
|
||||
*/
|
||||
.volunteer-reg-dob-field :deep(.v-field__field) {
|
||||
min-inline-size: 0;
|
||||
}
|
||||
|
||||
.volunteer-reg-dob-field :deep(input.v-field__input[type="date"]) {
|
||||
flex: 1 1 auto;
|
||||
max-inline-size: 100%;
|
||||
min-inline-size: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -12,7 +12,6 @@ export const step2Schema = z.object({
|
||||
tshirt_size: z.enum(['XS', 'S', 'M', 'L', 'XL', 'XXL', 'XXXL']).optional().or(z.literal('')),
|
||||
first_aid: z.boolean().default(false),
|
||||
allergies: z.string().max(500).optional().or(z.literal('')),
|
||||
access_requirements: z.string().max(500).optional().or(z.literal('')),
|
||||
driving_licence: z.boolean().default(false),
|
||||
})
|
||||
|
||||
|
||||
@@ -51,7 +51,6 @@ export interface VolunteerRegistrationForm {
|
||||
tshirt_size: string
|
||||
first_aid: boolean
|
||||
allergies: string
|
||||
access_requirements: string
|
||||
driving_licence: boolean
|
||||
// Step 3
|
||||
motivation: string
|
||||
|
||||
Reference in New Issue
Block a user