Improved Group Member Management on User Administration

Allows for a quick and easy group membership management on the
user-administration page. Uses the select2 UI component to
autosuggest other groups, remove existing ones and lock in automatic
groups.

app/assets/javascripts/admin/components/admin-group-selector.js.es6

@@ -0,0 +1,39 @@
+export default Ember.Component.extend({
+  tagName: 'div',
+
+  didInsertElement: function(){
+    this.$("input").select2({
+        multiple: true,
+        width: '100%',
+        query: function(opts){
+                opts.callback({
+                  results: this.get("available").map(this._format)
+                });
+              }.bind(this)
+      }).on("change", function(evt) {
+        if (evt.added){
+          this.triggerAction({action: "groupAdded",
+                actionContext: this.get("available"
+                                    ).findBy("id", evt.added.id)});
+        } else if (evt.removed) {
+          this.triggerAction({action:"groupRemoved",
+                actionContext: this.get("selected"
+                                    ).findBy("id", evt.removed.id)});
+        }
+      }.bind(this));
+
+    Discourse.Group.findAll().then(function(groups){
+      this.set("available", groups.filterBy("automatic", false));
+    }.bind(this));
+
+    this.refreshOnReset();
+  },
+
+  _format: function(item){
+    return {"text": item.name, "id": item.id, "locked": item.automatic};
+  },
+
+  refreshOnReset: function() {
+    this.$("input").select2("data", this.get("selected").map(this._format));
+  }.observes("selected")
+});