[DEBUGGING] Attempt at making multi selects react to onChange events

opf · Aug 8, 2024 · 5b67ddb · 5b67ddb
1 parent 3ee2e71
commit 5b67ddb
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 2 deletions.
diff --git a/app/views/filters/list/_select.html.erb b/app/views/filters/list/_select.html.erb
@@ -9,7 +9,8 @@
                           {
                             class: 'form--select -slim',
                             'data-filter--filters-form-target': 'filterValueSelect',
-                            'data-filter-name': filter.name
+                            'data-filter-name': filter.name,
+                            'data-action': 'change->filter--filters-form#detectChange'
                           }]
        if multi_value
          select_options.third[:multiple] = true
@@ -19,7 +20,7 @@
        class="form-label no-decoration-on-hover -transparent multi-select-toggle"
        tabindex="0"
        data-action="click->filter--filters-form#toggleMultiSelect"
-       data-filter--filters-form-filter-name-param="<%= filter.name %>">
+      data-filter--filters-form-filter-name-param="<%= filter.name %>">
       <span class="icon-context icon-button <%= multi_value ? 'icon-minus2' : 'icon-add' %> icon4" title="<%= t(:label_enable_multi_select) %>">
         <span class="hidden-for-sighted"><%= t(:label_enable_multi_select) %></span>
       </span>

diff --git a/frontend/src/stimulus/controllers/dynamic/filter/filters-form.controller.ts b/frontend/src/stimulus/controllers/dynamic/filter/filters-form.controller.ts
@@ -78,6 +78,24 @@ export default class FiltersFormController extends Controller {
   connect() {
     const urlParams = new URLSearchParams(window.location.search);
     this.displayFiltersValue = urlParams.has('filters');
+
+    this.simpleValueTargets.forEach((simpleValue) => {
+      simpleValue.addEventListener('change', this.sendForm.bind(this));
+    });
+
+    this.filterValueSelectTargets.forEach((filterValueSelect) => {
+      filterValueSelect.addEventListener('input', this.sendForm.bind(this));
+    });
+  }
+
+  disconnect() {
+    this.simpleValueTargets.forEach((simpleValue) => {
+      simpleValue.removeEventListener('change', this.sendForm.bind(this));
+    });
+
+    this.filterValueSelectTargets.forEach((filterValueSelect) => {
+      filterValueSelect.removeEventListener('input', this.sendForm.bind(this));
+    });
   }
 
   toggleDisplayFilters() {
@@ -89,6 +107,10 @@ export default class FiltersFormController extends Controller {
     this.toggleFilterFormVisible();
   }
 
+  detectChange() {
+    debugger;
+  }
+
   toggleButtonActive() {
     if (this.displayFiltersValue) {
       this.filterFormToggleTarget.setAttribute('aria-pressed', 'true');
@@ -102,6 +124,7 @@ export default class FiltersFormController extends Controller {
   }
 
   toggleMultiSelect({ params: { filterName } }:{ params:{ filterName:string } }) {
+    console.log('Toggled!!!');
     const valueContainer = this.filterValueContainerTargets.find((filterValueContainer) => filterValueContainer.getAttribute('data-filter-name') === filterName);
     const singleSelect = this.filterValueSelectTargets.find((selectField) => !selectField.multiple && selectField.getAttribute('data-filter-name') === filterName);
     const multiSelect = this.filterValueSelectTargets.find((selectField) => selectField.multiple && selectField.getAttribute('data-filter-name') === filterName);
@@ -125,6 +148,8 @@ export default class FiltersFormController extends Controller {
     Array.from(selectElement.options).forEach((option) => {
       option.selected = option.value === selectedValue;
     });
+
+    this.sendForm();
   }
 
   addFilter(event:Event) {
@@ -136,6 +161,8 @@ export default class FiltersFormController extends Controller {
     this.disableSelection();
     this.reselectPlaceholderOption();
     this.setSpacerVisibility();
+
+    this.sendForm();
   }
 
   private disableSelection() {
@@ -154,6 +181,8 @@ export default class FiltersFormController extends Controller {
     const removedFilterOption = selectOptions.find((option) => option.value === filterName);
     removedFilterOption?.removeAttribute('disabled');
     this.setSpacerVisibility();
+
+    this.sendForm();
   }
 
   private setSpacerVisibility() {