Add support to filter groups by filter options

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,

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

app/views/shared/groups/_dropdown.html.haml

-.dropdown.inline
+.dropdown.inline.js-group-filter-dropdown-wrap
   %button.dropdown-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
-    %span.light
-    - if @sort.present?
-      = sort_options_hash[@sort]
-    - else
-      = sort_title_recently_created
+    %span.dropdown-label
+      - if @sort.present?
+        = sort_options_hash[@sort]
+      - else
+        = sort_title_recently_created
     = icon('chevron-down')
   %ul.dropdown-menu.dropdown-menu-align-right
     %li