1 files changed, 65 insertions, 17 deletions

diff --git a/app/assets/javascripts/filterable_list.js b/app/assets/javascripts/filterable_list.js
index aaaeb9bddb1..139206cc185 100644
--- a/app/assets/javascripts/filterable_list.js
+++ b/app/assets/javascripts/filterable_list.js
@@ -8,39 +8,87 @@ export default class FilterableList {
     this.filterForm = form;
     this.listFilterElement = filter;
     this.listHolderElement = holder;
+    this.isBusy = false;
+  }
+
+  getFilterEndpoint() {
+    return `${this.filterForm.getAttribute('action')}?${$(this.filterForm).serialize()}`;
+  }
+
+  getPagePath() {
+    return this.getFilterEndpoint();
   }
 
   initSearch() {
-    this.debounceFilter = _.debounce(this.filterResults.bind(this), 500);
+    // Wrap to prevent passing event arguments to .filterResults;
+    this.debounceFilter = _.debounce(this.onFilterInput.bind(this), 500);
 
-    this.listFilterElement.removeEventListener('input', this.debounceFilter);
+    this.unbindEvents();
+    this.bindEvents();
+  }
+
+  onFilterInput() {
+    const $form = $(this.filterForm);
+    const queryData = {};
+    const filterGroupsParam = $form.find('[name="filter_groups"]').val();
+
+    if (filterGroupsParam) {
+      queryData.filter_groups = filterGroupsParam;
+    }
+
+    this.filterResults(queryData);
+
+    if (this.setDefaultFilterOption) {
+      this.setDefaultFilterOption();
+    }
+  }
+
+  bindEvents() {
     this.listFilterElement.addEventListener('input', this.debounceFilter);
   }
 
-  filterResults() {
-    const form = this.filterForm;
-    const filterUrl = `${form.getAttribute('action')}?${$(form).serialize()}`;
+  unbindEvents() {
+    this.listFilterElement.removeEventListener('input', this.debounceFilter);
+  }
+
+  filterResults(queryData) {
+    if (this.isBusy) {
+      return false;
+    }
 
     $(this.listHolderElement).fadeTo(250, 0.5);
 
     return $.ajax({
-      url: form.getAttribute('action'),
-      data: $(form).serialize(),
+      url: this.getFilterEndpoint(),
+      data: queryData,
       type: 'GET',
       dataType: 'json',
       context: this,
-      complete() {
-        $(this.listHolderElement).fadeTo(250, 1);
+      complete: this.onFilterComplete,
+      beforeSend: () => {
+        this.isBusy = true;
       },
-      success(data) {
-        this.listHolderElement.innerHTML = data.html;
-
-       // Change url so if user reload a page - search results are saved
-        return window.history.replaceState({
-          page: filterUrl,
-
-        }, document.title, filterUrl);
+      success: (response, textStatus, xhr) => {
+        this.onFilterSuccess(response, xhr, queryData);
       },
     });
   }
+
+  onFilterSuccess(response, xhr, queryData) {
+    if (response.html) {
+      this.listHolderElement.innerHTML = response.html;
+    }
+
+    // Change url so if user reload a page - search results are saved
+    const currentPath = this.getPagePath(queryData);
+
+    return window.history.replaceState({
+      page: currentPath,
+    }, document.title, currentPath);
+  }
+
+  onFilterComplete() {
+    this.isBusy = false;
+    $(this.listHolderElement).fadeTo(250, 1);
+  }
 }