Assignee field like Jira #2452 , in progress.

Assignee can not be removed yet, it removes member, wrong link in popup.

Thanks to xet7 !

client/components/cards/cardDetails.jade

@@ -73,6 +73,15 @@ template(name="cardDetails")
           a.member.add-member.card-details-item-add-button.js-add-members(title="{{_ 'card-members-title'}}")
             i.fa.fa-plus
 
+      .card-details-item.card-details-item-assignees
+        h3.card-details-item-title {{_ 'assignee'}}
+        each getAssignees
+          +userAvatar(userId=this cardId=../_id)
+          | {{! XXX Hack to hide syntaxic coloration /// }}
+        if canModifyCard
+          a.assignee.add-assignee.card-details-item-add-button.js-add-assignees(title="{{_ 'assignee'}}")
+            i.fa.fa-plus
+
       .card-details-item.card-details-item-labels
         h3.card-details-item-title {{_ 'labels'}}
         a(class="{{#if canModifyCard}}js-add-labels{{else}}is-disabled{{/if}}" title="{{_ 'card-labels-title'}}")
@@ -296,6 +305,18 @@ template(name="cardMembersPopup")
           if isCardMember
             i.fa.fa-check
 
+template(name="cardAssigneesPopup")
+  ul.pop-over-list.js-card-assignee-list
+    each board.activeAssignees
+      li.item(class="{{#if isCardAssignee}}active{{/if}}")
+        a.name.js-select-assignee(href="#")
+          +userAvatarAssignee(userId=user._id)
+          span.full-name
+            = user.profile.fullname
+            | (<span class="username">{{ user.username }}</span>)
+          if isCardAssignee
+            i.fa.fa-check
+
 template(name="cardMorePopup")
   p.quiet
     span.clearfix

client/components/cards/cardDetails.js

@@ -309,6 +309,8 @@ BlazeComponent.extendComponent({
         },
         'click .js-member': Popup.open('cardMember'),
         'click .js-add-members': Popup.open('cardMembers'),
+        'click .js-assignee': Popup.open('cardAssignee'),
+        'click .js-add-assignees': Popup.open('cardAssignees'),
         'click .js-add-labels': Popup.open('cardLabels'),
         'click .js-received-date': Popup.open('editCardReceivedDate'),
         'click .js-start-date': Popup.open('editCardStartDate'),
@@ -399,6 +401,7 @@ Template.cardDetailsActionsPopup.helpers({
 
 Template.cardDetailsActionsPopup.events({
   'click .js-members': Popup.open('cardMembers'),
+  'click .js-assignees': Popup.open('cardAssignees'),
   'click .js-labels': Popup.open('cardLabels'),
   'click .js-attachments': Popup.open('cardAttachments'),
   'click .js-custom-fields': Popup.open('cardCustomFields'),

client/components/cards/cardDetails.styl

@@ -93,6 +93,7 @@
         margin-right: 0
       &.card-details-item-labels,
       &.card-details-item-members,
+      &.card-details-item-assignees,
       &.card-details-item-received,
       &.card-details-item-start,
       &.card-details-item-due,

client/components/users/userAvatar.jade

@@ -15,6 +15,23 @@ template(name="userAvatar")
           a.edit-avatar.js-change-avatar
             i.fa.fa-pencil
 
+template(name="userAvatarAssignee")
+  a.assignee.js-assignee(title="{{userData.profile.fullname}} ({{userData.username}})")
+    if userData.profile.avatarUrl
+      img.avatar.avatar-image(src="{{userData.profile.avatarUrl}}")
+    else
+      +userAvatarInitials(userId=userData._id)
+
+    if showStatus
+      span.assignee-presence-status(class=presenceStatusClassName)
+      span.assignee-type(class=assigneeType)
+
+    unless isSandstorm
+      if showEdit
+        if $eq currentUser._id userData._id
+          a.edit-avatar.js-change-avatar
+            i.fa.fa-pencil
+
 template(name="userAvatarInitials")
   svg.avatar.avatar-initials(viewBox="0 0 {{viewPortWidth}} 15")
     text(x="50%" y="13" text-anchor="middle")= initials
@@ -78,3 +95,18 @@ template(name="cardMemberPopup")
       if $eq currentUser._id user._id
         with currentUser
           li: a.js-edit-profile {{_ 'edit-profile'}}
+
+template(name="cardAssigneePopup")
+  .board-assignee-menu
+    .mini-profile-info
+      +userAvatar(userId=user._id showEdit=true)
+      .info
+        h3= user.profile.fullname
+        p.quiet @{{ user.username }}
+    ul.pop-over-list
+      if currentUser.isNotCommentOnly
+          li: a.js-remove-assignee {{_ 'remove-member-from-card'}}
+
+      if $eq currentUser._id user._id
+        with currentUser
+          li: a.js-edit-profile {{_ 'edit-profile'}}

client/components/users/userAvatar.js

@@ -139,6 +139,13 @@ Template.cardMembersPopup.helpers({
     return _.contains(cardMembers, this.userId);
   },
 
+  isCardAssignee() {
+    const card = Template.parentData();
+    const cardAssignees = card.getAssignees();
+
+    return _.contains(cardAssignees, this.userId);
+  },
+
   user() {
     return Users.findOne(this.userId);
   },
@@ -166,3 +173,26 @@ Template.cardMemberPopup.events({
   },
   'click .js-edit-profile': Popup.open('editProfile'),
 });
+
+Template.cardAssigneesPopup.events({
+  'click .js-select-assignee'(event) {
+    const card = Cards.findOne(Session.get('currentCard'));
+    const assigneeId = this.userId;
+    card.toggleAssignee(assigneeId);
+    event.preventDefault();
+  },
+});
+
+Template.cardAssigneePopup.helpers({
+  user() {
+    return Users.findOne(this.userId);
+  },
+});
+
+Template.cardAssigneePopup.events({
+  'click .js-remove-assignee'() {
+    Cards.findOne(this.cardId).unassignAssignee(this.userId);
+    Popup.close();
+  },
+  'click .js-edit-profile': Popup.open('editProfile'),
+});

client/components/users/userAvatar.styl

@@ -2,7 +2,8 @@
 
 avatar-radius = 50%
 
-.member
+.member,
+.assignee
   border-radius: 3px
   display: block
   position: relative
@@ -32,7 +33,8 @@ avatar-radius = 50%
       height: 100%
       width: @height
 
-  .member-presence-status
+  .member-presence-status,
+  .assignee-presence-status
     background-color: #b3b3b3
     border: 1px solid #fff
     border-radius: 50%
@@ -79,7 +81,8 @@ avatar-radius = 50%
       color: white
 
 
-  &.add-member
+  &.add-member,
+  &.add-assignee
     display: flex
     align-items: center
     justify-content: center
@@ -111,7 +114,8 @@ avatar-radius = 50%
     p
       padding-top: 0
 
-  .member
+  .member,
+  .assignee
     width: 50px
     height: @width
     margin-right: 10px