@ministryofjustice/hmpps-digital-prison-reporting-frontend 6.2.3 → 6.3.0

package/_networkMocks/report/mockVariants/filter-input-examples/autocompleteMulti.d.ts

@@ -0,0 +1,3 @@
+import { components } from 'src/dpr/types/api';
+declare const autoCompleteMultiExample: components['schemas']['VariantDefinition'];
+export default autoCompleteMultiExample;

package/all.bundle.js

@@ -2053,6 +2053,66 @@ class MultiselectInput extends DprClientClass {
     }
 }
 
+class AutoCompleteMulti extends DprClientClass {
+    filterId;
+    searchInput;
+    searchInputValue;
+    multiselectOptions;
+    static getModuleName() {
+        return 'autocomplete-multiselect-input';
+    }
+    initialise() {
+        this.element = this.getElement();
+        this.filterId = this.element.getAttribute('data-filter-id');
+        // Search input
+        this.searchInput = document.getElementById(`search.${this.filterId}`);
+        this.multiselectOptions = Array.from(this.element.querySelectorAll('.govuk-checkboxes__input'));
+        if (!this.searchInput || !this.multiselectOptions)
+            return;
+        this.initialiseCheckboxes();
+        this.initSearchInputAction();
+    }
+    initialiseCheckboxes() {
+        this.multiselectOptions.forEach((input) => {
+            const wrapper = input.closest('.govuk-checkboxes__item');
+            if (!wrapper)
+                return;
+            wrapper.classList.toggle('dpr-form--hidden', !input.checked);
+        });
+    }
+    initSearchInputAction() {
+        if (!this.searchInput)
+            return;
+        const input = this.searchInput;
+        this.searchInput.addEventListener('keyup', (_event) => {
+            this.searchInputValue = input.value;
+            this.updateCheckboxes();
+        });
+    }
+    updateCheckboxes() {
+        const query = this.searchInputValue.toLowerCase().trim();
+        const minLength = 3;
+        this.multiselectOptions.forEach((input) => {
+            const wrapper = input.closest('.govuk-checkboxes__item');
+            if (!wrapper)
+                return;
+            // Always show selected items
+            if (input.checked) {
+                wrapper.classList.remove('dpr-form--hidden');
+                return;
+            }
+            // Below threshold - hide unselected
+            if (query.length < minLength) {
+                wrapper.classList.add('dpr-form--hidden');
+                return;
+            }
+            const labelText = input.labels?.[0]?.innerText.toLowerCase() ?? '';
+            const matches = labelText.includes(query);
+            wrapper.classList.toggle('dpr-form--hidden', !matches);
+        });
+    }
+}
+
 /* ==========================================================================
    Shared value types
    ========================================================================== */
@@ -2165,17 +2225,19 @@ class DprMyReports extends PollingClientClass {
         if (this.removing)
             return;
         this.removing = true;
-        const body = this.maxRows !== undefined ? { maxRows: this.maxRows } : {};
         try {
-            // Fetch the updated list
+            const formData = new URLSearchParams();
+            if (this.maxRows !== undefined) {
+                formData.append('maxRows', this.maxRows);
+            }
+            formData.append('_csrf', this.csrfToken);
             const res = await fetch(form.action, {
                 method: 'POST',
                 headers: {
                     'X-Requested-With': 'XMLHttpRequest',
-                    'Content-Type': 'application/json',
-                    'CSRF-Token': this.csrfToken,
+                    'Content-Type': 'application/x-www-form-urlencoded',
                 },
-                body: JSON.stringify(body),
+                body: formData.toString(),
                 credentials: 'same-origin',
             });
             if (!res.ok) {
@@ -17691,6 +17753,7 @@ function initAll() {
         DprSyncLoading,
         GranularDateRange,
         MultiselectInput,
+        AutoCompleteMulti,
         DprFiltersFormClass,
         DprSelectedAsyncFilters,
         DprAppliedFilters,