EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve booking edit layout in MyE&P

Browse Source
This commit is contained in:
Björn Fromme
2023-01-26 17:18:31 +01:00
parent c7546b42c7
commit bce550a8a7
1 changed files with 82 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/BookingEdit.vue
+30 -6
View File
@@ -1,8 +1,22 @@
<template>
<div class="wrapper">
<div class="grid lg:grid-cols-2 gap-4" v-if="initialized">
<div class="grid grid-cols-2 gap-x-2 pb-4">
<button type="button" class="button bg-button" :class="{ 'bg-button--secondary': tab === 'data' }" @click="tab = 'data'">
Reisedaten
</button>
<button type="button" class="button bg-button" :class="{ 'bg-button--secondary': tab === 'participants' }" @click="tab = 'participants'">
Teilnehmer
</button>
</div>
<div v-if="initialized" v-show="tab === 'data'">
<h2 class="mb-4">
Reisedaten
</h2>
<div class="grid lg:grid-cols-2 gap-4">
<div>
<panel title="Reisedaten">
<panel title="Allgemein">
<ul class="list-none">
<li class="p-2 border-b border-zinc-200 last:border-0">
<strong>Reise:</strong> {{ travelData.productName }}
@@ -47,18 +61,27 @@
</panel>
</div>
</div>
<div class="py-4 lg:flex lg:justify-between space-y-1 lg:space-y-0" v-show="!loading">
<button class="button bg-button" :disabled="!dirty" @click.prevent="storeBookingData()" 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()">
Buchung aktualisieren
</button>
<router-link :to="{ name: 'events' }" class="button bg-button">
zur Übersicht
</router-link>
</div>
<div class="py-4" v-if="initialized">
</div>
<div id="participants" class="py-4" v-if="initialized" v-show="tab === 'participants'">
<h2 class="mb-4">
Teilnehmer
</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"
:class="invalidParticipantData[participant.data.id] ? 'panel-danger' : 'panel-default'" parent="#participant-list"
v-for="(participant, index) in participantData" :key="participant.data.id">
@@ -144,7 +167,6 @@
</div>
</template>
</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">
<button class="button bg-button" :disabled="!dirty" @click.prevent="storeBookingData()">
Buchung aktualisieren
@@ -154,6 +176,7 @@
</router-link>
</div>
</div>
</div>
</template>
<script>
@@ -190,6 +213,7 @@
},
data () {
return {
tab: 'data',
bookingId: null,
initialized: false,
dirty: false,