Refactor projects filtering by name

Reuse same search form and behavior for dashboard#projects, group#projects
and admin#projects. Repsect all other options like sorting, personal
filter when search projects by name. Create FilterableList JS class to
handle identical behaviour of projects and groups lists.

This change also makes filtering and sorting availabe on explore#projects
and explore#groups no matter if you are logged in or not.

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

1 files changed, 14 insertions, 49 deletions

diff --git a/app/assets/javascripts/projects_list.js b/app/assets/javascripts/projects_list.js
index acdf9b7eb5a..383c2815457 100644
--- a/app/assets/javascripts/projects_list.js
+++ b/app/assets/javascripts/projects_list.js
@@ -1,50 +1,15 @@
-/* eslint-disable func-names, space-before-function-paren, object-shorthand, quotes, no-var, one-var, one-var-declaration-per-line, prefer-arrow-callback, consistent-return, no-unused-vars, camelcase, prefer-template, comma-dangle, max-len */
+import FilterableList from './filterable_list';
 
-(function() {
-  window.ProjectsList = {
-    init: function() {
-      $(".projects-list-filter").off('keyup');
-      this.initSearch();
-      return this.initPagination();
-    },
-    initSearch: function() {
-      var debounceFilter, projectsListFilter;
-      projectsListFilter = $('.projects-list-filter');
-      debounceFilter = _.debounce(window.ProjectsList.filterResults, 500);
-      return projectsListFilter.on('keyup', function(e) {
-        if (projectsListFilter.val() !== '') {
-          return debounceFilter();
-        }
-      });
-    },
-    filterResults: function() {
-      var form, project_filter_url, search;
-      $('.projects-list-holder').fadeTo(250, 0.5);
-      form = null;
-      form = $("form#project-filter-form");
-      search = $(".projects-list-filter").val();
-      project_filter_url = form.attr('action') + '?' + form.serialize();
-      return $.ajax({
-        type: "GET",
-        url: form.attr('action'),
-        data: form.serialize(),
-        complete: function() {
-          return $('.projects-list-holder').fadeTo(250, 1);
-        },
-        success: function(data) {
-          $('.projects-list-holder').replaceWith(data.html);
-          return history.replaceState({
-            page: project_filter_url
-          // Change url so if user reload a page - search results are saved
-          }, document.title, project_filter_url);
-        },
-        dataType: "json"
-      });
-    },
-    initPagination: function() {
-      return $('.projects-list-holder .pagination').on('ajax:success', function(e, data) {
-        return $('.projects-list-holder').replaceWith(data.html);
-      });
-    }
-  };
-}).call(window);
+/**
+ * Makes search request for projects when user types a value in the search input.
+ * Updates the html content of the page with the received one.
+ */
+export default class ProjectsList {
+  constructor() {
+    var form = document.querySelector('form#project-filter-form');
+    var filter = document.querySelector('.js-projects-list-filter');
+    var holder = document.querySelector('.js-projects-list-holder');
+
+    new FilterableList(form, filter, holder);
+  }
+}