Basic signup for events

app/Domains/Event/Views/Partials/SignUpForm/steps/StepPersonalData.vue

@@ -0,0 +1,124 @@
+<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>