[skip ci] refactor saving assignee functionality

app/assets/javascripts/users_select.js

@@ -258,7 +258,7 @@
                   })
                   .get();
 
-                gl.sidebarAssigneesOptions.assignees.addUserIds(selected);
+                gl.sidebarAssigneesOptions.assignees.saveUsers();
               }
 
               $selectbox.hide();
@@ -276,16 +276,30 @@
                     .find("input[name='" + ($dropdown.data('field-name')) + "'][value!=0]");
 
                 if (user.beforeDivider && user.name.toLowerCase() === 'unassigned') {
-                  previouslySelected.each((index, element) => element.remove());
+                  // Unassigned selected
+                  previouslySelected.each((index, element) => {
+                    const id = parseInt(element.value, 10);
+                    gl.sidebarAssigneesOptions.assignees.removeUser(id);
+                    element.remove()
+                  });
                 } else if (isActive) {
+                  // user selected
+                  gl.sidebarAssigneesOptions.assignees.addUser(user.id, user.name, user.username, user.avatar_url);
+
+                  // Remove unassigned selection (if it was previously selected)
                   const unassignedSelected = $dropdown.closest('.selectbox')
                     .find("input[name='" + ($dropdown.data('field-name')) + "'][value=0]");
 
                   if (unassignedSelected) {
                     unassignedSelected.remove();
+                    gl.sidebarAssigneesOptions.assignees.removeUser(unassignedSelected);
                   }
                 } else if (!isActive && previouslySelected.length === 0) {
+                  // Select unassigned because there is no more selected users
                   glDropdown.addInput($dropdown.data('field-name'), 0, {});
+                } else {
+                  // User unselected
+                  gl.sidebarAssigneesOptions.assignees.removeUser(user.id);
                 }
               }
 

app/assets/javascripts/vue_sidebar_assignees/index.js

@@ -37,6 +37,10 @@ const sidebarAssigneesOptions = () => ({
         return 'multiple-assignees';
       }
     },
+    hideComponent() {
+      return !this.assignees.saved;
+    }
+
   },
   components: {
     'no-assignee': NoAssignee,
@@ -47,7 +51,7 @@ const sidebarAssigneesOptions = () => ({
   template: `
     <div class="sidebar-assignees">
       <assignee-title :numberOfAssignees="assignees.users.length" />
-      <component :is="componentName" :assignees="assignees" />
+      <component :is="componentName" :assignees="assignees" :class="{ hidden: hideComponent }" />
     </div>
   `,
 });

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

@@ -3,6 +3,7 @@ import VueResource from 'vue-resource';
 
 require('~/vue_shared/vue_resource_interceptor');
 
+Vue.http.options.emulateJSON = true;
 Vue.use(VueResource);
 
 export default class SidebarAssigneesService {
@@ -11,11 +12,9 @@ export default class SidebarAssigneesService {
     this.sidebarAssigneeResource = Vue.resource(path);
   }
 
-  add(userIds) {
+  update(userIds) {
     return this.sidebarAssigneeResource.update({
       [this.field]: userIds
-    }, {
-      emulateJSON: true
     });
   }
 }

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

@@ -3,37 +3,48 @@ export default class SidebarAssigneesStore {
     this.currentUserId = currentUserId;
     this.service = service;
     this.users = [];
+    this.saved = true;
   }
 
-  addUser(name, username, avatarUrl) {
+  addUser(id, name, username, avatarUrl, saved) {
     this.users.push({
-      avatarUrl,
+      id,
       name,
       username,
+      avatarUrl,
     });
-  }
 
-  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');
-      });
+    if (!saved) {
+      this.saved = false;
+    }
   }
 
   addCurrentUser() {
     this.addUserIds(this.currentUserId);
   }
 
-  removeUser(username) {
-    this.users = this.users.filter((u) => u.username !== username);
+  removeUser(id) {
+    this.saved = false;
+    this.users = this.users.filter((u) => u.id !== id);
+  }
+
+  saveUsers() {
+    const ids = this.users.map((u) => u.id) || 0;
+
+    this.service.update(ids.length > 0 ? ids : 0)
+      .then((response) => {
+          const data = response.data;
+          const assignee = data.assignee;
+
+          this.users = [];
+
+          if (assignee) {
+            this.addUser(assignee.id, assignee.name, assignee.username, assignee.avatar_url, true);
+          }
+          this.saved = true;
+        }).catch((err) => {
+          console.log(err);
+          console.log('error');
+        });
   }
 }
\ No newline at end of file

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

@@ -214,9 +214,9 @@
 
     - issuable.assignees.each do |assignee|
       :javascript
-        //document.addEventListener('DOMContentLoaded', () => {
-        //  gl.sidebarAssigneesOptions.assignees.addUser("#{assignee.name}", "#{assignee.username}", "#{assignee.avatar_url}");
-        //});
+        document.addEventListener('DOMContentLoaded', () => {
+          gl.sidebarAssigneesOptions.assignees.addUser(parseInt("#{assignee.id}", 10), "#{assignee.name}", "#{assignee.username}", "#{assignee.avatar_url}", true);
+        });
 
     :javascript
       gl.IssuableResource = new gl.SubbableResource('#{issuable_json_path(issuable)}');