diff --git a/src/open_inwoner/js/components/FilterBar/filterbar.js b/src/open_inwoner/js/components/FilterBar/filterbar.js index bbe4fc06b1..999f752a5b 100644 --- a/src/open_inwoner/js/components/FilterBar/filterbar.js +++ b/src/open_inwoner/js/components/FilterBar/filterbar.js @@ -7,15 +7,10 @@ export class FilterBar { this.filterButton = node.querySelector('#selectButton') this.backdrop = document.getElementById('filterBarBackdrop') this.closeButton = node.querySelector('.show-controls') + this.selectionFilterBar = document.getElementById('selectionFilterBar') - // Check if elements are found - if (!this.filterPopup) { - console.error('Filter popup button not found!') - return - } - - if (!this.filterButton) { - console.error('Select button not found!') + // Break if critical elements are not found + if (!this.filterPopup || !this.filterButton || !this.selectionFilterBar) { return } @@ -34,6 +29,14 @@ export class FilterBar { this.closeFilterPopup.bind(this), false ) + + // Attach checkbox listeners and update state + this.attachCheckboxListeners() + + // Ensure the correct state is applied on page load + setTimeout(() => { + this.updateFilterBarState() + }, 100) } toggleOpenFilterPopup(event) { @@ -47,11 +50,11 @@ export class FilterBar { this.node.classList.toggle('filter-bar--mobile') const isExpanded = this.filterPopup.getAttribute('aria-expanded') === 'true' - this.filterPopup.setAttribute('aria-expanded', !isExpanded) + this.filterPopup.setAttribute('aria-expanded', (!isExpanded).toString()) }, 5) } - closeFilterPopupDirect(event) { + closeFilterPopupDirect() { // Remove 'show' class from the backdrop to hide it this.backdrop.classList.remove('show') @@ -77,6 +80,35 @@ export class FilterBar { this.filterPopup.setAttribute('aria-expanded', 'false') } } + + updateFilterBarState() { + const checkboxes = this.node.querySelectorAll( + '#listboxDropdown .checkbox__input' + ) + const anyChecked = Array.from(checkboxes).some( + (checkbox) => checkbox.checked + ) + + if (anyChecked) { + this.selectionFilterBar.classList.add('active') + this.selectionFilterBar.classList.remove('inactive') + } else { + this.selectionFilterBar.classList.remove('active') + this.selectionFilterBar.classList.add('inactive') + } + } + + attachCheckboxListeners() { + const checkboxes = this.node.querySelectorAll( + '#listboxDropdown .checkbox__input' + ) + + checkboxes.forEach((checkbox) => { + checkbox.addEventListener('change', () => { + this.updateFilterBarState() + }) + }) + } } // Reinitialize FilterBar after HTMX swap diff --git a/src/open_inwoner/scss/components/FilterBar/FilterBar.scss b/src/open_inwoner/scss/components/FilterBar/FilterBar.scss index 3dc9b4b7bf..00530ce019 100644 --- a/src/open_inwoner/scss/components/FilterBar/FilterBar.scss +++ b/src/open_inwoner/scss/components/FilterBar/FilterBar.scss @@ -56,6 +56,7 @@ &__mobile-button { .button.show-modal { + padding-right: var(--spacing-small); margin-top: 0; & [class*='icons'] { @@ -72,6 +73,36 @@ } } + &__mobile-selection { + display: flex; + align-items: center; + justify-content: left; + gap: 0; + color: var(--color-gray-dark); + & > [class*='icons'] { + display: none; + } + .button { + color: var(--color-gray-dark); + [class*='icons'] { + color: var(--color-gray-dark); + } + } + + &.active { + color: var(--color-primary); + & > [class*='icons'] { + display: inline; + } + .button { + color: var(--color-primary); + [class*='icons'] { + color: var(--color-primary); + } + } + } + } + &__label { display: none; padding-top: calc(var(--font-size-body) / 2); @@ -165,5 +196,13 @@ position: static; z-index: initial; } + + .filter-bar__mobile-selection { + &.active { + & > [class*='icons'] { + display: none; + } + } + } } } diff --git a/src/open_inwoner/templates/pages/cases/list_inner.html b/src/open_inwoner/templates/pages/cases/list_inner.html index 1db059c0aa..0b19bfae55 100644 --- a/src/open_inwoner/templates/pages/cases/list_inner.html +++ b/src/open_inwoner/templates/pages/cases/list_inner.html @@ -16,7 +16,11 @@

{{ page_title }} ({{ paginator.count }}

Filters

- {% button icon="filter_alt" text=_("Filters") icon_outlined=True transparent=True extra_classes="show-modal" %} +
+ {% button icon="filter_alt" text=_("Filters") icon_outlined=True transparent=True extra_classes="show-modal" %} + {% icon icon="check" icon_position="after" outlined=True %} + Gekozen filters +

Status