Work in progress: Groups Page

app/assets/javascripts/discourse/lib/autocomplete.js

@@ -83,12 +83,13 @@ $.fn.autocomplete = function(options) {
   };
 
   var addInputSelectedItem = function(item) {
-    var transformed;
+    var transformed,
+        transformedItem = item;
 
-    if (options.transformComplete) { transformed = options.transformComplete(item); }
+    if (options.transformComplete) { transformedItem = options.transformComplete(transformedItem); }
     // dump what we have in single mode, just in case
     if (options.single) { inputSelectedItems = []; }
-    if (!_.isArray(transformed)) { transformed = [transformed || item]; }
+    if (!_.isArray(transformedItem)) { transformed = [transformedItem || item]; }
 
     var divs = transformed.map(function(itm) {
       var d = $("<div class='item'><span>" + itm + "<a class='remove' href='#'><i class='fa fa-times'></i></a></span></div>");
@@ -106,7 +107,7 @@ $.fn.autocomplete = function(options) {
 
     $(divs).find('a').click(function() {
       closeAutocomplete();
-      inputSelectedItems.splice($.inArray(item, inputSelectedItems), 1);
+      inputSelectedItems.splice($.inArray(transformedItem, inputSelectedItems), 1);
       $(this).parent().parent().remove();
       if (options.single) {
         me.show();

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

@@ -31,15 +31,18 @@ Discourse.Group = Discourse.Model.extend({
     }
   }.property('user_count'),
 
+  // TODO: Refactor so adminGroups doesn't store the groups inside itself either.
+  findMembers: function() {
+    return Discourse.ajax('/groups/' + this.get('name') + '/members').then(function(result) {
+      return result.map(function(u) { return Discourse.User.create(u) });
+    });
+  },
+
   loadUsers: function() {
     var id = this.get('id');
     if(id && !this.get('loadedUsers')) {
       var self = this;
-      return Discourse.ajax('/admin/groups/' + this.get('id') + '/users').then(function(payload){
-        var users = Em.A();
-        _.each(payload,function(user){
-          users.addObject(Discourse.User.create(user));
-        });
+      return this.findMembers().then(function(users) {
         self.set('users', users);
         self.set('loadedUsers', true);
         return self;
@@ -48,16 +51,21 @@ Discourse.Group = Discourse.Model.extend({
     return Ember.RSVP.resolve(this);
   },
 
-  usernames: function() {
+  usernames: function(key, value) {
     var users = this.get('users');
-    var usernames = "";
-    if(users) {
-      usernames = _.map(users, function(user){
-        return user.get('username');
-      }).join(',');
+    if (arguments.length > 1) {
+      this.set('_usernames', value);
+    } else {
+      var usernames = "";
+      if(users) {
+        usernames = users.map(function(user) {
+          return user.get('username');
+        }).join(',');
+      }
+      this.set('_usernames', usernames);
     }
-    return usernames;
-  }.property('users'),
+    return this.get('_usernames');
+  }.property('users.@each.username'),
 
   destroy: function(){
     if(!this.id) return;
@@ -133,6 +141,12 @@ Discourse.Group.reopenClass({
     });
   },
 
+  find: function(name) {
+    return Discourse.ajax("/groups/" + name + ".json").then(function(g) {
+      return Discourse.Group.create(g.basic_group);
+    });
+  },
+
   aliasLevelOptions: function() {
     return aliasLevelOptions;
   }

app/assets/javascripts/discourse/routes/application_routes.js

@@ -64,7 +64,7 @@ Discourse.Route.buildRoutes(function() {
     this.route(homepage, { path: '/' });
   });
 
-  this.resource('group', { path: '/groups/:groupname' }, function() {
+  this.resource('group', { path: '/groups/:name' }, function() {
     this.route('members');
   });
 

app/assets/javascripts/discourse/routes/group_index_route.js

@@ -1,6 +1,5 @@
 Discourse.GroupIndexRoute = Discourse.Route.extend({
-
   model: function() {
-    console.log('group index');
+    return this.modelFor('group');
   }
 });

app/assets/javascripts/discourse/routes/group_members_route.js

@@ -0,0 +1,18 @@
+Discourse.GroupMembersRoute = Discourse.Route.extend({
+  model: function() {
+    return this.modelFor('group');
+  },
+
+  afterModel: function(model) {
+    var self = this;
+    return model.findMembers().then(function(result) {
+      self.set('_members', result);
+    });
+  },
+
+  setupController: function(controller) {
+    controller.set('model', this.get('_members'));
+  }
+
+});
+

app/assets/javascripts/discourse/routes/group_route.js

@@ -1,7 +1,7 @@
 Discourse.GroupRoute = Discourse.Route.extend({
 
-  model: function() {
-    return Discourse.Group.create();
+  model: function(params) {
+    return Discourse.Group.find(params.name);
   },
 
 });

app/assets/javascripts/discourse/templates/group/index.js.handlebars

@@ -1,2 +1,3 @@
 GROUP INDEX
+{{name}}
 

app/assets/javascripts/discourse/templates/group/members.js.handlebars

@@ -1,2 +1,3 @@
-LIST GROUP MEMBERS
-
+{{#each model}}
+  {{username}}
+{{/each}}

app/controllers/admin/groups_controller.rb

@@ -9,11 +9,6 @@ class Admin::GroupsController < Admin::AdminController
     render json: success_json
   end
 
-  def users
-    group = Group.find(params[:group_id].to_i)
-    render_serialized(group.users.order('username_lower asc').limit(200).to_a, BasicUserSerializer)
-  end
-
   def update
     group = Group.find(params[:id].to_i)
 

app/controllers/groups_controller.rb

@@ -1,9 +1,15 @@
 class GroupsController < ApplicationController
 
   def show
+    group = Group.where(name: params.require(:id)).first
+    guardian.ensure_can_see!(group)
+    render_serialized(group, BasicGroupSerializer)
   end
 
   def members
+    group = Group.where(name: params.require(:group_id)).first
+    guardian.ensure_can_see!(group)
+    render_serialized(group.users.order('username_lower asc').limit(200).to_a, BasicUserSerializer)
   end
 
 end