Basic signup for events

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

@@ -0,0 +1,125 @@
+<script setup>
+import ErrorText from "../../../../../../Views/Components/ErrorText.vue";
+import {reactive} from "vue";
+
+const props = defineProps({ formData: Object, event: Object })
+const emit = defineEmits(['next', 'back'])
+
+const errors = reactive({
+    ansprechpartner: '',
+    telefon_2: '',
+    email_2: '',
+    badeerlaubnis: '',
+    first_aid: '',
+})
+
+const next = () => {
+    errors.ansprechpartner = ''
+    errors.telefon_2 = ''
+    errors.email_2 = ''
+    errors.badeerlaubnis = ''
+    errors.first_aid = ''
+
+    let hasError = false
+
+    if (!props.formData.ansprechpartner) {
+        errors.ansprechpartner = 'Bitte eine Kontaktperson angeben.'
+        hasError = true
+    }
+
+    if (!props.formData.telefon_2) {
+        errors.telefon_2 = 'Bitte eine Telefonnummer angeben.'
+        hasError = true
+    }
+
+    if (!props.formData.email_2) {
+        errors.email_2 = 'Bitte eine E-Mail-Adresse angeben.'
+        hasError = true
+    }
+
+    if (props.formData.badeerlaubnis === '-1') {
+        errors.badeerlaubnis = 'Bitte triff eine Entscheidung. Bist du dir unsicher, kontaktiere bitte die Aktionsleitung'
+        hasError = true
+    }
+
+    if (props.formData.first_aid === '-1') {
+        errors.first_aid = 'Bitte triff eine Entscheidung. Bist du dir unsicher, kontaktiere bitte die Aktionsleitung.'
+        hasError = true
+    }
+
+    if (hasError) {
+        return
+    }
+
+    emit('next', 3)
+}
+</script>
+
+<template>
+    <div>
+        <h3>Kontaktperson</h3>
+        <table class="form-table">
+            <tr>
+                <td>Name (Nachname, Vorname):</td>
+                <td>
+                    <input type="text" v-model="formData.ansprechpartner" />
+                    <ErrorText :message="errors.ansprechpartner" />
+                </td>
+
+            </tr>
+            <tr>
+                <td>Telefon:</td>
+                <td>
+                    <input type="text" v-model="formData.telefon_2" />
+                    <ErrorText :message="errors.telefon_2" />
+                </td>
+            </tr>
+            <tr>
+                <td>E-Mail:</td>
+                <td>
+                    <input type="text" v-model="formData.email_2" />
+                    <ErrorText :message="errors.email_2" />
+                </td>
+            </tr>
+            <tr>
+                <td>Badeerlaubnis:</td>
+                <td>
+                    <select v-model="formData.badeerlaubnis">
+                        <option value="-1">Bitte wählen</option>
+
+                        <option
+                            v-for="swimmingPermission in props.event.swimmingPermissions"
+                            :value="swimmingPermission.slug">{{swimmingPermission.name}}</option>
+                    </select>
+                    <ErrorText :message="errors.badeerlaubnis" />
+                </td>
+            </tr>
+            <tr>
+                <td>Erweiterte Erste Hilfe erlaubt:*</td>
+                <td>
+                    <select v-model="formData.first_aid">
+                        <option value="-1">Bitte wählen</option>
+
+                        <option
+                            v-for="firstAidPermission in props.event.firstAidPermissions"
+                            :value="firstAidPermission.slug">{{firstAidPermission.name}}</option>
+                    </select><br />
+                    <span style="font-size: 0.8rem; color: #6b7280;">
+                        Nicht dringend-notwendige Erste-Hilfe-Maßnahmen, beinhaltet das Entfernen von Zecken und Splittern sowie das Kleben von Pflastern.
+                    </span>
+                    <ErrorText :message="errors.first_aid" />
+                </td>
+            </tr>
+            <tr>
+                <td></td>
+                <td>
+                </td>
+            </tr>
+            <tr>
+                <td colspan="2" class="btn-row">
+                    <button type="button" class="btn-primary" @click="next">Weiter →</button>
+                </td>
+            </tr>
+        </table>
+    </div>
+</template>