[skip ci] add multiple assignees to issue board sidebar

app/assets/javascripts/boards/components/board_sidebar.js

@@ -5,6 +5,8 @@
 /* global Sidebar */
 
 import Vue from 'vue';
+import AssigneeTitle from '../../sidebar/components/assignees/assignee_title';
+import Assignees from '../../sidebar/components/assignees/assignees';
 
 require('./sidebar/remove_issue');
 
@@ -68,6 +70,8 @@ require('./sidebar/remove_issue');
     },
     components: {
       removeBtn: gl.issueBoards.RemoveIssueBtn,
+      'assignee-title': AssigneeTitle,
+      assignees: Assignees,
     },
   });
 })();

app/assets/javascripts/boards/components/issue_card_inner.js

@@ -158,7 +158,7 @@ import eventHub from '../eventhub';
             >
               <img
                 class="avatar avatar-inline s20"
-                :src="assignee.avatar"
+                :src="assignee.avatarUrl"
                 width="20"
                 height="20"
                 :alt="avatarUrlTitle(assignee)"

app/assets/javascripts/boards/models/issue.js

@@ -14,6 +14,7 @@ class ListIssue {
     this.dueDate = obj.due_date;
     this.subscribed = obj.subscribed;
     this.labels = [];
+    this.assignees = [];
     this.selected = false;
     this.position = obj.relative_position || Infinity;
     this.milestone_id = obj.milestone_id;

app/assets/javascripts/boards/models/user.js

@@ -5,7 +5,7 @@ class ListUser {
     this.id = user.id;
     this.name = user.name;
     this.username = user.username;
-    this.avatar = user.avatar_url;
+    this.avatarUrl = user.avatar_url;
   }
 }
 

app/assets/javascripts/sidebar/components/assignees/assignees.js

@@ -116,7 +116,7 @@ export default {
             width="24"
             class="avatar avatar-inline s24"
             :alt="assigneeAlt(user)"
-            :src="user.avatar_url"
+            :src="user.avatarUrl"
           />
           <span class="author">
             {{ user.name }}
@@ -156,7 +156,7 @@ export default {
               width="32"
               class="avatar avatar-inline s32"
               :alt="assigneeAlt(firstUser)"
-              :src="firstUser.avatar_url"
+              :src="firstUser.avatarUrl"
             />
             <span class="author">
               {{ firstUser.name }}
@@ -183,7 +183,7 @@ export default {
                   width="32"
                   class="avatar avatar-inline s32"
                   :alt="assigneeAlt(user)"
-                  :src="user.avatar_url"
+                  :src="user.avatarUrl"
                 />
               </a>
             </div>

app/assets/javascripts/sidebar/stores/sidebar_store.js

@@ -20,7 +20,11 @@ export default class SidebarStore {
 
   processUserData(data) {
     if (data.assignees) {
-      this.renderedUsers = data.assignees;
+      this.renderedUsers = data.assignees.map(a => {
+        a.avatarUrl = a.avatar_url;
+        delete a.avatar_url;
+        return a;
+      });
 
       this.removeAllUserIds();
       this.renderedUsers.map(u => this.addUserId(u.id));

app/views/projects/boards/components/sidebar/_assignee.html.haml

+-# .block.assignee
+  -# .title.hide-collapsed
+  -#   Assignee
+  -#   - if can?(current_user, :admin_issue, @project)
+  -#     = icon("spinner spin", class: "block-loading")
+  -#     = link_to "Edit", "#", class: "edit-link pull-right"
+-#   .value.hide-collapsed
+-#     %span.assign-yourself.no-value{ "v-if" => "!issue.assignees" }
+-#       No assignee
+-#       - if can?(current_user, :admin_issue, @project)
+-#         \-
+-#         %a.js-assign-yourself{ href: "#" }
+-#           assign yourself
+-#     %a.author_link.bold{ ":href" => "'#{root_url}' + issue.assignees[0].username",
+-#       "v-if" => "issue.assignees" }
+-#       %img.avatar.avatar-inline.s32{ ":src" => "issue.assignees[0].avatar",
+-#         width: "32", alt: "Avatar" }
+-#       %span.author
+-#         {{ issue.assignees[0].name }}
+-#       %span.username
+-#         = precede "@" do
+-#           {{ issue.assignees[0].username }}
 .block.assignee
-  .title.hide-collapsed
-    Assignee
-    - if can?(current_user, :admin_issue, @project)
-      = icon("spinner spin", class: "block-loading")
-      = link_to "Edit", "#", class: "edit-link pull-right"
-  .value.hide-collapsed
-    %span.assign-yourself.no-value{ "v-if" => "!issue.assignee" }
-      No assignee
-      - if can?(current_user, :admin_issue, @project)
-        \-
-        %a.js-assign-yourself{ href: "#" }
-          assign yourself
-    %a.author_link.bold{ ":href" => "'#{root_url}' + issue.assignee.username",
-      "v-if" => "issue.assignee" }
-      %img.avatar.avatar-inline.s32{ ":src" => "issue.assignee.avatar",
-        width: "32", alt: "Avatar" }
-      %span.author
-        {{ issue.assignee.name }}
-      %span.username
-        = precede "@" do
-          {{ issue.assignee.username }}
+  %template{ "v-if" => "issue.assignees"}
+    %assignee-title{ ":number-of-assignees" => "issue.assignees.length",
+      ":editable" => can?(current_user, :admin_issue, @project) }
+    %assignees{ class: "value", "root-path" => "#{root_url}",
+      ":users" => "issue.assignees" }
+
   - if can?(current_user, :admin_issue, @project)
     .selectbox.hide-collapsed
       %input{ type: "hidden",
-        name: "issue[assignee_id]",
-        id: "issue_assignee_id",
-        ":value" => "issue.assignee.id",
-        "v-if" => "issue.assignee" }
+        name: "issue[assignee_ids][]",
+        ":value" => "assignee.id",
+        "v-if" => "issue.assignees",
+        "v-for" => "assignee in issue.assignees" }
       .dropdown
-        %button.dropdown-menu-toggle.js-user-search.js-author-search.js-issue-board-sidebar{ type: "button", data: { toggle: "dropdown", field_name: "issue[assignee_id]", first_user: (current_user.username if current_user), current_user: "true", project_id: @project.id, null_user: "true" },
+        %button.dropdown-menu-toggle.js-user-search.js-author-search.js-multiselect.js-save-user-data.js-issue-board-sidebar{ type: "button", data: { toggle: "dropdown", field_name: "issue[assignee_ids][]", first_user: (current_user.username if current_user), current_user: "true", project_id: @project.id, null_user: "true", multi_select: "true", dropdown: { header: 'Assignee(s)'} },
           ":data-issuable-id" => "issue.id",
           ":data-issue-update" => "'#{namespace_project_issues_path(@project.namespace, @project)}/' + issue.id + '.json'" }
-          Select assignee
+          Select assignee(s)
           = icon("chevron-down")
-        .dropdown-menu.dropdown-menu-user.dropdown-menu-selectable.dropdown-menu-author
+        .dropdown-menu.dropdown-select.dropdown-menu-user.dropdown-menu-selectable.dropdown-menu-author
           = dropdown_title("Assign to")
           = dropdown_filter("Search users")
           = dropdown_content