Set user title from the badge view (#5049)

* title info under notification

* create badge-title as component

* display available titles, close button

* remove visual feedback when grant new badge

* Made changes after review.

* Some minor fixes.

app/assets/javascripts/discourse/components/badge-title.js.es6

@@ -0,0 +1,28 @@
+import { ajax } from 'discourse/lib/ajax';
+import BadgeSelectController from 'discourse/mixins/badge-select-controller';
+
+export default Ember.Component.extend(BadgeSelectController, {
+  classNames: ["badge-title"],
+
+  saved: false,
+  saving: false,
+
+  actions: {
+    save() {
+      this.setProperties({ saved: false, saving: true });
+
+      ajax(this.get('user.path') + "/preferences/badge_title", {
+        type: "PUT",
+        data: { user_badge_id: this.get('selectedUserBadgeId') }
+      }).then(() => {
+        this.setProperties({
+          saved: true,
+          saving: false,
+          "user.title": this.get('selectedUserBadge.badge.name')
+        });
+      }, () => {
+        bootbox.alert(I18n.t('generic_error'));
+      });
+    }
+  }
+});

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

@@ -1,11 +1,17 @@
 import UserBadge from 'discourse/models/user-badge';
 import { default as computed, observes } from 'ember-addons/ember-computed-decorators';
+import BadgeSelectController from "discourse/mixins/badge-select-controller";
 
-export default Ember.Controller.extend({
+export default Ember.Controller.extend(BadgeSelectController, {
   queryParams: ['username'],
   noMoreBadges: false,
   userBadges: null,
   application: Ember.inject.controller(),
+  hiddenSetTitle: true,
+
+  filteredList: function() {
+    return this.get('userBadgesAll').filterBy('badge.allow_title', true);
+  }.property('userBadgesAll'),
 
   @computed('username')
   user(username) {
@@ -19,6 +25,11 @@ export default Ember.Controller.extend({
     return username ? userCount : modelCount;
   },
 
+  @computed("model.has_title_badges")
+  canSelectTitle(hasTitleBadges) {
+    return this.siteSettings.enable_badges && hasTitleBadges;
+  },
+
   actions: {
     loadMore() {
       if (this.get('loadingMore')) {
@@ -39,6 +50,10 @@ export default Ember.Controller.extend({
       }).finally(()=>{
         this.set('loadingMore', false);
       });
+    },
+
+    toggleSetUserTitle() {
+      return this.toggleProperty('hiddenSetTitle');
     }
   },
 

app/assets/javascripts/discourse/routes/badges-show.js.es6

@@ -30,9 +30,20 @@ export default Discourse.Route.extend({
   afterModel(model, transition) {
     const username = transition.queryParams && transition.queryParams.username;
 
-    return UserBadge.findByBadgeId(model.get("id"), {username}).then(userBadges => {
-      this.userBadges = userBadges;
+    const userBadgesGrant = UserBadge.findByBadgeId(model.get("id"), {username}).then(userBadges => {
+      this.userBadgesGrant = userBadges;
     });
+
+    const userBadgesAll = UserBadge.findByUsername(username).then(userBadges => {
+      this.userBadgesAll = userBadges;
+    });
+
+    const promises = {
+      userBadgesGrant,
+      userBadgesAll,
+    };
+
+    return Ember.RSVP.hash(promises);
   },
 
   titleToken() {
@@ -42,8 +53,10 @@ export default Discourse.Route.extend({
     }
   },
 
+
   setupController(controller, model) {
     controller.set("model", model);
-    controller.set("userBadges", this.userBadges);
+    controller.set("userBadges", this.userBadgesGrant);
+    controller.set("userBadgesAll", this.userBadgesAll);
   }
 });

app/assets/javascripts/discourse/templates/badges/show.hbs

@@ -7,11 +7,21 @@
 
   <div class='show-badge-details'>
     {{badge-card badge=model size="large" count=userBadges.grant_count}}
-    <div class='badge-grant-info'>
+    <div class='badge-grant-info {{if hiddenSetTitle '' 'hidden'}}'>
       <div>
         {{#if model.allow_title}}
           <div class='grant-info-item'>
             {{i18n 'badges.allow_title'}}
+            {{#if userBadges}}
+              {{#each userBadges as |ub|}}
+                {{#if model.allow_title}}
+                  {{d-button
+                      class='btn btn-small pad-left no-text'
+                      action='toggleSetUserTitle'
+                      icon='pencil'}}
+                {{/if}}
+              {{/each}}
+            {{/if}}
           </div>
         {{/if}}
         {{#if model.multiple_grant}}
@@ -21,6 +31,10 @@
         {{/if}}
       </div>
     </div>
+    <div class='badge-set-title {{if hiddenSetTitle 'hidden' ''}}'>
+      {{badge-title selectableUserBadges=selectableUserBadges user=user}}
+      <button class='btn btn-default close-btn' {{action "toggleSetUserTitle"}}>{{i18n 'close'}}</button>
+    </div>
   </div>
 
   {{#if userBadges}}

app/assets/javascripts/discourse/templates/components/badge-title.hbs

@@ -0,0 +1,25 @@
+<section class='user-content'>
+  <form class="form-horizontal">
+
+    <div class="control-group">
+      <div class="controls">
+        <h3>{{i18n 'badges.select_badge_for_title'}}</h3>
+      </div>
+    </div>
+
+    <div class="control-group">
+      <label class="control-label"></label>
+      <div class="controls">
+        {{combo-box valueAttribute="id" value=selectedUserBadgeId nameProperty="badge.name" content=selectableUserBadges}}
+      </div>
+    </div>
+
+    <div class="control-group">
+      <div class="controls">
+        <button class="btn btn-primary" disabled={{disableSave}} {{action "save"}}> {{savingStatus}} </button>
+        {{#if saved}}{{i18n 'saved'}}{{/if}}
+      </div>
+    </div>
+
+  </form>
+</section>

app/assets/javascripts/discourse/templates/user/badge-title.hbs

@@ -1,25 +1 @@
-<section class='user-content'>
-  <form class="form-horizontal">
-
-    <div class="control-group">
-      <div class="controls">
-        <h3>{{i18n 'badges.select_badge_for_title'}}</h3>
-      </div>
-    </div>
-
-    <div class="control-group">
-      <label class="control-label"></label>
-      <div class="controls">
-        {{combo-box valueAttribute="id" value=selectedUserBadgeId nameProperty="badge.name" content=selectableUserBadges}}
-      </div>
-    </div>
-
-    <div class="control-group">
-      <div class="controls">
-        <button class="btn btn-primary" disabled={{disableSave}} {{action "save"}}>{{savingStatus}}</button>
-        {{#if saved}}{{i18n 'saved'}}{{/if}}
-      </div>
-    </div>
-
-  </form>
-</section>
+{{badge-title selectableUserBadges=selectableUserBadges user=user}}

app/assets/stylesheets/common/base/user-badges.scss

@@ -150,6 +150,7 @@
     display: flex;
     flex-direction: row;
     min-height: 128px;
+    height: 100%;
 
     .badge-icon {
       min-width: 90px;
@@ -228,11 +229,22 @@
     display: flex;
     align-items: center;
     margin-left: 1em;
+    &.hidden {
+      display: none;
+    }
   }
   .grant-info-item {
     margin-bottom: 1em;
     color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 60%));
   }
+
+  .badge-title .form-horizontal .controls {
+    margin-left: 20px;
+  }
+
+  .close-btn {
+    margin: -20px 0 0 20px;
+  }
 }
 
 .check-display {

app/services/badge_granter.rb

@@ -51,6 +51,7 @@ class BadgeGranter
                 data: { badge_id: @badge.id,
                         badge_name: @badge.display_name,
                         badge_slug: @badge.slug,
+                        badge_title: @badge.allow_title,
                         username: @user.username }.to_json
               )
               user_badge.update_attributes notification_id: notification.id
@@ -327,6 +328,7 @@ class BadgeGranter
                             badge_id: badge.id,
                             badge_name: badge.display_name,
                             badge_slug: badge.slug,
+                            badge_title: badge.allow_title,
                             username: row.username
         }.to_json)
       end