125 lines
3.6 KiB
Vue
125 lines
3.6 KiB
Vue
<script setup>
|
|
import {reactive} from "vue";
|
|
|
|
const props = defineProps({ formData: Object, localGroups: Array })
|
|
const emit = defineEmits(['next', 'back'])
|
|
|
|
const errors = reactive({
|
|
vorname: '',
|
|
nachname: '',
|
|
geburtsdatum: '',
|
|
localGroup: '',
|
|
address1: '',
|
|
plz: '',
|
|
ort: '',
|
|
telefon_1: '',
|
|
email_1: '',
|
|
})
|
|
|
|
const next = () => {
|
|
errors.vorname = ''
|
|
errors.nachname = ''
|
|
errors.geburtsdatum = ''
|
|
errors.localGroup = ''
|
|
errors.address1 = ''
|
|
errors.plz = ''
|
|
errors.ort = ''
|
|
errors.telefon_1 = ''
|
|
errors.email_1 = ''
|
|
|
|
let hasError = false
|
|
|
|
if (!props.formData.vorname) {
|
|
errors.vorname = 'Bitte den Vornamen angeben.'
|
|
hasError = true
|
|
}
|
|
|
|
if (!props.formData.nachname) {
|
|
errors.nachname = 'Bitte den Nachnamen angeben.'
|
|
hasError = true
|
|
}
|
|
|
|
if (!props.formData.geburtsdatum) {
|
|
errors.geburtsdatum = 'Bitte das Geburtsdatum angeben.'
|
|
hasError = true
|
|
}
|
|
|
|
if (props.formData.localGroup === '-1') {
|
|
errors.localGroup = 'Bitte den Stamm auswählen.'
|
|
hasError = true
|
|
}
|
|
|
|
if (!props.formData.address1) {
|
|
errors.address1 = 'Bitte die Adresse angeben.'
|
|
hasError = true
|
|
}
|
|
|
|
if (!props.formData.plz) {
|
|
errors.plz = 'Bitte die Postleitzahl angeben.'
|
|
hasError = true
|
|
}
|
|
|
|
if (!props.formData.ort) {
|
|
errors.ort = 'Bitte den Ort angeben.'
|
|
hasError = true
|
|
}
|
|
|
|
if (!props.formData.email_1) {
|
|
errors.email_1 = 'Bitte eine E-Mail-Adresse angeben.'
|
|
hasError = true
|
|
}
|
|
|
|
if (hasError) {
|
|
return
|
|
}
|
|
emit('next', 4)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<h3>Persönliche Daten</h3>
|
|
<table class="form-table">
|
|
<tr><td>Vorname:</td><td><input type="text" v-model="props.formData.vorname" /></td></tr>
|
|
<tr><td>Nachname:</td><td><input type="text" v-model="props.formData.nachname" /></td></tr>
|
|
<tr><td>Pfadiname:</td><td><input type="text" v-model="props.formData.pfadiname" /></td></tr>
|
|
<tr>
|
|
<td>Stamm:</td>
|
|
<td>
|
|
<select v-model="props.formData.localGroup">
|
|
<option value="-1">Bitte wählen</option>
|
|
<option v-for="lg in localGroups" :key="lg.id" :value="lg.id">{{ lg.name }}</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr><td>Geburtsdatum:</td><td><input type="date" v-model="props.formData.geburtsdatum" /></td></tr>
|
|
<tr>
|
|
<td>Adresse:</td>
|
|
<td>
|
|
<input type="text" v-model="props.formData.address1" />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td></td>
|
|
<td>
|
|
<input type="text" v-model="props.formData.address2" />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>PLZ, Ort:</td>
|
|
<td>
|
|
<input maxlength="5" type="text" v-model="props.formData.plz" style="width: 100px; margin-right: 8px;" />
|
|
<input type="text" v-model="props.formData.ort" style="width: calc(100% - 110px);" />
|
|
</td>
|
|
</tr>
|
|
<tr><td>Telefon:</td><td><input type="text" v-model="props.formData.telefon_1" /></td></tr>
|
|
<tr><td>E-Mail:</td><td><input type="text" v-model="props.formData.email_1" /></td></tr>
|
|
<tr>
|
|
<td colspan="2" class="btn-row">
|
|
<button type="button" class="btn-primary" @click="next">Weiter →</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</template>
|