Commit ece28bda authored by Jacob Schatz's avatar Jacob Schatz Committed by Rémy Coutable

Merge branch 'issue-fade-load' into 'master'

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

![issues](/uploads/3335f09f7df88b6d419de7fd3d6857d2/issues.gif)

Closes #14359

See merge request !3237
parent cf52a9b4
...@@ -246,11 +246,15 @@ class GitLabDropdown ...@@ -246,11 +246,15 @@ class GitLabDropdown
if oldValue if oldValue
value = "#{oldValue},#{value}" value = "#{oldValue},#{value}"
else else
@dropdown.find(ACTIVE_CLASS).removeClass ACTIVE_CLASS @dropdown.find(".#{ACTIVE_CLASS}").removeClass ACTIVE_CLASS
# Toggle active class for the tick mark # Toggle active class for the tick mark
el.toggleClass "is-active" el.toggleClass "is-active"
# Toggle the dropdown label
if @options.toggleLabel
$(@el).find(".dropdown-toggle-text").text @options.toggleLabel(selectedObject)
if value? if value?
if !field.length if !field.length
# Create hidden input for form # Create hidden input for form
......
...@@ -41,24 +41,28 @@ ...@@ -41,24 +41,28 @@
@timer = null @timer = null
$("#issue_search").keyup -> $("#issue_search").keyup ->
clearTimeout(@timer) clearTimeout(@timer)
@timer = setTimeout(Issues.filterResults, 500) @timer = setTimeout( ->
Issues.filterResults $("#issue_search_form")
, 500)
filterResults: => filterResults: (form) =>
form = $("#issue_search_form") $('.issues-holder, .merge-requests-holder').css("opacity", '0.5')
search = $("#issue_search").val() formAction = form.attr('action')
$('.issues-holder').css("opacity", '0.5') formData = form.serialize()
issues_url = form.attr('action') + '?' + form.serialize() issuesUrl = formAction
issuesUrl += ("#{if formAction.indexOf("?") < 0 then '?' else '&'}")
issuesUrl += formData
$.ajax $.ajax
type: "GET" type: "GET"
url: form.attr('action') url: formAction
data: form.serialize() data: formData
complete: -> complete: ->
$('.issues-holder').css("opacity", '1.0') $('.issues-holder, .merge-requests-holder').css("opacity", '1.0')
success: (data) -> success: (data) ->
$('.issues-holder').html(data.html) $('.issues-holder, .merge-requests-holder').html(data.html)
# Change url so if user reload a page - search results are saved # Change url so if user reload a page - search results are saved
history.replaceState {page: issues_url}, document.title, issues_url history.replaceState {page: issuesUrl}, document.title, issuesUrl
Issues.reload() Issues.reload()
dataType: "json" dataType: "json"
......
class @LabelsSelect class @LabelsSelect
constructor: -> constructor: ->
$('.js-label-select').each (i, dropdown) -> $('.js-label-select').each (i, dropdown) ->
projectId = $(dropdown).data('project-id') $dropdown = $(dropdown)
labelUrl = $(dropdown).data("labels") projectId = $dropdown.data('project-id')
selectedLabel = $(dropdown).data('selected') labelUrl = $dropdown.data('labels')
selectedLabel = $dropdown.data('selected')
if selectedLabel if selectedLabel
selectedLabel = selectedLabel.split(",") selectedLabel = selectedLabel.split(',')
newLabelField = $('#new_label_name') newLabelField = $('#new_label_name')
newColorField = $('#new_label_color') newColorField = $('#new_label_color')
showNo = $(dropdown).data('show-no') showNo = $dropdown.data('show-no')
showAny = $(dropdown).data('show-any') showAny = $dropdown.data('show-any')
defaultLabel = $dropdown.text().trim()
if newLabelField.length if newLabelField.length
$('.suggest-colors-dropdown a').on "click", (e) -> $('.suggest-colors-dropdown a').on 'click', (e) ->
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
newColorField.val $(this).data("color") newColorField.val $(this).data('color')
$('.js-dropdown-label-color-preview') $('.js-dropdown-label-color-preview')
.css 'background-color', $(this).data("color") .css 'background-color', $(this).data('color')
.addClass 'is-active' .addClass 'is-active'
$('.js-new-label-btn').on "click", (e) -> $('.js-new-label-btn').on 'click', (e) ->
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
if newLabelField.val() isnt "" && newColorField.val() isnt "" if newLabelField.val() isnt '' and newColorField.val() isnt ''
$('.js-new-label-btn').disable() $('.js-new-label-btn').disable()
# Create new label with API # Create new label with API
...@@ -33,37 +35,38 @@ class @LabelsSelect ...@@ -33,37 +35,38 @@ class @LabelsSelect
color: newColorField.val() color: newColorField.val()
}, (label) -> }, (label) ->
$('.js-new-label-btn').enable() $('.js-new-label-btn').enable()
$('.dropdown-menu-back', $(dropdown).parent()).trigger "click" $('.dropdown-menu-back', $dropdown.parent()).trigger 'click'
$(dropdown).glDropdown( $dropdown.glDropdown(
data: (term, callback) -> data: (term, callback) ->
$.ajax( $.ajax(
url: labelUrl url: labelUrl
).done (data) -> ).done (data) ->
if showNo if showNo
data.unshift( data.unshift(
id: "0" id: 0
title: 'No label' title: 'No Label'
) )
if showAny if showAny
data.unshift( data.unshift(
title: 'Any label' isAny: true
title: 'Any Label'
) )
if data.length > 2 if data.length > 2
data.splice 2, 0, "divider" data.splice 2, 0, 'divider'
callback data callback data
renderRow: (label) -> renderRow: (label) ->
if $.isArray(selectedLabel) if $.isArray(selectedLabel)
selected = "" selected = ''
$.each selectedLabel, (i, selectedLbl) -> $.each selectedLabel, (i, selectedLbl) ->
selectedLbl = selectedLbl.trim() selectedLbl = selectedLbl.trim()
if selected is "" && label.title is selectedLbl if selected is '' and label.title is selectedLbl
selected = "is-active" selected = 'is-active'
else else
selected = if label.title is selectedLabel then "is-active" else "" selected = if label.title is selectedLabel then 'is-active' else ''
"<li> "<li>
<a href='#' class='#{selected}'> <a href='#' class='#{selected}'>
...@@ -74,10 +77,24 @@ class @LabelsSelect ...@@ -74,10 +77,24 @@ class @LabelsSelect
search: search:
fields: ['title'] fields: ['title']
selectable: true selectable: true
fieldName: $(dropdown).data('field-name') toggleLabel: (selected) ->
if selected and selected.title isnt 'Any Label'
selected.title
else
defaultLabel
fieldName: $dropdown.data('field-name')
id: (label) -> id: (label) ->
if label.isAny?
''
else
label.title label.title
clicked: -> clicked: ->
if $(dropdown).hasClass "js-filter-submit" page = $('body').data 'page'
$(dropdown).parents('form').submit() isIssueIndex = page is 'projects:issues:index'
isMRIndex = page is page is 'projects:merge_requests:index'
if $dropdown.hasClass('js-filter-submit') and (isIssueIndex or isMRIndex)
Issues.filterResults $dropdown.closest('form')
else if $dropdown.hasClass 'js-filter-submit'
$dropdown.closest('form').submit()
) )
class @MilestoneSelect class @MilestoneSelect
constructor: -> constructor: ->
$('.js-milestone-select').each (i, dropdown) -> $('.js-milestone-select').each (i, dropdown) ->
projectId = $(dropdown).data('project-id') $dropdown = $(dropdown)
milestonesUrl = $(dropdown).data('milestones') projectId = $dropdown.data('project-id')
selectedMilestone = $(dropdown).data('selected') milestonesUrl = $dropdown.data('milestones')
showNo = $(dropdown).data('show-no') selectedMilestone = $dropdown.data('selected')
showAny = $(dropdown).data('show-any') showNo = $dropdown.data('show-no')
useId = $(dropdown).data('use-id') showAny = $dropdown.data('show-any')
useId = $dropdown.data('use-id')
defaultLabel = $dropdown.text().trim()
$(dropdown).glDropdown( $dropdown.glDropdown(
data: (term, callback) -> data: (term, callback) ->
$.ajax( $.ajax(
url: milestonesUrl url: milestonesUrl
).done (data) -> ).done (data) ->
if showNo if showNo
data.unshift( data.unshift(
id: "0" id: '0'
title: 'No Milestone' title: 'No Milestone'
) )
...@@ -25,14 +27,19 @@ class @MilestoneSelect ...@@ -25,14 +27,19 @@ class @MilestoneSelect
) )
if data.length > 2 if data.length > 2
data.splice 2, 0, "divider" data.splice 2, 0, 'divider'
callback(data) callback(data)
filterable: true filterable: true
search: search:
fields: ['title'] fields: ['title']
selectable: true selectable: true
fieldName: $(dropdown).data('field-name') toggleLabel: (selected) ->
if selected && 'id' of selected
selected.title
else
defaultLabel
fieldName: $dropdown.data('field-name')
text: (milestone) -> text: (milestone) ->
milestone.title milestone.title
id: (milestone) -> id: (milestone) ->
...@@ -40,12 +47,18 @@ class @MilestoneSelect ...@@ -40,12 +47,18 @@ class @MilestoneSelect
if milestone.title isnt "Any milestone" if milestone.title isnt "Any milestone"
milestone.title milestone.title
else else
"" ''
else else
milestone.id milestone.id
isSelected: (milestone) -> isSelected: (milestone) ->
milestone.title is selectedMilestone milestone.title is selectedMilestone
clicked: -> clicked: ->
if $(dropdown).hasClass "js-filter-submit" page = $('body').data 'page'
$(dropdown).parents('form').submit() isIssueIndex = page is 'projects:issues:index'
isMRIndex = page is page is 'projects:merge_requests:index'
if $dropdown.hasClass('js-filter-submit') and (isIssueIndex or isMRIndex)
Issues.filterResults $dropdown.closest('form')
else if $dropdown.hasClass 'js-filter-submit'
$dropdown.closest('form').submit()
) )
...@@ -4,14 +4,16 @@ class @UsersSelect ...@@ -4,14 +4,16 @@ class @UsersSelect
@userPath = "/autocomplete/users/:id.json" @userPath = "/autocomplete/users/:id.json"
$('.js-user-search').each (i, dropdown) => $('.js-user-search').each (i, dropdown) =>
@projectId = $(dropdown).data('project-id') $dropdown = $(dropdown)
@showCurrentUser = $(dropdown).data('current-user') @projectId = $dropdown.data('project-id')
showNullUser = $(dropdown).data('null-user') @showCurrentUser = $dropdown.data('current-user')
showAnyUser = $(dropdown).data('any-user') showNullUser = $dropdown.data('null-user')
firstUser = $(dropdown).data('first-user') showAnyUser = $dropdown.data('any-user')
selectedId = $(dropdown).data('selected') firstUser = $dropdown.data('first-user')
selectedId = $dropdown.data('selected')
$(dropdown).glDropdown( defaultLabel = $dropdown.text().trim()
$dropdown.glDropdown(
data: (term, callback) => data: (term, callback) =>
@users term, (users) => @users term, (users) =>
if term.length is 0 if term.length is 0
...@@ -52,10 +54,21 @@ class @UsersSelect ...@@ -52,10 +54,21 @@ class @UsersSelect
search: search:
fields: ['name', 'username'] fields: ['name', 'username']
selectable: true selectable: true
fieldName: $(dropdown).data('field-name') fieldName: $dropdown.data('field-name')
toggleLabel: (selected) ->
if selected && 'id' of selected
selected.name
else
defaultLabel
clicked: -> clicked: ->
if $(dropdown).hasClass "js-filter-submit" page = $('body').data 'page'
$(dropdown).parents('form').submit() isIssueIndex = page is 'projects:issues:index'
isMRIndex = page is page is 'projects:merge_requests:index'
if $dropdown.hasClass('js-filter-submit') and (isIssueIndex or isMRIndex)
Issues.filterResults $dropdown.closest('form')
else if $dropdown.hasClass 'js-filter-submit'
$dropdown.closest('form').submit()
renderRow: (user) -> renderRow: (user) ->
username = if user.username then "@#{user.username}" else "" username = if user.username then "@#{user.username}" else ""
avatar = if user.avatar_url then user.avatar_url else false avatar = if user.avatar_url then user.avatar_url else false
......
...@@ -30,8 +30,6 @@ feature 'Merge Request filtering by Milestone', feature: true do ...@@ -30,8 +30,6 @@ feature 'Merge Request filtering by Milestone', feature: true do
def filter_by_milestone(title) def filter_by_milestone(title)
find(".js-milestone-select").click find(".js-milestone-select").click
sleep 0.5
find(".milestone-filter a", text: title).click find(".milestone-filter a", text: title).click
sleep 1
end end
end end
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment