REFACTOR: admin-user-field-item (#7016)

app/assets/javascripts/admin/components/admin-user-field-item.js.es6

@@ -2,6 +2,12 @@ import UserField from "admin/models/user-field";
 import { bufferedProperty } from "discourse/mixins/buffered-content";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { propertyEqual } from "discourse/lib/computed";
+import { i18n } from "discourse/lib/computed";
+import {
+  default as computed,
+  observes,
+  on
+} from "ember-addons/ember-computed-decorators";
 
 export default Ember.Component.extend(bufferedProperty("userField"), {
   editing: Ember.computed.empty("userField.id"),
@@ -10,58 +16,56 @@ export default Ember.Component.extend(bufferedProperty("userField"), {
   cantMoveUp: propertyEqual("userField", "firstField"),
   cantMoveDown: propertyEqual("userField", "lastField"),
 
-  userFieldsDescription: function() {
-    return I18n.t("admin.user_fields.description");
-  }.property(),
+  userFieldsDescription: i18n("admin.user_fields.description"),
 
-  bufferedFieldType: function() {
-    return UserField.fieldTypeById(this.get("buffered.field_type"));
-  }.property("buffered.field_type"),
+  @computed("buffered.field_type")
+  bufferedFieldType(fieldType) {
+    return UserField.fieldTypeById(fieldType);
+  },
 
-  _focusOnEdit: function() {
+  @on("didInsertElement")
+  @observes("editing")
+  _focusOnEdit() {
     if (this.get("editing")) {
       Ember.run.scheduleOnce("afterRender", this, "_focusName");
     }
-  }
-    .observes("editing")
-    .on("didInsertElement"),
+  },
 
-  _focusName: function() {
+  _focusName() {
     $(".user-field-name").select();
   },
 
-  fieldName: function() {
-    return UserField.fieldTypeById(this.get("userField.field_type")).get(
-      "name"
-    );
-  }.property("userField.field_type"),
+  @computed("userField.field_type")
+  fieldName(fieldType) {
+    return UserField.fieldTypeById(fieldType).get("name");
+  },
 
-  flags: function() {
-    const ret = [];
-    if (this.get("userField.editable")) {
-      ret.push(I18n.t("admin.user_fields.editable.enabled"));
-    }
-    if (this.get("userField.required")) {
-      ret.push(I18n.t("admin.user_fields.required.enabled"));
-    }
-    if (this.get("userField.show_on_profile")) {
-      ret.push(I18n.t("admin.user_fields.show_on_profile.enabled"));
-    }
-    if (this.get("userField.show_on_user_card")) {
-      ret.push(I18n.t("admin.user_fields.show_on_user_card.enabled"));
-    }
-
-    return ret.join(", ");
-  }.property(
+  @computed(
     "userField.editable",
     "userField.required",
     "userField.show_on_profile",
     "userField.show_on_user_card"
-  ),
+  )
+  flags(editable, required, showOnProfile, showOnUserCard) {
+    const ret = [];
+    if (editable) {
+      ret.push(I18n.t("admin.user_fields.editable.enabled"));
+    }
+    if (required) {
+      ret.push(I18n.t("admin.user_fields.required.enabled"));
+    }
+    if (showOnProfile) {
+      ret.push(I18n.t("admin.user_fields.show_on_profile.enabled"));
+    }
+    if (showOnUserCard) {
+      ret.push(I18n.t("admin.user_fields.show_on_user_card.enabled"));
+    }
+
+    return ret.join(", ");
+  },
 
   actions: {
     save() {
-      const self = this;
       const buffered = this.get("buffered");
       const attrs = buffered.getProperties(
         "name",
@@ -76,9 +80,9 @@ export default Ember.Component.extend(bufferedProperty("userField"), {
 
       this.get("userField")
         .save(attrs)
-        .then(function() {
-          self.set("editing", false);
-          self.commitBuffer();
+        .then(() => {
+          this.set("editing", false);
+          this.commitBuffer();
         })
         .catch(popupAjaxError);
     },

app/assets/javascripts/admin/templates/components/admin-user-field-item.hbs

@@ -18,19 +18,19 @@
   {{/if}}
 
   {{#admin-form-row wrapLabel="true"}}
-    {{input type="checkbox" checked=buffered.editable}} {{i18n 'admin.user_fields.editable.title'}}
+    {{input type="checkbox" checked=buffered.editable}} {{i18n "admin.user_fields.editable.title"}}
   {{/admin-form-row}}
 
   {{#admin-form-row wrapLabel="true"}}
-    {{input type="checkbox" checked=buffered.required}} {{i18n 'admin.user_fields.required.title'}}
+    {{input type="checkbox" checked=buffered.required}} {{i18n "admin.user_fields.required.title"}}
   {{/admin-form-row}}
 
   {{#admin-form-row wrapLabel="true"}}
-    {{input type="checkbox" checked=buffered.show_on_profile}} {{i18n 'admin.user_fields.show_on_profile.title'}}
+    {{input type="checkbox" checked=buffered.show_on_profile}} {{i18n "admin.user_fields.show_on_profile.title"}}
   {{/admin-form-row}}
 
   {{#admin-form-row wrapLabel="true"}}
-    {{input type="checkbox" checked=buffered.show_on_user_card}} {{i18n 'admin.user_fields.show_on_user_card.title'}}
+    {{input type="checkbox" checked=buffered.show_on_user_card}} {{i18n "admin.user_fields.show_on_user_card.title"}}
   {{/admin-form-row}}
 
   {{#admin-form-row}}
@@ -39,15 +39,14 @@
   {{/admin-form-row}}
 {{else}}
   <div class="row">
-    <div class='form-display'>
+    <div class="form-display">
       <strong>{{userField.name}}</strong>
       <br/>
       {{{userField.description}}}
     </div>
-    <div class='form-display'>{{fieldName}}</div>
-    <div class='form-element controls'>
+    <div class="form-display">{{fieldName}}</div>
+    <div class="form-element controls">
       {{d-button action=(action "edit") class="btn-default" icon="pencil-alt" label="admin.user_fields.edit"}}
-
       {{d-button action=destroyAction actionParam=userField class="btn-danger" icon="far-trash-alt" label="admin.user_fields.delete"}}
       {{d-button action=moveUpAction actionParam=userField class="btn-default" icon="arrow-up" disabled=cantMoveUp}}
       {{d-button action=moveDownAction actionParam=userField class="btn-default" icon="arrow-down" disabled=cantMoveDown}}
@@ -55,4 +54,4 @@
   </div>
   <div class="row">{{flags}}</div>
 {{/if}}
-<div class='clearfix'></div>
+<div class="clearfix"></div>