Merge branch 'develop'

This commit is contained in:
Björn Fromme
2023-01-26 17:20:47 +01:00
5 changed files with 86 additions and 62 deletions
@@ -1,64 +1,87 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<div class="grid lg:grid-cols-2 gap-4" v-if="initialized">
<div> <div class="grid grid-cols-2 gap-x-2 pb-4">
<panel title="Reisedaten"> <button type="button" class="button bg-button" :class="{ 'bg-button--secondary': tab === 'data' }" @click="tab = 'data'">
<ul class="list-none"> Reisedaten
<li class="p-2 border-b border-zinc-200 last:border-0"> </button>
<strong>Reise:</strong> {{ travelData.productName }} <button type="button" class="button bg-button" :class="{ 'bg-button--secondary': tab === 'participants' }" @click="tab = 'participants'">
</li> Teilnehmer
<li class="p-2 border-b border-zinc-200 last:border-0"> </button>
<strong>Zeitraum:</strong> {{ travelData.dateFrom }} - {{ travelData.dateTo }} </div>
</li>
<li class="p-2 border-b border-zinc-200 last:border-0"> <div v-if="initialized" v-show="tab === 'data'">
<strong>Inklusivleistungen:</strong> {{ travelData.servicesIncluded.join(', ') }} <h2 class="mb-4">
</li> Reisedaten
<li class="p-2 border-b border-zinc-200 last:border-0"> </h2>
<strong>Anmelder:</strong> {{ bookingData.applicant.firstName }} {{ bookingData.applicant.lastName }} <div class="grid lg:grid-cols-2 gap-4">
</li> <div>
<li class="p-2 border-b border-zinc-200 last:border-0"> <panel title="Allgemein">
<strong>Gesamtpreis:</strong> {{ totalPrice.toFixed(2) }} <ul class="list-none">
</li> <li class="p-2 border-b border-zinc-200 last:border-0">
<li class="p-2 border-b border-zinc-200 last:border-0"> <strong>Reise:</strong> {{ travelData.productName }}
<strong>Teilnehmer:</strong> {{ participantsCount.active }} </li>
</li> <li class="p-2 border-b border-zinc-200 last:border-0">
<li class="p-2 border-b border-zinc-200 last:border-0"> <strong>Zeitraum:</strong> {{ travelData.dateFrom }} - {{ travelData.dateTo }}
<strong>Stornos:</strong> {{ participantsCount.canceled }} </li>
</li> <li class="p-2 border-b border-zinc-200 last:border-0">
</ul> <strong>Inklusivleistungen:</strong> {{ travelData.servicesIncluded.join(', ') }}
</panel> </li>
<services-overview :services="services.other" :participant-data="participantData"/> <li class="p-2 border-b border-zinc-200 last:border-0">
</div> <strong>Anmelder:</strong> {{ bookingData.applicant.firstName }} {{ bookingData.applicant.lastName }}
<div> </li>
<mutable-fields :mutable-fields="mutableFields"></mutable-fields> <li class="p-2 border-b border-zinc-200 last:border-0">
<contingents-overview :contingents="bookingData.accomodations"/> <strong>Gesamtpreis:</strong> {{ totalPrice.toFixed(2) }}
<panel title="Beförderungsart (alle Teilnehmer)" :body="true"> </li>
<ul class="list-none"> <li class="p-2 border-b border-zinc-200 last:border-0">
<li class="p-2 border-b border-zinc-200 last:border-0" v-for="transportation in bookingData.transportations" :key="transportation.id"> <strong>Teilnehmer:</strong> {{ participantsCount.active }}
{{ transportation.name }}: {{ transportation.count }} </li>
</li> <li class="p-2 border-b border-zinc-200 last:border-0">
</ul> <strong>Stornos:</strong> {{ participantsCount.canceled }}
</panel> </li>
<panel title="Anmerkungen" :body="true"> </ul>
</panel>
<services-overview :services="services.other" :participant-data="participantData"/>
</div>
<div>
<mutable-fields :mutable-fields="mutableFields"></mutable-fields>
<contingents-overview :contingents="bookingData.accomodations"/>
<panel title="Beförderungsart (alle Teilnehmer)" :body="true">
<ul class="list-none">
<li class="p-2 border-b border-zinc-200 last:border-0" v-for="transportation in bookingData.transportations" :key="transportation.id">
{{ transportation.name }}: {{ transportation.count }}
</li>
</ul>
</panel>
<panel title="Anmerkungen" :body="true">
<textarea class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full" <textarea class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full"
rows="2" rows="2"
v-model="bookingData.remarks" v-model="bookingData.remarks"
@change="dirty = true"/> @change="dirty = true"/>
</panel> </panel>
</div>
</div>
<div class="py-4 lg:flex lg:justify-between space-y-1 lg:space-y-0" v-show="!loading" v-if="initialized">
<button class="button bg-button" :disabled="!dirty" @click.prevent="storeBookingData()">
Buchung aktualisieren
</button>
<router-link :to="{ name: 'events' }" class="button bg-button">
zur Übersicht
</router-link>
</div> </div>
</div> </div>
<div class="py-4 lg:flex lg:justify-between space-y-1 lg:space-y-0" v-show="!loading"> <div id="participants" class="py-4" v-if="initialized" v-show="tab === 'participants'">
<button class="button bg-button" :disabled="!dirty" @click.prevent="storeBookingData()" v-if="initialized">
Buchung aktualisieren
</button>
<router-link :to="{ name: 'events' }" class="button bg-button">
zur Übersicht
</router-link>
</div>
<div class="py-4" v-if="initialized">
<h2 class="mb-4"> <h2 class="mb-4">
Teilnehmer Teilnehmer
</h2> </h2>
<div class="py-4 lg:flex lg:justify-between space-y-1 lg:space-y-0" v-show="!loading" v-if="initialized && participantData.length > 5">
<button class="button bg-button" :disabled="!dirty" @click.prevent="storeBookingData()">
Buchung aktualisieren
</button>
<router-link :to="{ name: 'events' }" class="button bg-button">
zur Übersicht
</router-link>
</div>
<collapsible-panel :title="'#' + (index + 1) + ' ' + participant.data.lastName + ', ' + participant.data.firstName" <collapsible-panel :title="'#' + (index + 1) + ' ' + participant.data.lastName + ', ' + participant.data.firstName"
:class="invalidParticipantData[participant.data.id] ? 'panel-danger' : 'panel-default'" parent="#participant-list" :class="invalidParticipantData[participant.data.id] ? 'panel-danger' : 'panel-default'" parent="#participant-list"
v-for="(participant, index) in participantData" :key="participant.data.id"> v-for="(participant, index) in participantData" :key="participant.data.id">
@@ -144,14 +167,14 @@
</div> </div>
</template> </template>
</collapsible-panel> </collapsible-panel>
</div> <div class="py-4 lg:flex lg:justify-between space-y-1 lg:space-y-0" v-show="!loading" v-if="initialized">
<div class="py-4 lg:flex lg:justify-between space-y-1 lg:space-y-0" v-show="!loading" v-if="initialized"> <button class="button bg-button" :disabled="!dirty" @click.prevent="storeBookingData()">
<button class="button bg-button" :disabled="!dirty" @click.prevent="storeBookingData()"> Buchung aktualisieren
Buchung aktualisieren </button>
</button> <router-link :to="{ name: 'events' }" class="button bg-button">
<router-link :to="{ name: 'events' }" class="button bg-button"> zur Übersicht
zur Übersicht </router-link>
</router-link> </div>
</div> </div>
</div> </div>
</template> </template>
@@ -190,6 +213,7 @@
}, },
data () { data () {
return { return {
tab: 'data',
bookingId: null, bookingId: null,
initialized: false, initialized: false,
dirty: false, dirty: false,
@@ -1,5 +1,5 @@
<template> <template>
<div class="relative"> <div class="relative" tabindex="0" @focusout="visible = false">
<button class="button bg-button button--small w-full" <button class="button bg-button button--small w-full"
type="button" type="button"
@click.prevent="visible = !visible"> @click.prevent="visible = !visible">
@@ -1,5 +1,5 @@
<template> <template>
<div class="relative" v-if="hasSelectedRentals"> <div class="relative" v-if="hasSelectedRentals" tabindex="0" @focusout="visible = false">
<button class="button bg-button button--small" @click.prevent="visible = !visible"> <button class="button bg-button button--small" @click.prevent="visible = !visible">
<span> <span>
Größen Größen
@@ -1,5 +1,5 @@
<template> <template>
<div class="relative"> <div class="relative" tabindex="0" @focusout="visible = false">
<button class="button bg-button button--small" @click.prevent="visible = !visible"> <button class="button bg-button button--small" @click.prevent="visible = !visible">
<span> <span>
Zustieg Zustieg
@@ -1,5 +1,5 @@
<template> <template>
<div class="relative" v-if="hasServices"> <div class="relative" v-if="hasServices" tabindex="0" @focusout="visible = false">
<button class="button bg-button button--small" type="button" @click.prevent="visible = !visible"> <button class="button bg-button button--small" type="button" @click.prevent="visible = !visible">
<span> <span>
{{ subType.label }} {{ subType.label }}