work in progress add support for groups

app/assets/javascripts/admin/controllers/admin_groups_controller.js

@@ -0,0 +1,10 @@
+Discourse.AdminGroupsController = Ember.ArrayController.extend({
+  itemController: 'adminGroup',
+  edit: function(action){
+    this.get('content').select(action);
+  }
+});
+
+Discourse.AdminGroupController = Ember.ObjectController.extend({
+
+});

app/assets/javascripts/admin/models/group.js

@@ -0,0 +1,24 @@
+Discourse.Group = Discourse.Model.extend({
+
+});
+
+Discourse.Group.reopenClass({
+  findAll: function(){
+    var list = Discourse.SelectableArray.create();
+
+    list.addObject(Discourse.Group.create({id: 1, name: "all mods", members: ["A","b","c"]}));
+    list.addObject(Discourse.Group.create({id: 2, name: "other mods", members: ["A","b","c"]}));
+
+    return list;
+  },
+
+  find: function(id) {
+    var promise = new Em.Deferred();
+   
+    setTimeout(function(){
+      promise.resolve(Discourse.Group.create({id: 1, name: "all mods", members: ["A","b","c"]}));
+    }, 1000);
+    
+    return promise;
+  }
+});

app/assets/javascripts/admin/routes/admin_groups_routes.js

@@ -0,0 +1,9 @@
+Discourse.AdminGroupsRoute = Discourse.Route.extend({
+  model: function() {
+    return Discourse.Group.findAll();
+  },
+  renderTemplate: function() {
+    this.render('admin/templates/groups',{into: 'admin/templates/admin'});
+  }
+});
+

app/assets/javascripts/admin/routes/admin_routes.js

@@ -25,6 +25,8 @@ Discourse.Route.buildRoutes(function() {
       this.route('old', { path: '/old' });
     });
 
+    this.route('groups', {path: '/groups'});
+
     this.resource('adminUsers', { path: '/users' }, function() {
       this.resource('adminUser', { path: '/:username' });
       this.resource('adminUsersList', { path: '/list' }, function() {

app/assets/javascripts/admin/templates/admin.js.handlebars

@@ -7,6 +7,7 @@
         <li>{{#linkTo 'admin.site_settings'}}{{i18n admin.site_settings.title}}{{/linkTo}}</li>
         <li>{{#linkTo 'adminSiteContents'}}{{i18n admin.site_content.title}}{{/linkTo}}</li>
         <li>{{#linkTo 'adminUsersList.active'}}{{i18n admin.users.title}}{{/linkTo}}</li>
+        <li>{{#linkTo 'admin.groups'}}{{i18n admin.groups.title}}{{/linkTo}}</li>
         <li>{{#linkTo 'admin.email_logs'}}{{i18n admin.email_logs.title}}{{/linkTo}}</li>
         <li>{{#linkTo 'adminFlags.active'}}{{i18n admin.flags.title}}{{/linkTo}}</li>
         <li>{{#linkTo 'admin.customize'}}{{i18n admin.customize.title}}{{/linkTo}}</li>

app/assets/javascripts/admin/templates/groups.js.handlebars

@@ -0,0 +1,23 @@
+<div class='row'>
+  <div class='content-list span6'>
+    <h3>{{i18n admin.groups.edit}}</h3>
+    <ul>
+      {{#each group in controller}}
+        <li>
+        <a href="#" {{action "edit" group}} {{bindAttr class="group.active"}}>{{group.name}}</a>
+        </li>
+      {{/each}}
+    </ul>
+  </div>
+
+  <div class='content-editor'>
+    {{#if content.active}}
+      {{#with content.active}}
+        {{name}}  
+        {{view Discourse.UserSelector id="private-message-users" class="span8" placeholderKey="admin.groups.selector_placeholder" tabindex="1" usernamesBinding="usernames"}}
+      {{/with}}
+    {{else}}
+      nothing here yet
+    {{/if}}
+  </div>
+</div>

app/assets/javascripts/admin/views/admin_groups_view.js

@@ -0,0 +1,4 @@
+Discourse.AdminGroupsView = Discourse.View.extend({
+});
+
+

app/assets/javascripts/discourse/models/selectable_array.js

@@ -0,0 +1,19 @@
+// this allows you to track the selected item in an array, ghetto for now
+Discourse.SelectableArray = Em.ArrayProxy.extend({
+  content: [],
+  selectIndex: function(index){
+    this.select(this[index]);
+  },
+  select: function(selected){
+    this.content.each(function(item){
+      if(item === selected){
+        Em.set(item, "active", true)
+      } else {
+        if (item.get("active")) {
+          Em.set(item, "active", false)
+        }
+      }
+    });
+    this.set("active", selected);
+  }
+});

app/assets/javascripts/discourse/templates/composer.js.handlebars

@@ -28,7 +28,7 @@
           {{#if content.editTitle}}
             <div class='form-element clearfix'>
                 {{#if content.creatingPrivateMessage}}
-                  {{view Discourse.TextField id="private-message-users" class="span8" placeholderKey="composer.users_placeholder" tabindex="1"}}
+                  {{view Discourse.UserSelector topicIdBinding="controller.controllers.topic.content.id" excludeCurrentUser="true" id="private-message-users" class="span8" placeholderKey="composer.users_placeholder" tabindex="1" usernamesBinding="content.targetUsernames"}}
                 {{/if}}
                 {{view Discourse.TextField valueBinding="content.title" tabindex="2" id="reply-title" maxlength="255" class="span8" placeholderKey="composer.title_placeholder"}}
                 {{#unless content.creatingPrivateMessage}}

app/assets/javascripts/discourse/views/composer_view.js

@@ -167,17 +167,7 @@ Discourse.ComposerView = Discourse.View.extend({
 
     $LAB.script(assetPath('defer/html-sanitizer-bundle'));
     Discourse.ComposerView.trigger("initWmdEditor");
-    template = Handlebars.compile("<div class='autocomplete'>" +
-                                    "<ul>" +
-                                    "{{#each options}}" +
-                                      "<li>" +
-                                          "<a href='#'>{{avatar this imageSize=\"tiny\"}} " +
-                                          "<span class='username'>{{this.username}}</span> " +
-                                          "<span class='name'>{{this.name}}</span></a>" +
-                                      "</li>" +
-                                      "{{/each}}" +
-                                    "</ul>" +
-                                  "</div>");
+    template = Discourse.UserSelector.templateFunction();
 
     transformTemplate = Handlebars.compile("{{avatar this imageSize=\"tiny\"}} {{this.username}}");
     $wmdInput.data('init', true);
@@ -193,38 +183,6 @@ Discourse.ComposerView = Discourse.View.extend({
       transformComplete: function(v) { return v.username; }
     });
 
-    selected = [];
-    $('#private-message-users').val(this.get('content.targetUsernames')).autocomplete({
-      template: template,
-
-      dataSource: function(term) {
-        return Discourse.UserSearch.search({
-          term: term,
-          topicId: _this.get('controller.controllers.topic.content.id'),
-          exclude: selected.concat([Discourse.get('currentUser.username')])
-        });
-      },
-
-      onChangeItems: function(items) {
-        items = $.map(items, function(i) {
-          if (i.username) {
-            return i.username;
-          } else {
-            return i;
-          }
-        });
-        _this.set('content.targetUsernames', items.join(","));
-        selected = items;
-      },
-
-      transformComplete: transformTemplate,
-
-      reverseTransform: function(i) {
-        return { username: i };
-      }
-
-    });
-
     topic = this.get('topic');
     this.editor = editor = Discourse.Markdown.createEditor({
       lookupAvatar: function(username) {

app/assets/javascripts/discourse/views/user_selector_view.js

@@ -0,0 +1,65 @@
+Discourse.UserSelector = Discourse.TextField.extend({
+  
+  didInsertElement: function(){
+    var _this = this;
+    var selected = [];
+    var transformTemplate = Handlebars.compile("{{avatar this imageSize=\"tiny\"}} {{this.username}}");
+    var template = Discourse.UserSelector.templateFunction();
+
+    $(this.get('element')).val(this.get('usernames')).autocomplete({
+      template: template,
+
+      dataSource: function(term) {
+        var exclude = selected;
+        if (_this.get('excludeCurrentUser')){
+          exclude = exclude.concat([Discourse.get('currentUser.username')]);
+        }
+        return Discourse.UserSearch.search({
+          term: term,
+          topicId: _this.get('topicId'),
+          exclude: exclude
+        });
+      },
+
+      onChangeItems: function(items) {
+        items = $.map(items, function(i) {
+          if (i.username) {
+            return i.username;
+          } else {
+            return i;
+          }
+        });
+        _this.set('usernames', items.join(","));
+        selected = items;
+      },
+
+      transformComplete: transformTemplate,
+
+      reverseTransform: function(i) {
+        return { username: i };
+      }
+
+    });
+    
+  }
+
+});
+
+
+Discourse.UserSelector.reopenClass({
+  // I really want to move this into a template file, but I need a handlebars template here, not an ember one
+  templateFunction: function(){ 
+      this.compiled = this.compiled || Handlebars.compile("<div class='autocomplete'>" +
+                                    "<ul>" +
+                                    "{{#each options}}" +
+                                      "<li>" +
+                                          "<a href='#'>{{avatar this imageSize=\"tiny\"}} " +
+                                          "<span class='username'>{{this.username}}</span> " +
+                                          "<span class='name'>{{this.name}}</span></a>" +
+                                      "</li>" +
+                                      "{{/each}}" +
+                                    "</ul>" +
+                                  "</div>");
+      return this.compiled;
+    }
+});