diff --git a/app/views/filters/list/_select.html.erb b/app/views/filters/list/_select.html.erb index 65b73b071b8f..568605572f34 100644 --- 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 %>"> <%= t(:label_enable_multi_select) %> diff --git a/frontend/src/stimulus/controllers/dynamic/filter/filters-form.controller.ts b/frontend/src/stimulus/controllers/dynamic/filter/filters-form.controller.ts index 4339650433ef..8c7e54aed36b 100644 --- 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() {