Add GroupFilterableList to be used as filterable class

- GroupFilterableList extends from FilterableList which is used in other places that doesn’t use Vue.
- GroupFilterableList interacts with a Vue store object.
- Deleted groups_list.js since is not needed anymore, filtering is handled via ajax in GroupFilterableList

app/assets/javascripts/filterable_list.js

@@ -4,44 +4,52 @@
  */
 
 export default class FilterableList {
-  constructor(form, filter, holder, store) {
-    this.store = store;
+  constructor(form, filter, holder) {
     this.filterForm = form;
     this.listFilterElement = filter;
     this.listHolderElement = holder;
+    this.filterUrl = `${this.filterForm.getAttribute('action')}?${$(this.filterForm).serialize()}`;
   }
 
   initSearch() {
     this.debounceFilter = _.debounce(this.filterResults.bind(this), 500);
 
-    this.listFilterElement.removeEventListener('input', this.debounceFilter);
+    this.unbindEvents();
+    this.bindEvents();
+  }
+
+  bindEvents() {
     this.listFilterElement.addEventListener('input', this.debounceFilter);
   }
 
+  unbindEvents() {
+    this.listFilterElement.removeEventListener('input', this.debounceFilter);
+  }
+
   filterResults() {
-    const form = this.filterForm;
-    const filterUrl = `${form.getAttribute('action')}?${$(form).serialize()}`;
 
     $(this.listHolderElement).fadeTo(250, 0.5);
 
     return $.ajax({
-      url: form.getAttribute('action'),
-      data: $(form).serialize(),
+      url: this.filterForm.getAttribute('action'),
+      data: $(this.filterForm).serialize(),
       type: 'GET',
       dataType: 'json',
       context: this,
-      complete() {
-        $(this.listHolderElement).fadeTo(250, 1);
-      },
-      success(data) {
-        this.store.setGroups(data);
+      complete: this.onFilterComplete,
+      success: this.onFilterSuccess,
+    });
+  }
 
+  onFilterSuccess(data) {
    // Change url so if user reload a page - search results are saved
     return window.history.replaceState({
-          page: filterUrl,
+      page: this.filterUrl,
 
-        }, document.title, filterUrl);
-      },
-    });
+    }, document.title, this.filterUrl);
+  }
+
+  onFilterComplete() {
+    $(this.listHolderElement).fadeTo(250, 1);
   }
 }

app/assets/javascripts/groups/groups_filterable_list.js

+import FilterableList from '~/filterable_list';
+
+
+export default class GroupFilterableList extends FilterableList {
+  constructor(form, filter, holder, store) {
+    super(form, filter, holder);
+
+    this.store = store;
+  }
+
+  bindEvents() {
+    super.bindEvents();
+
+    this.onFormSubmitWrapper = this.onFormSubmit.bind(this);
+    this.filterForm.addEventListener('submit', this.onFormSubmitWrapper);
+  }
+
+  onFormSubmit(e) {
+    e.preventDefault();
+
+    this.filterResults();
+  }
+
+  onFilterSuccess(data) {
+    super.onFilterSuccess();
+
+    this.store.setGroups(data);
+  }
+}

app/assets/javascripts/groups/index.js

 /* eslint-disable no-unused-vars */
 
 import Vue from 'vue';
-import GroupsList from '~/groups_list';
+import GroupFilterableList from './groups_filterable_list';
 import GroupsComponent from './components/groups.vue';
 import GroupFolder from './components/group_folder.vue';
 import GroupItem from './components/group_item.vue';
@@ -47,7 +47,9 @@ $(() => {
       },
     },
     created() {
-      const groupFilterList = new GroupsList(form, filter, holder, store);
+      const groupFilterList = new GroupFilterableList(form, filter, holder, store);
+      groupFilterList.initSearch();
+
       this.fetchGroups();
 
       eventHub.$on('toggleSubGroups', this.toggleSubGroups);

app/assets/javascripts/groups_list.js

-import FilterableList from './filterable_list';
-
-/**
- * Makes search request for groups when user types a value in the search input.
- * Updates the html content of the page with the received one.
- */
-export default class GroupsList {
-  constructor(form, filter, holder, store) {
-    if (form && filter && holder && store) {
-      const list = new FilterableList(form, filter, holder, store);
-      list.initSearch();
-    }
-  }
-}

config/webpack.config.js

@@ -33,7 +33,6 @@ var config = {
     graphs:               './graphs/graphs_bundle.js',
     group:                './group.js',
     groups:               './groups/index.js',
-    groups_list:          './groups_list.js',
     issuable:             './issuable/issuable_bundle.js',
     issue_show:           './issue_show/index.js',
     main:                 './main.js',