REFACTOR: tags-show (#7079)

app/assets/javascripts/discourse/controllers/tags-show.js.es6

@@ -1,4 +1,7 @@
-import { default as computed } from "ember-addons/ember-computed-decorators";
+import {
+  default as computed,
+  observes
+} from "ember-addons/ember-computed-decorators";
 import BulkTopicSelection from "discourse/mixins/bulk-topic-selection";
 import {
   default as NavItem,
@@ -19,14 +22,14 @@ if (extraNavItemProperties) {
 if (customNavItemHref) {
   customNavItemHref(function(navItem) {
     if (navItem.get("tagId")) {
-      var name = navItem.get("name");
+      const name = navItem.get("name");
 
       if (!Discourse.Site.currentProp("filters").includes(name)) {
         return null;
       }
 
-      var path = "/tags/",
+      let path = "/tags/";
-        category = navItem.get("category");
+      const category = navItem.get("category");
 
       if (category) {
         path += "c/";
@@ -37,8 +40,8 @@ if (customNavItemHref) {
         path += "/";
       }
 
-      path += navItem.get("tagId") + "/l/";
+      path += `${navItem.get("tagId")}/l/`;
-      return path + name.replace(" ", "-");
+      return `${path}${name.replace(" ", "-")}`;
     } else {
       return null;
     }
@@ -66,9 +69,10 @@ export default Ember.Controller.extend(BulkTopicSelection, {
 
   categories: Ember.computed.alias("site.categoriesList"),
 
-  createTopicLabel: function() {
+  @computed("list", "list.draft")
-    return this.get("list.draft") ? "topic.open_draft" : "topic.create";
+  createTopicLabel(list, listDraft) {
-  }.property("list", "list.draft"),
+    return listDraft ? "topic.open_draft" : "topic.create";
+  },
 
   @computed("canCreateTopic", "category", "canCreateTopicOnCategory")
   createTopicDisabled(canCreateTopic, category, canCreateTopicOnCategory) {
@@ -85,92 +89,87 @@ export default Ember.Controller.extend(BulkTopicSelection, {
     "q"
   ],
 
-  navItems: function() {
+  @computed("category", "tag.id", "filterMode")
-    return NavItem.buildList(this.get("category"), {
+  navItems(category, tagId, filterMode) {
-      tagId: this.get("tag.id"),
+    return NavItem.buildList(category, {
-      filterMode: this.get("filterMode")
+      tagId,
+      filterMode
     });
-  }.property("category", "tag.id", "filterMode"),
+  },
 
-  showTagFilter: function() {
+  @computed("category")
+  showTagFilter() {
     return Discourse.SiteSettings.show_filter_by_tag;
-  }.property("category"),
+  },
 
-  showAdminControls: function() {
+  @computed("additionalTags", "canAdminTag", "category")
-    return (
+  showAdminControls(additionalTags, canAdminTag, category) {
-      !this.get("additionalTags") &&
+    return !additionalTags && canAdminTag && !category;
-      this.get("canAdminTag") &&
+  },
-      !this.get("category")
-    );
-  }.property("additionalTags", "canAdminTag", "category"),
 
   loadMoreTopics() {
     return this.get("list").loadMore();
   },
 
-  _showFooter: function() {
+  @observes("list.canLoadMore")
+  _showFooter() {
     this.set("application.showFooter", !this.get("list.canLoadMore"));
-  }.observes("list.canLoadMore"),
+  },
 
-  footerMessage: function() {
+  @computed("navMode", "list.topics.length", "loading")
-    if (this.get("loading") || this.get("list.topics.length") !== 0) {
+  footerMessage(navMode, listTopicsLength, loading) {
+    if (loading || listTopicsLength !== 0) {
       return;
     }
 
-    if (this.get("list.topics.length") === 0) {
+    if (listTopicsLength === 0) {
-      return I18n.t("tagging.topics.none." + this.get("navMode"), {
+      return I18n.t(`tagging.topics.none.${navMode}`, {
         tag: this.get("tag.id")
       });
     } else {
-      return I18n.t("tagging.topics.bottom." + this.get("navMode"), {
+      return I18n.t(`tagging.topics.bottom.${navMode}`, {
         tag: this.get("tag.id")
       });
     }
-  }.property("navMode", "list.topics.length", "loading"),
+  },
 
   actions: {
-    changeSort(sortBy) {
+    changeSort(order) {
-      if (sortBy === this.get("order")) {
+      if (order === this.get("order")) {
         this.toggleProperty("ascending");
       } else {
-        this.setProperties({ order: sortBy, ascending: false });
+        this.setProperties({ order, ascending: false });
       }
+
       this.send("invalidateModel");
     },
 
     refresh() {
-      const self = this;
       // TODO: this probably doesn't work anymore
       return this.store
         .findFiltered("topicList", { filter: "tags/" + this.get("tag.id") })
-        .then(function(list) {
+        .then(list => {
-          self.set("list", list);
+          this.set("list", list);
-          self.resetSelected();
+          this.resetSelected();
         });
     },
 
     deleteTag() {
-      const self = this;
       const numTopics =
         this.get("list.topic_list.tags.firstObject.topic_count") || 0;
+
       const confirmText =
         numTopics === 0
           ? I18n.t("tagging.delete_confirm_no_topics")
           : I18n.t("tagging.delete_confirm", { count: numTopics });
-      bootbox.confirm(confirmText, function(result) {
-        if (!result) {
-          return;
-        }
 
-        self
+      bootbox.confirm(confirmText, result => {
-          .get("tag")
+        if (!result) return;
+
+        this.get("tag")
           .destroyRecord()
-          .then(function() {
+          .then(() => this.transitionToRoute("tags.index"))
-            self.transitionToRoute("tags.index");
+          .catch(() => bootbox.alert(I18n.t("generic_error")));
-          })
-          .catch(function() {
-            bootbox.alert(I18n.t("generic_error"));
-          });
       });
     },
 

app/assets/javascripts/discourse/routes/tags-show.js.es6

@@ -17,10 +17,10 @@ export default Discourse.Route.extend({
   },
 
   model(params) {
-    var tag = this.store.createRecord("tag", {
+    const tag = this.store.createRecord("tag", {
-        id: Handlebars.Utils.escapeExpression(params.tag_id)
+      id: Handlebars.Utils.escapeExpression(params.tag_id)
-      }),
+    });
-      f = "";
+    let f = "";
 
     if (params.additional_tags) {
       this.set(
@@ -38,9 +38,9 @@ export default Discourse.Route.extend({
     if (params.category) {
       f = "c/";
       if (params.parent_category) {
-        f += params.parent_category + "/";
+        f += `${params.parent_category}/`;
       }
-      f += params.category + "/l/";
+      f += `${params.category}/l/`;
     }
     f += this.get("navMode");
     this.set("filterMode", f);
@@ -76,29 +76,29 @@ export default Discourse.Route.extend({
     const categorySlug = this.get("categorySlug");
     const parentCategorySlug = this.get("parentCategorySlug");
     const filter = this.get("navMode");
-    const tag_id = tag ? tag.id.toLowerCase() : "none";
+    const tagId = tag ? tag.id.toLowerCase() : "none";
 
     if (categorySlug) {
-      var category = Discourse.Category.findBySlug(
+      const category = Discourse.Category.findBySlug(
         categorySlug,
         parentCategorySlug
       );
       if (parentCategorySlug) {
-        params.filter = `tags/c/${parentCategorySlug}/${categorySlug}/${tag_id}/l/${filter}`;
+        params.filter = `tags/c/${parentCategorySlug}/${categorySlug}/${tagId}/l/${filter}`;
       } else {
-        params.filter = `tags/c/${categorySlug}/${tag_id}/l/${filter}`;
+        params.filter = `tags/c/${categorySlug}/${tagId}/l/${filter}`;
       }
       if (category) {
         category.setupGroupsAndPermissions();
         this.set("category", category);
       }
     } else if (this.get("additionalTags")) {
-      params.filter = `tags/intersection/${tag_id}/${this.get(
+      params.filter = `tags/intersection/${tagId}/${this.get(
         "additionalTags"
       ).join("/")}`;
       this.set("category", null);
     } else {
-      params.filter = `tags/${tag_id}/l/${filter}`;
+      params.filter = `tags/${tagId}/l/${filter}`;
       this.set("category", null);
     }
 
@@ -110,10 +110,11 @@ export default Discourse.Route.extend({
       {}
     ).then(list => {
       if (list.topic_list.tags && list.topic_list.tags.length === 1) {
-        tag.set("id", list.topic_list.tags[0].name); // Update name of tag (case might be different)
+        // Update name of tag (case might be different)
+        tag.set("id", list.topic_list.tags[0].name);
       }
       controller.setProperties({
-        list: list,
+        list,
         canCreateTopic: list.get("can_create_topic"),
         loading: false,
         canCreateTopicOnCategory:
@@ -124,9 +125,9 @@ export default Discourse.Route.extend({
 
   titleToken() {
     const filterText = I18n.t(
-        "filters." + this.get("navMode").replace("/", ".") + ".title"
+      `filters.${this.get("navMode").replace("/", ".")}.title`
-      ),
+    );
-      controller = this.controllerFor("tags.show");
+    const controller = this.controllerFor("tags.show");
 
     if (controller.get("model.id")) {
       if (this.get("category")) {
@@ -177,8 +178,7 @@ export default Discourse.Route.extend({
     },
 
     createTopic() {
-      var controller = this.controllerFor("tags.show"),
+      const controller = this.controllerFor("tags.show");
-        self = this;
 
       if (controller.get("list.draft")) {
         this.openTopicDraft(controller.get("list"));
@@ -190,11 +190,12 @@ export default Discourse.Route.extend({
             draftKey: controller.get("list.draft_key"),
             draftSequence: controller.get("list.draft_sequence")
           })
-          .then(function() {
+          .then(() => {
             // Pre-fill the tags input field
             if (controller.get("model.id")) {
-              var c = self.controllerFor("composer").get("model");
+              const composerModel = this.controllerFor("composer").get("model");
-              c.set(
+
+              composerModel.set(
                 "tags",
                 _.compact(
                   _.flatten([