UX: Show translated badge names and badge groupings

FIX: Disallow renaming of system badges
FIX: Disallow renaming/deleting of system badge groupings
UX: Use "modern" button style in badge groupings dialog

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

@@ -2,15 +2,13 @@ export default Ember.Controller.extend({
   needs: ['modal'],
 
   modelChanged: function(){
-
+    const model = this.get('model');
-    var grouping = Em.Object.extend({});
+    const copy = Em.A();
-
+    const store = this.store;
-    var model = this.get('model');
-    var copy = Em.A();
 
     if(model){
       model.forEach(function(o){
-        copy.pushObject(grouping.create(o));
+        copy.pushObject(store.createRecord('badge-grouping', o));
       });
     }
 
@@ -18,8 +16,8 @@ export default Ember.Controller.extend({
   }.observes('model'),
 
   moveItem: function(item, delta){
-    var copy = this.get('workingCopy');
+    const copy = this.get('workingCopy');
-    var index = copy.indexOf(item);
+    const index = copy.indexOf(item);
     if (index + delta < 0 || index + delta >= copy.length){
       return;
     }
@@ -50,14 +48,14 @@ export default Ember.Controller.extend({
       item.set("editing", false);
     },
     add: function(){
-      var obj = Em.Object.create({editing: true, name: "Enter Name"});
+      const obj = this.store.createRecord('badge-grouping', {editing: true, name: I18n.t('admin.badges.badge_grouping')});
       this.get('workingCopy').pushObject(obj);
     },
     saveAll: function(){
-      var self = this;
+      const self = this;
       var items = this.get('workingCopy');
-      var groupIds = items.map(function(i){return i.get("id") || -1;});
+      const groupIds = items.map(function(i){return i.get("id") || -1;});
-      var names = items.map(function(i){return i.get("name");});
+      const names = items.map(function(i){return i.get("name");});
 
       Discourse.ajax('/admin/badges/badge_groupings',{
         data: {ids: groupIds, names: names},
@@ -66,14 +64,13 @@ export default Ember.Controller.extend({
         items = self.get("model");
         items.clear();
         data.badge_groupings.forEach(function(g){
-          items.pushObject(Em.Object.create(g));
+          items.pushObject(self.store.createRecord('badge-grouping', g));
         });
         self.set('model', null);
         self.set('workingCopy', null);
         self.send('closeModal');
       },function(){
-        // TODO we can do better
+        bootbox.alert(I18n.t('generic_error'));
-        bootbox.alert("Something went wrong");
       });
     }
   }

app/assets/javascripts/admin/routes/admin-badges.js.es6

@@ -1,4 +1,5 @@
 import Badge from 'discourse/models/badge';
+import BadgeGrouping from 'discourse/models/badge-grouping';
 
 export default Discourse.Route.extend({
   _json: null,
@@ -13,14 +14,19 @@ export default Discourse.Route.extend({
 
   setupController: function(controller, model) {
     var json = this._json,
-        triggers = [];
+        triggers = [],
+        badgeGroupings = [];
 
     _.each(json.admin_badges.triggers,function(v,k){
       triggers.push({id: v, name: I18n.t('admin.badges.trigger_type.'+k)});
     });
 
+    json.badge_groupings.forEach(function(badgeGroupingJson) {
+      badgeGroupings.push(BadgeGrouping.create(badgeGroupingJson));
+    });
+
     controller.setProperties({
-      badgeGroupings: json.badge_groupings,
+      badgeGroupings: badgeGroupings,
       badgeTypes: json.badge_types,
       protectedSystemFields: json.admin_badges.protected_system_fields,
       badgeTriggers: triggers,

app/assets/javascripts/admin/templates/badges-show.hbs

@@ -2,25 +2,22 @@
   <form class="form-horizontal">
     <div>
       <label for="name">{{i18n 'admin.badges.name'}}</label>
-      {{input type="text" name="name" value=buffered.name}}
+      {{#if readOnly}}
+        {{input type="text" name="name" value=buffered.displayName disabled=true}}
+      {{else}}
+        {{input type="text" name="name" value=buffered.name}}
+      {{/if}}
     </div>
 
-    {{#if showDisplayName}}
-      <div>
-        <strong>{{i18n 'admin.badges.display_name'}}</strong>
-        {{buffered.displayName}}
-      </div>
-    {{/if}}
-
     <div>
-      <label for="name">{{i18n 'admin.badges.icon'}}</label>
+      <label for="icon">{{i18n 'admin.badges.icon'}}</label>
-      {{input type="text" name="name" value=buffered.icon}}
+      {{input type="text" name="icon" value=buffered.icon}}
       <p class='help'>{{i18n 'admin.badges.icon_help'}}</p>
     </div>
 
     <div>
-      <label for="name">{{i18n 'admin.badges.image'}}</label>
+      <label for="image">{{i18n 'admin.badges.image'}}</label>
-      {{input type="text" name="name" value=buffered.image}}
+      {{input type="text" name="image" value=buffered.image}}
       <p class='help'>{{i18n 'admin.badges.icon_help'}}</p>
     </div>
 
@@ -40,7 +37,7 @@
                       value=buffered.badge_grouping_id
                       content=badgeGroupings
                       optionValuePath="content.id"
-                      optionLabelPath="content.name"}}
+                      optionLabelPath="content.displayName"}}
       &nbsp;<button {{action "editGroupings"}} class='btn'>{{fa-icon 'pencil'}}</button>
     </div>
 

app/assets/javascripts/admin/templates/modal/admin_edit_badge_groupings.hbs

@@ -5,15 +5,15 @@
       <li>
         {{#if wc.editing}}
           {{input value=wc.name}}
-          <button {{action "save" wc}}><i class="fa fa-check"></i></button>
+          <button {{action "save" wc}} class="btn no-text">{{fa-icon 'check'}}</button>
         {{else}}
-          {{wc.name}}
+          {{wc.displayName}}
         {{/if}}
         <div class='actions'>
-          <button {{action "edit" wc}}><i class="fa fa-pencil"></i></button>
+          <button {{action "edit" wc}} class="btn no-text" {{bind-attr disabled="wc.system"}}>{{fa-icon 'pencil'}}</button>
-          <button {{action "up" wc}}><i class="fa fa-toggle-up"></i></button>
+          <button {{action "up" wc}} class="btn no-text">{{fa-icon 'toggle-up'}}</button>
-          <button {{action "down" wc}}><i class="fa fa-toggle-down"></i></button>
+          <button {{action "down" wc}} class="btn no-text">{{fa-icon 'toggle-down'}}</button>
-          <button {{action "delete" wc}}><i class="fa fa-times"></i></button>
+          <button {{action "delete" wc}} class="btn no-text btn-danger" {{bind-attr disabled="wc.system"}}>{{fa-icon 'times'}}</button>
         </div>
       </li>
     {{/each}}

app/assets/javascripts/discourse/models/badge-grouping.js.es6

@@ -8,7 +8,7 @@ export default RestModel.extend({
     return this.get('name').toLowerCase().replace(/\s/g, '_');
   },
 
-  @computed
+  @computed('name')
   displayName() {
     const i18nKey = `badges.badge_grouping.${this.get('i18nNameKey')}.name`;
     return I18n.t(i18nKey, {defaultValue: this.get('name')});

app/assets/stylesheets/common/admin/admin_base.scss

@@ -1606,10 +1606,9 @@ and (max-width : 500px) {
     border-bottom: 1px solid #dfdfdf;
   }
   .actions {
-    font-size: 1.214em;
     float: right;
-    a {
+    .btn {
-      margin-left: 5px;
+      padding: 3px 6px;
     }
   }
 }

app/models/badge_grouping.rb

@@ -9,7 +9,7 @@ class BadgeGrouping < ActiveRecord::Base
   has_many :badges
 
   def system?
-    id && id < 5
+    id && id <= 5
   end
 
   def default_position=(pos)

app/serializers/badge_grouping_serializer.rb

@@ -1,3 +1,7 @@
 class BadgeGroupingSerializer < ApplicationSerializer
-  attributes :id, :name, :description, :position
+  attributes :id, :name, :description, :position, :system
+
+  def system
+    object.system?
+  end
 end