Show participation details
This commit is contained in:
241
app/Domains/Event/Views/Partials/ParticipantData.vue
Normal file
241
app/Domains/Event/Views/Partials/ParticipantData.vue
Normal file
@@ -0,0 +1,241 @@
|
|||||||
|
<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>
|
||||||
Reference in New Issue
Block a user