Add filter and sorting to dashboard groups page

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

2 files changed, 51 insertions, 0 deletions

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index c51860d1604..44e02a01a3a 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -177,6 +177,7 @@ require('./project_select');
 require('./project_show');
 require('./project_variables');
 require('./projects_list');
+require('./groups_list');
 require('./render_gfm');
 require('./render_math');
 require('./right_sidebar');
diff --git a/app/assets/javascripts/groups_list.js b/app/assets/javascripts/groups_list.js
new file mode 100644
index 00000000000..5358121b063
--- /dev/null
+++ b/app/assets/javascripts/groups_list.js
@@ -0,0 +1,50 @@
+/* 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 */
+
+(function() {
+  window.GroupsList = {
+    init: function() {
+      $(".groups-list-filter").off('keyup');
+      this.initSearch();
+      return this.initPagination();
+    },
+    initSearch: function() {
+      var debounceFilter, groupsListFilter;
+      groupsListFilter = $('.groups-list-filter');
+      debounceFilter = _.debounce(window.GroupsList.filterResults, 500);
+      return groupsListFilter.on('keyup', function(e) {
+        if (groupsListFilter.val() !== '') {
+          return debounceFilter();
+        }
+      });
+    },
+    filterResults: function() {
+      var form, group_filter_url, search;
+      $('.groups-list-holder').fadeTo(250, 0.5);
+      form = null;
+      form = $("form#group-filter-form");
+      search = $(".groups-list-filter").val();
+      group_filter_url = form.attr('action') + '?' + form.serialize();
+      return $.ajax({
+        type: "GET",
+        url: form.attr('action'),
+        data: form.serialize(),
+        complete: function() {
+          return $('.groups-list-holder').fadeTo(250, 1);
+        },
+        success: function(data) {
+          $('.groups-list-holder').replaceWith(data.html);
+          return history.replaceState({
+            page: group_filter_url
+          // Change url so if user reload a page - search results are saved
+          }, document.title, group_filter_url);
+        },
+        dataType: "json"
+      });
+    },
+    initPagination: function() {
+      return $('.groups-list-holder .pagination').on('ajax:success', function(e, data) {
+        return $('.groups-list-holder').replaceWith(data.html);
+      });
+    }
+  };
+}).call(window);