UX: disable 'Hide results' button when poll is closed

plugins/poll/assets/javascripts/controllers/poll.js.es6

@@ -1,3 +1,5 @@
+import computed from "ember-addons/ember-computed-decorators";
+
 export default Ember.Controller.extend({
   isMultiple: Ember.computed.equal("poll.type", "multiple"),
   isNumber: Ember.computed.equal("poll.type", "number"),
@@ -11,12 +13,10 @@ export default Ember.Controller.extend({
   showingResults: Em.computed.or("isClosed", "post.topic.closed", "post.topic.archived", "showResults"),
 
   showResultsDisabled: Em.computed.equal("poll.voters", 0),
-  hideResultsDisabled: Em.computed.alias("isClosed"),
-
-  poll: function() {
-    const poll = this.get("model"),
-          vote = this.get("vote");
+  hideResultsDisabled: Em.computed.or("isClosed", "post.topic.closed", "post.topic.archived"),
 
+  @computed("model", "vote")
+  poll(poll, vote) {
     if (poll) {
       const options = _.map(poll.get("options"), o => Em.Object.create(o));
 
@@ -28,44 +28,46 @@ export default Ember.Controller.extend({
     }
 
     return poll;
-  }.property("model"),
+  },
 
-  selectedOptions: function() {
+  @computed("poll.options.@each.selected")
+  selectedOptions() {
     return _.map(this.get("poll.options").filterBy("selected"), o => o.get("id"));
-  }.property("poll.options.@each.selected"),
+  },
 
-  min: function() {
-    let min = parseInt(this.get("poll.min"), 10);
+  @computed("poll.min")
+  min(min) {
+    min = parseInt(min, 10);
     if (isNaN(min) || min < 1) { min = 1; }
     return min;
-  }.property("poll.min"),
+  },
 
-  max: function() {
-    let options = this.get("poll.options.length"),
-        max = parseInt(this.get("poll.max"), 10);
+  @computed("poll.max", "poll.options.length")
+  max(max, options) {
+    max = parseInt(max, 10);
     if (isNaN(max) || max > options) { max = options; }
     return max;
-  }.property("poll.max", "poll.options.length"),
+  },
 
-  votersText: function() {
-    return I18n.t("poll.voters", { count: this.get("poll.voters") });
-  }.property("poll.voters"),
+  @computed("poll.voters")
+  votersText(count) {
+    return I18n.t("poll.voters", { count });
+  },
 
-  totalVotes: function() {
+  @computed("poll.options.@each.votes")
+  totalVotes() {
     return _.reduce(this.get("poll.options"), function(total, o) {
       return total + parseInt(o.get("votes"), 10);
     }, 0);
-  }.property("poll.options.@each.votes"),
+  },
 
-  totalVotesText: function() {
-    return I18n.t("poll.total_votes", { count: this.get("totalVotes") });
-  }.property("totalVotes"),
-
-  multipleHelpText: function() {
-    const options = this.get("poll.options.length"),
-          min = this.get("min"),
-          max = this.get("max");
+  @computed("totalVotes")
+  totalVotesText(count) {
+    return I18n.t("poll.total_votes", { count });
+  },
 
+  @computed("min", "max", "poll.options.length")
+  multipleHelpText(min, max, options) {
     if (max > 0) {
       if (min === max) {
         if (min > 1) {
@@ -73,7 +75,7 @@ export default Ember.Controller.extend({
         }
       } else if (min > 1) {
         if (max < options) {
-          return I18n.t("poll.multiple.help.between_min_and_max_options", { min: min, max: max });
+          return I18n.t("poll.multiple.help.between_min_and_max_options", { min, max });
         } else {
           return I18n.t("poll.multiple.help.at_least_min_options", { count: min });
         }
@@ -81,33 +83,31 @@ export default Ember.Controller.extend({
         return I18n.t("poll.multiple.help.up_to_max_options", { count: max });
       }
     }
-  }.property("min", "max", "poll.options.length"),
+  },
 
-  canCastVotes: function() {
-    if (this.get("isClosed") || this.get("showingResults") || this.get("loading")) {
+  @computed("isClosed", "showResults", "loading", "isMultiple", "selectedOptions.length", "min", "max")
+  canCastVotes(isClosed, showResults, loading, isMultiple, selectedOptionCount, min, max) {
+    if (isClosed || showResults || loading) {
       return false;
     }
 
-    const selectedOptionCount = this.get("selectedOptions.length");
-
-    if (this.get("isMultiple")) {
-      return selectedOptionCount >= this.get("min") && selectedOptionCount <= this.get("max");
+    if (isMultiple) {
+      return selectedOptionCount >= min && selectedOptionCount <= max;
     } else {
       return selectedOptionCount > 0;
     }
-  }.property("isClosed", "showingResults", "loading",
-             "selectedOptions.length",
-             "isMultiple", "min", "max"),
+  },
 
   castVotesDisabled: Em.computed.not("canCastVotes"),
 
-  canToggleStatus: function() {
+  @computed("loading", "post.user_id", "post.topic.closed", "post.topic.archived")
+  canToggleStatus(loading, userId, topicClosed, topicArchived) {
     return this.currentUser &&
-           (this.currentUser.get("id") === this.get("post.user_id") || this.currentUser.get("staff")) &&
-           !this.get("loading") &&
-           !this.get("post.topic.closed") &&
-           !this.get("post.topic.archived");
-  }.property("loading", "post.user_id", "post.topic.{closed,archived}"),
+           (this.currentUser.get("id") === userId || this.currentUser.get("staff")) &&
+           !loading &&
+           !topicClosed &&
+           !topicArchived;
+  },
 
   actions: {
 
@@ -130,8 +130,6 @@ export default Ember.Controller.extend({
       if (!this.get("canCastVotes")) { return; }
       if (!this.currentUser) { return this.send("showLogin"); }
 
-      const self = this;
-
       this.set("loading", true);
 
       Discourse.ajax("/polls/vote", {
@@ -141,13 +139,13 @@ export default Ember.Controller.extend({
           poll_name: this.get("poll.name"),
           options: this.get("selectedOptions"),
         }
-      }).then(function(results) {
-        self.setProperties({ vote: results.vote, showResults: true });
-        self.set("model", Em.Object.create(results.poll));
-      }).catch(function() {
+      }).then(results => {
+        this.setProperties({ vote: results.vote, showResults: true });
+        this.set("model", Em.Object.create(results.poll));
+      }).catch(() => {
         bootbox.alert(I18n.t("poll.error_while_casting_votes"));
-      }).finally(function() {
-        self.set("loading", false);
+      }).finally(() => {
+        this.set("loading", false);
       });
     },
 
@@ -176,11 +174,11 @@ export default Ember.Controller.extend({
                 poll_name: self.get("poll.name"),
                 status: self.get("isClosed") ? "open" : "closed",
               }
-            }).then(function(results) {
+            }).then(results => {
               self.set("model", Em.Object.create(results.poll));
-            }).catch(function() {
+            }).catch(() => {
               bootbox.alert(I18n.t("poll.error_while_toggling_status"));
-            }).finally(function() {
+            }).finally(() => {
               self.set("loading", false);
             });
           }

plugins/poll/assets/javascripts/discourse/templates/poll.hbs

@@ -34,7 +34,9 @@
 
 <div class="poll-buttons">
   {{#if isMultiple}}
-    {{d-button class="cast-votes" title="poll.cast-votes.title" label="poll.cast-votes.label" disabled=castVotesDisabled action="castVotes"}}
+    {{#unless hideResultsDisabled}}
+      {{d-button class="cast-votes" title="poll.cast-votes.title" label="poll.cast-votes.label" disabled=castVotesDisabled action="castVotes"}}
+    {{/unless}}
   {{/if}}
 
   {{#if showingResults}}

plugins/poll/assets/javascripts/initializers/extend-for-poll.js.es6

@@ -1,4 +1,5 @@
 import PostView from "discourse/views/post";
+import { on } from "ember-addons/ember-computed-decorators";
 
 function createPollView(container, post, poll, vote) {
   const controller = container.lookup("controller:poll", { singleton: false }),
@@ -22,12 +23,14 @@ export default {
     messageBus.subscribe("/polls", data => {
       const post = container.lookup("controller:topic").get('model.postStream').findLoadedPost(data.post_id);
       // HACK to trigger the "postViewUpdated" event
-      Em.run.next(_ => post.set("cooked", post.get("cooked") + " "));
+      Em.run.next(() => post.set("cooked", post.get("cooked") + " "));
     });
 
     // overwrite polls
     PostView.reopen({
-      _createPollViews: function($post) {
+
+      @on("postViewInserted", "postViewUpdated")
+      _createPollViews($post) {
         const post = this.get("post"),
               polls = post.get("polls"),
               votes = post.get("polls_votes") || {};
@@ -48,11 +51,11 @@ export default {
                 pollView = createPollView(container, post, polls[pollName], votes[pollName]);
 
           $poll.replaceWith($div);
-          Em.run.next(_ => pollView.renderer.replaceIn(pollView, $div[0]));
+          Em.run.next(() => pollView.renderer.replaceIn(pollView, $div[0]));
           pollViews[pollName] = pollView;
         });
 
-        messageBus.subscribe("/polls/" + this.get("post.id"), results => {
+        messageBus.subscribe(`/polls/${this.get("post.id")}`, results => {
           if (results && results.polls) {
             _.forEach(results.polls, poll => {
               if (pollViews[poll.name]) {
@@ -63,15 +66,16 @@ export default {
         });
 
         this.set("pollViews", pollViews);
-      }.on("postViewInserted", "postViewUpdated"),
+      },
 
-      _cleanUpPollViews: function() {
-        messageBus.unsubscribe("/polls/" + this.get("post.id"));
+      @on("willClearRender")
+      _cleanUpPollViews() {
+        messageBus.unsubscribe(`/polls/${this.get("post.id")}`);
 
         if (this.get("pollViews")) {
           _.forEach(this.get("pollViews"), v => v.destroy());
         }
-      }.on("willClearRender")
+      }
     });
   }
 };

plugins/poll/assets/javascripts/views/poll.js.es6

@@ -1,3 +1,5 @@
+import { on } from "ember-addons/ember-computed-decorators";
+
 export default Em.View.extend({
   templateName: "poll",
   classNames: ["poll"],
@@ -9,8 +11,9 @@ export default Em.View.extend({
   "data-poll-name": Em.computed.alias("poll.name"),
   "data-poll-status": Em.computed.alias("poll.status"),
 
-  _fixPollContainerHeight: function() {
+  @on("didInsertElement")
+  _fixPollContainerHeight() {
     const pollContainer = this.$(".poll-container");
     pollContainer.height(pollContainer.height());
-  }.on("didInsertElement")
+  }
 });