fix: use event dispatcher of Stimulus controller class

This commit is contained in:
Björn Fromme
2024-06-19 15:37:18 +02:00
parent 613a70989f
commit 00c2ad4b42
4 changed files with 17 additions and 14 deletions
@@ -1,5 +1,4 @@
import { Controller } from '@hotwired/stimulus' import { Controller } from '@hotwired/stimulus'
import { useDispatch } from 'stimulus-use'
import { useFetch } from '../mixins/use_fetch' import { useFetch } from '../mixins/use_fetch'
export default class extends Controller { export default class extends Controller {
@@ -21,13 +20,17 @@ export default class extends Controller {
} }
initialize() { initialize() {
useDispatch(this)
useFetch(this) useFetch(this)
} }
openModal({ params }) { openModal({ params }) {
let eventName = `${params.type}-modal:open` let eventName = `${params.type}-modal:open`
this.dispatch(eventName, params.uid) this.dispatch(eventName, {
detail: {
type: params.type,
uid: params.uid
}
})
} }
load(e) { load(e) {
@@ -4,10 +4,10 @@ export default class extends Controller {
static targets = [ 'content' ] static targets = [ 'content' ]
open(e) { open({ detail: { uid } }) {
this.contentTargets.forEach(element => { this.contentTargets.forEach(element => {
let uid = parseInt(element.dataset.uid) let elementUid = parseInt(element.dataset.uid)
element.classList.toggle('hidden', e.detail !== uid) element.classList.toggle('hidden', uid !== elementUid)
}) })
this.element.classList.remove('hidden') this.element.classList.remove('hidden')
} }
@@ -1,5 +1,4 @@
import { Controller } from '@hotwired/stimulus' import { Controller } from '@hotwired/stimulus'
import { useDispatch } from 'stimulus-use'
export default class extends Controller { export default class extends Controller {
@@ -19,10 +18,6 @@ export default class extends Controller {
iconSpriteUrl: String, iconSpriteUrl: String,
} }
initialize() {
useDispatch(this)
}
toggleSurcharge() { toggleSurcharge() {
this.modeValue = this.modeValue === 'surcharge' ? '' : 'surcharge' this.modeValue = this.modeValue === 'surcharge' ? '' : 'surcharge'
} }
@@ -37,7 +32,12 @@ export default class extends Controller {
openModal({ params }) { openModal({ params }) {
let eventName = `${params.type}-modal:open` let eventName = `${params.type}-modal:open`
this.dispatch(eventName, params.uid) this.dispatch(eventName, {
detail: {
type: params.type,
uid: params.uid
}
})
} }
modeValueChanged() { modeValueChanged() {
@@ -85,8 +85,8 @@
<f:if condition="{row.optionalServices} && {row.available}"> <f:if condition="{row.optionalServices} && {row.available}">
<button type="button" <button type="button"
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">