From bce550a8a74d4b3b4262f0ed099f1ff0cee3e87a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Thu, 26 Jan 2023 15:51:34 +0100
Subject: [PATCH 1/2] Improve booking edit layout in MyE&P

---
 .../Private/Assets/js/myep/BookingEdit.vue    | 140 ++++++++++--------
 1 file changed, 82 insertions(+), 58 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/BookingEdit.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/BookingEdit.vue
index 1d9438ce..ea296991 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/BookingEdit.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/BookingEdit.vue
@@ -1,64 +1,87 @@
 <template>
     <div class="wrapper">
-        <div class="grid lg:grid-cols-2 gap-4" v-if="initialized">
-            <div>
-                <panel title="Reisedaten">
-                    <ul class="list-none">
-                        <li class="p-2 border-b border-zinc-200 last:border-0">
-                            <strong>Reise:</strong> {{ travelData.productName }}
-                        </li>
-                        <li class="p-2 border-b border-zinc-200 last:border-0">
-                            <strong>Zeitraum:</strong> {{ travelData.dateFrom }} - {{ travelData.dateTo }}
-                        </li>
-                        <li class="p-2 border-b border-zinc-200 last:border-0">
-                            <strong>Inklusivleistungen:</strong> {{ travelData.servicesIncluded.join(', ') }}
-                        </li>
-                        <li class="p-2 border-b border-zinc-200 last:border-0">
-                            <strong>Anmelder:</strong> {{ bookingData.applicant.firstName }} {{ bookingData.applicant.lastName }}
-                        </li>
-                        <li class="p-2 border-b border-zinc-200 last:border-0">
-                            <strong>Gesamtpreis:</strong> {{ totalPrice.toFixed(2) }}€
-                        </li>
-                        <li class="p-2 border-b border-zinc-200 last:border-0">
-                            <strong>Teilnehmer:</strong> {{ participantsCount.active }}
-                        </li>
-                        <li class="p-2 border-b border-zinc-200 last:border-0">
-                            <strong>Stornos:</strong> {{ participantsCount.canceled }}
-                        </li>
-                    </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">
+
+        <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="Allgemein">
+                        <ul class="list-none">
+                            <li class="p-2 border-b border-zinc-200 last:border-0">
+                                <strong>Reise:</strong> {{ travelData.productName }}
+                            </li>
+                            <li class="p-2 border-b border-zinc-200 last:border-0">
+                                <strong>Zeitraum:</strong> {{ travelData.dateFrom }} - {{ travelData.dateTo }}
+                            </li>
+                            <li class="p-2 border-b border-zinc-200 last:border-0">
+                                <strong>Inklusivleistungen:</strong> {{ travelData.servicesIncluded.join(', ') }}
+                            </li>
+                            <li class="p-2 border-b border-zinc-200 last:border-0">
+                                <strong>Anmelder:</strong> {{ bookingData.applicant.firstName }} {{ bookingData.applicant.lastName }}
+                            </li>
+                            <li class="p-2 border-b border-zinc-200 last:border-0">
+                                <strong>Gesamtpreis:</strong> {{ totalPrice.toFixed(2) }}€
+                            </li>
+                            <li class="p-2 border-b border-zinc-200 last:border-0">
+                                <strong>Teilnehmer:</strong> {{ participantsCount.active }}
+                            </li>
+                            <li class="p-2 border-b border-zinc-200 last:border-0">
+                                <strong>Stornos:</strong> {{ participantsCount.canceled }}
+                            </li>
+                        </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"
                               rows="2"
                               v-model="bookingData.remarks"
                               @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 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">
-                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 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,14 +167,14 @@
                     </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
-            </button>
-            <router-link :to="{ name: 'events' }" class="button bg-button">
-                zur Übersicht
-            </router-link>
+            <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>
 </template>
@@ -190,6 +213,7 @@
         },
         data () {
             return {
+                tab: 'data',
                 bookingId: null,
                 initialized: false,
                 dirty: false,

From 66837ec41dcec5949e5ad60f89640b9fa458cdc4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Thu, 26 Jan 2023 17:18:51 +0100
Subject: [PATCH 2/2] Auto close pulldowns on outside click

---
 .../Assets/js/myep/components/ParticipantAddressForm.vue        | 2 +-
 .../Private/Assets/js/myep/components/ParticipantSizesForm.vue  | 2 +-
 .../Private/Assets/js/myep/components/PickupSelect.vue          | 2 +-
 .../Private/Assets/js/myep/components/ServiceSelect.vue         | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/ParticipantAddressForm.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/ParticipantAddressForm.vue
index 48ffdb85..d1bad25f 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/ParticipantAddressForm.vue
+++ b/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">
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/ParticipantSizesForm.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/ParticipantSizesForm.vue
index 8d2a8315..b72b188b 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/ParticipantSizesForm.vue
+++ b/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
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/PickupSelect.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/PickupSelect.vue
index 2cda224b..af97c499 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/PickupSelect.vue
+++ b/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
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/ServiceSelect.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/ServiceSelect.vue
index 3920ebd0..d59e7cc0 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/ServiceSelect.vue
+++ b/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 }}