Proper selecting multiple labels.

4 files changed, 62 insertions, 10 deletions

diff --git a/app/assets/javascripts/issues.js.coffee b/app/assets/javascripts/issues.js.coffee
index dca5bc55eb2..40a89d8c2f4 100644
--- a/app/assets/javascripts/issues.js.coffee
+++ b/app/assets/javascripts/issues.js.coffee
@@ -49,11 +49,49 @@
         Issues.filterResults $("#issue_search_form")
       , 500)
 
-  filterResults: (form, inputs) =>
-    console.log('form', form)
+  filterResults: (form) =>
+    # Assume for now there is only 1 multi select field
+    # Find the hidden inputs with square brackets
+    $multiInputs = form.find('input[name$="[]"]')
+    if $multiInputs.length
+      # get the name of one of them
+      multiInputName = $multiInputs
+                          .first()
+                          .attr('name')
+
+      # get the singular name by
+      # removing the square brackets from the name
+      singularName = multiInputName.replace('[]','')
+      # clone the form so we can mess around with it.
+      $clonedForm = form.clone()
+
+      # get those inputs from the cloned form
+      $inputs = $clonedForm
+        .find("input[name='#{multiInputName}']")
+
+      # make a comma seperated list of labels
+      commaSeperated = $inputs
+                          .map( -> $(this).val())
+                          .get()
+                          .join(',')
+      # append on a hidden input with the comma 
+      # seperated values in it
+      $clonedForm.append(
+        $('<input />')
+          .attr('type','hidden')
+          .attr('name', singularName)
+          .val(commaSeperated)
+      )
+      # remove the multi inputs from the 
+      # cloned form so they don't get serialized
+      $inputs.remove()
+      # serialize the cloned form
+      formData = $clonedForm.serialize()
+    else
+      formData = form.serialize()
+
     $('.issues-holder, .merge-requests-holder').css("opacity", '0.5')
     formAction = form.attr('action')
-    formData = form.serialize()
     issuesUrl = formAction
     issuesUrl += ("#{if formAction.indexOf("?") < 0 then '?' else '&'}")
     issuesUrl += formData
diff --git a/app/assets/javascripts/labels_select.js.coffee b/app/assets/javascripts/labels_select.js.coffee
index 9e66f8ae961..9cebc26e668 100644
--- a/app/assets/javascripts/labels_select.js.coffee
+++ b/app/assets/javascripts/labels_select.js.coffee
@@ -6,7 +6,7 @@ class @LabelsSelect
       labelUrl = $dropdown.data('labels')
       issueUpdateURL = $dropdown.data('issueUpdate')
       selectedLabel = $dropdown.data('selected')
-      if selectedLabel?
+      if selectedLabel? and not $dropdown.hasClass 'js-multiselect'
         selectedLabel = selectedLabel.split(',')
       newLabelField = $('#new_label_name')
       newColorField = $('#new_label_color')
@@ -246,7 +246,12 @@ class @LabelsSelect
               selectedLabels = $dropdown
                 .closest('form')
                 .find("input[type='hidden'][name='#{$dropdown.data('field-name')}']")
-              Issues.filterResults $dropdown.closest('form'), selectedLabels
+              Issues.filterResults(
+                $dropdown.closest('form'),
+                selectedLabels,
+                $dropdown.data('singularFieldName'),
+                $dropdown.data('fieldName')
+              )
             else if $dropdown.hasClass('js-filter-submit')
               $dropdown.closest('form').submit()
             else
@@ -257,18 +262,14 @@ class @LabelsSelect
           page = $('body').data 'page'
           isIssueIndex = page is 'projects:issues:index'
           isMRIndex = page is page is 'projects:merge_requests:index'
-          console.log 'clicked'
           if $dropdown.hasClass('js-filter-submit') and (isIssueIndex or isMRIndex)
             if not $dropdown.hasClass 'js-multiselect'
               selectedLabel = label.title
               Issues.filterResults $dropdown.closest('form')
           else if $dropdown.hasClass 'js-filter-submit'
-            console.log 'clicked else if'
             $dropdown.closest('form').submit()
           else
-            console.log 'clicked else'
             if $dropdown.hasClass 'js-multiselect'
-              console.log 'clicked else --> if'
               return
             else
               saveLabelData()
diff --git a/app/helpers/issuables_helper.rb b/app/helpers/issuables_helper.rb
index b14b8218d02..d5af0116cf8 100644
--- a/app/helpers/issuables_helper.rb
+++ b/app/helpers/issuables_helper.rb
@@ -16,6 +16,19 @@ module IssuablesHelper
     base_issuable_scope(issuable).where('iid > ?', issuable.iid).last
   end
 
+  def multi_label_name(current_labels, default_label)
+    if current_labels.presence
+      if current_labels.include? ','
+        labels = current_labels.split(',')
+        "#{labels[0]} +#{labels.count - 1} more"
+      else
+        current_labels
+      end
+    else
+      default_label
+    end
+  end
+
   def issuable_json_path(issuable)
     project = issuable.project
 
diff --git a/app/views/shared/issuable/_label_dropdown.html.haml b/app/views/shared/issuable/_label_dropdown.html.haml
index f57d837c45b..4ded2d98f37 100644
--- a/app/views/shared/issuable/_label_dropdown.html.haml
+++ b/app/views/shared/issuable/_label_dropdown.html.haml
@@ -4,7 +4,7 @@
   %button.dropdown-menu-toggle.js-label-select.js-filter-submit.js-extra-options{type: "button", data: {toggle: "dropdown", field_name: "label_name", show_no: "true", show_any: "true", selected: params[:label_name], project_id: @project.try(:id), labels: labels_filter_path, default_label: "Label"}}
   %button.dropdown-menu-toggle.js-label-select.js-filter-submit.js-multiselect.js-extra-options{type: "button", data: {toggle: "dropdown", field_name: "label_name[]", show_no: "true", show_any: "true", selected: params[:label_name], project_id: @project.try(:id), labels: labels_filter_path, default_label: "Label"}}
     %span.dropdown-toggle-text
-      = h(params[:label_name].presence || "Label")
+      = h(multi_label_name(params[:label_name], "Label"))
     = icon('chevron-down')
   .dropdown-menu.dropdown-select.dropdown-menu-paging.dropdown-menu-labels.dropdown-menu-selectable
     .dropdown-page-one