From 6473ec8ec405ff1e7d541f71e00f92f91a8c383b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Thu, 16 Jan 2025 14:54:46 +0100
Subject: [PATCH] feat: hide pickup select on initial load when not applicable

---
 assets/controllers/select_toggle_controller.js | 11 +++++++----
 templates/booking/edit.html.twig               | 18 +++++++++---------
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/assets/controllers/select_toggle_controller.js b/assets/controllers/select_toggle_controller.js
index 5ef3814..f306867 100644
--- a/assets/controllers/select_toggle_controller.js
+++ b/assets/controllers/select_toggle_controller.js
@@ -4,18 +4,21 @@ export default class extends Controller {
 
     static classes = [ 'hidden' ]
     static targets = [ 'container' ]
-    static values = { show: Array }
+    static values = { show: Array, visible: Boolean }
 
     toggle(event) {
         let fieldType = event.target.type
         let formValue = event.target.value
         let showContainer
         if ('checkbox' !== fieldType && 'radio' !== fieldType) {
-            showContainer = this.showValue.indexOf(formValue) !== -1
+            this.visibleValue = this.showValue.indexOf(formValue) !== -1
         } else {
             let toggleValue = event.target.dataset.selectToggleValue
-            showContainer = true === event.target.checked && this.showValue.includes(toggleValue)
+            this.visibleValue = true === event.target.checked && this.showValue.includes(toggleValue)
         }
-        this.containerTarget.classList.toggle(this.hiddenClass, false === showContainer)
+    }
+
+    visibleValueChanged(visible) {
+        this.containerTarget.classList.toggle(this.hiddenClass, false === visible)
     }
 }
diff --git a/templates/booking/edit.html.twig b/templates/booking/edit.html.twig
index 735539a..6f8f69e 100644
--- a/templates/booking/edit.html.twig
+++ b/templates/booking/edit.html.twig
@@ -130,7 +130,7 @@
                 <div class="hidden" {{ stimulus_target('toggle', 'toggle') }}>
                     <div class="flex flex-col space-y-4 pt-4">
                         <div class="relative">
-                            <h3 class="text-xl font-semibold pb-2">
+                            <h3 class="text-xl font-semibold">
                                 Persönliche Daten
                             </h3>
                             <fieldset class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-4 pb-4">
@@ -154,14 +154,14 @@
                             {% endif %}
                         </div>
                         <div>
-                            <h3 class="text-xl font-semibold pb-2">
+                            <h3 class="text-xl font-semibold">
                                 Unterkunft
                             </h3>
                             {% set room = bookingData.roomForParticipant(participant.index) %}
                             {{ room.label }} ({{ room.individualPrice[participant.index]|format_currency('EUR') }})
                         </div>
                         <div class="relative">
-                            <h3 class="text-xl font-semibold pb-2">
+                            <h3 class="text-xl font-semibold">
                                 Leistungen
                             </h3>
                             <fieldset class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-4">
@@ -182,14 +182,14 @@
                                 {% endif %}
                             </fieldset>
                             {% if not travelData.additionalServicesMutable %}
-                                <div class="absolute top-0 left-0 inset-0 cursor-not-allowed"></div>
+                                <div class="absolute inset-0 cursor-not-allowed"></div>
                             {% endif %}
                         </div>
                         <div class="relative">
-                            <h3 class="text-xl font-semibold pb-2">
+                            <h3 class="text-xl font-semibold">
                                 Hin-/Rückreise
                             </h3>
-                            <fieldset class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-4" {{ stimulus_controller('select-toggle', { 'show': ['BUS'] }, { 'hidden': 'hidden' }) }}>
+                            <fieldset class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-4" {{ stimulus_controller('select-toggle', { 'show': ['BUS'], 'visible': participant.transportationServiceTo.subType == 'BUS' }, { 'hidden': 'hidden' }) }}>
                                 {{ form_row(child.transportationServiceTo) }}
                                 {{ form_row(child.transportationServiceFro) }}
                                 {% if child.pickup is defined %}
@@ -199,12 +199,12 @@
                                 {% endif %}
                             </fieldset>
                             {% if not travelData.transportationServicesMutable %}
-                                <div class="absolute top-0 left-0 inset-0 cursor-not-allowed"></div>
+                                <div class="absolute inset-0 cursor-not-allowed"></div>
                             {% endif %}
                         </div>
                         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-4">
                             <div>
-                                <h3 class="text-xl font-semibold pb-2">
+                                <h3 class="text-xl font-semibold">
                                     Gesamtpreis
                                 </h3>
                                 <span class="text-2xl font-medium">{{ bookingData.priceForParticipant(participant.index)|format_currency('EUR') }}</span>
@@ -212,7 +212,7 @@
                             {% set surcharges = bookingData.surchargesForParticipant(participant.index)  %}
                             {% if surcharges|length > 0 %}
                                 <div>
-                                    <h3 class="text-xl font-semibold pb-2">
+                                    <h3 class="text-xl font-semibold">
                                         Zuschläge
                                     </h3>
                                     <ul>