REFACTOR: user-invited-show (#7078)

app/assets/javascripts/discourse/controllers/user-invited-show.js.es6

@@ -1,8 +1,11 @@
 import Invite from "discourse/models/invite";
 import debounce from "discourse/lib/debounce";
 import { popupAjaxError } from "discourse/lib/ajax-error";
+import {
+  default as computed,
+  observes
+} from "ember-addons/ember-computed-decorators";
 
-// This controller handles actions related to a user's invitations
 export default Ember.Controller.extend({
   user: null,
   model: null,
@@ -13,84 +16,67 @@ export default Ember.Controller.extend({
   invitesLoading: false,
   reinvitedAll: false,
   rescindedAll: false,
+  searchTerm: null,
 
-  init: function() {
+  init() {
     this._super(...arguments);
+
     this.set("searchTerm", "");
   },
 
-  /**
-    Observe the search term box with a debouncer and change the results.
-
-    @observes searchTerm
-  **/
+  @observes("searchTearm")
   _searchTermChanged: debounce(function() {
-    var self = this;
     Invite.findInvitedBy(
-      self.get("user"),
+      this.get("user"),
       this.get("filter"),
       this.get("searchTerm")
-    ).then(function(invites) {
-      self.set("model", invites);
-    });
-  }, 250).observes("searchTerm"),
+    ).then(invites => this.set("model", invites));
+  }, 250),
 
   inviteRedeemed: Ember.computed.equal("filter", "redeemed"),
 
-  showBulkActionButtons: function() {
+  @computed("filter")
+  showBulkActionButtons(filter) {
     return (
-      this.get("filter") === "pending" &&
+      filter === "pending" &&
       this.get("model").invites.length > 4 &&
       this.currentUser.get("staff")
     );
-  }.property("filter"),
+  },
 
-  /**
-    Can the currently logged in user invite users to the site
-
-    @property canInviteToForum
-  **/
-  canInviteToForum: function() {
+  @computed
+  canInviteToForum() {
     return Discourse.User.currentProp("can_invite_to_forum");
-  }.property(),
+  },
 
-  /**
-    Can the currently logged in user bulk invite users to the site (only Admin is allowed to perform this operation)
-
-    @property canBulkInvite
-  **/
-  canBulkInvite: function() {
+  @computed
+  canBulkInvite() {
     return Discourse.User.currentProp("admin");
-  }.property(),
+  },
 
-  /**
-    Should the search filter input box be displayed?
+  showSearch: Ember.computed.gte("totalInvites", 10),
 
-    @property showSearch
-  **/
-  showSearch: function() {
-    return this.get("totalInvites") > 9;
-  }.property("totalInvites"),
-
-  pendingLabel: function() {
-    if (this.get("invitesCount.total") > 50) {
+  @computed("invitesCount.total", "invitesCount.pending}")
+  pendingLabel(invitesCountTotal, invitesCountPending) {
+    if (invitesCountTotal > 50) {
       return I18n.t("user.invited.pending_tab_with_count", {
-        count: this.get("invitesCount.pending")
+        count: invitesCountPending
       });
     } else {
       return I18n.t("user.invited.pending_tab");
     }
-  }.property("invitesCount"),
+  },
 
-  redeemedLabel: function() {
-    if (this.get("invitesCount.total") > 50) {
+  @computed("invitesCount.total", "invitesCount.redeemed")
+  redeemedLabel(invitesCountTotal, invitesCountRedeemed) {
+    if (invitesCountTotal > 50) {
       return I18n.t("user.invited.redeemed_tab_with_count", {
-        count: this.get("invitesCount.redeemed")
+        count: invitesCountRedeemed
       });
     } else {
       return I18n.t("user.invited.redeemed_tab");
     }
-  }.property("invitesCount"),
+  },
 
   actions: {
     rescind(invite) {
@@ -120,34 +106,31 @@ export default Ember.Controller.extend({
       bootbox.confirm(I18n.t("user.invited.reinvite_all_confirm"), confirm => {
         if (confirm) {
           Invite.reinviteAll()
-            .then(() => {
-              this.set("reinvitedAll", true);
-            })
+            .then(() => this.set("reinvitedAll", true))
             .catch(popupAjaxError);
         }
       });
     },
 
     loadMore() {
-      var self = this;
-      var model = self.get("model");
+      const model = this.get("model");
 
-      if (self.get("canLoadMore") && !self.get("invitesLoading")) {
-        self.set("invitesLoading", true);
+      if (this.get("canLoadMore") && !this.get("invitesLoading")) {
+        this.set("invitesLoading", true);
         Invite.findInvitedBy(
-          self.get("user"),
-          self.get("filter"),
-          self.get("searchTerm"),
+          this.get("user"),
+          this.get("filter"),
+          this.get("searchTerm"),
           model.invites.length
-        ).then(function(invite_model) {
-          self.set("invitesLoading", false);
+        ).then(invite_model => {
+          this.set("invitesLoading", false);
           model.invites.pushObjects(invite_model.invites);
           if (
             invite_model.invites.length === 0 ||
             invite_model.invites.length <
               Discourse.SiteSettings.invites_per_page
           ) {
-            self.set("canLoadMore", false);
+            this.set("canLoadMore", false);
           }
         });
       }

app/assets/javascripts/discourse/routes/user-invited-show.js.es6

@@ -3,12 +3,11 @@ import showModal from "discourse/lib/show-modal";
 
 export default Discourse.Route.extend({
   model(params) {
-    const self = this;
-    Invite.findInvitedCount(self.modelFor("user")).then(function(result) {
-      self.set("invitesCount", result);
-    });
-    self.inviteFilter = params.filter;
-    return Invite.findInvitedBy(self.modelFor("user"), params.filter);
+    Invite.findInvitedCount(this.modelFor("user")).then(result =>
+      this.set("invitesCount", result)
+    );
+    this.inviteFilter = params.filter;
+    return Invite.findInvitedBy(this.modelFor("user"), params.filter);
   },
 
   afterModel(model) {
@@ -19,7 +18,7 @@ export default Discourse.Route.extend({
 
   setupController(controller, model) {
     controller.setProperties({
-      model: model,
+      model,
       user: this.controllerFor("user").get("model"),
       filter: this.inviteFilter,
       searchTerm: "",

app/assets/javascripts/discourse/templates/user-invited-show.hbs

@@ -14,7 +14,7 @@
             </nav>
 
             <div class="pull-right">
-              {{d-button icon="plus" action=(route-action "showInvite") label="user.invited.create" class="btn"}}
+              {{d-button icon="plus" action=(route-action "showInvite") label="user.invited.create"}}
               {{#if canBulkInvite}}
                 {{csv-uploader uploading=uploading}}
                 <a href="https://meta.discourse.org/t/sending-bulk-user-invites/16468" target="_blank" style="color:black;">{{d-icon "question-circle"}}</a>
@@ -23,12 +23,12 @@
                 {{#if rescindedAll}}
                   {{i18n 'user.invited.rescinded_all'}}
                 {{else}}
-                  {{d-button icon="times" action=(action "rescindAll") class="btn" label="user.invited.rescind_all"}}
+                  {{d-button icon="times" action=(action "rescindAll") label="user.invited.rescind_all"}}
                 {{/if}}
                 {{#if reinvitedAll}}
                   {{i18n 'user.invited.reinvited_all'}}
                 {{else}}
-                  {{d-button icon="refresh" action=(action "reinviteAll") class="btn" label="user.invited.reinvite_all"}}
+                  {{d-button icon="sync" action=(action "reinviteAll") label="user.invited.reinvite_all"}}
                 {{/if}}
               {{/if}}
             </div>
@@ -72,9 +72,11 @@
                     <td>{{number invite.user.topics_entered}}</td>
                     <td>{{number invite.user.posts_read_count}}</td>
                     <td>{{{format-duration invite.user.time_read}}}</td>
-                    <td><span title="{{i18n 'user.invited.days_visited'}}">{{{unbound invite.user.days_visited}}}</span>
+                    <td>
+                      <span title="{{i18n 'user.invited.days_visited'}}">{{{unbound invite.user.days_visited}}}</span>
                         /
-                      <span title="{{i18n 'user.invited.account_age_days'}}">{{{unbound invite.user.days_since_created}}}</span></td>
+                      <span title="{{i18n 'user.invited.account_age_days'}}">{{{unbound invite.user.days_since_created}}}</span>
+                    </td>
                   {{/if}}
                 {{else}}
                   <td>{{unbound invite.email}}</td>
@@ -87,13 +89,13 @@
                     {{#if invite.rescinded}}
                       {{i18n 'user.invited.rescinded'}}
                     {{else}}
-                      {{d-button icon="times" action=(action "rescind") actionParam=invite class="btn" label="user.invited.rescind"}}
+                      {{d-button icon="times" action=(action "rescind") actionParam=invite label="user.invited.rescind"}}
                     {{/if}}
                     &nbsp;&nbsp;&nbsp;&nbsp;
                     {{#if invite.reinvited}}
                       {{i18n 'user.invited.reinvited'}}
                     {{else}}
-                      {{d-button icon="refresh" action=(action "reinvite") actionParam=invite class="btn" label="user.invited.reinvite"}}
+                      {{d-button icon="sync" action=(action "reinvite") actionParam=invite label="user.invited.reinvite"}}
                     {{/if}}
                   </td>
                 {{/if}}