Add support to filter groups by filter options

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);
   }