DEV: refactoring permalink-form (#6925)

app/assets/javascripts/admin/components/permalink-form.js.es6

@@ -1,70 +1,76 @@
+import { default as computed } from "ember-addons/ember-computed-decorators";
+import { fmt } from "discourse/lib/computed";
 import Permalink from "admin/models/permalink";
 
 export default Ember.Component.extend({
   classNames: ["permalink-form"],
   formSubmitted: false,
   permalinkType: "topic_id",
+  permalinkTypePlaceholder: fmt("permalinkType", "admin.permalink.%@"),
 
-  permalinkTypes: function() {
+  @computed
+  permalinkTypes() {
     return [
       { id: "topic_id", name: I18n.t("admin.permalink.topic_id") },
       { id: "post_id", name: I18n.t("admin.permalink.post_id") },
       { id: "category_id", name: I18n.t("admin.permalink.category_id") },
       { id: "external_url", name: I18n.t("admin.permalink.external_url") }
     ];
-  }.property(),
+  },
 
-  permalinkTypePlaceholder: function() {
+  focusPermalink() {
-    return "admin.permalink." + this.get("permalinkType");
+    Ember.run.schedule("afterRender", () => this.$(".permalink-url").focus());
-  }.property("permalinkType"),
+  },
 
   actions: {
-    submit: function() {
+    submit() {
       if (!this.get("formSubmitted")) {
-        const self = this;
+        this.set("formSubmitted", true);
-        self.set("formSubmitted", true);
+
-        const permalink = Permalink.create({
+        Permalink.create({
-          url: self.get("url"),
+          url: this.get("url"),
-          permalink_type: self.get("permalinkType"),
+          permalink_type: this.get("permalinkType"),
-          permalink_type_value: self.get("permalink_type_value")
+          permalink_type_value: this.get("permalink_type_value")
-        });
+        })
-        permalink.save().then(
+          .save()
-          function(result) {
+          .then(
-            self.set("url", "");
+            result => {
-            self.set("permalink_type_value", "");
+              this.setProperties({
-            self.set("formSubmitted", false);
+                url: "",
-            self.action(Permalink.create(result.permalink));
+                permalink_type_value: "",
-            Ember.run.schedule("afterRender", function() {
+                formSubmitted: false
-              self.$(".permalink-url").focus();
-            });
-          },
-          function(e) {
-            self.set("formSubmitted", false);
-            let error;
-            if (e.responseJSON && e.responseJSON.errors) {
-              error = I18n.t("generic_error_with_reason", {
-                error: e.responseJSON.errors.join(". ")
               });
-            } else {
+
-              error = I18n.t("generic_error");
+              this.action(Permalink.create(result.permalink));
+
+              this.focusPermalink();
+            },
+            e => {
+              this.set("formSubmitted", false);
+
+              let error;
+              if (e.responseJSON && e.responseJSON.errors) {
+                error = I18n.t("generic_error_with_reason", {
+                  error: e.responseJSON.errors.join(". ")
+                });
+              } else {
+                error = I18n.t("generic_error");
+              }
+              bootbox.alert(error, () => this.focusPermalink());
             }
-            bootbox.alert(error, function() {
+          );
-              self.$(".permalink-url").focus();
-            });
-          }
-        );
       }
     }
   },
 
-  didInsertElement: function() {
+  didInsertElement() {
-    var self = this;
+    this._super(...arguments);
-    self._super();
+
-    Ember.run.schedule("afterRender", function() {
+    Ember.run.schedule("afterRender", () => {
-      self.$(".external-url").keydown(function(e) {
+      this.$(".external-url").keydown(e => {
+        // enter key
         if (e.keyCode === 13) {
-          // enter key
+          this.send("submit");
-          self.send("submit");
         }
       });
     });

app/assets/javascripts/admin/templates/components/permalink-form.hbs

@@ -1,5 +1,25 @@
-<b>{{i18n 'admin.permalink.form.label'}}</b>
+<b>{{i18n "admin.permalink.form.label"}}</b>
-{{text-field value=url disabled=formSubmitted class="permalink-url" placeholderKey="admin.permalink.url" autocorrect="off" autocapitalize="off"}}
+
+{{text-field
+  value=url
+  disabled=formSubmitted
+  class="permalink-url"
+  placeholderKey="admin.permalink.url"
+  autocorrect="off"
+  autocapitalize="off"}}
+
 {{combo-box content=permalinkTypes value=permalinkType}}
-{{text-field value=permalink_type_value disabled=formSubmitted class="external-url" placeholderKey=permalinkTypePlaceholder autocorrect="off" autocapitalize="off"}}
+
-{{d-button class="btn-default" action=(action "submit") disabled=formSubmitted label="admin.permalink.form.add"}}
+{{text-field
+  value=permalink_type_value
+  disabled=formSubmitted
+  class="external-url"
+  placeholderKey=permalinkTypePlaceholder
+  autocorrect="off"
+  autocapitalize="off"}}
+
+{{d-button
+  class="btn-default"
+  action=(action "submit")
+  disabled=formSubmitted
+  label="admin.permalink.form.add"}}