2016-03-07 12:17:11 -05:00
|
|
|
class @LabelsSelect
|
|
|
|
constructor: ->
|
|
|
|
$('.js-label-select').each (i, dropdown) ->
|
2016-03-18 06:12:52 -04:00
|
|
|
$dropdown = $(dropdown)
|
|
|
|
projectId = $dropdown.data('project-id')
|
|
|
|
labelUrl = $dropdown.data('labels')
|
2016-03-12 15:37:02 -05:00
|
|
|
issueUpdateURL = $dropdown.data('issueUpdate')
|
2016-03-18 06:12:52 -04:00
|
|
|
selectedLabel = $dropdown.data('selected')
|
2016-03-13 15:08:42 -04:00
|
|
|
if selectedLabel?
|
|
|
|
selectedLabel = selectedLabel.split(',')
|
2016-03-08 06:23:54 -05:00
|
|
|
newLabelField = $('#new_label_name')
|
|
|
|
newColorField = $('#new_label_color')
|
2016-03-18 06:12:52 -04:00
|
|
|
showNo = $dropdown.data('show-no')
|
|
|
|
showAny = $dropdown.data('show-any')
|
2016-03-18 08:21:07 -04:00
|
|
|
defaultLabel = $dropdown.data('default-label')
|
2016-03-17 09:14:46 -04:00
|
|
|
abilityName = $dropdown.data('ability-name')
|
2016-03-12 15:37:02 -05:00
|
|
|
$selectbox = $dropdown.closest('.selectbox')
|
|
|
|
$block = $selectbox.closest('.block')
|
|
|
|
$value = $block.find('.value')
|
|
|
|
$loading = $block.find('.block-loading').fadeOut()
|
2016-03-08 06:23:54 -05:00
|
|
|
|
|
|
|
if newLabelField.length
|
2016-03-23 09:29:41 -04:00
|
|
|
$newLabelCreateButton = $('.js-new-label-btn')
|
|
|
|
$colorPreview = $('.js-dropdown-label-color-preview')
|
2016-03-22 10:56:00 -04:00
|
|
|
$newLabelError = $dropdown.parent().find('.js-label-error')
|
|
|
|
$newLabelError.hide()
|
|
|
|
|
2016-03-23 09:29:41 -04:00
|
|
|
# Suggested colors in the dropdown to chose from pre-chosen colors
|
2016-03-18 06:12:52 -04:00
|
|
|
$('.suggest-colors-dropdown a').on 'click', (e) ->
|
2016-03-13 15:08:42 -04:00
|
|
|
|
2016-03-19 11:39:34 -04:00
|
|
|
issueURLSplit = issueUpdateURL.split('/') if issueUpdateURL?
|
|
|
|
if issueUpdateURL
|
2016-03-13 15:08:42 -04:00
|
|
|
labelHTMLTemplate = _.template(
|
2016-03-19 20:19:51 -04:00
|
|
|
'<% _.each(labels, function(label){ %>
|
|
|
|
<a href="
|
|
|
|
#{["",issueURLSplit[1], issueURLSplit[2],""].join("/")}
|
|
|
|
issues?label_name=<%= label.title %>">
|
|
|
|
<span class="label color-label" style="background-color: <%= label.color %>; color: #FFFFFF">
|
|
|
|
<%= label.title %>
|
|
|
|
</span>
|
|
|
|
</a>
|
|
|
|
<% }); %>'
|
|
|
|
);
|
2016-03-14 15:37:16 -04:00
|
|
|
labelNoneHTMLTemplate = _.template('<div class="light">None</div>')
|
2016-03-13 15:08:42 -04:00
|
|
|
|
|
|
|
if newLabelField.length and $dropdown.hasClass 'js-extra-options'
|
|
|
|
$('.suggest-colors-dropdown a').on "click", (e) ->
|
2016-03-08 06:23:54 -05:00
|
|
|
e.preventDefault()
|
|
|
|
e.stopPropagation()
|
2016-03-23 09:29:41 -04:00
|
|
|
newColorField
|
|
|
|
.val($(this).data('color'))
|
|
|
|
.trigger('change')
|
|
|
|
$colorPreview
|
2016-03-18 06:12:52 -04:00
|
|
|
.css 'background-color', $(this).data('color')
|
2016-03-22 05:45:05 -04:00
|
|
|
.parent()
|
2016-03-08 06:23:54 -05:00
|
|
|
.addClass 'is-active'
|
|
|
|
|
2016-03-23 09:29:41 -04:00
|
|
|
# Cancel button takes back to first page
|
|
|
|
resetForm = ->
|
|
|
|
newLabelField
|
|
|
|
.val ''
|
|
|
|
.trigger 'change'
|
|
|
|
newColorField
|
|
|
|
.val ''
|
|
|
|
.trigger 'change'
|
|
|
|
$colorPreview
|
|
|
|
.css 'background-color', ''
|
|
|
|
.parent()
|
|
|
|
.removeClass 'is-active'
|
|
|
|
|
|
|
|
$('.dropdown-menu-back').on 'click', ->
|
|
|
|
resetForm()
|
|
|
|
|
2016-03-22 05:45:05 -04:00
|
|
|
$('.js-cancel-label-btn').on 'click', (e) ->
|
|
|
|
e.preventDefault()
|
|
|
|
e.stopPropagation()
|
2016-03-23 09:29:41 -04:00
|
|
|
resetForm()
|
2016-03-22 05:45:05 -04:00
|
|
|
$('.dropdown-menu-back', $dropdown.parent()).trigger 'click'
|
|
|
|
|
2016-03-23 09:29:41 -04:00
|
|
|
# Listen for change and keyup events on label and color field
|
|
|
|
# This allows us to enable the button when ready
|
|
|
|
enableLabelCreateButton = ->
|
2016-03-18 06:12:52 -04:00
|
|
|
if newLabelField.val() isnt '' and newColorField.val() isnt ''
|
2016-03-17 15:15:47 -04:00
|
|
|
$newLabelError.hide()
|
|
|
|
$('.js-new-label-btn').disable()
|
|
|
|
|
|
|
|
# Create new label with API
|
|
|
|
Api.newLabel projectId, {
|
|
|
|
name: newLabelField.val()
|
|
|
|
color: newColorField.val()
|
|
|
|
}, (label) ->
|
|
|
|
$('.js-new-label-btn').enable()
|
|
|
|
|
|
|
|
if label.message?
|
|
|
|
$newLabelError
|
|
|
|
.text label.message
|
|
|
|
.show()
|
|
|
|
else
|
|
|
|
$('.dropdown-menu-back', $dropdown.parent()).trigger 'click'
|
|
|
|
|
2016-03-23 09:29:41 -04:00
|
|
|
$newLabelCreateButton.enable()
|
|
|
|
else
|
|
|
|
$newLabelCreateButton.disable()
|
|
|
|
|
|
|
|
newLabelField.on 'keyup change', enableLabelCreateButton
|
|
|
|
|
|
|
|
newColorField.on 'keyup change', enableLabelCreateButton
|
|
|
|
|
|
|
|
# Send the API call to create the label
|
|
|
|
$newLabelCreateButton
|
|
|
|
.disable()
|
|
|
|
.on 'click', (e) ->
|
|
|
|
e.preventDefault()
|
|
|
|
e.stopPropagation()
|
|
|
|
|
|
|
|
if newLabelField.val() isnt '' and newColorField.val() isnt ''
|
|
|
|
$newLabelError.hide()
|
|
|
|
$('.js-new-label-btn').disable()
|
|
|
|
|
|
|
|
# Create new label with API
|
|
|
|
Api.newLabel projectId, {
|
|
|
|
name: newLabelField.val()
|
|
|
|
color: newColorField.val()
|
|
|
|
}, (label) ->
|
|
|
|
$('.js-new-label-btn').enable()
|
|
|
|
|
|
|
|
if label.message?
|
|
|
|
$newLabelError
|
|
|
|
.text label.message
|
|
|
|
.show()
|
|
|
|
else
|
|
|
|
$('.dropdown-menu-back', $dropdown.parent()).trigger 'click'
|
2016-03-07 12:17:11 -05:00
|
|
|
|
2016-03-17 15:15:47 -04:00
|
|
|
saveLabelData = ->
|
|
|
|
selected = $dropdown
|
|
|
|
.closest('.selectbox')
|
|
|
|
.find("input[name='#{$dropdown.data('field-name')}']")
|
|
|
|
.map(->
|
|
|
|
@value
|
|
|
|
).get()
|
|
|
|
data = {}
|
|
|
|
data[abilityName] = {}
|
|
|
|
data[abilityName].label_ids = selected
|
|
|
|
if not selected.length
|
|
|
|
data[abilityName].label_ids = ['']
|
|
|
|
$loading.fadeIn()
|
|
|
|
$.ajax(
|
|
|
|
type: 'PUT'
|
2016-03-19 11:39:34 -04:00
|
|
|
url: issueUpdateURL
|
2016-03-18 14:35:39 -04:00
|
|
|
dataType: 'JSON'
|
2016-03-17 15:15:47 -04:00
|
|
|
data: data
|
|
|
|
).done (data) ->
|
|
|
|
$loading.fadeOut()
|
|
|
|
$selectbox.hide()
|
|
|
|
if not data.labels.length
|
|
|
|
template = labelNoneHTMLTemplate()
|
|
|
|
else
|
|
|
|
template = labelHTMLTemplate(data)
|
|
|
|
href = $value
|
|
|
|
.show()
|
|
|
|
.html(template)
|
2016-03-19 11:39:34 -04:00
|
|
|
$value
|
|
|
|
.find('a')
|
|
|
|
.each((i) ->
|
|
|
|
setTimeout(=>
|
|
|
|
glAnimate($(@), 'pulse')
|
|
|
|
,200 * i
|
|
|
|
)
|
|
|
|
)
|
|
|
|
|
2016-03-17 15:15:47 -04:00
|
|
|
|
2016-03-18 06:12:52 -04:00
|
|
|
$dropdown.glDropdown(
|
2016-03-08 04:09:39 -05:00
|
|
|
data: (term, callback) ->
|
2016-03-08 07:32:04 -05:00
|
|
|
$.ajax(
|
|
|
|
url: labelUrl
|
|
|
|
).done (data) ->
|
2016-03-13 15:08:42 -04:00
|
|
|
if $dropdown.hasClass 'js-extra-options'
|
|
|
|
if showNo
|
|
|
|
data.unshift(
|
|
|
|
id: 0
|
|
|
|
title: 'No Label'
|
|
|
|
)
|
|
|
|
|
|
|
|
if showAny
|
|
|
|
data.unshift(
|
|
|
|
isAny: true
|
|
|
|
title: 'Any Label'
|
|
|
|
)
|
|
|
|
|
|
|
|
if data.length > 2
|
|
|
|
data.splice 2, 0, 'divider'
|
2016-03-08 07:32:04 -05:00
|
|
|
callback data
|
2016-03-13 15:08:42 -04:00
|
|
|
|
2016-03-07 12:17:11 -05:00
|
|
|
renderRow: (label) ->
|
2016-03-08 12:33:45 -05:00
|
|
|
if $.isArray(selectedLabel)
|
2016-03-18 06:12:52 -04:00
|
|
|
selected = ''
|
2016-03-08 12:33:45 -05:00
|
|
|
$.each selectedLabel, (i, selectedLbl) ->
|
|
|
|
selectedLbl = selectedLbl.trim()
|
2016-03-18 06:12:52 -04:00
|
|
|
if selected is '' and label.title is selectedLbl
|
|
|
|
selected = 'is-active'
|
2016-03-08 12:33:45 -05:00
|
|
|
else
|
2016-03-18 06:12:52 -04:00
|
|
|
selected = if label.title is selectedLabel then 'is-active' else ''
|
2016-03-08 03:38:16 -05:00
|
|
|
|
2016-03-18 13:11:51 -04:00
|
|
|
color = if label.color? then "<span class='dropdown-label-box' style='background-color: #{label.color}'></span>" else ""
|
|
|
|
|
2016-03-07 12:17:11 -05:00
|
|
|
"<li>
|
2016-03-08 03:38:16 -05:00
|
|
|
<a href='#' class='#{selected}'>
|
2016-03-18 13:11:51 -04:00
|
|
|
#{color}
|
2016-03-08 07:32:04 -05:00
|
|
|
#{label.title}
|
2016-03-07 12:17:11 -05:00
|
|
|
</a>
|
|
|
|
</li>"
|
|
|
|
filterable: true
|
|
|
|
search:
|
2016-03-08 10:18:01 -05:00
|
|
|
fields: ['title']
|
2016-03-07 12:17:11 -05:00
|
|
|
selectable: true
|
2016-03-12 15:37:02 -05:00
|
|
|
|
2016-03-15 14:20:22 -04:00
|
|
|
toggleLabel: (selected) ->
|
2016-03-18 06:12:52 -04:00
|
|
|
if selected and selected.title isnt 'Any Label'
|
2016-03-15 14:20:22 -04:00
|
|
|
selected.title
|
|
|
|
else
|
|
|
|
defaultLabel
|
2016-03-18 06:12:52 -04:00
|
|
|
fieldName: $dropdown.data('field-name')
|
2016-03-07 12:17:11 -05:00
|
|
|
id: (label) ->
|
2016-03-18 06:12:52 -04:00
|
|
|
if label.isAny?
|
|
|
|
''
|
2016-03-12 15:37:02 -05:00
|
|
|
else if $dropdown.hasClass "js-filter-submit"
|
2016-03-15 14:20:22 -04:00
|
|
|
label.title
|
2016-03-12 15:37:02 -05:00
|
|
|
else
|
|
|
|
label.id
|
|
|
|
|
|
|
|
hidden: ->
|
|
|
|
$selectbox.hide()
|
|
|
|
$value.show()
|
2016-03-19 11:39:34 -04:00
|
|
|
if $dropdown.hasClass 'js-multiselect'
|
|
|
|
saveLabelData()
|
2016-03-12 15:37:02 -05:00
|
|
|
|
2016-03-14 15:37:16 -04:00
|
|
|
multiSelect: $dropdown.hasClass 'js-multiselect'
|
|
|
|
|
2016-03-07 12:17:11 -05:00
|
|
|
clicked: ->
|
2016-03-18 06:12:52 -04:00
|
|
|
page = $('body').data 'page'
|
|
|
|
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()
|
2016-03-12 15:37:02 -05:00
|
|
|
else
|
2016-03-17 15:15:47 -04:00
|
|
|
if $dropdown.hasClass 'js-multiselect'
|
|
|
|
return
|
|
|
|
else
|
|
|
|
saveLabelData()
|
2016-03-07 12:17:11 -05:00
|
|
|
)
|