2017-01-10 18:02:20 -05:00
|
|
|
/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-underscore-dangle, prefer-arrow-callback, max-len, one-var, one-var-declaration-per-line, no-unused-vars, object-shorthand, comma-dangle, no-else-return, no-self-compare, consistent-return, no-param-reassign, no-shadow */
|
2016-12-14 00:26:26 -05:00
|
|
|
/* global Issuable */
|
|
|
|
/* global ListMilestone */
|
|
|
|
|
2017-03-17 13:21:25 -04:00
|
|
|
import Vue from 'vue';
|
|
|
|
|
2016-07-24 16:45:11 -04:00
|
|
|
(function() {
|
|
|
|
this.MilestoneSelect = (function() {
|
2017-02-01 12:02:17 -05:00
|
|
|
function MilestoneSelect(currentProject, els) {
|
2017-02-02 10:12:44 -05:00
|
|
|
var _this, $els;
|
2016-07-24 16:45:11 -04:00
|
|
|
if (currentProject != null) {
|
|
|
|
_this = this;
|
|
|
|
this.currentProject = JSON.parse(currentProject);
|
|
|
|
}
|
2017-02-01 12:02:17 -05:00
|
|
|
|
|
|
|
$els = $(els);
|
|
|
|
|
|
|
|
if (!els) {
|
2017-02-03 07:51:04 -05:00
|
|
|
$els = $('.js-milestone-select');
|
2017-02-01 12:02:17 -05:00
|
|
|
}
|
|
|
|
|
2017-02-02 10:12:44 -05:00
|
|
|
$els.each(function(i, dropdown) {
|
2017-03-10 14:01:05 -05:00
|
|
|
var $block, $dropdown, $loading, $selectbox, $sidebarCollapsedValue, $value, abilityName, collapsedSidebarLabelTemplate, defaultLabel, issuableId, issueUpdateURL, milestoneLinkNoneTemplate, milestoneLinkTemplate, milestonesUrl, projectId, selectedMilestone, showAny, showNo, showUpcoming, showStarted, useId, showMenuAbove;
|
2016-07-24 16:45:11 -04:00
|
|
|
$dropdown = $(dropdown);
|
|
|
|
projectId = $dropdown.data('project-id');
|
|
|
|
milestonesUrl = $dropdown.data('milestones');
|
|
|
|
issueUpdateURL = $dropdown.data('issueUpdate');
|
|
|
|
selectedMilestone = $dropdown.data('selected');
|
|
|
|
showNo = $dropdown.data('show-no');
|
|
|
|
showAny = $dropdown.data('show-any');
|
2016-10-04 15:21:06 -04:00
|
|
|
showMenuAbove = $dropdown.data('showMenuAbove');
|
2016-07-24 16:45:11 -04:00
|
|
|
showUpcoming = $dropdown.data('show-upcoming');
|
2017-03-10 14:01:05 -05:00
|
|
|
showStarted = $dropdown.data('show-started');
|
2016-07-24 16:45:11 -04:00
|
|
|
useId = $dropdown.data('use-id');
|
|
|
|
defaultLabel = $dropdown.data('default-label');
|
|
|
|
issuableId = $dropdown.data('issuable-id');
|
|
|
|
abilityName = $dropdown.data('ability-name');
|
|
|
|
$selectbox = $dropdown.closest('.selectbox');
|
|
|
|
$block = $selectbox.closest('.block');
|
|
|
|
$sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon');
|
|
|
|
$value = $block.find('.value');
|
|
|
|
$loading = $block.find('.block-loading').fadeOut();
|
|
|
|
if (issueUpdateURL) {
|
2017-02-23 18:55:01 -05:00
|
|
|
milestoneLinkTemplate = _.template('<a href="/<%- full_path %>/milestones/<%- iid %>" class="bold has-tooltip" data-container="body" title="<%- remaining %>"><%- title %></a>');
|
2016-07-24 16:45:11 -04:00
|
|
|
milestoneLinkNoneTemplate = '<span class="no-value">None</span>';
|
|
|
|
collapsedSidebarLabelTemplate = _.template('<span class="has-tooltip" data-container="body" title="<%- remaining %>" data-placement="left"> <%- title %> </span>');
|
|
|
|
}
|
|
|
|
return $dropdown.glDropdown({
|
2016-10-04 15:21:06 -04:00
|
|
|
showMenuAbove: showMenuAbove,
|
2016-07-24 16:45:11 -04:00
|
|
|
data: function(term, callback) {
|
|
|
|
return $.ajax({
|
|
|
|
url: milestonesUrl
|
|
|
|
}).done(function(data) {
|
2016-10-04 10:52:35 -04:00
|
|
|
var extraOptions = [];
|
2016-07-24 16:45:11 -04:00
|
|
|
if (showAny) {
|
|
|
|
extraOptions.push({
|
|
|
|
id: 0,
|
|
|
|
name: '',
|
|
|
|
title: 'Any Milestone'
|
|
|
|
});
|
|
|
|
}
|
|
|
|
if (showNo) {
|
|
|
|
extraOptions.push({
|
|
|
|
id: -1,
|
|
|
|
name: 'No Milestone',
|
|
|
|
title: 'No Milestone'
|
|
|
|
});
|
|
|
|
}
|
|
|
|
if (showUpcoming) {
|
|
|
|
extraOptions.push({
|
|
|
|
id: -2,
|
|
|
|
name: '#upcoming',
|
|
|
|
title: 'Upcoming'
|
|
|
|
});
|
|
|
|
}
|
2017-03-10 14:01:05 -05:00
|
|
|
if (showStarted) {
|
|
|
|
extraOptions.push({
|
|
|
|
id: -3,
|
|
|
|
name: '#started',
|
|
|
|
title: 'Started'
|
|
|
|
});
|
|
|
|
}
|
2016-08-30 06:21:29 -04:00
|
|
|
if (extraOptions.length) {
|
2016-07-24 16:45:11 -04:00
|
|
|
extraOptions.push('divider');
|
|
|
|
}
|
2016-10-04 15:21:06 -04:00
|
|
|
|
|
|
|
callback(extraOptions.concat(data));
|
|
|
|
if (showMenuAbove) {
|
|
|
|
$dropdown.data('glDropdown').positionMenuAbove();
|
|
|
|
}
|
2016-07-24 16:45:11 -04:00
|
|
|
});
|
|
|
|
},
|
|
|
|
filterable: true,
|
|
|
|
search: {
|
|
|
|
fields: ['title']
|
|
|
|
},
|
|
|
|
selectable: true,
|
2016-08-30 06:21:29 -04:00
|
|
|
toggleLabel: function(selected, el, e) {
|
|
|
|
if (selected && 'id' in selected && $(el).hasClass('is-active')) {
|
2016-07-24 16:45:11 -04:00
|
|
|
return selected.title;
|
|
|
|
} else {
|
|
|
|
return defaultLabel;
|
|
|
|
}
|
|
|
|
},
|
2016-08-30 06:21:29 -04:00
|
|
|
defaultLabel: defaultLabel,
|
2016-07-24 16:45:11 -04:00
|
|
|
fieldName: $dropdown.data('field-name'),
|
|
|
|
text: function(milestone) {
|
|
|
|
return _.escape(milestone.title);
|
|
|
|
},
|
|
|
|
id: function(milestone) {
|
2016-08-30 06:21:29 -04:00
|
|
|
if (!useId && !$dropdown.is('.js-issuable-form-dropdown')) {
|
2016-07-24 16:45:11 -04:00
|
|
|
return milestone.name;
|
|
|
|
} else {
|
|
|
|
return milestone.id;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
isSelected: function(milestone) {
|
|
|
|
return milestone.name === selectedMilestone;
|
|
|
|
},
|
|
|
|
hidden: function() {
|
|
|
|
$selectbox.hide();
|
2016-07-26 23:32:10 -04:00
|
|
|
// display:block overrides the hide-collapse rule
|
2016-07-24 16:45:11 -04:00
|
|
|
return $value.css('display', '');
|
|
|
|
},
|
2016-10-06 04:03:10 -04:00
|
|
|
vue: $dropdown.hasClass('js-issue-board-sidebar'),
|
2016-08-05 12:24:16 -04:00
|
|
|
clicked: function(selected, $el, e) {
|
2017-02-01 12:02:17 -05:00
|
|
|
var data, isIssueIndex, isMRIndex, page, boardsStore;
|
2016-07-24 16:45:11 -04:00
|
|
|
page = $('body').data('page');
|
|
|
|
isIssueIndex = page === 'projects:issues:index';
|
|
|
|
isMRIndex = (page === page && page === 'projects:merge_requests:index');
|
2016-08-30 06:21:29 -04:00
|
|
|
if ($dropdown.hasClass('js-filter-bulk-update') || $dropdown.hasClass('js-issuable-form-dropdown')) {
|
|
|
|
e.preventDefault();
|
2016-07-24 16:45:11 -04:00
|
|
|
return;
|
|
|
|
}
|
2017-02-01 12:02:17 -05:00
|
|
|
|
2017-03-08 09:53:18 -05:00
|
|
|
if ($dropdown.closest('.add-issues-modal').length) {
|
2017-02-01 12:02:17 -05:00
|
|
|
boardsStore = gl.issueBoards.ModalStore.store.filter;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (boardsStore) {
|
|
|
|
boardsStore[$dropdown.data('field-name')] = selected.name;
|
2016-08-05 12:24:16 -04:00
|
|
|
e.preventDefault();
|
2016-08-05 10:42:27 -04:00
|
|
|
} else if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) {
|
2016-07-24 16:45:11 -04:00
|
|
|
if (selected.name != null) {
|
|
|
|
selectedMilestone = selected.name;
|
|
|
|
} else {
|
|
|
|
selectedMilestone = '';
|
|
|
|
}
|
|
|
|
return Issuable.filterResults($dropdown.closest('form'));
|
|
|
|
} else if ($dropdown.hasClass('js-filter-submit')) {
|
|
|
|
return $dropdown.closest('form').submit();
|
2016-10-05 07:20:59 -04:00
|
|
|
} else if ($dropdown.hasClass('js-issue-board-sidebar')) {
|
|
|
|
if (selected.id !== -1) {
|
|
|
|
Vue.set(gl.issueBoards.BoardsStore.detail.issue, 'milestone', new ListMilestone({
|
|
|
|
id: selected.id,
|
|
|
|
title: selected.name
|
|
|
|
}));
|
|
|
|
} else {
|
|
|
|
Vue.delete(gl.issueBoards.BoardsStore.detail.issue, 'milestone');
|
|
|
|
}
|
|
|
|
|
|
|
|
$dropdown.trigger('loading.gl.dropdown');
|
2017-03-15 08:08:01 -04:00
|
|
|
$loading.removeClass('hidden').fadeIn();
|
2016-10-05 07:20:59 -04:00
|
|
|
|
2016-10-20 03:54:33 -04:00
|
|
|
gl.issueBoards.BoardsStore.detail.issue.update($dropdown.attr('data-issue-update'))
|
2016-10-05 07:20:59 -04:00
|
|
|
.then(function () {
|
|
|
|
$dropdown.trigger('loaded.gl.dropdown');
|
|
|
|
$loading.fadeOut();
|
|
|
|
});
|
2016-07-24 16:45:11 -04:00
|
|
|
} else {
|
|
|
|
selected = $selectbox.find('input[type="hidden"]').val();
|
|
|
|
data = {};
|
|
|
|
data[abilityName] = {};
|
|
|
|
data[abilityName].milestone_id = selected != null ? selected : null;
|
2017-03-15 08:08:01 -04:00
|
|
|
$loading.removeClass('hidden').fadeIn();
|
2016-07-24 16:45:11 -04:00
|
|
|
$dropdown.trigger('loading.gl.dropdown');
|
|
|
|
return $.ajax({
|
|
|
|
type: 'PUT',
|
|
|
|
url: issueUpdateURL,
|
|
|
|
data: data
|
|
|
|
}).done(function(data) {
|
|
|
|
$dropdown.trigger('loaded.gl.dropdown');
|
|
|
|
$loading.fadeOut();
|
|
|
|
$selectbox.hide();
|
|
|
|
$value.css('display', '');
|
|
|
|
if (data.milestone != null) {
|
2017-02-23 18:55:01 -05:00
|
|
|
data.milestone.full_path = _this.currentProject.full_path;
|
2016-09-08 14:57:24 -04:00
|
|
|
data.milestone.remaining = gl.utils.timeFor(data.milestone.due_date);
|
2016-07-24 16:45:11 -04:00
|
|
|
$value.html(milestoneLinkTemplate(data.milestone));
|
|
|
|
return $sidebarCollapsedValue.find('span').html(collapsedSidebarLabelTemplate(data.milestone));
|
|
|
|
} else {
|
|
|
|
$value.html(milestoneLinkNoneTemplate);
|
|
|
|
return $sidebarCollapsedValue.find('span').text('No');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
return MilestoneSelect;
|
|
|
|
})();
|
2017-02-10 01:50:50 -05:00
|
|
|
}).call(window);
|