[skip ci] save selected user ids when dropdown is dismissed

app/assets/javascripts/users_select.js

@@ -236,6 +236,17 @@
             // inputId: 'issue_assignee_id',
 
             hidden: function(e) {
+              if ($dropdown.hasClass('js-multiselect')) {
+                const selected = $selectbox
+                  .find('input[name="' + $dropdown.data('field-name') + '"]')
+                  .map(function() {
+                    return parseInt(this.value, 10);
+                  })
+                  .get();
+
+                gl.sidebarAssigneesOptions.assignees.addUserIds(selected);
+              }
+
               $selectbox.hide();
               // display:block overrides the hide-collapse rule
               return $value.css('display', '');

app/assets/javascripts/vue_sidebar_assignees/components/no_assignee.js

@@ -2,18 +2,10 @@ export default {
   name: 'NoAssignee',
   props: {
     assignees: { type: Object, required: true },
-    service: { type: Object, required: true },
   },
   methods: {
     assignSelf() {
-      this.service.add(this.assignees.currentUser.id).then((response) => {
-        const data = response.data;
-        const assignee = data.assignee;
-        this.assignees.addUser(assignee.name, assignee.username, assignee.avatar_url);
-      }).catch((err) => {
-        console.log(err);
-        console.log('error');
-      });
+      this.assignees.addCurrentUser();
     }
   },
   template: `

app/assets/javascripts/vue_sidebar_assignees/index.js

@@ -16,19 +16,13 @@ const sidebarAssigneesOptions = () => ({
     const element = document.querySelector(selector);
     const path = element.dataset.path;
     const field = element.dataset.field;
-
-    const currentUser = {
-      id: parseInt(element.dataset.userId, 10),
-      name: element.dataset.name,
-      username: element.dataset.username,
-    }
+    const currentUserId = parseInt(element.dataset.userId, 10);
 
     const service = new SidebarAssigneesService(path, field);
-    const assignees = new SidebarAssigneesStore(currentUser);
+    const assignees = new SidebarAssigneesStore(currentUserId, service);
 
     return {
       assignees,
-      service,
     };
   },
   computed: {
@@ -53,7 +47,7 @@ const sidebarAssigneesOptions = () => ({
   template: `
     <div class="sidebar-assignees">
       <assignee-title :numberOfAssignees="assignees.users.length" />
-      <component :is="componentName" :assignees="assignees" :service="service" />
+      <component :is="componentName" :assignees="assignees" />
     </div>
   `,
 });

app/assets/javascripts/vue_sidebar_assignees/services/sidebar_assignees_service.js

@@ -11,9 +11,9 @@ export default class SidebarAssigneesService {
     this.sidebarAssigneeResource = Vue.resource(path);
   }
 
-  add(userId) {
+  add(userIds) {
     return this.sidebarAssigneeResource.update({
-      [this.field]: userId
+      [this.field]: userIds
     }, {
       emulateJSON: true
     });

app/assets/javascripts/vue_sidebar_assignees/stores/sidebar_assignees_store.js

 export default class SidebarAssigneesStore {
-  constructor(currentUser) {
-    this.currentUser = currentUser;
-
-    this.users = [{
-      avatarUrl: 'http://www.gravatar.com/avatar/7e65550957227bd38fe2d7fbc6fd2f7b?s=80&d=identicon',
-      name: 'Administrator',
-      username: 'username',
-    }, {
-      avatarUrl: 'http://www.gravatar.com/avatar/7e65550957227bd38fe2d7fbc6fd2f7b?s=80&d=identicon',
-      name: 'test',
-      username: 'username1',
-    }, {
-      avatarUrl: 'http://www.gravatar.com/avatar/7e65550957227bd38fe2d7fbc6fd2f7b?s=80&d=identicon',
-      name: 'test',
-      username: 'username2',
-    }, {
-      avatarUrl: 'http://www.gravatar.com/avatar/7e65550957227bd38fe2d7fbc6fd2f7b?s=80&d=identicon',
-      name: 'test',
-      username: 'username3',
-    }, {
-      avatarUrl: 'http://www.gravatar.com/avatar/7e65550957227bd38fe2d7fbc6fd2f7b?s=80&d=identicon',
-      name: 'test',
-      username: 'username4',
-    }, {
-      avatarUrl: 'http://www.gravatar.com/avatar/7e65550957227bd38fe2d7fbc6fd2f7b?s=80&d=identicon',
-      name: 'test',
-      username: 'username5',
-    }];
+  constructor(currentUserId, service) {
+    this.currentUserId = currentUserId;
+    this.service = service;
     this.users = [];
   }
 
@@ -38,8 +13,24 @@ export default class SidebarAssigneesStore {
     });
   }
 
+  addUserIds(ids) {
+    this.service.add(ids).then((response) => {
+        const data = response.data;
+        const assignee = data.assignee;
+
+        if (assignee) {
+          this.addUser(assignee.name, assignee.username, assignee.avatar_url);
+        } else {
+          this.users = [];
+        }
+      }).catch((err) => {
+        console.log(err);
+        console.log('error');
+      });
+  }
+
   addCurrentUser() {
-    this.users.push(this.currentUser);
+    this.addUserIds(this.currentUserId);
   }
 
   removeUser(username) {

app/views/shared/issuable/_sidebar.html.haml

@@ -24,7 +24,7 @@
     = form_for [@project.namespace.becomes(Namespace), @project, issuable], remote: true, format: :json, html: { class: 'issuable-context-form inline-update js-issuable-update' } do |f|
       .block.assignee
         - if issuable.instance_of?(Issue)
-          #js-vue-sidebar-assignees{ data: { path: issuable_json_path(issuable), field: "#{issuable.to_ability_name}[assignee_id]", user: { id: current_user.id, name: current_user.name, username: current_user.username } } }
+          #js-vue-sidebar-assignees{ data: { path: issuable_json_path(issuable), field: "#{issuable.to_ability_name}[assignee_id]", user: { id: current_user.id } } }
             .title.hide-collapsed
               Assignee
               = icon('spinner spin', class: 'block-loading', 'aria-hidden': 'true')