diff --git a/app/assets/javascripts/filterable_list.js b/app/assets/javascripts/filterable_list.js index 8149602f329..17c39cc7bbb 100644 --- a/app/assets/javascripts/filterable_list.js +++ b/app/assets/javascripts/filterable_list.js @@ -13,14 +13,18 @@ export default class FilterableList { initSearch() { // Wrap to prevent passing event arguments to .filterResults; - this.debounceFilter = _.debounce(() => { - this.filterResults(); - }, 500); + this.debounceFilter = _.debounce(this.onFilterInput.bind(this), 500); this.unbindEvents(); this.bindEvents(); } + onFilterInput() { + const url = this.filterForm.getAttribute('action'); + const data = $(this.filterForm).serialize(); + this.filterResults(url, data, 'filter-input'); + } + bindEvents() { this.listFilterElement.addEventListener('input', this.debounceFilter); } @@ -29,7 +33,7 @@ export default class FilterableList { this.listFilterElement.removeEventListener('input', this.debounceFilter); } - filterResults(url, data) { + filterResults(url, data, comingFrom) { const endpoint = url || this.filterForm.getAttribute('action'); const additionalData = data || $(this.filterForm).serialize(); @@ -42,7 +46,13 @@ export default class FilterableList { dataType: 'json', context: this, complete: this.onFilterComplete, - success: this.onFilterSuccess, + success: (response, textStatus, xhr) => { + if (this.preOnFilterSuccess) { + this.preOnFilterSuccess(comingFrom); + } + + this.onFilterSuccess(response, xhr); + }, }); } diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue index 50bdc27a7a6..6fcc016110f 100644 --- a/app/assets/javascripts/groups/components/group_item.vue +++ b/app/assets/javascripts/groups/components/group_item.vue @@ -16,12 +16,10 @@ export default { }, methods: { onClickRowGroup(e) { - // e.stopPropagation(); + e.stopPropagation(); // Skip for buttons - if (e.target.tagName === 'A' || - (e.target.tagName === 'I' && e.target.parentElement.tagName === 'A')) { - } else { + if (!(e.target.tagName === 'A') && !(e.target.tagName === 'I' && e.target.parentElement.tagName === 'A')) { if (this.group.hasSubgroups) { eventHub.$emit('toggleSubGroups', this.group); } else { diff --git a/app/assets/javascripts/groups/groups_filterable_list.js b/app/assets/javascripts/groups/groups_filterable_list.js index ab674dd4f5b..9a8797caf36 100644 --- a/app/assets/javascripts/groups/groups_filterable_list.js +++ b/app/assets/javascripts/groups/groups_filterable_list.js @@ -33,7 +33,13 @@ export default class GroupFilterableList extends FilterableList { this.filterResults(this.filterUrl); } - onFilterSuccess(data, textStatus, xhr) { + preOnFilterSuccess(comingFrom) { + if (comingFrom === 'filter-input') { + this.filterUrl = `${this.filterForm.getAttribute('action')}?${$(this.filterForm).serialize()}`; + } + } + + onFilterSuccess(data, xhr) { super.onFilterSuccess(data); this.store.setGroups(data);