[skip ci] Enable multi selection in user dropdown

app/assets/javascripts/gl_dropdown.js

@@ -348,7 +348,7 @@ GitLabDropdown = (function() {
         selectedObj = selected ? selected[0] : null;
         isMarking = selected ? selected[1] : null;
         if (self.options.clicked) {
-          self.options.clicked(selectedObj, $el, e, isMarking);
+          self.options.clicked(selectedObj, $el, e, isMarking, self);
         }
 
         // Update label right after all modifications in dropdown has been done
@@ -724,6 +724,13 @@ GitLabDropdown = (function() {
     if (this.options.inputId != null) {
       $input.attr('id', this.options.inputId);
     }
+
+    if (this.options.saveUserDataToInput) {
+      $input.attr('data-name', selectedObject.name);
+      $input.attr('data-username', selectedObject.username);
+      $input.attr('data-avatar-url', selectedObject.avatar_url);
+    }
+
     return this.dropdown.before($input);
   };
 

app/assets/javascripts/users_select.js

@@ -166,9 +166,39 @@
                     };
                     users.unshift(anyUser);
                   }
-                }
-                if (showDivider) {
-                  users.splice(showDivider, 0, "divider");
+
+                  if (showDivider) {
+                    users.splice(showDivider, 0, "divider");
+                  }
+
+
+                  if ($dropdown.hasClass('js-multiselect')) {
+                    const selected = $selectbox
+                      .find('input[name="' + $dropdown.data('field-name') + '"]')
+                      .map(function () {
+                        return parseInt(this.value, 10);
+                      })
+                      .get()
+                      .filter((i) => i !== 0);
+
+                    // const unassignedSelected = selected.length === 1 && selected[0] === 0;
+//  && !unassignedSelected
+                    if (selected.length > 0) {
+                      const selectedUsers = users
+                        .filter((u) => selected.indexOf(u.id) !== -1)
+                        .sort((a, b) => a.name > b.name);
+
+                      users = users.filter((u) => selected.indexOf(u.id) === -1);
+
+                      selectedUsers.forEach((selectedUser) => {
+                        showDivider += 1;
+                        users.splice(showDivider, 0, selectedUser);
+                      });
+
+                      users.splice(showDivider + 1, 0, 'divider');
+                    }
+                  }
+
                 }
 
                 callback(users);
@@ -184,7 +214,14 @@
             },
             selectable: true,
             fieldName: $dropdown.data('field-name'),
-            toggleLabel: function(selected, el) {
+            toggleLabel: function(selected, el, glDropdown) {
+              if (this.multiSelect) {
+                  // debugger
+                // Update the data model
+                // debugger
+                this.data(glDropdown.filterInput.val(), glDropdown.parseData.bind(glDropdown));
+              }
+
               if (selected && 'id' in selected && $(el).hasClass('is-active')) {
                 if (selected.text) {
                   return selected.text;
@@ -197,14 +234,35 @@
             },
             defaultLabel: defaultLabel,
             // inputId: 'issue_assignee_id',
+
             hidden: function(e) {
               $selectbox.hide();
               // display:block overrides the hide-collapse rule
               return $value.css('display', '');
             },
             multiSelect: $dropdown.hasClass('js-multiselect'),
+            saveUserDataToInput: $dropdown.hasClass('js-save-user-data'),
             vue: $dropdown.hasClass('js-issue-board-sidebar'),
-            clicked: function(user, $el, e) {
+            clicked: function(user, $el, e, isMarking, glDropdown) {
+              if ($dropdown.hasClass('js-multiselect')) {
+
+                const isActive = $el.hasClass('is-active');
+                const previouslySelected = $dropdown.closest('.selectbox')
+                    .find("input[name='" + ($dropdown.data('field-name')) + "'][value!=0]");
+
+                if (user.beforeDivider && user.name.toLowerCase() === 'unassigned') {
+                  previouslySelected.each((index, element) => element.remove());
+                } else if (isActive) {
+                  const unassignedSelected = $dropdown.closest('.selectbox')
+                    .find("input[name='" + ($dropdown.data('field-name')) + "'][value=0]");
+
+                  if (unassignedSelected) {
+                    unassignedSelected.remove();
+                  }
+                } else if (!isActive && previouslySelected.length === 0) {
+                  glDropdown.addInput($dropdown.data('field-name'), 0, {});
+                }
+              }
 
               var isIssueIndex, isMRIndex, page, selected;
               page = $('body').data('page');

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

@@ -61,9 +61,9 @@
 
         .selectbox.hide-collapsed
           - issuable.assignees.each do |assignee|
-            = hidden_field_tag "#{issuable.to_ability_name}[assignee_ids][]", assignee.id, id: nil
+            = hidden_field_tag "#{issuable.to_ability_name}[assignee_ids][]", assignee.id, id: nil, data: { name: assignee.name, username: assignee.username, 'avatar-url' => assignee.avatar_url }
           - if issuable.instance_of?(Issue)
-            = dropdown_tag('Select assignee(s)', options: { toggle_class: 'js-user-search js-author-search js-multiselect', title: 'Assign to', filter: true, dropdown_class: 'dropdown-menu-user dropdown-menu-selectable dropdown-menu-author', placeholder: 'Search users', data: { first_user: (current_user.username if current_user), current_user: true, project_id: (@project.id if @project), author_id: issuable.author_id, field_name: "#{issuable.to_ability_name}[assignee_ids][]", issue_update: issuable_json_path(issuable), ability_name: issuable.to_ability_name, null_user: true, 'dropdown-title' => 'Select assignee(s)' } })
+            = dropdown_tag('Select assignee(s)', options: { toggle_class: 'js-user-search js-author-search js-multiselect js-save-user-data', title: 'Assign to', filter: true, dropdown_class: 'dropdown-menu-user dropdown-menu-selectable dropdown-menu-author', placeholder: 'Search users', data: { first_user: (current_user.username if current_user), current_user: true, project_id: (@project.id if @project), author_id: issuable.author_id, field_name: "#{issuable.to_ability_name}[assignee_ids][]", issue_update: issuable_json_path(issuable), ability_name: issuable.to_ability_name, null_user: true, multi_select: true, 'dropdown-title' => 'Select assignee(s)' } })
           - else
             = dropdown_tag('Select assignee', options: { toggle_class: 'js-user-search js-author-search', title: 'Assign to', filter: true, dropdown_class: 'dropdown-menu-user dropdown-menu-selectable dropdown-menu-author', placeholder: 'Search users', data: { first_user: (current_user.username if current_user), current_user: true, project_id: (@project.id if @project), author_id: issuable.author_id, field_name: "#{issuable.to_ability_name}[assignee_id]", issue_update: issuable_json_path(issuable), ability_name: issuable.to_ability_name, null_user: true } })