[skip ci] changing dropdown now updates the backend

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

@@ -5,6 +5,8 @@
 /* global Sidebar */
 
 import Vue from 'vue';
+import eventHub from '../../sidebar/event_hub';
+
 import AssigneeTitle from '../../sidebar/components/assignees/assignee_title';
 import Assignees from '../../sidebar/components/assignees/assignees';
 
@@ -25,6 +27,7 @@ require('./sidebar/remove_issue');
         detail: Store.detail,
         issue: {},
         list: {},
+        loadingAssignees: false,
       };
     },
     computed: {
@@ -58,7 +61,46 @@ require('./sidebar/remove_issue');
     methods: {
       closeSidebar () {
         this.detail.issue = {};
-      }
+      },
+      assignSelf () {
+        // Notify gl dropdown that we are now assigning to current user
+        this.$el.querySelector('.block.assignee').dispatchEvent(new Event('assignYourself'));
+
+        this.addUser(this.currentUser.id);
+        this.saveUsers();
+      },
+      removeUser (id) {
+        gl.issueBoards.BoardsStore.detail.issue.removeUserId(id);
+      },
+      addUser (id) {
+        gl.issueBoards.BoardsStore.detail.issue.addUserId(id);
+      },
+      removeAllUsers () {
+        gl.issueBoards.BoardsStore.detail.issue.removeAllUserIds();
+      },
+      saveUsers () {
+        this.loadingAssignees = true;
+
+        const endpoint = document.querySelector('.js-issue-board-sidebar').dataset.issueUpdate;
+        gl.issueBoards.BoardsStore.detail.issue.update(endpoint)
+          .then((response) => {
+            this.loadingAssignees = false;
+
+            const data = response.json();
+            gl.issueBoards.BoardsStore.detail.issue.processAssignees(data.assignees);
+          })
+          .catch(() => {
+            this.loadingAssignees = false;
+            return new Flash('An error occurred while saving assignees');
+          });
+      },
+    },
+    created () {
+      // Get events from glDropdown
+      eventHub.$on('sidebar.removeUser', this.removeUser);
+      eventHub.$on('sidebar.addUser', this.addUser);
+      eventHub.$on('sidebar.removeAllUsers', this.removeAllUsers);
+      eventHub.$on('sidebar.saveUsers', this.saveUsers);
     },
     mounted () {
       new IssuableContext(this.currentUser);

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

@@ -15,6 +15,7 @@ class ListIssue {
     this.subscribed = obj.subscribed;
     this.labels = [];
     this.assignees = [];
+    this.selectedAssigneeIds = [];
     this.selected = false;
     this.position = obj.relative_position || Infinity;
     this.milestone_id = obj.milestone_id;
@@ -27,7 +28,12 @@ class ListIssue {
       this.labels.push(new ListLabel(label));
     });
 
-    this.assignees = obj.assignees.map(a => new ListUser(a));
+    this.processAssignees(obj.assignees);
+  }
+
+  processAssignees(assignees) {
+    this.assignees = assignees.map(a => new ListUser(a));
+    this.selectedAssigneeIds = this.assignees.map(a => a.id);
   }
 
   addLabel (label) {
@@ -50,6 +56,20 @@ class ListIssue {
     labels.forEach(this.removeLabel.bind(this));
   }
 
+  addUserId (id) {
+    if (this.selectedAssigneeIds.indexOf(id) === -1) {
+      this.selectedAssigneeIds.push(id);
+    }
+  }
+
+  removeUserId (id) {
+    this.selectedAssigneeIds = this.selectedAssigneeIds.filter(uid => uid !== id);
+  }
+
+  removeAllUserIds () {
+    this.selectedAssigneeIds = [];
+  }
+
   getLists () {
     return gl.issueBoards.BoardsStore.state.lists.filter(list => list.findIssue(this.id));
   }
@@ -59,7 +79,7 @@ class ListIssue {
       issue: {
         milestone_id: this.milestone ? this.milestone.id : null,
         due_date: this.dueDate,
-        assignee_id: this.assignee ? this.assignee.id : null,
+        assignee_ids: this.selectedAssigneeIds,
         label_ids: this.labels.map((label) => label.id)
       }
     };

app/assets/javascripts/gl_dropdown.js

@@ -351,7 +351,7 @@ GitLabDropdown = (function() {
         isMarking = selected ? selected[1] : null;
         if (this.options.clicked) {
           this.options.clicked.call(this, {
-            user: selectedObj,
+            selectedObj,
             $el,
             e,
             isMarking,

app/assets/javascripts/issue_status_select.js

@@ -19,8 +19,8 @@
               return label;
             };
           })(this),
-          clicked: function(item, $el, e) {
-            return e.preventDefault();
+          clicked: function(options) {
+            return options.e.preventDefault();
           },
           id: function(obj, el) {
             return $(el).data("id");

app/assets/javascripts/labels_select.js

@@ -330,7 +330,10 @@
           },
           multiSelect: $dropdown.hasClass('js-multiselect'),
           vue: $dropdown.hasClass('js-issue-board-sidebar'),
-          clicked: function(label, $el, e, isMarking) {
+          clicked: function(options) {
+            const { $el, e, isMarking } = options;
+            const label = options.selectedObj;
+
             var isIssueIndex, isMRIndex, page, boardsModel;
 
             page = $('body').data('page');

app/assets/javascripts/milestone_select.js

@@ -144,7 +144,10 @@ import Vue from 'vue';
 
             return true;
           },
-          clicked: function(selected, $el, e) {
+          clicked: function(options) {
+            const { $el, e } = options;
+            let selected = options.selectedObj;
+
             var data, isIssueIndex, isMRIndex, page, boardsStore;
             if (!selected) return;
             page = $('body').data('page');

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

@@ -71,7 +71,7 @@ export default {
   },
   methods: {
     assignSelf() {
-      this.$emit('assignSelf');
+      this.$emit('assign-self');
     },
     toggleShowLess() {
       this.showLess = !this.showLess;

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

@@ -40,9 +40,11 @@ export default {
         this.loading = false;
       }
 
+      const setLoadingFalseWrapper = setLoadingFalse.bind(this);
+
       this.mediator.saveSelectedUsers(this.field)
-        .then(setLoadingFalse)
-        .catch(setLoadingFalse);
+        .then(setLoadingFalseWrapper)
+        .catch(setLoadingFalseWrapper);
     },
   },
   created() {
@@ -67,6 +69,7 @@ export default {
         v-if="!loading"
         :root-path="store.rootPath"
         :users="store.renderedUsers"
+        @assign-self="assignSelf"
       />
     </div>
   `,

app/assets/javascripts/subscription_select.js

@@ -19,8 +19,8 @@
               return label;
             };
           })(this),
-          clicked: function(item, $el, e) {
-            return e.preventDefault();
+          clicked: function(options) {
+            return options.e.preventDefault();
           },
           id: function(obj, el) {
             return $(el).data("id");

app/assets/javascripts/users_select.js

@@ -289,9 +289,10 @@ import eventHub from './sidebar/event_hub';
               return $value.css('display', '');
             },
             multiSelect: $dropdown.hasClass('js-multiselect'),
-            vue: $dropdown.hasClass('js-issue-board-sidebar'),
+            vue: false,
             clicked: function(options) {
-              const { user, $el, e, isMarking } = options;
+              const { $el, e, isMarking } = options;
+              const user = options.selectedObj;
 
               if ($dropdown.hasClass('js-multiselect')) {
                 const isActive = $el.hasClass('is-active');
@@ -348,19 +349,6 @@ import eventHub from './sidebar/event_hub';
                 return Issuable.filterResults($dropdown.closest('form'));
               } else if ($dropdown.hasClass('js-filter-submit')) {
                 return $dropdown.closest('form').submit();
-              } else if ($dropdown.hasClass('js-issue-board-sidebar')) {
-                if (user.id) {
-                  Vue.set(gl.issueBoards.BoardsStore.detail.issue, 'assignee', new ListUser({
-                    id: user.id,
-                    username: user.username,
-                    name: user.name,
-                    avatar_url: user.avatar_url
-                  }));
-                } else {
-                  Vue.delete(gl.issueBoards.BoardsStore.detail.issue, 'assignee');
-                }
-
-                updateIssueBoardsIssue();
               } else if (!$dropdown.hasClass('js-multiselect')) {
                 selected = $dropdown.closest('.selectbox').find("input[name='" + ($dropdown.data('field-name')) + "']").val();
                 return assignTo(selected);

app/assets/javascripts/weight_select.js

@@ -54,7 +54,10 @@
               return '';
             }
           },
-          clicked: function(selected, $el, e) {
+          clicked: function(options) {
+            const { $el, e } = options;
+            let selected = options.selectedObj;
+
             if ($(dropdown).is(".js-filter-submit")) {
               return $(dropdown).parents('form').submit();
             } else if ($dropdown.is('.js-issuable-form-weight')) {

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
   %template{ "v-if" => "issue.assignees"}
-    %assignee-title{ ":number-of-assignees" => "issue.assignees.length",
+    %assignee-title{ ":number-of-assignees" => "issue.selectedAssigneeIds.length",
+      ":loading" => "loadingAssignees",
       ":editable" => can?(current_user, :admin_issue, @project) }
     %assignees{ class: "value", "root-path" => "#{root_url}",
-      ":users" => "issue.assignees" }
+      ":users" => "issue.assignees",
+      "@assign-self" => "assignSelf" }
 
   - if can?(current_user, :admin_issue, @project)
     .selectbox.hide-collapsed