Merge branch 'feature/myep-adjust' into develop

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/BookingEdit.vue

@@ -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">
+            <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()" 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,

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/ParticipantAddressForm.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="relative">
+    <div class="relative" tabindex="0" @focusout="visible = false">
         <button class="button bg-button button--small w-full"
                 type="button"
                 @click.prevent="visible = !visible">

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/ParticipantSizesForm.vue

@@ -1,5 +1,5 @@
 <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">
             <span>
                 Größen

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/PickupSelect.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="relative">
+    <div class="relative" tabindex="0" @focusout="visible = false">
         <button class="button bg-button button--small" @click.prevent="visible = !visible">
             <span>
                 Zustieg

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/ServiceSelect.vue

@@ -1,5 +1,5 @@
 <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">
             <span>
                 {{ subType.label }}