Changing filter dropdowns shows loading

Instead of doing a full refresh of the page - i've modified the filterResults method on the Issues object to work for this form as well

5 files changed, 42 insertions, 15 deletions

diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee
index 4f038477755..c81e8bf760a 100644
--- a/app/assets/javascripts/gl_dropdown.js.coffee
+++ b/app/assets/javascripts/gl_dropdown.js.coffee
@@ -246,11 +246,15 @@ class GitLabDropdown
         if oldValue
           value = "#{oldValue},#{value}"
       else
-        @dropdown.find(ACTIVE_CLASS).removeClass ACTIVE_CLASS
+        @dropdown.find(".#{ACTIVE_CLASS}").removeClass ACTIVE_CLASS
 
       # Toggle active class for the tick mark
       el.toggleClass "is-active"
 
+      # Toggle the dropdown label
+      if @options.toggleLabel
+        $(@el).find(".dropdown-toggle-text").text @options.toggleLabel(selectedObject)
+
       if value?
         if !field.length
           # Create hidden input for form
diff --git a/app/assets/javascripts/issues.js.coffee b/app/assets/javascripts/issues.js.coffee
index a0acf3028bf..b6bc86f8af2 100644
--- a/app/assets/javascripts/issues.js.coffee
+++ b/app/assets/javascripts/issues.js.coffee
@@ -41,18 +41,20 @@
     @timer = null
     $("#issue_search").keyup ->
       clearTimeout(@timer)
-      @timer = setTimeout(Issues.filterResults, 500)
+      @timer = setTimeout( ->
+        Issues.filterResults $("#issue_search_form")
+      , 500)
 
-  filterResults: =>
-    form = $("#issue_search_form")
-    search = $("#issue_search").val()
+  filterResults: (form) =>
     $('.issues-holder').css("opacity", '0.5')
-    issues_url = form.attr('action') + '?' + form.serialize()
+    form_action = form.attr('action')
+    form_data = form.serialize()
+    issues_url = form_action + ("#{if form_action.indexOf("?") < 0 then '?' else '&'}") + form_data
 
     $.ajax
       type: "GET"
-      url: form.attr('action')
-      data: form.serialize()
+      url: form_action
+      data: form_data
       complete: ->
         $('.issues-holder').css("opacity", '1.0')
       success: (data) ->
diff --git a/app/assets/javascripts/labels_select.js.coffee b/app/assets/javascripts/labels_select.js.coffee
index 5ade2cb66cb..ed978f1bdb2 100644
--- a/app/assets/javascripts/labels_select.js.coffee
+++ b/app/assets/javascripts/labels_select.js.coffee
@@ -10,6 +10,7 @@ class @LabelsSelect
       newColorField = $('#new_label_color')
       showNo = $(dropdown).data('show-no')
       showAny = $(dropdown).data('show-any')
+      defaultLabel = $(dropdown).text().trim()
 
       if newLabelField.length
         $('.suggest-colors-dropdown a').on "click", (e) ->
@@ -51,13 +52,13 @@ class @LabelsSelect
 
             if showNo
               data.unshift(
-                id: "0"
-                title: 'No label'
+                id: 0
+                title: 'No Label'
               )
 
             if showAny
               data.unshift(
-                title: 'Any label'
+                title: 'Any Label'
               )
 
             if data.length > 2
@@ -83,10 +84,18 @@ class @LabelsSelect
         search:
           fields: ['title']
         selectable: true
+        toggleLabel: (selected) ->
+          if selected && selected.title isnt "Any Label"
+            selected.title
+          else
+            defaultLabel
         fieldName: $(dropdown).data('field-name')
         id: (label) ->
-          label.title
+          if label.title is "Any Label"
+            ""
+          else
+            label.title
         clicked: ->
           if $(dropdown).hasClass "js-filter-submit"
-            $(dropdown).parents('form').submit()
+            Issues.filterResults $(dropdown).parents("form")
       )
diff --git a/app/assets/javascripts/milestone_select.js.coffee b/app/assets/javascripts/milestone_select.js.coffee
index 32159a7c179..f38c375c61a 100644
--- a/app/assets/javascripts/milestone_select.js.coffee
+++ b/app/assets/javascripts/milestone_select.js.coffee
@@ -7,6 +7,7 @@ class @MilestoneSelect
       showNo = $(dropdown).data('show-no')
       showAny = $(dropdown).data('show-any')
       useId = $(dropdown).data('use-id')
+      defaultLabel = $(dropdown).text().trim()
 
       $(dropdown).glDropdown(
         data: (term, callback) ->
@@ -42,6 +43,11 @@ class @MilestoneSelect
         search:
           fields: ['title']
         selectable: true
+        toggleLabel: (selected) ->
+          if selected && selected.id
+            selected.title
+          else
+            defaultLabel
         fieldName: $(dropdown).data('field-name')
         text: (milestone) ->
           milestone.title
@@ -57,5 +63,5 @@ class @MilestoneSelect
           milestone.title is selectedMilestone
         clicked: ->
           if $(dropdown).hasClass "js-filter-submit"
-            $(dropdown).parents('form').submit()
+            Issues.filterResults $(dropdown).parents("form")
       )
diff --git a/app/assets/javascripts/users_select.js.coffee b/app/assets/javascripts/users_select.js.coffee
index 987c6f4b8d2..46faae111c4 100644
--- a/app/assets/javascripts/users_select.js.coffee
+++ b/app/assets/javascripts/users_select.js.coffee
@@ -10,6 +10,7 @@ class @UsersSelect
       showAnyUser = $(dropdown).data('any-user')
       firstUser = $(dropdown).data('first-user')
       selectedId = $(dropdown).data('selected')
+      defaultLabel = $(dropdown).text().trim()
 
       $(dropdown).glDropdown(
         data: (term, callback) =>
@@ -53,9 +54,14 @@ class @UsersSelect
           fields: ['name', 'username']
         selectable: true
         fieldName: $(dropdown).data('field-name')
+        toggleLabel: (selected) ->
+          if selected && selected.id?
+            selected.name
+          else
+            defaultLabel
         clicked: ->
           if $(dropdown).hasClass "js-filter-submit"
-            $(dropdown).parents('form').submit()
+            Issues.filterResults $(dropdown).parents("form")
         renderRow: (user) ->
           username = if user.username then "@#{user.username}" else ""
           avatar = if user.avatar_url then user.avatar_url else false