REFACTORING: admin-edit-badge-groupings (#7015)

app/assets/javascripts/admin/controllers/modals/admin-edit-badge-groupings.js.es6

@@ -1,22 +1,24 @@
 import { ajax } from "discourse/lib/ajax";
 import ModalFunctionality from "discourse/mixins/modal-functionality";
+import { observes } from "ember-addons/ember-computed-decorators";
 
 export default Ember.Controller.extend(ModalFunctionality, {
-  modelChanged: function() {
+  @observes("model")
+  modelChanged() {
     const model = this.get("model");
     const copy = Ember.A();
     const store = this.store;
 
     if (model) {
-      model.forEach(function(o) {
+      model.forEach(o =>
-        copy.pushObject(store.createRecord("badge-grouping", o));
+        copy.pushObject(store.createRecord("badge-grouping", o))
-      });
+      );
     }
 
     this.set("workingCopy", copy);
-  }.observes("model"),
+  },
 
-  moveItem: function(item, delta) {
+  moveItem(item, delta) {
     const copy = this.get("workingCopy");
     const index = copy.indexOf(item);
     if (index + delta < 0 || index + delta >= copy.length) {
@@ -28,60 +30,51 @@ export default Ember.Controller.extend(ModalFunctionality, {
   },
 
   actions: {
-    up: function(item) {
+    up(item) {
       this.moveItem(item, -1);
     },
-    down: function(item) {
+    down(item) {
       this.moveItem(item, 1);
     },
-    delete: function(item) {
+    delete(item) {
       this.get("workingCopy").removeObject(item);
     },
-    cancel: function() {
+    cancel() {
-      this.set("model", null);
+      this.setProperties({ model: null, workingCopy: null });
-      this.set("workingCopy", null);
       this.send("closeModal");
     },
-    edit: function(item) {
+    edit(item) {
       item.set("editing", true);
     },
-    save: function(item) {
+    save(item) {
       item.set("editing", false);
     },
-    add: function() {
+    add() {
       const obj = this.store.createRecord("badge-grouping", {
         editing: true,
         name: I18n.t("admin.badges.badge_grouping")
       });
       this.get("workingCopy").pushObject(obj);
     },
-    saveAll: function() {
+    saveAll() {
-      const self = this;
+      let items = this.get("workingCopy");
-      var items = this.get("workingCopy");
+      const groupIds = items.map(i => i.get("id") || -1);
-      const groupIds = items.map(function(i) {
+      const names = items.map(i => i.get("name"));
-        return i.get("id") || -1;
-      });
-      const names = items.map(function(i) {
-        return i.get("name");
-      });
 
       ajax("/admin/badges/badge_groupings", {
-        data: { ids: groupIds, names: names },
+        data: { ids: groupIds, names },
         method: "POST"
       }).then(
-        function(data) {
+        data => {
-          items = self.get("model");
+          items = this.get("model");
           items.clear();
-          data.badge_groupings.forEach(function(g) {
+          data.badge_groupings.forEach(g => {
-            items.pushObject(self.store.createRecord("badge-grouping", g));
+            items.pushObject(this.store.createRecord("badge-grouping", g));
           });
-          self.set("model", null);
+          this.setProperties({ model: null, workingCopy: null });
-          self.set("workingCopy", null);
+          this.send("closeModal");
-          self.send("closeModal");
         },
-        function() {
+        () => bootbox.alert(I18n.t("generic_error"))
-          bootbox.alert(I18n.t("generic_error"));
-        }
       );
     }
   }

app/assets/javascripts/admin/templates/modal/admin-edit-badge-groupings.hbs

@@ -1,30 +1,34 @@
 {{#d-modal-body title="admin.badges.badge_groupings.modal_title" class="badge-groupings-modal"}}
   <div class="badge-groupings">
-    <ul class='badge-groupings-list'>
+    <ul class="badge-groupings-list">
       {{#each workingCopy as |wc|}}
         <li class="badge-grouping-item">
           <div class="badge-grouping">
             {{#if wc.editing}}
               {{input value=wc.name class="badge-grouping-name-input"}}
-              <button {{action "save" wc}} class="btn no-text">{{d-icon 'check'}}</button>
+              {{d-button action=(action "save" wc) icon="check"}}
             {{else}}
               <span>{{wc.displayName}}</span>
             {{/if}}
           </div>
-          <div class='actions'>
+          <div class="actions">
-            <button {{action "edit" wc}} class="btn no-text" disabled={{wc.system}}>{{d-icon 'pencil-alt'}}</button>
+            {{d-button action=(action "edit" wc) disabled=wc.system icon="pencil-alt"}}
-            <button {{action "up" wc}} class="btn no-text">{{d-icon 'chevron-up'}}</button>
+            {{d-button action=(action "up" wc) icon="chevron-up"}}
-            <button {{action "down" wc}} class="btn no-text">{{d-icon 'chevron-down'}}</button>
+            {{d-button action=(action "down" wc) icon="chevron-down"}}
-            <button {{action "delete" wc}} class="btn no-text btn-danger"
+            {{d-button action=(action "delete" wc) disabled=wc.system icon="times"}}
-             disabled={{wc.system}}>{{d-icon 'times'}}</button>
           </div>
         </li>
       {{/each}}
     </ul>
   </div>
-  <button class='btn new-badge-grouping' {{action "add"}}>{{i18n 'admin.badges.new'}}</button>
+  {{d-button action=(action "add") label="admin.badges.new"}}
 {{/d-modal-body}}
+
 <div class="modal-footer">
-  <button class='btn btn-primary' {{action "saveAll"}} disabled={{submitDisabled}}>{{i18n 'admin.badges.save'}}</button>
+  {{d-button
+    action=(action "saveAll")
+    label="admin.badges.save"
+    class="btn-primary"
+    disabled=submitDisabled}}
   {{d-modal-cancel close=(route-action "closeModal")}}
 </div>