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 { 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) {
@@ -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')
@@ -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() {
@@ -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>
@@ -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">
@@ -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">
@@ -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>