mareike/app/Domains/Dashboard/Views/PersonalData.vue

<script setup>
import { reactive, ref } from 'vue'
import { request } from '../../../../resources/js/components/HttpClient.js'
import AppLayout from "../../../../resources/js/layouts/AppLayout.vue";
import ShadowedBox from "../../../Views/Components/ShadowedBox.vue";
import {toast} from "vue3-toastify";

const props = defineProps({
    personalData: Object,
})

const form = reactive({
    nickname:           props.personalData.nickname ?? '',
    email:              props.personalData.email ?? '',
    phone:              props.personalData.phone ?? '',
    address1:           props.personalData.address1 ?? '',
    address2:           props.personalData.address2 ?? '',
    postcode:           props.personalData.postcode ?? '',
    city:               props.personalData.city ?? '',
    birthday:           props.personalData.birthday ?? '',
    tetanusVaccination: props.personalData.tetanusVaccination ?? '',
    medications:        props.personalData.medications ?? '',
    allergies:          props.personalData.allergies ?? '',
    intolerances:       props.personalData.intolerances ?? '',
    eatingHabits:       props.personalData.eatingHabits ?? '',
    swimmingPermission: props.personalData.swimmingPermission ?? '',
    firstAidPermission: props.personalData.firstAidPermission ?? '',
    bankAccountOwner:   props.personalData.bankAccountOwner ?? '',
    bankAccountIban:    props.personalData.bankAccountIban ?? '',
})

const saving = ref(false)
const successMessage = ref('')
const errorMessage = ref('')

const submit = async () => {
    saving.value = true
    successMessage.value = ''
    errorMessage.value = ''

    const result = await request('/api/v1/dashboard/personal-data', {
        method: 'POST',
        body: { ...form },
    })

    saving.value = false

    if (result?.success) {
        toast.success(result.message)
    } else {
        toast.error(result.message)
    }
}
</script>

<template>
    <AppLayout title='Persönliche Daten'>
        <shadowed-box style="width: 95%; margin: 20px auto; padding: 20px; overflow-x: hidden;">

            <div class="max-w-2xl mx-auto p-6">
                <form @submit.prevent="submit">
                    <table class="form-table" style="width: 90%; margin: 10px;">

                        <!-- Nicht veränderbare Felder -->
                        <tr>
                            <td style="width: 200px; padding: 5px;">Vorname:</td>
                            <td><span class="text-gray-700">{{ personalData.firstname }}</span></td>
                        </tr>
                        <tr>
                            <td style="width: 200px; padding: 5px;">Nachname:</td>
                            <td><span class="text-gray-700">{{ personalData.lastname }}</span></td>
                        </tr>


                        <!-- Veränderbare Felder -->
                        <tr>
                            <td>Pfadiname:</td>
                            <td><input type="text" v-model="form.nickname" /></td>
                        </tr>
                        <tr>
                            <td>E-Mail:</td>
                            <td><input type="email" v-model="form.email" /></td>
                        </tr>
                        <tr>
                            <td>Telefon:</td>
                            <td><input type="text" v-model="form.phone" /></td>
                        </tr>
                        <tr>
                            <td>Straße / Hausnummer:</td>
                            <td><input type="text" v-model="form.address1" /></td>
                        </tr>
                        <tr>
                            <td>Adresszusatz:</td>
                            <td><input type="text" v-model="form.address2" /></td>
                        </tr>
                        <tr>
                            <td>PLZ:</td>
                            <td><input type="text" v-model="form.postcode" /></td>
                        </tr>
                        <tr>
                            <td>Ort:</td>
                            <td><input type="text" v-model="form.city" /></td>
                        </tr>
                        <tr>
                            <td style="width: 200px; padding: 5px;">Geburtsdatum:</td>
                            <td><input type="date" v-model="form.birthday" /></td>
                        </tr>
                        <tr>
                            <td>Medikamente:</td>
                            <td><input type="text" v-model="form.medications" /></td>
                        </tr>
                        <tr>
                            <td>Allergien:</td>
                            <td><input type="text" v-model="form.allergies" /></td>
                        </tr>
                        <tr>
                            <td>Unverträglichkeiten:</td>
                            <td><input type="text" v-model="form.intolerances" /></td>
                        </tr>
                        <tr>
                            <td>Letzte Tetanus-Impfung:</td>
                            <td><input type="date" v-model="form.tetanusVaccination" /></td>
                        </tr>
                        <tr>
                            <td>Ernährungsgewohnheiten:</td>
                            <td>
                                <select v-model="form.eatingHabits">
                                    <option value="EATING_HABIT_VEGAN">Vegan</option>
                                    <option value="EATING_HABIT_VEGETARIAN">Vegetarisch</option>
                                    <option value="EATING_HABIT_OMNIVOR">Omnivor</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>Badeerlaubnis:</td>
                            <td>
                                <select v-model="form.swimmingPermission">
                                    <option value="SWIMMING_PERMISSION_ALLOWED">Erteilt, kann schwimmen</option>
                                    <option value="SWIMMING_PERMISSION_LIMITED">Erteilt, kann nicht schwimmen</option>
                                    <option value="SWIMMING_PERMISSION_DENIED">Nicht erteilt</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>Erste-Hilfe-Erlaubnis:</td>
                            <td>
                                <select v-model="form.firstAidPermission">
                                    <option value="FIRST_AID_PERMISSION_ALLOWED">Erweiterte Erste Hilfe erlaubt</option>
                                    <option value="FIRST_AID_PERMISSION_DENIED">Erweiterte Erste Hilfe verweigert</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>Kontoinhaber:</td>
                            <td><input type="text" v-model="form.bankAccountOwner" /></td>
                        </tr>
                        <tr>
                            <td>IBAN:</td>
                            <td><input type="text" v-model="form.bankAccountIban" /></td>
                        </tr>

                        <tr>
                            <td colspan="2" class="btn-row" style="padding-top: 20px;">
                                <button type="submit" class="button" :disabled="saving">
                                    {{ saving ? 'Wird gespeichert…' : 'Speichern' }}
                                </button>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </shadowed-box>
    </AppLayout>
</template>

<style scoped>
textarea {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.95rem;
    box-sizing: border-box;
    resize: vertical;
}
</style>