chore: Extract a generic "filter" Stimulus controller

Author: marienfressinaud

src/assets/javascripts/application.js

@@ -10,6 +10,7 @@ import CollectionsSelectorController from './controllers/collections_selector_co
 import ColorSchemeController from './controllers/color_scheme_controller.js';
 import CopyToClipboardController from './controllers/copy_to_clipboard_controller.js';
 import CsrfController from './controllers/csrf_controller.js';
+import FilterController from './controllers/filter_controller.js';
 import FormFileController from './controllers/form_file_controller.js';
 import GroupSelectorController from './controllers/group_selector_controller.js';
 import InputPasswordController from './controllers/input_password_controller.js';
@@ -38,6 +39,7 @@ application.register('collections-selector', CollectionsSelectorController);
 application.register('color-scheme', ColorSchemeController);
 application.register('copy-to-clipboard', CopyToClipboardController);
 application.register('csrf', CsrfController);
+application.register('filter', FilterController);
 application.register('form-file', FormFileController);
 application.register('group-selector', GroupSelectorController);
 application.register('input-password', InputPasswordController);

src/assets/javascripts/controllers/filter_controller.js

@@ -0,0 +1,63 @@
+import { Controller } from '@hotwired/stimulus';
+
+// Filter a list of items on the client side.
+//
+// The items are matched against a search field (on their `data-name`) and
+// against a set of flags: each `flag` target is a checkbox declaring a
+// `data-flag` name, and the items declare the flags they carry in their
+// `data-flags` attribute (separated by spaces). An item matches only if it
+// carries all the checked flags.
+//
+// All the targets but `item` are optional, so a list can be filtered by a
+// search field only, by flags only, or by both.
+export default class extends Controller {
+    static targets = ['search', 'flag', 'item', 'empty'];
+
+    connect () {
+        this.filter();
+    }
+
+    filter () {
+        const query = this.hasSearchTarget ? this.normalize(this.searchTarget.value) : '';
+        const flags = this.flagTargets
+            .filter((flag) => flag.checked)
+            .map((flag) => flag.dataset.flag);
+
+        const matchingItems = this.itemTargets.filter((item) => {
+            // Note the items are only hidden: an item that is filtered out may
+            // still contain a checked input which must be submitted with the
+            // form.
+            const matching = this.match(item, query, flags);
+            item.hidden = !matching;
+            return matching;
+        });
+
+        if (this.hasEmptyTarget) {
+            this.emptyTarget.hidden = matchingItems.length > 0;
+        }
+
+        this.dispatch('filtered');
+    }
+
+    match (item, query, flags) {
+        if (!this.normalize(item.dataset.name).includes(query)) {
+            return false;
+        }
+
+        const itemFlags = (item.dataset.flags ?? '').split(' ');
+        return flags.every((flag) => itemFlags.includes(flag));
+    }
+
+    // Return a comparable version of the value, so searching for "eco" matches
+    // a attribute titled "Écologie".
+    //
+    // The NFD normalization splits the accented characters into a base letter
+    // followed by a combining mark ("é" becomes "e" + U+0301). The Diacritic
+    // Unicode property matches these marks, which are then removed.
+    //
+    // The characters that have no canonical decomposition are left alone, so
+    // "ø" or "ß" still have to be typed as is.
+    normalize (value) {
+        return value.normalize('NFD').replace(/\p{Diacritic}/gu, '').trim().toLowerCase();
+    }
+}

src/assets/javascripts/controllers/streams_selector_controller.js

@@ -2,48 +2,15 @@ import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
     static get targets () {
-        return ['search', 'option', 'checkbox', 'empty', 'counter'];
+        return ['checkbox', 'counter'];
     }
 
     connect () {
         this.refreshCounter();
     }
 
-    // Count the selected streams, including the ones hidden by the search: they
-    // are still submitted with the form.
     refreshCounter () {
         const count = this.checkboxTargets.filter((checkbox) => checkbox.checked).length;
         this.counterTarget.textContent = count;
     }
-
-    filter () {
-        const query = this.normalize(this.searchTarget.value);
-
-        const matchingOptions = this.optionTargets.filter((option) => {
-            // Note the options are only hidden: a checked stream that is
-            // filtered out must still be submitted with the form.
-            const matching = this.normalize(option.dataset.name).includes(query);
-            option.hidden = !matching;
-            return matching;
-        });
-
-        this.emptyTarget.hidden = matchingOptions.length > 0;
-
-        // The height of the options changed, so the scroller must recalculate
-        // its shadows.
-        this.dispatch('filtered');
-    }
-
-    // Return a comparable version of the value, so searching for "eco" matches
-    // a stream named "Écologie".
-    //
-    // The NFD normalization splits the accented characters into a base letter
-    // followed by a combining mark ("é" becomes "e" + U+0301). The Diacritic
-    // Unicode property matches these marks, which are then removed.
-    //
-    // The characters that have no canonical decomposition are left alone, so
-    // "ø" or "ß" still have to be typed as is.
-    normalize (value) {
-        return value.normalize('NFD').replace(/\p{Diacritic}/gu, '').trim().toLowerCase();
-    }
 }

src/views/collections/followers/edit.html.twig

@@ -80,11 +80,11 @@
                     {% if form.streams %}
                         <div
                             class="streams-selector flow flow--smaller"
-                            data-controller="streams-selector scroller"
+                            data-controller="streams-selector filter scroller"
                             data-scroller-vertical-value="true"
                             data-action="
                                 resize@window->scroller#refresh
-                                streams-selector:filtered->scroller#refresh
+                                filter:filtered->scroller#refresh
                             "
                         >
                             {% if form.streams | length > 10 %}
@@ -94,10 +94,10 @@
                                     placeholder="{{ t('Filter the streams…') }}"
                                     aria-label="{{ t('Filter the streams') }}"
                                     autocomplete="off"
-                                    data-streams-selector-target="search"
+                                    data-filter-target="search"
                                     data-action="
-                                        input->streams-selector#filter
-                                        keydown.enter->streams-selector#filter:prevent
+                                        input->filter#filter
+                                        keydown.enter->filter#filter:prevent
                                     "
                                 >
                             {% endif %}
@@ -126,7 +126,7 @@
                                     {% for stream in form.streams %}
                                         <div
                                             class="streams-selector__option"
-                                            data-streams-selector-target="option"
+                                            data-filter-target="item"
                                             data-name="{{ stream.name }}"
                                         >
                                             <input
@@ -174,7 +174,7 @@
                                 </button>
                             </div>
 
-                            <p class="text--center text--secondary" data-streams-selector-target="empty" hidden>
+                            <p class="text--center text--secondary" data-filter-target="empty" hidden>
                                 {{ t('No stream matches your search.') }}
                             </p>