Feat: Use controller params

This commit is contained in:
Björn Fromme
2023-07-05 15:28:08 +02:00
parent 873bde8fe8
commit 6ad6051270
7 changed files with 36 additions and 38 deletions
@@ -1,4 +1,4 @@
import { Controller } from 'stimulus' import { Controller } from '@hotwired/stimulus'
import { useDispatch } from 'stimulus-use' import { useDispatch } from 'stimulus-use'
import { useFetch } from '../mixins/use_fetch' import { useFetch } from '../mixins/use_fetch'
@@ -25,9 +25,9 @@ export default class extends Controller {
useFetch(this) useFetch(this)
} }
openModal(e) { openModal({ params }) {
let eventName = `${e.currentTarget.dataset.type}-modal:open` let eventName = `${params.type}-modal:open`
this.dispatch(eventName, e.currentTarget.dataset.uid) this.dispatch(eventName, params.uid)
} }
load(e) { load(e) {
@@ -1,4 +1,4 @@
import { Controller } from 'stimulus' import { Controller } from '@hotwired/stimulus'
export default class extends Controller { export default class extends Controller {
@@ -6,7 +6,7 @@ export default class extends Controller {
open(e) { open(e) {
this.contentTargets.forEach(element => { this.contentTargets.forEach(element => {
let uid = element.dataset.uid let uid = parseInt(element.dataset.uid)
element.classList.toggle('hidden', e.detail !== uid) element.classList.toggle('hidden', e.detail !== uid)
}) })
this.element.classList.remove('hidden') this.element.classList.remove('hidden')
@@ -1,4 +1,4 @@
import { Controller } from 'stimulus' import { Controller } from '@hotwired/stimulus'
import { useDispatch } from 'stimulus-use' import { useDispatch } from 'stimulus-use'
export default class extends Controller { export default class extends Controller {
@@ -35,9 +35,9 @@ export default class extends Controller {
this.showAllRowsValue = !this.showAllRowsValue this.showAllRowsValue = !this.showAllRowsValue
} }
openModal(e) { openModal({ params }) {
let eventName = `${e.currentTarget.dataset.type}-modal:open` let eventName = `${params.type}-modal:open`
this.dispatch(eventName, e.currentTarget.dataset.uid) this.dispatch(eventName, params.uid)
} }
modeValueChanged() { modeValueChanged() {
@@ -53,7 +53,7 @@
<button type="button" <button type="button"
class="text-left text-ep-primary-light ser:text-ser-primary text-sm md:text-base" class="text-left text-ep-primary-light ser:text-ser-primary text-sm md:text-base"
data-action="product-details#loadPrices" 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} {row.dateStart} - {row.dateEnd}
</button> </button>
</f:then> </f:then>
@@ -97,8 +97,8 @@
<button type="button" <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" 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-action="pricetable#openModal"
data-type="services" data-pricetable-type-param="services"
data-uid="{row.dateUid}" data-pricetable-uid-param="{row.dateUid}"
data-cooltipz-dir="top" data-cooltipz-dir="top"
aria-label="Alle Inklusivleistungen anzeigen"> aria-label="Alle Inklusivleistungen anzeigen">
Leistungen Leistungen
@@ -125,7 +125,7 @@
<button type="button" <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')}" 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-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"> <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> <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
</svg> </svg>
@@ -239,24 +239,24 @@
</div> </div>
<div class="p-4 bg-white rounded-b"> <div class="p-4 bg-white rounded-b">
<f:for each="{bookableDates}" as="row"> <f:for each="{bookableDates}" as="row">
<table class="hidden table table-striped" <div class="hidden" data-modal-target="content" data-uid="{row.dateUid}">
data-modal-target="content" <table class="table table-striped">
data-uid="{row.dateUid}"> <tbody>
<tbody> <f:for each="{row.servicesIncluded}" as="service">
<f:for each="{row.servicesIncluded}" as="service"> <tr>
<tr> <td>
<td> <div class="flex items-center space-x-2">
<div class="flex items-center space-x-2"> <svg class="w-6 h-6 text-ep-primary">
<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>
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-check"></use> </svg>
</svg> <span>{service}</span>
<span>{service}</span> </div>
</div> </td>
</td> </tr>
</tr> </f:for>
</f:for> </tbody>
</tbody> </table>
</table> </div>
</f:for> </f:for>
</div> </div>
</div> </div>
@@ -55,8 +55,8 @@
</f:if> </f:if>
<button type="button" <button type="button"
data-action="daytrip#openModal" data-action="daytrip#openModal"
data-type="services" data-daytrip-type-param="services"
data-uid="{iteration.cycle}" data-daytrip-uid-param="{iteration.cycle}"
data-cooltipz-dir="top" data-cooltipz-dir="top"
aria-label="Alle Inklusivleistungen anzeigen" aria-label="Alle Inklusivleistungen anzeigen"
role="tooltip"> role="tooltip">
@@ -101,8 +101,8 @@
<button type="button" <button type="button"
class="text-ep-primary-light text-sm md:text-base text-left leading-none p-1" class="text-ep-primary-light text-sm md:text-base text-left leading-none p-1"
data-action="pricetable#openModal" data-action="pricetable#openModal"
data-type="options" data-pricetable-type-param="options"
data-uid="{row.roomUid}" data-pricetable-uid-param="{row.roomUid}"
data-cooltipz-dir="top" data-cooltipz-dir="top"
aria-label="Alle Zusatzleistungen anzeigen" aria-label="Alle Zusatzleistungen anzeigen"
role="tooltip"> role="tooltip">
@@ -15,8 +15,6 @@
data-controller="product-details" data-controller="product-details"
data-action="tabs:selected->product-details#switchView" 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-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')}" data-product-details-disable-tables-value="{f:if(condition: hotel.groupsPriceConfigs, then: 'true', else: 'false')}"
</f:else> </f:else>
</f:if> </f:if>