💄 [#2888] Indicate active case-filters on mobile

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

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;
+        }
+      }
+    }
   }
 }

src/open_inwoner/templates/pages/cases/list_inner.html

@@ -16,7 +16,11 @@ <h1 class="utrecht-heading-1" id="cases">{{ page_title }} ({{ paginator.count }}
         </div>
         <div class="filter-bar__mobile-button">
             <p class="utrecht-paragraph filter-bar__heading">Filters</p>
-            {% button icon="filter_alt" text=_("Filters") icon_outlined=True transparent=True extra_classes="show-modal" %}
+            <div class="filter-bar__mobile-selection" id="selectionFilterBar">
+                {% button icon="filter_alt" text=_("Filters") icon_outlined=True transparent=True extra_classes="show-modal" %}
+                {% icon icon="check" icon_position="after" outlined=True %}
+                <span class="sr-only">Gekozen filters</span>
+            </div>
             <p class="utrecht-paragraph filter-bar__status-text">Status</p>
         </div>
         <form class="form filter-bar__form" method="GET" id="filter-form" novalidate>