diff options
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/filterable_list.js | 17 | ||||
-rw-r--r-- | app/assets/javascripts/groups/groups_filterable_list.js | 15 |
2 files changed, 27 insertions, 5 deletions
diff --git a/app/assets/javascripts/filterable_list.js b/app/assets/javascripts/filterable_list.js index 2c366abe1cf..c25987e6c36 100644 --- a/app/assets/javascripts/filterable_list.js +++ b/app/assets/javascripts/filterable_list.js @@ -12,7 +12,10 @@ export default class FilterableList { } initSearch() { - this.debounceFilter = _.debounce(this.filterResults.bind(this), 500); + // Wrap to prevent passing event arguments to .filterResults; + this.debounceFilter = _.debounce(() => { + this.filterResults(); + }, 500); this.unbindEvents(); this.bindEvents(); @@ -26,13 +29,15 @@ export default class FilterableList { this.listFilterElement.removeEventListener('input', this.debounceFilter); } - filterResults() { + filterResults(url, data) { + const endpoint = url || this.filterForm.getAttribute('action'); + const additionalData = data || $(this.filterForm).serialize(); $(this.listHolderElement).fadeTo(250, 0.5); return $.ajax({ - url: this.filterForm.getAttribute('action'), - data: $(this.filterForm).serialize(), + url: endpoint, + data: additionalData, type: 'GET', dataType: 'json', context: this, @@ -42,6 +47,10 @@ export default class FilterableList { } onFilterSuccess(data) { + if (data.html) { + this.listHolderElement.innerHTML = data.html; + } + // Change url so if user reload a page - search results are saved return window.history.replaceState({ page: this.filterUrl, diff --git a/app/assets/javascripts/groups/groups_filterable_list.js b/app/assets/javascripts/groups/groups_filterable_list.js index b120adb36b1..f8ba11caccc 100644 --- a/app/assets/javascripts/groups/groups_filterable_list.js +++ b/app/assets/javascripts/groups/groups_filterable_list.js @@ -6,13 +6,17 @@ export default class GroupFilterableList extends FilterableList { super(form, filter, holder); this.store = store; + this.$dropdown = $('.js-group-filter-dropdown-wrap'); } bindEvents() { super.bindEvents(); this.onFormSubmitWrapper = this.onFormSubmit.bind(this); + this.onFilterOptionClikWrapper = this.onOptionClick.bind(this); + this.filterForm.addEventListener('submit', this.onFormSubmitWrapper); + this.$dropdown.on('click', 'a', this.onFilterOptionClikWrapper); } onFormSubmit(e) { @@ -21,8 +25,17 @@ export default class GroupFilterableList extends FilterableList { this.filterResults(); } + onOptionClick(e) { + e.preventDefault(); + const currentOption = $.trim(e.currentTarget.text); + + this.filterUrl = e.currentTarget.href; + this.$dropdown.find('.dropdown-label').text(currentOption); + this.filterResults(this.filterUrl); + } + onFilterSuccess(data) { - super.onFilterSuccess(); + super.onFilterSuccess(data); this.store.setGroups(data); } |