SONAR-6602 refactor groups page

1 files changed, 49 insertions, 0 deletions

diff --git a/server/sonar-web/src/main/js/apps/groups/search-view.js b/server/sonar-web/src/main/js/apps/groups/search-view.js
new file mode 100644
index 00000000000..1540d7eb36e
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/groups/search-view.js
@@ -0,0 +1,49 @@
+define([
+  './templates'
+], function () {
+
+  return Marionette.ItemView.extend({
+    template: Templates['groups-search'],
+
+    events: {
+      'submit #groups-search-form': 'onFormSubmit',
+      'search #groups-search-query': 'debouncedOnKeyUp',
+      'keyup #groups-search-query': 'debouncedOnKeyUp'
+    },
+
+    initialize: function () {
+      this._bufferedValue = null;
+      this.debouncedOnKeyUp = _.debounce(this.onKeyUp, 400);
+    },
+
+    onRender: function () {
+      this.delegateEvents();
+    },
+
+    onFormSubmit: function (e) {
+      e.preventDefault();
+      this.debouncedOnKeyUp();
+    },
+
+    onKeyUp: function () {
+      var q = this.getQuery();
+      if (q === this._bufferedValue) {
+        return;
+      }
+      this._bufferedValue = this.getQuery();
+      if (this.searchRequest != null) {
+        this.searchRequest.abort();
+      }
+      this.searchRequest = this.search(q);
+    },
+
+    getQuery: function () {
+      return this.$('#groups-search-query').val();
+    },
+
+    search: function (q) {
+      return this.collection.fetch({ reset: true, data: { q: q } });
+    }
+  });
+
+});