Merge pull request #2360 from vikhyat/badge-system

Badge system updates

app/assets/javascripts/admin/controllers/admin_badge_controller.js

@@ -15,5 +15,21 @@ Discourse.AdminBadgeController = Discourse.ObjectController.extend({
     @property selected
     @type {Boolean}
   **/
-  selected: Discourse.computed.propertyEqual('model.name', 'parentController.selectedItem.name')
+  selected: Discourse.computed.propertyEqual('model.name', 'parentController.selectedItem.name'),
+
+  /**
+    Show the displayName only if it is different from the name.
+
+    @property showDisplayName
+    @type {Boolean}
+  **/
+  showDisplayName: Discourse.computed.propertyNotEqual('selectedItem.name', 'selectedItem.displayName'),
+
+  /**
+    Don't allow editing if this is a system badge.
+
+    @property readOnly
+    @type {Boolean}
+  **/
+  readOnly: Ember.computed.lt('model.id', 100)
 });

app/assets/javascripts/admin/controllers/admin_badges_controller.js

@@ -8,18 +8,19 @@
 **/
 Discourse.AdminBadgesController = Ember.ArrayController.extend({
   itemController: 'adminBadge',
+  queryParams: ['badgeId'],
 
   /**
-    Show the displayName only if it is different from the name.
+    ID of the currently selected badge.
 
-    @property showDisplayName
-    @type {Boolean}
+    @property badgeId
+    @type {Integer}
   **/
-  showDisplayName: Discourse.computed.propertyNotEqual('selectedItem.name', 'selectedItem.displayName'),
+  badgeId: Em.computed.alias('selectedItem.id'),
 
   /**
-    We don't allow setting a description if a translation for the given badge name
-    exists.
+    We don't allow setting a description if a translation for the given badge
+    name exists.
 
     @property canEditDescription
     @type {Boolean}
@@ -76,6 +77,13 @@ Discourse.AdminBadgesController = Ember.ArrayController.extend({
       @method destroy
     **/
     destroy: function() {
+      // Delete immediately if the selected badge is new.
+      if (!this.get('selectedItem.id')) {
+        this.get('model').removeObject(this.get('selectedItem'));
+        this.set('selectedItem', null);
+        return;
+      }
+
       var self = this;
       return bootbox.confirm(I18n.t("admin.badges.delete_confirm"), I18n.t("no_value"), I18n.t("yes_value"), function(result) {
         if (result) {

app/assets/javascripts/admin/routes/admin_badges_route.js

@@ -1,11 +1,7 @@
 Discourse.AdminBadgesRoute = Discourse.Route.extend({
 
   model: function() {
-    return Discourse.Badge.findAll().then(function(badges) {
-      return badges.filter(function(badge) {
-        return badge.id >= 100;
-      });
-    });
+    return Discourse.Badge.findAll();
   },
 
   setupController: function(controller, model) {

app/assets/javascripts/admin/templates/badges.js.handlebars

@@ -8,7 +8,7 @@
         <a {{action selectBadge this}} {{bind-attr class="selected:active"}}>
           {{displayName}}
           {{#if newBadge}}
-            ({{i18n filters.new.lower_title}})
+            <span class="list-badge">{{i18n filters.new.lower_title}}</span>
           {{/if}}
         </a>
       </li>
@@ -18,19 +18,19 @@
   </div>
 
   {{#if selectedItem}}
-  {{#with selectedItem}}
+  {{#with selectedItem controller='adminBadge'}}
   <div class='current-badge span13'>
     <form class="form-horizontal">
       <div>
         <label for="name">{{i18n admin.badges.name}}</label>
-        {{input type="text" name="name" value=name}}
+        {{input type="text" name="name" value=name disabled=readOnly}}
       </div>
 
-      {{#if controller.showDisplayName}}
-      <div>
-        <strong>{{i18n admin.badges.display_name}}</strong>
-        {{displayName}}
-      </div>
+      {{#if showDisplayName}}
+        <div>
+          <strong>{{i18n admin.badges.display_name}}</strong>
+          {{displayName}}
+        </div>
       {{/if}}
 
       <div>
@@ -38,7 +38,8 @@
         {{view Ember.Select name="badge_type_id" value=badge_type_id
                             content=controller.badgeTypes
                             optionValuePath="content.id"
-                            optionLabelPath="content.name"}}
+                            optionLabelPath="content.name"
+                            disabled=readOnly}}
       </div>
 
       <div>
@@ -52,16 +53,18 @@
 
       <div>
         <span>
-          {{input type="checkbox" checked=allow_title}}
+          {{input type="checkbox" checked=allow_title disabled=readOnly}}
           {{i18n admin.badges.allow_title}}
         </span>
       </div>
 
-      <div class='buttons'>
-        <button {{action save}} {{bind-attr disabled=controller.disableSave}} class='btn btn-primary'>{{i18n admin.badges.save}}</button>
-        <span class='saving'>{{savingStatus}}</span>
-        <a {{action destroy}} class='delete-link'>{{i18n admin.badges.delete}}</a>
-      </div>
+      {{#unless readOnly}}
+        <div class='buttons'>
+          <button {{action save}} {{bind-attr disabled=controller.disableSave}} class='btn btn-primary'>{{i18n admin.badges.save}}</button>
+          <span class='saving'>{{savingStatus}}</span>
+          <a {{action destroy}} class='delete-link'>{{i18n admin.badges.delete}}</a>
+        </div>
+      {{/unless}}
     </form>
   </div>
   {{/with}}

app/assets/javascripts/discourse/controllers/badges/index.js.es6

@@ -0,0 +1,4 @@
+export default Ember.ArrayController.extend({
+  sortProperties: ['displayName'],
+  sortAscending: true
+});

app/assets/javascripts/discourse/routes/badges_index_route.js

@@ -15,5 +15,10 @@ Discourse.BadgesIndexRoute = Discourse.Route.extend({
     } else {
       return Discourse.Badge.findAll();
     }
+  },
+
+  setupController: function(controller, model) {
+    controller.set('model', model);
+    Discourse.set('title', I18n.t('badges.title'));
   }
 });

app/assets/javascripts/discourse/routes/badges_show_route.js

@@ -27,6 +27,7 @@ Discourse.BadgesShowRoute = Ember.Route.extend({
       controller.set('userBadgesLoaded', true);
     });
     controller.set('model', model);
+    Discourse.set('title', model.get('displayName'));
   },
 
   actions: {

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

@@ -326,6 +326,16 @@ section.details {
 .badges {
   .content-list ul {
     margin-bottom: 10px;
+
+    .list-badge {
+      float: right;
+      font-size: 11px;
+      font-weight: normal;
+      padding: 0 6px;
+      color: $secondary;
+      background-color: scale-color($tertiary, $lightness: 50%);
+      border-radius: 3px;
+    }
   }
 
   .current-badge {

app/controllers/user_badges_controller.rb

@@ -7,7 +7,7 @@ class UserBadgesController < ApplicationController
       user_badges = user.user_badges
     else
       badge = fetch_badge_from_params
-      user_badges = badge.user_badges.order('granted_at DESC').limit(100)
+      user_badges = badge.user_badges.order('granted_at DESC').limit(96)
     end
 
     if params[:granted_before]

test/javascripts/admin/controllers/admin_badges_controller_test.js

@@ -1,30 +1,15 @@
 module("Discourse.AdminBadgesController");
 
-test("showDisplayName", function() {
-  var badge, controller;
-
-  badge = Discourse.Badge.create({name: "Test Badge"});
-  controller = testController(Discourse.AdminBadgesController, [badge]);
-  controller.send('selectBadge', badge);
-  ok(!controller.get('showDisplayName'), "does not show displayName when it is the same as the name");
-
-  this.stub(I18n, "t").returns("translated string");
-  badge = Discourse.Badge.create({name: "Test Badge"});
-  controller = testController(Discourse.AdminBadgesController, [badge]);
-  controller.send('selectBadge', badge);
-  ok(controller.get('showDisplayName'), "shows the displayName when it is different from the name");
-});
-
 test("canEditDescription", function() {
   var badge, controller;
 
-  badge = Discourse.Badge.create({name: "Test Badge"});
+  badge = Discourse.Badge.create({id: 101, name: "Test Badge"});
   controller = testController(Discourse.AdminBadgesController, [badge]);
   controller.send('selectBadge', badge);
   ok(controller.get('canEditDescription'), "allows editing description when a translation exists for the badge name");
 
   this.stub(I18n, "t").returns("translated string");
-  badge = Discourse.Badge.create({name: "Test Badge"});
+  badge = Discourse.Badge.create({id: 102, name: "Test Badge"});
   controller = testController(Discourse.AdminBadgesController, [badge]);
   controller.send('selectBadge', badge);
   ok(!controller.get('canEditDescription'), "shows the displayName when it is different from the name");
@@ -38,7 +23,7 @@ test("newBadge", function() {
 });
 
 test("selectBadge", function() {
-  var badge = Discourse.Badge.create({name: "Test Badge"}),
+  var badge = Discourse.Badge.create({id: 101, name: "Test Badge"}),
       controller = testController(Discourse.AdminBadgesController, [badge]);
 
   controller.send('selectBadge', badge);
@@ -46,8 +31,8 @@ test("selectBadge", function() {
 });
 
 test("save", function() {
-  var badge = Discourse.Badge.create({name: "Test Badge"}),
-      otherBadge = Discourse.Badge.create({name: "Other Badge"}),
+  var badge = Discourse.Badge.create({id: 101, name: "Test Badge"}),
+      otherBadge = Discourse.Badge.create({id: 102, name: "Other Badge"}),
       controller = testController(Discourse.AdminBadgesController, [badge, otherBadge]);
 
   controller.send('selectBadge', badge);
@@ -57,8 +42,8 @@ test("save", function() {
 });
 
 test("destroy", function() {
-  var badge = Discourse.Badge.create({name: "Test Badge"}),
-      otherBadge = Discourse.Badge.create({name: "Other Badge"}),
+  var badge = Discourse.Badge.create({id: 101, name: "Test Badge"}),
+      otherBadge = Discourse.Badge.create({id: 102, name: "Other Badge"}),
       controller = testController(Discourse.AdminBadgesController, [badge, otherBadge]);
 
   this.stub(badge, 'destroy').returns(Ember.RSVP.resolve({}));