mareike/app/Domains/Event/Views/Partials/ParticipantData.vue

<script setup>

 const props = defineProps({
     editMode: Boolean,
     participant: Object,
 })

 const emit = defineEmits(['closeParticipantDetails', 'markCocExisting','paymentComplete', 'cancelParticipation'])

 function markCocExisting(participant) {
     emit('markCocExisting', participant)
     close()
 }

 function paymentComplete(participant) {
     emit('paymentComplete', participant)
     close()
 }

 function close() {
     emit('closeParticipantDetails')

 }

 function cancelParticipation(participant) {
     emit('cancelParticipation', participant)
     close()
 }
</script>

<template>
    <div>
        <h2>Anmeldedetails</h2>

        <div class="participationData">
            <div>
                <h3>Persönliche Daten</h3>
                <table>
                    <tr>
                        <th>Name</th>
                        <td>
                            <span v-if="!props.editMode">
                                {{props.participant.firstname}} {{props.participant.lastname}}
                            </span>
                        </td>
                    </tr>

                    <tr>
                        <th>Pfadiname</th>
                        <td>
                            <span v-if="!props.editMode">{{props.participant.nickname}}</span>
                        </td>
                    </tr>

                    <tr>
                        <th>Anschrift</th>
                        <td>
                            <span v-if="!props.editMode">
                                {{props.participant.address_1}}<br />
                                {{props.participant.address_2}}<br />
                                {{props.participant.postcode}}
                                {{props.participant.city}}
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <th>Stamm</th>
                        <td>
                            <span v-if="!props.editMode">{{props.participant.localgroup}}</span>
                        </td>
                    </tr>
                    <tr>
                        <th>Geburtsdatum</th>
                        <td>
                            <span v-if="!props.editMode">
                                {{props.participant.birthday}}
                            </span>
                        </td>
                    </tr>
                </table>
            </div>

            <div>
                <h3>Kontaktdaten</h3>
                <table>
                    <tr>
                        <th>E-Mail</th>
                        <td>
                            <span v-if="!props.editMode">{{props.participant.email_1}}</span>
                        </td>
                    </tr>

                    <tr>
                        <th>Telefon</th>
                        <td>
                            <span v-if="!props.editMode">{{props.participant.phone_1}}</span>
                        </td>
                    </tr>

                    <tr>
                        <th>Ansprechperson</th>
                        <td>
                            <span v-if="!props.editMode">{{props.participant.contact_person}}</span>
                        </td>
                    </tr>

                    <tr>
                        <th>Ansprechperson E-Mail</th>
                        <td>
                            <span v-if="!props.editMode">{{props.participant.email_2}}</span>
                        </td>
                    </tr>

                    <tr>
                        <th>Ansprechperson Telefon</th>
                        <td>
                            <span v-if="!props.editMode">{{props.participant.phone_2}}</span>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <div class="participationData">
        <div>
            <h3>Teilnahmedetails</h3>
            <table>
                <tr>
                    <th>Anreise</th>
                    <td>
                        <span v-if="!props.editMode">{{props.participant.arrival}}</span>
                    </td>
                </tr>
                <tr>
                    <th>Abreise</th>
                    <td>
                        <span v-if="!props.editMode">{{props.participant.departure}}</span>
                    </td>
                </tr>
                <tr>
                    <th>Teilnahmegruppe</th>
                    <td>
                        <span v-if="!props.editMode">{{props.participant.participationType}}</span>
                    </td>
                </tr>

                <tr>
                    <th>Ernährung</th>
                    <td>
                        <span v-if="!props.editMode">{{props.participant.eatingHabit}}</span>
                    </td>
                </tr>
                <tr>
                    <th>eFZ-Status</th>
                    <td>
                        <span v-if="!props.editMode">{{props.participant.efzStatusReadable}}</span>
                    </td>
                </tr>

                <tr>
                    <th>Beitrag</th>
                    <td>
                        <span v-if="!props.editMode">{{props.participant.amountPaid.readable}} / {{props.participant.amountExpected.readable}}</span>
                    </td>
                </tr>
            </table>
        </div>
        <div>
            <h3>Medizinische Informationen</h3>
            <table>
                <tr>
                    <th>Allergien</th>
                    <td>
                        <span v-if="!props.editMode">{{props.participant.allergies}}</span>
                    </td>
                </tr>
                <tr>
                    <th>Unverträglichkeiten</th>
                    <td>
                        <span v-if="!props.editMode">{{props.participant.intolerances}}</span>
                    </td>
                </tr>

                <tr>
                    <th>Medikamente</th>
                    <td>
                        <span v-if="!props.editMode">{{props.participant.medications}}</span>
                    </td>
                </tr>

                <tr>
                    <th>Erweiterte Erste Hilfe</th>
                    <td>
                        <span v-if="!props.editMode">{{props.participant.extendedFirstAid}}</span>
                    </td>
                </tr>

                <tr>
                    <th>Badeerlaubnis</th>
                    <td>
                        <span v-if="!props.editMode">{{props.participant.swimmingPermission}}</span>
                    </td>
                </tr>
                <tr>
                    <th>Letzte Tetanus-Impfung</th>
                    <td>
                        <span v-if="!props.editMode">{{props.participant.tetanusVaccination}}</span>
                    </td>
                </tr>

                <tr>
                    <th>Anmerkungen</th>
                    <td>
                        <span v-if="!props.editMode">{{props.participant.notes}}</span>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <button class="button">Bearbeiten</button>
    <button class="button" @click="paymentComplete(props.participant)">Zahlung vollständig</button>
    <button class="button" @click="markCocExisting(props.participant)">eFZ liegt vor</button>
    <button class="button" @click="cancelParticipation(props.participant)">Abmelden</button>
    <button class="button" @click="close">Schließen</button>

</template>

<style scoped>
.participationData {
    display: flex;
    margin-bottom: 20px;
}

.participationData div {
    flex: 1;
    vertical-align: top;
}

</style>