debian-mirror-gitlab/app/assets/javascripts/labels_select.js

503 lines
18 KiB
JavaScript
Raw Normal View History

2017-08-17 22:00:37 +05:30
/* eslint-disable no-useless-return, func-names, space-before-function-paren, wrap-iife, no-var, no-underscore-dangle, prefer-arrow-callback, max-len, one-var, no-unused-vars, one-var-declaration-per-line, prefer-template, no-new, consistent-return, object-shorthand, comma-dangle, no-shadow, no-param-reassign, brace-style, vars-on-top, quotes, no-lonely-if, no-else-return, dot-notation, no-empty, no-return-assign, camelcase, prefer-spread */
/* global Issuable */
/* global ListLabel */
2017-09-10 17:25:29 +05:30
import _ from 'underscore';
2018-03-17 18:26:18 +05:30
import { __ } from './locale';
import axios from './lib/utils/axios_utils';
2017-09-10 17:25:29 +05:30
import IssuableBulkUpdateActions from './issuable_bulk_update_actions';
import DropdownUtils from './filtered_search/dropdown_utils';
2018-03-17 18:26:18 +05:30
import CreateLabelDropdown from './create_label';
import flash from './flash';
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
export default class LabelsSelect {
constructor(els, options = {}) {
var _this, $els;
_this = this;
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
$els = $(els);
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
if (!els) {
$els = $('.js-label-select');
}
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
$els.each(function(i, dropdown) {
2018-03-27 19:54:05 +05:30
var $block, $colorPreview, $dropdown, $form, $loading, $selectbox, $sidebarCollapsedValue, $value, abilityName, defaultLabel, enableLabelCreateButton, issueURLSplit, issueUpdateURL, labelUrl, namespacePath, projectPath, saveLabelData, selectedLabel, showAny, showNo, $sidebarLabelTooltip, initialSelected, $toggleText, fieldName, useId, propertyName, showMenuAbove, $container, $dropdownContainer;
2018-03-17 18:26:18 +05:30
$dropdown = $(dropdown);
$dropdownContainer = $dropdown.closest('.labels-filter');
$toggleText = $dropdown.find('.dropdown-toggle-text');
2018-03-27 19:54:05 +05:30
namespacePath = $dropdown.data('namespacePath');
projectPath = $dropdown.data('projectPath');
2018-03-17 18:26:18 +05:30
labelUrl = $dropdown.data('labels');
issueUpdateURL = $dropdown.data('issueUpdate');
selectedLabel = $dropdown.data('selected');
if ((selectedLabel != null) && !$dropdown.hasClass('js-multiselect')) {
selectedLabel = selectedLabel.split(',');
}
2018-03-27 19:54:05 +05:30
showNo = $dropdown.data('showNo');
showAny = $dropdown.data('showAny');
2018-03-17 18:26:18 +05:30
showMenuAbove = $dropdown.data('showMenuAbove');
2018-03-27 19:54:05 +05:30
defaultLabel = $dropdown.data('defaultLabel');
abilityName = $dropdown.data('abilityName');
2018-03-17 18:26:18 +05:30
$selectbox = $dropdown.closest('.selectbox');
$block = $selectbox.closest('.block');
$form = $dropdown.closest('form, .js-issuable-update');
$sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon span');
$sidebarLabelTooltip = $block.find('.js-sidebar-labels-tooltip');
$value = $block.find('.value');
$loading = $block.find('.block-loading').fadeOut();
2018-03-27 19:54:05 +05:30
fieldName = $dropdown.data('fieldName');
2018-03-17 18:26:18 +05:30
useId = $dropdown.is('.js-issuable-form-dropdown, .js-filter-bulk-update, .js-label-sidebar-dropdown');
propertyName = useId ? 'id' : 'title';
initialSelected = $selectbox
2018-03-27 19:54:05 +05:30
.find('input[name="' + $dropdown.data('fieldName') + '"]')
2018-03-17 18:26:18 +05:30
.map(function () {
return this.value;
}).get();
const handleClick = options.handleClick;
2016-09-13 17:45:13 +05:30
2018-03-17 18:26:18 +05:30
$sidebarLabelTooltip.tooltip();
2016-09-13 17:45:13 +05:30
2018-03-17 18:26:18 +05:30
if ($dropdown.closest('.dropdown').find('.dropdown-new-label').length) {
new CreateLabelDropdown($dropdown.closest('.dropdown').find('.dropdown-new-label'), namespacePath, projectPath);
}
2016-09-13 17:45:13 +05:30
2018-03-17 18:26:18 +05:30
saveLabelData = function() {
var data, selected;
selected = $dropdown.closest('.selectbox').find("input[name='" + fieldName + "']").map(function() {
return this.value;
}).get();
2016-10-01 15:18:49 +05:30
2018-03-17 18:26:18 +05:30
if (_.isEqual(initialSelected, selected)) return;
initialSelected = selected;
2016-10-01 15:18:49 +05:30
2018-03-17 18:26:18 +05:30
data = {};
data[abilityName] = {};
data[abilityName].label_ids = selected;
if (!selected.length) {
data[abilityName].label_ids = [''];
}
$loading.removeClass('hidden').fadeIn();
$dropdown.trigger('loading.gl.dropdown');
axios.put(issueUpdateURL, data)
.then(({ data }) => {
2016-09-13 17:45:13 +05:30
var labelCount, template, labelTooltipTitle, labelTitles;
$loading.fadeOut();
$dropdown.trigger('loaded.gl.dropdown');
$selectbox.hide();
2018-03-27 19:54:05 +05:30
data.issueUpdateURL = issueUpdateURL;
2016-09-13 17:45:13 +05:30
labelCount = 0;
2018-03-27 19:54:05 +05:30
if (data.labels.length && issueUpdateURL) {
template = LabelsSelect.getLabelTemplate({
labels: data.labels,
issueUpdateURL,
});
2016-09-13 17:45:13 +05:30
labelCount = data.labels.length;
2016-11-03 12:29:30 +05:30
}
else {
2018-03-27 19:54:05 +05:30
template = '<span class="no-value">None</span>';
2016-09-13 17:45:13 +05:30
}
$value.removeAttr('style').html(template);
$sidebarCollapsedValue.text(labelCount);
if (data.labels.length) {
labelTitles = data.labels.map(function(label) {
return label.title;
});
if (labelTitles.length > 5) {
labelTitles = labelTitles.slice(0, 5);
labelTitles.push('and ' + (data.labels.length - 5) + ' more');
}
labelTooltipTitle = labelTitles.join(', ');
2016-11-03 12:29:30 +05:30
}
else {
2016-09-13 17:45:13 +05:30
labelTooltipTitle = '';
$sidebarLabelTooltip.tooltip('destroy');
}
$sidebarLabelTooltip
.attr('title', labelTooltipTitle)
.tooltip('fixTitle');
$('.has-tooltip', $value).tooltip({
container: 'body'
});
2018-03-17 18:26:18 +05:30
})
.catch(() => flash(__('Error saving label update.')));
};
$dropdown.glDropdown({
showMenuAbove: showMenuAbove,
data: function(term, callback) {
axios.get(labelUrl)
.then((res) => {
let data = _.chain(res.data).groupBy(function(label) {
2016-09-13 17:45:13 +05:30
return label.title;
}).map(function(label) {
var color;
color = _.map(label, function(dup) {
return dup.color;
});
return {
id: label[0].id,
title: label[0].title,
color: color,
duplicate: color.length > 1
};
}).value();
if ($dropdown.hasClass('js-extra-options')) {
2016-11-03 12:29:30 +05:30
var extraData = [];
2016-09-13 17:45:13 +05:30
if (showNo) {
2016-11-03 12:29:30 +05:30
extraData.unshift({
2016-09-13 17:45:13 +05:30
id: 0,
title: 'No Label'
});
}
if (showAny) {
2016-11-03 12:29:30 +05:30
extraData.unshift({
2016-09-13 17:45:13 +05:30
isAny: true,
title: 'Any Label'
});
}
2016-11-03 12:29:30 +05:30
if (extraData.length) {
extraData.push('divider');
data = extraData.concat(data);
2016-09-13 17:45:13 +05:30
}
}
2016-11-03 12:29:30 +05:30
callback(data);
if (showMenuAbove) {
$dropdown.data('glDropdown').positionMenuAbove();
}
2018-03-17 18:26:18 +05:30
})
.catch(() => flash(__('Error fetching labels.')));
},
renderRow: function(label, instance) {
var $a, $li, color, colorEl, indeterminate, removesAll, selectedClass, spacing, i, marked, dropdownName, dropdownValue;
$li = $('<li>');
$a = $('<a href="#">');
selectedClass = [];
removesAll = label.id <= 0 || (label.id == null);
if ($dropdown.hasClass('js-filter-bulk-update')) {
indeterminate = $dropdown.data('indeterminate') || [];
marked = $dropdown.data('marked') || [];
if (indeterminate.indexOf(label.id) !== -1) {
selectedClass.push('is-indeterminate');
}
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
if (marked.indexOf(label.id) !== -1) {
// Remove is-indeterminate class if the item will be marked as active
i = selectedClass.indexOf('is-indeterminate');
if (i !== -1) {
selectedClass.splice(i, 1);
2017-08-17 22:00:37 +05:30
}
2018-03-17 18:26:18 +05:30
selectedClass.push('is-active');
2016-09-13 17:45:13 +05:30
}
2018-03-17 18:26:18 +05:30
} else {
if (this.id(label)) {
dropdownName = $dropdown.data('fieldName');
dropdownValue = this.id(label).toString().replace(/'/g, '\\\'');
if ($form.find("input[type='hidden'][name='" + dropdownName + "'][value='" + dropdownValue + "']").length) {
selectedClass.push('is-active');
2016-09-13 17:45:13 +05:30
}
}
2016-11-03 12:29:30 +05:30
2018-03-17 18:26:18 +05:30
if ($dropdown.hasClass('js-multiselect') && removesAll) {
selectedClass.push('dropdown-clear-active');
2016-11-03 12:29:30 +05:30
}
2018-03-17 18:26:18 +05:30
}
if (label.duplicate) {
2018-03-27 19:54:05 +05:30
color = DropdownUtils.duplicateLabelColor(label.color);
2018-03-17 18:26:18 +05:30
}
else {
if (label.color != null) {
color = label.color[0];
2016-09-13 17:45:13 +05:30
}
2018-03-17 18:26:18 +05:30
}
if (color) {
colorEl = "<span class='dropdown-label-box' style='background: " + color + "'></span>";
}
else {
colorEl = '';
}
// We need to identify which items are actually labels
if (label.id) {
selectedClass.push('label-item');
$a.attr('data-label-id', label.id);
}
$a.addClass(selectedClass.join(' ')).html(`${colorEl} ${_.escape(label.title)}`);
// Return generated html
return $li.html($a).prop('outerHTML');
},
search: {
fields: ['title']
},
selectable: true,
filterable: true,
selected: $dropdown.data('selected') || [],
toggleLabel: function(selected, el) {
2018-03-27 19:54:05 +05:30
var $dropdownParent = $dropdown.parent();
var $dropdownInputField = $dropdownParent.find('.dropdown-input-field');
2018-03-17 18:26:18 +05:30
var isSelected = el !== null ? el.hasClass('is-active') : false;
var title = selected.title;
var selectedLabels = this.selected;
2018-03-27 19:54:05 +05:30
if ($dropdownInputField.length && $dropdownInputField.val().length) {
$dropdownParent.find('.dropdown-input-clear').trigger('click');
}
2018-03-17 18:26:18 +05:30
if (selected.id === 0) {
this.selected = [];
return 'No Label';
}
else if (isSelected) {
this.selected.push(title);
}
else {
var index = this.selected.indexOf(title);
this.selected.splice(index, 1);
}
2016-11-03 12:29:30 +05:30
2018-03-17 18:26:18 +05:30
if (selectedLabels.length === 1) {
return selectedLabels;
}
else if (selectedLabels.length) {
return selectedLabels[0] + " +" + (selectedLabels.length - 1) + " more";
}
else {
return defaultLabel;
}
},
2018-03-27 19:54:05 +05:30
fieldName: $dropdown.data('fieldName'),
2018-03-17 18:26:18 +05:30
id: function(label) {
if (label.id <= 0) return label.title;
2016-11-03 12:29:30 +05:30
2018-03-17 18:26:18 +05:30
if ($dropdown.hasClass('js-issuable-form-dropdown')) {
return label.id;
}
2016-11-03 12:29:30 +05:30
2018-03-17 18:26:18 +05:30
if ($dropdown.hasClass("js-filter-submit") && (label.isAny == null)) {
return label.title;
}
else {
return label.id;
}
},
hidden: function() {
var isIssueIndex, isMRIndex, page, selectedLabels;
page = $('body').attr('data-page');
isIssueIndex = page === 'projects:issues:index';
isMRIndex = page === 'projects:merge_requests:index';
$selectbox.hide();
// display:block overrides the hide-collapse rule
$value.removeAttr('style');
if ($dropdown.hasClass('js-issuable-form-dropdown')) {
return;
}
2016-11-03 12:29:30 +05:30
2018-03-17 18:26:18 +05:30
if ($('html').hasClass('issue-boards-page')) {
return;
}
if ($dropdown.hasClass('js-multiselect')) {
if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) {
selectedLabels = $dropdown.closest('form').find("input:hidden[name='" + ($dropdown.data('fieldName')) + "']");
Issuable.filterResults($dropdown.closest('form'));
2016-09-13 17:45:13 +05:30
}
2018-03-17 18:26:18 +05:30
else if ($dropdown.hasClass('js-filter-submit')) {
$dropdown.closest('form').submit();
2016-09-13 17:45:13 +05:30
}
2018-03-17 18:26:18 +05:30
else {
if (!$dropdown.hasClass('js-filter-bulk-update')) {
saveLabelData();
}
2016-11-03 12:29:30 +05:30
}
2018-03-17 18:26:18 +05:30
}
},
multiSelect: $dropdown.hasClass('js-multiselect'),
vue: $dropdown.hasClass('js-issue-board-sidebar'),
2018-03-27 19:54:05 +05:30
clicked: function (clickEvent) {
const { $el, e, isMarking } = clickEvent;
const label = clickEvent.selectedObj;
2018-03-17 18:26:18 +05:30
var isIssueIndex, isMRIndex, page, boardsModel;
var fadeOutLoader = () => {
$loading.fadeOut();
};
2016-11-03 12:29:30 +05:30
2018-03-17 18:26:18 +05:30
page = $('body').attr('data-page');
isIssueIndex = page === 'projects:issues:index';
isMRIndex = page === 'projects:merge_requests:index';
2016-11-03 12:29:30 +05:30
2018-03-17 18:26:18 +05:30
if ($dropdown.parent().find('.is-active:not(.dropdown-clear-active)').length) {
$dropdown.parent()
.find('.dropdown-clear-active')
.removeClass('is-active');
}
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
if ($dropdown.hasClass('js-issuable-form-dropdown')) {
return;
}
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
if ($dropdown.hasClass('js-filter-bulk-update')) {
_this.enableBulkLabelDropdown();
_this.setDropdownData($dropdown, isMarking, label.id);
return;
}
if ($dropdown.closest('.add-issues-modal').length) {
boardsModel = gl.issueBoards.ModalStore.store.filter;
}
2016-09-13 17:45:13 +05:30
2018-03-17 18:26:18 +05:30
if (boardsModel) {
if (label.isAny) {
boardsModel['label_name'] = [];
} else if ($el.hasClass('is-active')) {
boardsModel['label_name'].push(label.title);
2016-11-03 12:29:30 +05:30
}
2018-03-17 18:26:18 +05:30
e.preventDefault();
return;
}
else if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) {
if (!$dropdown.hasClass('js-multiselect')) {
selectedLabel = label.title;
return Issuable.filterResults($dropdown.closest('form'));
2016-11-03 12:29:30 +05:30
}
2018-03-17 18:26:18 +05:30
}
else if ($dropdown.hasClass('js-filter-submit')) {
return $dropdown.closest('form').submit();
}
else if ($dropdown.hasClass('js-issue-board-sidebar')) {
if ($el.hasClass('is-active')) {
gl.issueBoards.BoardsStore.detail.issue.labels.push(new ListLabel({
id: label.id,
title: label.title,
color: label.color[0],
textColor: '#fff'
}));
2016-11-03 12:29:30 +05:30
}
2018-03-17 18:26:18 +05:30
else {
var labels = gl.issueBoards.BoardsStore.detail.issue.labels;
labels = labels.filter(function (selectedLabel) {
return selectedLabel.id !== label.id;
});
gl.issueBoards.BoardsStore.detail.issue.labels = labels;
}
$loading.fadeIn();
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
gl.issueBoards.BoardsStore.detail.issue.update($dropdown.attr('data-issue-update'))
.then(fadeOutLoader)
.catch(fadeOutLoader);
}
else if (handleClick) {
e.preventDefault();
handleClick(label);
}
else {
if ($dropdown.hasClass('js-multiselect')) {
2017-08-17 22:00:37 +05:30
}
2016-11-03 12:29:30 +05:30
else {
2018-03-17 18:26:18 +05:30
return saveLabelData();
2016-09-13 17:45:13 +05:30
}
2018-03-17 18:26:18 +05:30
}
},
2016-09-13 17:45:13 +05:30
});
2018-03-17 18:26:18 +05:30
// Set dropdown data
_this.setOriginalDropdownData($dropdownContainer, $dropdown);
});
this.bindEvents();
}
2018-03-27 19:54:05 +05:30
static getLabelTemplate(tplData) {
// We could use ES6 template string here
// and properly indent markup for readability
// but that also introduces unintended white-space
// so best approach is to use traditional way of
// concatenation
// see: http://2ality.com/2016/05/template-literal-whitespace.html#joining-arrays
const tpl = _.template([
'<% _.each(labels, function(label){ %>',
'<a href="<%- issueUpdateURL.slice(0, issueUpdateURL.lastIndexOf("/")) %>?label_name[]=<%- encodeURIComponent(label.title) %>">',
'<span class="label has-tooltip color-label" title="<%- label.description %>" style="background-color: <%- label.color %>; color: <%- label.text_color %>;">',
'<%- label.title %>',
'</span>',
'</a>',
'<% }); %>',
].join(''));
return tpl(tplData);
}
2018-03-17 18:26:18 +05:30
bindEvents() {
return $('body').on('change', '.selected_issue', this.onSelectCheckboxIssue);
}
// eslint-disable-next-line class-methods-use-this
onSelectCheckboxIssue() {
if ($('.selected_issue:checked').length) {
return;
}
return $('.issues-bulk-update .labels-filter .dropdown-toggle-text').text('Label');
}
// eslint-disable-next-line class-methods-use-this
enableBulkLabelDropdown() {
IssuableBulkUpdateActions.willUpdateLabels = true;
}
// eslint-disable-next-line class-methods-use-this
setDropdownData($dropdown, isMarking, value) {
var i, markedIds, unmarkedIds, indeterminateIds;
markedIds = $dropdown.data('marked') || [];
unmarkedIds = $dropdown.data('unmarked') || [];
indeterminateIds = $dropdown.data('indeterminate') || [];
if (isMarking) {
markedIds.push(value);
i = indeterminateIds.indexOf(value);
if (i > -1) {
indeterminateIds.splice(i, 1);
2016-09-13 17:45:13 +05:30
}
2018-03-17 18:26:18 +05:30
i = unmarkedIds.indexOf(value);
if (i > -1) {
unmarkedIds.splice(i, 1);
}
} else {
// If marked item (not common) is unmarked
i = markedIds.indexOf(value);
if (i > -1) {
markedIds.splice(i, 1);
2017-08-17 22:00:37 +05:30
}
2018-03-17 18:26:18 +05:30
// If an indeterminate item is being unmarked
if (IssuableBulkUpdateActions.getOriginalIndeterminateIds().indexOf(value) > -1) {
unmarkedIds.push(value);
}
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
// If a marked item is being unmarked
// (a marked item could also be a label that is present in all selection)
if (IssuableBulkUpdateActions.getOriginalCommonIds().indexOf(value) > -1) {
unmarkedIds.push(value);
}
}
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
$dropdown.data('marked', markedIds);
$dropdown.data('unmarked', unmarkedIds);
$dropdown.data('indeterminate', indeterminateIds);
}
// eslint-disable-next-line class-methods-use-this
setOriginalDropdownData($container, $dropdown) {
const labels = [];
$container.find('[name="label_name[]"]').map(function() {
return labels.push(this.value);
});
$dropdown.data('marked', labels);
}
}