From 6ad60512709b56cd0203d489cd1d67df3d565447 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Wed, 5 Jul 2023 15:08:29 +0200
Subject: [PATCH] Feat: Use controller params

---
 .../js/controllers/daytrip_controller.js      |  8 ++--
 .../Assets/js/controllers/modal_controller.js |  4 +-
 .../js/controllers/pricetable_controller.js   |  8 ++--
 .../Templates/AjaxTable/Datestable.html       | 44 +++++++++----------
 .../Templates/AjaxTable/DaytripRooms.html     |  4 +-
 .../Templates/AjaxTable/Pricetable.html       |  4 +-
 .../Private/Templates/Product/Detail.html     |  2 -
 7 files changed, 36 insertions(+), 38 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/daytrip_controller.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/daytrip_controller.js
index bc3bdd00..0c60c48d 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/daytrip_controller.js
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/daytrip_controller.js
@@ -1,4 +1,4 @@
-import { Controller } from 'stimulus'
+import { Controller } from '@hotwired/stimulus'
 import { useDispatch } from 'stimulus-use'
 import { useFetch } from '../mixins/use_fetch'
 
@@ -25,9 +25,9 @@ export default class extends Controller {
         useFetch(this)
     }
 
-    openModal(e) {
-        let eventName = `${e.currentTarget.dataset.type}-modal:open`
-        this.dispatch(eventName, e.currentTarget.dataset.uid)
+    openModal({ params }) {
+        let eventName = `${params.type}-modal:open`
+        this.dispatch(eventName, params.uid)
     }
 
     load(e) {
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/modal_controller.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/modal_controller.js
index 3c8a443f..478ce821 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/modal_controller.js
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/modal_controller.js
@@ -1,4 +1,4 @@
-import { Controller } from 'stimulus'
+import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
 
@@ -6,7 +6,7 @@ export default class extends Controller {
 
     open(e) {
         this.contentTargets.forEach(element => {
-            let uid = element.dataset.uid
+            let uid = parseInt(element.dataset.uid)
             element.classList.toggle('hidden', e.detail !== uid)
         })
         this.element.classList.remove('hidden')
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/pricetable_controller.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/pricetable_controller.js
index ae6dba23..1f58e971 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/pricetable_controller.js
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/pricetable_controller.js
@@ -1,4 +1,4 @@
-import { Controller } from 'stimulus'
+import { Controller } from '@hotwired/stimulus'
 import { useDispatch } from 'stimulus-use'
 
 export default class extends Controller {
@@ -35,9 +35,9 @@ export default class extends Controller {
         this.showAllRowsValue = !this.showAllRowsValue
     }
 
-    openModal(e) {
-        let eventName = `${e.currentTarget.dataset.type}-modal:open`
-        this.dispatch(eventName, e.currentTarget.dataset.uid)
+    openModal({ params }) {
+        let eventName = `${params.type}-modal:open`
+        this.dispatch(eventName, params.uid)
     }
 
     modeValueChanged() {
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Datestable.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Datestable.html
index 596f5f2b..af5806f0 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Datestable.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Datestable.html
@@ -53,7 +53,7 @@
                                         <button type="button"
                                                 class="text-left text-ep-primary-light ser:text-ser-primary text-sm md:text-base"
                                                 data-action="product-details#loadPrices"
-                                                data-date-uid="{row.dateUid}">
+                                                data-product-details-prices-url-param="{ep:uri.ajax(action: 'pricetable', controller: 'AjaxTable', arguments: '{product: product, hotel: hotel, date: row.dateUid}', format: 'html', pageUid: settings.defaultAjaxUid)}">
                                             {row.dateStart} - {row.dateEnd}
                                         </button>
                                     </f:then>
@@ -97,8 +97,8 @@
                                     <button type="button"
                                             class="text-ep-primary-light ser:text-ser-primary col-span-2 text-sm md:text-base text-left leading-none whitespace-nowrap p-1"
                                             data-action="pricetable#openModal"
-                                            data-type="services"
-                                            data-uid="{row.dateUid}"
+                                            data-pricetable-type-param="services"
+                                            data-pricetable-uid-param="{row.dateUid}"
                                             data-cooltipz-dir="top"
                                             aria-label="Alle Inklusivleistungen anzeigen">
                                         Leistungen
@@ -125,7 +125,7 @@
                                         <button type="button"
                                                 class="flex space-x-1 items-center {f:if(condition: row.available, then: 'text-ep-primary-light ser:text-ser-primary', else: 'text-zinc-300')}"
                                                 data-action="product-details#loadPrices"
-                                                data-date-uid="{row.dateUid}">
+                                                data-product-details-prices-url-param="{ep:uri.ajax(action: 'pricetable', controller: 'AjaxTable', arguments: '{product: product, hotel: hotel, date: row.dateUid}', format: 'html', pageUid: settings.defaultAjaxUid)}">
                                             <svg class="w-6 h-6 hidden md:block">
                                                 <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
                                             </svg>
@@ -239,24 +239,24 @@
                 </div>
                 <div class="p-4 bg-white rounded-b">
                     <f:for each="{bookableDates}" as="row">
-                        <table class="hidden table table-striped"
-                               data-modal-target="content"
-                               data-uid="{row.dateUid}">
-                            <tbody>
-                            <f:for each="{row.servicesIncluded}" as="service">
-                                <tr>
-                                    <td>
-                                        <div class="flex items-center space-x-2">
-                                            <svg class="w-6 h-6 text-ep-primary">
-                                                <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-check"></use>
-                                            </svg>
-                                            <span>{service}</span>
-                                        </div>
-                                    </td>
-                                </tr>
-                            </f:for>
-                            </tbody>
-                        </table>
+                        <div class="hidden" data-modal-target="content" data-uid="{row.dateUid}">
+                            <table class="table table-striped">
+                                <tbody>
+                                <f:for each="{row.servicesIncluded}" as="service">
+                                    <tr>
+                                        <td>
+                                            <div class="flex items-center space-x-2">
+                                                <svg class="w-6 h-6 text-ep-primary">
+                                                    <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-check"></use>
+                                                </svg>
+                                                <span>{service}</span>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                </f:for>
+                                </tbody>
+                            </table>
+                        </div>
                     </f:for>
                 </div>
             </div>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/DaytripRooms.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/DaytripRooms.html
index 7e7be93c..3b713b24 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/DaytripRooms.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/DaytripRooms.html
@@ -55,8 +55,8 @@
                         </f:if>
                         <button type="button"
                                 data-action="daytrip#openModal"
-                                data-type="services"
-                                data-uid="{iteration.cycle}"
+                                data-daytrip-type-param="services"
+                                data-daytrip-uid-param="{iteration.cycle}"
                                 data-cooltipz-dir="top"
                                 aria-label="Alle Inklusivleistungen anzeigen"
                                 role="tooltip">
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Pricetable.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Pricetable.html
index 49a12a38..d4d7c7c2 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Pricetable.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Pricetable.html
@@ -101,8 +101,8 @@
                                 <button type="button"
                                         class="text-ep-primary-light text-sm md:text-base text-left leading-none p-1"
                                         data-action="pricetable#openModal"
-                                        data-type="options"
-                                        data-uid="{row.roomUid}"
+                                        data-pricetable-type-param="options"
+                                        data-pricetable-uid-param="{row.roomUid}"
                                         data-cooltipz-dir="top"
                                         aria-label="Alle Zusatzleistungen anzeigen"
                                         role="tooltip">
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html
index 9ea1ecc5..8931472f 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html
@@ -15,8 +15,6 @@
                  data-controller="product-details"
                  data-action="tabs:selected->product-details#switchView"
                  data-product-details-datestable-uri-value="{ep:uri.ajax(action: 'datestable', controller: 'AjaxTable', arguments: '{product: product, hotel: hotel}', format: 'html', pageUid: settings.defaultAjaxUid)}"
-                 data-product-details-pricetable-uri-value="{ep:uri.ajax(action: 'pricetable', controller: 'AjaxTable', arguments: '{product: product, hotel: hotel}', format: 'html', pageUid: settings.defaultAjaxUid)}"
-                 data-product-details-travel-alert-uri-value="{f:uri.typolink(parameter: settings.travelAlertPageUid)}"
                  data-product-details-disable-tables-value="{f:if(condition: hotel.groupsPriceConfigs, then: 'true', else: 'false')}"
                     </f:else>
                 </f:if>