Converted Private Message map to a component

app/assets/javascripts/discourse/components/private_message_map_component.js

@@ -0,0 +1,30 @@
+Discourse.DiscoursePrivateMessageMapComponent = Ember.Component.extend({
+  templateName: 'components/discourse-private-message-map',
+  tagName: 'section',
+  classNames: ['information'],
+  postStream: Em.computed.alias('topic.postStream'),
+
+  details: Em.computed.alias('topic.details'),
+
+  actions: {
+    removeAllowedUser: function(user) {
+      console.log(user);
+      var self = this;
+      bootbox.dialog(I18n.t("private_message_info.remove_allowed_user", {name: user.get('username')}), [
+        {label: I18n.t("no_value"),
+         'class': 'btn-danger rightg'},
+        {label: I18n.t("yes_value"),
+         'class': 'btn-primary',
+          callback: function() {
+            self.get('details').removeAllowedUser(user);
+          }
+        }
+      ]);
+    },
+
+    showPrivateInvite: function() {
+      this.sendAction('showPrivateInviteAction');
+    }
+  }
+
+});

app/assets/javascripts/discourse/controllers/topic_controller.js

@@ -222,19 +222,7 @@ Discourse.TopicController = Discourse.ObjectController.extend(Discourse.Selected
       });
     },
 
-    removeAllowedUser: function(username) {
+
-      var self = this;
-      bootbox.dialog(I18n.t("private_message_info.remove_allowed_user", {name: username}), [
-        {label: I18n.t("no_value"),
-         'class': 'btn-danger rightg'},
-        {label: I18n.t("yes_value"),
-         'class': 'btn-primary',
-          callback: function() {
-            self.get('details').removeAllowedUser(username);
-          }
-        }
-      ]);
-    }
 
   },
 

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

@@ -34,11 +34,11 @@ Discourse.TopicDetails = Discourse.Model.extend({
 
 
   notificationReasonText: function() {
-    var locale_string = "topic.notifications.reasons." + (this.get('notification_level') || 1);
+    var localeString = "topic.notifications.reasons." + (this.get('notification_level') || 1);
     if (typeof this.get('notifications_reason_id') === 'number') {
-      locale_string += "_" + this.get('notifications_reason_id');
+      localeString += "_" + this.get('notifications_reason_id');
     }
-    return I18n.t(locale_string, { username: Discourse.User.currentProp('username_lower') });
+    return I18n.t(localeString, { username: Discourse.User.currentProp('username_lower') });
   }.property('notification_level', 'notifications_reason_id'),
 
 
@@ -51,8 +51,10 @@ Discourse.TopicDetails = Discourse.Model.extend({
     });
   },
 
-  removeAllowedUser: function(username) {
+  removeAllowedUser: function(user) {
-    var users = this.get('allowed_users');
+    var users = this.get('allowed_users'),
+        username = user.get('username');
+
     Discourse.ajax("/t/" + this.get('topic.id') + "/remove-allowed-user", {
       type: 'PUT',
       data: { username: username }

app/assets/javascripts/discourse/templates/components/discourse-private-message-map.js.handlebars

@@ -0,0 +1,26 @@
+<h3><i class='icon icon-envelope'></i> {{i18n private_message_info.title}}</h3>
+<div class='participants clearfix'>
+  {{#groupedEach details.allowed_groups}}
+    <div class='user group'>
+      #{{unbound name}}
+    </div>
+  {{/groupedEach}}
+  {{#groupedEach details.allowed_users}}
+    <div class='user'>
+      {{#link-to 'user' this}}
+        {{avatar this imageSize="small"}}
+      {{/link-to}}
+      {{#link-to 'user' this}}
+        {{unbound username}}
+      {{/link-to}}
+      {{#if view.details.can_remove_allowed_users}}
+        <a class='remove-invited' {{action removeAllowedUser this}}><i class="icon-remove"></i></a>
+      {{/if}}
+    </div>
+  {{/groupedEach}}
+</div>
+{{#if details.can_invite_to}}
+  <div class='controls'>
+    <button class='btn' {{action showPrivateInvite}}>{{i18n private_message_info.invite}}</button>
+  </div>
+{{/if}}

app/assets/javascripts/discourse/templates/topic_map/private_message.js.handlebars

@@ -1,26 +0,0 @@
-<h3><i class='icon icon-envelope'></i> {{i18n private_message_info.title}}</h3>
-<div class='participants clearfix'>
-  {{#groupedEach details.allowed_groups}}
-  <div class='user group'>
-    #{{unbound name}}
-  </div>
-  {{/groupedEach}}
-  {{#groupedEach details.allowed_users}}
-  <div class='user'>
-    <a href='/users/{{lower username}}'>
-      {{avatar this imageSize="small"}}
-    </a>
-    <a href='/users/{{lower username}}'>
-      {{unbound username}}
-    </a>
-    {{#if controller.model.details.can_remove_allowed_users}}
-    <a class='remove-invited' {{action removeAllowedUser username}}><i class="icon-remove"></i></a>
-    {{/if}}
-  </div>
-  {{/groupedEach}}
-</div>
-{{#if details.can_invite_to}}
-  <div class='controls'>
-    <button class='btn' {{action showPrivateInvite}}>{{i18n private_message_info.invite}}</button>
-  </div>
-{{/if}}

app/assets/javascripts/discourse/views/topic_map/topic_map_view.js

@@ -57,7 +57,6 @@ Discourse.TopicMapView = Discourse.ContainerView.extend({
   },
 
   appendMapInformation: function(container) {
-
     var topic = this.get('topic');
 
     // If we have a best of capability
@@ -67,12 +66,7 @@ Discourse.TopicMapView = Discourse.ContainerView.extend({
 
     // If we have a private message
     if (this.get('topic.isPrivateMessage')) {
-      container.attachViewWithArgs({
+      container.attachViewWithArgs({ topic: topic, showPrivateInviteAction: 'showPrivateInvite' }, Discourse.DiscoursePrivateMessageMapComponent);
-        templateName: 'topic_map/private_message',
-        tagName: 'section',
-        classNames: ['information'],
-        content: this.get('controller')
-      }, Discourse.GroupedView);
     }
   }
 });