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

556 lines
20 KiB
JavaScript
Raw Normal View History

2021-04-29 21:17:54 +05:30
/* eslint-disable func-names, no-underscore-dangle, no-new, consistent-return, no-shadow, no-param-reassign, no-lonely-if, no-empty */
2017-08-17 22:00:37 +05:30
/* global Issuable */
/* global ListLabel */
2018-05-09 12:01:36 +05:30
import $ from 'jquery';
2020-10-24 23:57:45 +05:30
import { difference, isEqual, escape, sortBy, template, union } from 'lodash';
2021-03-11 19:13:27 +05:30
import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
import { isScopedLabel } from '~/lib/utils/common_utils';
import boardsStore from './boards/stores/boards_store';
2018-03-17 18:26:18 +05:30
import CreateLabelDropdown from './create_label';
2020-10-24 23:57:45 +05:30
import { deprecatedCreateFlash as flash } from './flash';
2021-03-11 19:13:27 +05:30
import IssuableBulkUpdateActions from './issuable_bulk_update_actions';
import axios from './lib/utils/axios_utils';
import { sprintf, __ } from './locale';
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
export default class LabelsSelect {
constructor(els, options = {}) {
2019-12-26 22:10:19 +05:30
const _this = this;
2017-08-17 22:00:37 +05:30
2019-12-26 22:10:19 +05:30
let $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
2019-12-21 20:55:43 +05:30
$els.each((i, dropdown) => {
2019-12-26 22:10:19 +05:30
const $dropdown = $(dropdown);
const $dropdownContainer = $dropdown.closest('.labels-filter');
const namespacePath = $dropdown.data('namespacePath');
const projectPath = $dropdown.data('projectPath');
const issueUpdateURL = $dropdown.data('issueUpdate');
let selectedLabel = $dropdown.data('selected');
2018-12-13 13:39:08 +05:30
if (selectedLabel != null && !$dropdown.hasClass('js-multiselect')) {
2018-03-17 18:26:18 +05:30
selectedLabel = selectedLabel.split(',');
}
2019-12-26 22:10:19 +05:30
const showNo = $dropdown.data('showNo');
const showAny = $dropdown.data('showAny');
const showMenuAbove = $dropdown.data('showMenuAbove');
const defaultLabel = $dropdown.data('defaultLabel') || __('Label');
const abilityName = $dropdown.data('abilityName');
const $selectbox = $dropdown.closest('.selectbox');
const $block = $selectbox.closest('.block');
const $form = $dropdown.closest('form, .js-issuable-update');
const $sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon span');
const $value = $block.find('.value');
const $dropdownMenu = $dropdown.parent().find('.dropdown-menu');
2021-02-22 17:27:13 +05:30
const $loading = $block.find('.block-loading').addClass('gl-display-none');
2019-12-26 22:10:19 +05:30
const fieldName = $dropdown.data('fieldName');
let initialSelected = $selectbox
2019-12-21 20:55:43 +05:30
.find(`input[name="${$dropdown.data('fieldName')}"]`)
2021-03-08 18:12:59 +05:30
.map(function () {
2018-03-17 18:26:18 +05:30
return this.value;
2018-12-13 13:39:08 +05:30
})
.get();
2019-07-07 11:18:12 +05:30
const scopedLabels = $dropdown.data('scopedLabels');
2018-11-08 19:23:39 +05:30
const { handleClick } = options;
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) {
2018-12-13 13:39:08 +05:30
new CreateLabelDropdown(
$dropdown.closest('.dropdown').find('.dropdown-new-label'),
namespacePath,
projectPath,
);
2018-03-17 18:26:18 +05:30
}
2016-09-13 17:45:13 +05:30
2021-03-08 18:12:59 +05:30
const saveLabelData = function () {
2019-12-26 22:10:19 +05:30
const selected = $dropdown
2018-12-13 13:39:08 +05:30
.closest('.selectbox')
2019-12-21 20:55:43 +05:30
.find(`input[name='${fieldName}']`)
2021-03-08 18:12:59 +05:30
.map(function () {
2018-12-13 13:39:08 +05:30
return this.value;
})
.get();
2016-10-01 15:18:49 +05:30
2020-05-24 23:13:21 +05:30
if (isEqual(initialSelected, selected)) return;
2018-03-17 18:26:18 +05:30
initialSelected = selected;
2016-10-01 15:18:49 +05:30
2019-12-26 22:10:19 +05:30
const data = {};
2018-03-17 18:26:18 +05:30
data[abilityName] = {};
data[abilityName].label_ids = selected;
if (!selected.length) {
data[abilityName].label_ids = [''];
}
2021-02-22 17:27:13 +05:30
$loading.removeClass('gl-display-none');
2018-03-17 18:26:18 +05:30
$dropdown.trigger('loading.gl.dropdown');
2018-12-13 13:39:08 +05:30
axios
.put(issueUpdateURL, data)
2018-03-17 18:26:18 +05:30
.then(({ data }) => {
2019-12-26 22:10:19 +05:30
let template;
2021-02-22 17:27:13 +05:30
$loading.addClass('gl-display-none');
2016-09-13 17:45:13 +05:30
$dropdown.trigger('loaded.gl.dropdown');
$selectbox.hide();
2018-03-27 19:54:05 +05:30
data.issueUpdateURL = issueUpdateURL;
2019-12-26 22:10:19 +05:30
let labelCount = 0;
2018-03-27 19:54:05 +05:30
if (data.labels.length && issueUpdateURL) {
template = LabelsSelect.getLabelTemplate({
2020-05-24 23:13:21 +05:30
labels: sortBy(data.labels, 'title'),
2018-03-27 19:54:05 +05:30
issueUpdateURL,
2019-07-07 11:18:12 +05:30
enableScopedLabels: scopedLabels,
2018-03-27 19:54:05 +05:30
});
2016-09-13 17:45:13 +05:30
labelCount = data.labels.length;
2019-07-07 11:18:12 +05:30
// EE Specific
2019-09-30 21:07:59 +05:30
if (IS_EE) {
2019-07-07 11:18:12 +05:30
/**
* For Scoped labels, the last label selected with the
* same key will be applied to the current issueable.
*
* If these are the labels - priority::1, priority::2; and if
* we apply them in the same order, only priority::2 will stick
* with the issuable.
*
* In the current dropdown implementation, we keep track of all
* the labels selected via a hidden DOM element. Since a User
* can select priority::1 and priority::2 at the same time, the
* DOM will have 2 hidden input and the dropdown will show both
* the items selected but in reality server only applied
* priority::2.
*
* We find all the labels then find all the labels server accepted
* and then remove the excess ones.
*/
const toRemoveIds = Array.from(
$form.find(`input[type="hidden"][name="${fieldName}"]`),
)
2021-03-08 18:12:59 +05:30
.map((el) => el.value)
2019-07-07 11:18:12 +05:30
.map(Number);
2021-03-08 18:12:59 +05:30
data.labels.forEach((label) => {
2019-07-07 11:18:12 +05:30
const index = toRemoveIds.indexOf(label.id);
toRemoveIds.splice(index, 1);
});
2021-03-08 18:12:59 +05:30
toRemoveIds.forEach((id) => {
2019-07-07 11:18:12 +05:30
$form
.find(`input[type="hidden"][name="${fieldName}"][value="${id}"]`)
.last()
.remove();
});
}
2018-12-13 13:39:08 +05:30
} else {
2019-09-04 21:01:54 +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);
$('.has-tooltip', $value).tooltip({
2018-12-13 13:39:08 +05:30
container: 'body',
2016-09-13 17:45:13 +05:30
});
2018-03-17 18:26:18 +05:30
})
.catch(() => flash(__('Error saving label update.')));
};
2020-11-24 15:15:51 +05:30
initDeprecatedJQueryDropdown($dropdown, {
2019-12-04 20:38:33 +05:30
showMenuAbove,
data(term, callback) {
2019-12-26 22:10:19 +05:30
const labelUrl = $dropdown.attr('data-labels');
2018-12-13 13:39:08 +05:30
axios
.get(labelUrl)
2021-03-08 18:12:59 +05:30
.then((res) => {
2019-02-15 15:39:39 +05:30
let { data } = res;
2016-09-13 17:45:13 +05:30
if ($dropdown.hasClass('js-extra-options')) {
2019-12-26 22:10:19 +05:30
const 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,
2020-05-24 23:13:21 +05:30
title: __('No label'),
2016-09-13 17:45:13 +05:30
});
}
if (showAny) {
2016-11-03 12:29:30 +05:30
extraData.unshift({
2016-09-13 17:45:13 +05:30
isAny: true,
2020-05-24 23:13:21 +05:30
title: __('Any label'),
2016-09-13 17:45:13 +05:30
});
}
2016-11-03 12:29:30 +05:30
if (extraData.length) {
2019-12-04 20:38:33 +05:30
extraData.push({ type: 'divider' });
2016-11-03 12:29:30 +05:30
data = extraData.concat(data);
2016-09-13 17:45:13 +05:30
}
}
2016-11-03 12:29:30 +05:30
callback(data);
if (showMenuAbove) {
2020-11-24 15:15:51 +05:30
$dropdown.data('deprecatedJQueryDropdown').positionMenuAbove();
2016-11-03 12:29:30 +05:30
}
2018-03-17 18:26:18 +05:30
})
.catch(() => flash(__('Error fetching labels.')));
},
2019-12-04 20:38:33 +05:30
renderRow(label) {
2019-12-26 22:10:19 +05:30
let colorEl;
const selectedClass = [];
const removesAll = label.id <= 0 || label.id == null;
2019-07-07 11:18:12 +05:30
2018-03-17 18:26:18 +05:30
if ($dropdown.hasClass('js-filter-bulk-update')) {
2019-12-26 22:10:19 +05:30
const indeterminate = $dropdown.data('indeterminate') || [];
const marked = $dropdown.data('marked') || [];
2018-03-17 18:26:18 +05:30
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
2019-12-26 22:10:19 +05:30
const i = selectedClass.indexOf('is-indeterminate');
2018-03-17 18:26:18 +05:30
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)) {
2021-03-08 18:12:59 +05:30
const dropdownValue = this.id(label).toString().replace(/'/g, "\\'");
2018-12-13 13:39:08 +05:30
if (
$form.find(
2019-12-21 20:55:43 +05:30
`input[type='hidden'][name='${this.fieldName}'][value='${dropdownValue}']`,
2018-12-13 13:39:08 +05:30
).length
) {
2018-03-17 18:26:18 +05:30
selectedClass.push('is-active');
2016-09-13 17:45:13 +05:30
}
}
2016-11-03 12:29:30 +05:30
2019-07-07 11:18:12 +05:30
if (this.multiSelect && removesAll) {
2018-03-17 18:26:18 +05:30
selectedClass.push('dropdown-clear-active');
2016-11-03 12:29:30 +05:30
}
2018-03-17 18:26:18 +05:30
}
2019-07-07 11:18:12 +05:30
2019-02-15 15:39:39 +05:30
if (label.color) {
2019-12-21 20:55:43 +05:30
colorEl = `<span class='dropdown-label-box' style='background: ${label.color}'></span>`;
2018-12-13 13:39:08 +05:30
} else {
2018-03-17 18:26:18 +05:30
colorEl = '';
}
2019-07-07 11:18:12 +05:30
2019-12-26 22:10:19 +05:30
const linkEl = document.createElement('a');
2019-07-07 11:18:12 +05:30
linkEl.href = '#';
2018-03-17 18:26:18 +05:30
// We need to identify which items are actually labels
if (label.id) {
2019-09-30 21:07:59 +05:30
const selectedLayoutClasses = ['d-flex', 'flex-row', 'text-break-word'];
selectedClass.push('label-item', ...selectedLayoutClasses);
2019-07-07 11:18:12 +05:30
linkEl.dataset.labelId = label.id;
2018-03-17 18:26:18 +05:30
}
2019-07-07 11:18:12 +05:30
linkEl.className = selectedClass.join(' ');
2020-05-24 23:13:21 +05:30
linkEl.innerHTML = `${colorEl} ${escape(label.title)}`;
2019-07-07 11:18:12 +05:30
2019-12-26 22:10:19 +05:30
const listItemEl = document.createElement('li');
2019-07-07 11:18:12 +05:30
listItemEl.appendChild(linkEl);
return listItemEl;
2018-03-17 18:26:18 +05:30
},
search: {
2018-12-13 13:39:08 +05:30
fields: ['title'],
2018-03-17 18:26:18 +05:30
},
selectable: true,
filterable: true,
selected: $dropdown.data('selected') || [],
2019-12-04 20:38:33 +05:30
toggleLabel(selected, el) {
2019-12-26 22:10:19 +05:30
const $dropdownParent = $dropdown.parent();
const $dropdownInputField = $dropdownParent.find('.dropdown-input-field');
const isSelected = el !== null ? el.hasClass('is-active') : false;
2018-11-08 19:23:39 +05:30
2019-12-26 22:10:19 +05:30
const title = selected ? selected.title : null;
const selectedLabels = this.selected;
2018-03-17 18:26:18 +05:30
2018-03-27 19:54:05 +05:30
if ($dropdownInputField.length && $dropdownInputField.val().length) {
$dropdownParent.find('.dropdown-input-clear').trigger('click');
}
2018-11-18 11:00:15 +05:30
if (selected && selected.id === 0) {
2018-03-17 18:26:18 +05:30
this.selected = [];
2020-05-24 23:13:21 +05:30
return __('No label');
2018-12-13 13:39:08 +05:30
} else if (isSelected) {
2018-03-17 18:26:18 +05:30
this.selected.push(title);
2018-12-13 13:39:08 +05:30
} else if (!isSelected && title) {
2019-12-26 22:10:19 +05:30
const index = this.selected.indexOf(title);
2018-03-17 18:26:18 +05:30
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;
2018-12-13 13:39:08 +05:30
} else if (selectedLabels.length) {
2018-11-20 20:47:30 +05:30
return sprintf(__('%{firstLabel} +%{labelCount} more'), {
firstLabel: selectedLabels[0],
2018-12-13 13:39:08 +05:30
labelCount: selectedLabels.length - 1,
2018-11-20 20:47:30 +05:30
});
2018-03-17 18:26:18 +05:30
}
2020-05-24 23:13:21 +05:30
return defaultLabel;
2018-03-17 18:26:18 +05:30
},
2018-03-27 19:54:05 +05:30
fieldName: $dropdown.data('fieldName'),
2019-12-04 20:38:33 +05:30
id(label) {
2018-03-17 18:26:18 +05:30
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-12-13 13:39:08 +05:30
if ($dropdown.hasClass('js-filter-submit') && label.isAny == null) {
2018-03-17 18:26:18 +05:30
return label.title;
}
2020-05-24 23:13:21 +05:30
return label.id;
2018-03-17 18:26:18 +05:30
},
2019-12-04 20:38:33 +05:30
hidden() {
2019-12-26 22:10:19 +05:30
const page = $('body').attr('data-page');
const isIssueIndex = page === 'projects:issues:index';
const isMRIndex = page === 'projects:merge_requests:index';
2018-03-17 18:26:18 +05:30
$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
2021-04-29 21:17:54 +05:30
if (
$('html')
.attr('class')
.match(/issue-boards-page|epic-boards-page/)
) {
2018-03-17 18:26:18 +05:30
return;
}
if ($dropdown.hasClass('js-multiselect')) {
if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) {
Issuable.filterResults($dropdown.closest('form'));
2018-12-13 13:39:08 +05:30
} else if ($dropdown.hasClass('js-filter-submit')) {
2018-03-17 18:26:18 +05:30
$dropdown.closest('form').submit();
2018-12-13 13:39:08 +05:30
} else {
2018-03-17 18:26:18 +05:30
if (!$dropdown.hasClass('js-filter-bulk-update')) {
saveLabelData();
2020-11-24 15:15:51 +05:30
$dropdown.data('deprecatedJQueryDropdown').clearMenu();
2018-03-17 18:26:18 +05:30
}
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'),
2019-12-04 20:38:33 +05:30
clicked(clickEvent) {
2018-03-27 19:54:05 +05:30
const { $el, e, isMarking } = clickEvent;
const label = clickEvent.selectedObj;
2018-03-17 18:26:18 +05:30
2021-02-22 17:27:13 +05:30
const hideLoader = () => {
$loading.addClass('gl-display-none');
2018-03-17 18:26:18 +05:30
};
2016-11-03 12:29:30 +05:30
2019-12-26 22:10:19 +05:30
const page = $('body').attr('data-page');
const isIssueIndex = page === 'projects:issues:index';
const 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) {
2021-03-08 18:12:59 +05:30
$dropdown.parent().find('.dropdown-clear-active').removeClass('is-active');
2018-03-17 18:26:18 +05:30
}
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;
}
2021-04-29 21:17:54 +05:30
if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) {
2018-03-17 18:26:18 +05:30
if (!$dropdown.hasClass('js-multiselect')) {
selectedLabel = label.title;
return Issuable.filterResults($dropdown.closest('form'));
2016-11-03 12:29:30 +05:30
}
2018-12-13 13:39:08 +05:30
} else if ($dropdown.hasClass('js-filter-submit')) {
2018-03-17 18:26:18 +05:30
return $dropdown.closest('form').submit();
2018-12-13 13:39:08 +05:30
} else if ($dropdown.hasClass('js-issue-board-sidebar')) {
2018-03-17 18:26:18 +05:30
if ($el.hasClass('is-active')) {
2018-12-13 13:39:08 +05:30
boardsStore.detail.issue.labels.push(
new ListLabel({
id: label.id,
title: label.title,
2019-02-15 15:39:39 +05:30
color: label.color,
2018-12-13 13:39:08 +05:30
textColor: '#fff',
}),
);
} else {
2019-12-26 22:10:19 +05:30
let { labels } = boardsStore.detail.issue;
2021-03-08 18:12:59 +05:30
labels = labels.filter((selectedLabel) => selectedLabel.id !== label.id);
2018-12-13 13:39:08 +05:30
boardsStore.detail.issue.labels = labels;
2018-03-17 18:26:18 +05:30
}
2021-02-22 17:27:13 +05:30
$loading.removeClass('gl-display-none');
2019-12-21 20:55:43 +05:30
const oldLabels = boardsStore.detail.issue.labels;
2017-08-17 22:00:37 +05:30
2018-12-13 13:39:08 +05:30
boardsStore.detail.issue
.update($dropdown.attr('data-issue-update'))
2019-12-21 20:55:43 +05:30
.then(() => {
if (isScopedLabel(label)) {
2021-03-08 18:12:59 +05:30
const prevIds = oldLabels.map((label) => label.id);
const newIds = boardsStore.detail.issue.labels.map((label) => label.id);
const differentIds = prevIds.filter((x) => !newIds.includes(x));
2019-12-21 20:55:43 +05:30
$dropdown.data('marked', newIds);
$dropdownMenu
2021-03-08 18:12:59 +05:30
.find(differentIds.map((id) => `[data-label-id="${id}"]`).join(','))
2019-12-21 20:55:43 +05:30
.removeClass('is-active');
}
})
2021-02-22 17:27:13 +05:30
.then(hideLoader)
.catch(hideLoader);
2018-12-13 13:39:08 +05:30
} else if (handleClick) {
2018-03-17 18:26:18 +05:30
e.preventDefault();
handleClick(label);
2018-12-13 13:39:08 +05:30
} else {
2018-03-17 18:26:18 +05:30
if ($dropdown.hasClass('js-multiselect')) {
2018-12-13 13:39:08 +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
}
},
2019-12-04 20:38:33 +05:30
opened() {
2018-11-18 11:00:15 +05:30
if ($dropdown.hasClass('js-issue-board-sidebar')) {
const previousSelection = $dropdown.attr('data-selected');
this.selected = previousSelection ? previousSelection.split(',') : [];
2020-11-24 15:15:51 +05:30
$dropdown.data('deprecatedJQueryDropdown').updateLabel();
2018-11-18 11:00:15 +05:30
}
},
preserveContext: true,
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
2019-07-07 11:18:12 +05:30
2020-04-08 14:13:33 +05:30
const linkOpenTag =
'<a href="<%- issueUpdateURL.slice(0, issueUpdateURL.lastIndexOf("/")) %>?label_name[]=<%- encodeURIComponent(label.title) %>" class="gl-link gl-label-link has-tooltip" <%= linkAttrs %> title="<%= tooltipTitleTemplate({ label, isScopedLabel, enableScopedLabels, escapeStr }) %>">';
2020-05-24 23:13:21 +05:30
const labelTemplate = template(
2018-12-13 13:39:08 +05:30
[
2020-04-08 14:13:33 +05:30
'<span class="gl-label">',
linkOpenTag,
2020-10-24 23:57:45 +05:30
'<span class="gl-label-text <%= labelTextClass({ label, escapeStr }) %>" style="background-color: <%= escapeStr(label.color) %>;">',
2018-12-13 13:39:08 +05:30
'<%- label.title %>',
'</span>',
'</a>',
2020-04-08 14:13:33 +05:30
'</span>',
2019-07-07 11:18:12 +05:30
].join(''),
);
2020-10-24 23:57:45 +05:30
const labelTextClass = ({ label, escapeStr }) => {
return escapeStr(
label.text_color === '#FFFFFF' ? 'gl-label-text-light' : 'gl-label-text-dark',
);
};
const rightLabelTextClass = ({ label, escapeStr }) => {
return escapeStr(label.text_color === '#333333' ? labelTextClass({ label, escapeStr }) : '');
2020-04-08 14:13:33 +05:30
};
2020-05-24 23:13:21 +05:30
const scopedLabelTemplate = template(
2020-04-08 14:13:33 +05:30
[
2020-07-28 23:09:34 +05:30
'<span class="gl-label gl-label-scoped" style="color: <%= escapeStr(label.color) %>; --label-inset-border: inset 0 0 0 2px <%= escapeStr(label.color) %>;">',
2020-04-08 14:13:33 +05:30
linkOpenTag,
2020-10-24 23:57:45 +05:30
'<span class="gl-label-text <%= labelTextClass({ label, escapeStr }) %>" style="background-color: <%= escapeStr(label.color) %>;">',
2020-04-08 14:13:33 +05:30
'<%- label.title.slice(0, label.title.lastIndexOf("::")) %>',
'</span>',
2020-10-24 23:57:45 +05:30
'<span class="gl-label-text <%= rightLabelTextClass({ label, escapeStr }) %>">',
2020-04-08 14:13:33 +05:30
'<%- label.title.slice(label.title.lastIndexOf("::") + 2) %>',
'</span>',
2019-07-07 11:18:12 +05:30
'</a>',
2020-04-08 14:13:33 +05:30
'</span>',
2019-07-07 11:18:12 +05:30
].join(''),
);
2020-05-24 23:13:21 +05:30
const tooltipTitleTemplate = template(
2019-07-07 11:18:12 +05:30
[
'<% if (isScopedLabel(label) && enableScopedLabels) { %>',
"<span class='font-weight-bold scoped-label-tooltip-title'>Scoped label</span>",
'<br />',
'<%= escapeStr(label.description) %>',
'<% } else { %>',
'<%= escapeStr(label.description) %>',
'<% } %>',
].join(''),
);
2020-05-24 23:13:21 +05:30
const tpl = template(
2019-07-07 11:18:12 +05:30
[
2020-05-24 23:13:21 +05:30
'<% labels.forEach(function(label){ %>',
2019-07-07 11:18:12 +05:30
'<% if (isScopedLabel(label) && enableScopedLabels) { %>',
2020-10-24 23:57:45 +05:30
'<%= scopedLabelTemplate({ label, issueUpdateURL, isScopedLabel, enableScopedLabels, labelTextClass, rightLabelTextClass, tooltipTitleTemplate, escapeStr, linkAttrs: \'data-html="true"\' }) %>',
2019-07-07 11:18:12 +05:30
'<% } else { %>',
2020-10-24 23:57:45 +05:30
'<%= labelTemplate({ label, issueUpdateURL, isScopedLabel, enableScopedLabels, labelTextClass, tooltipTitleTemplate, escapeStr, linkAttrs: "" }) %>',
2019-07-07 11:18:12 +05:30
'<% } %>',
2018-12-13 13:39:08 +05:30
'<% }); %>',
].join(''),
);
2018-03-27 19:54:05 +05:30
2019-07-07 11:18:12 +05:30
return tpl({
...tplData,
labelTemplate,
2020-10-24 23:57:45 +05:30
labelTextClass,
rightLabelTextClass,
2020-04-08 14:13:33 +05:30
scopedLabelTemplate,
2019-07-07 11:18:12 +05:30
tooltipTitleTemplate,
isScopedLabel,
2020-05-24 23:13:21 +05:30
escapeStr: escape,
2019-07-07 11:18:12 +05:30
});
2018-03-27 19:54:05 +05:30
}
2018-03-17 18:26:18 +05:30
bindEvents() {
2021-04-29 21:17:54 +05:30
return $('body').on(
'change',
'.issuable-list input[type="checkbox"]',
this.onSelectCheckboxIssue,
);
2018-03-17 18:26:18 +05:30
}
// eslint-disable-next-line class-methods-use-this
onSelectCheckboxIssue() {
2021-04-29 21:17:54 +05:30
if ($('.issuable-list input[type="checkbox"]:checked').length) {
2018-03-17 18:26:18 +05:30
return;
}
2019-09-04 21:01:54 +05:30
return $('.issues-bulk-update .labels-filter .dropdown-toggle-text').text(__('Label'));
2018-03-17 18:26:18 +05:30
}
// eslint-disable-next-line class-methods-use-this
enableBulkLabelDropdown() {
IssuableBulkUpdateActions.willUpdateLabels = true;
}
// eslint-disable-next-line class-methods-use-this
2020-10-24 23:57:45 +05:30
setDropdownData($dropdown, isMarking, labelId) {
2020-07-28 23:09:34 +05:30
let userCheckedIds = $dropdown.data('user-checked') || [];
let userUncheckedIds = $dropdown.data('user-unchecked') || [];
2018-03-17 18:26:18 +05:30
2020-10-24 23:57:45 +05:30
if (isMarking) {
userCheckedIds = union(userCheckedIds, [labelId]);
2020-07-28 23:09:34 +05:30
userUncheckedIds = difference(userUncheckedIds, [labelId]);
2018-03-17 18:26:18 +05:30
} else {
2020-10-24 23:57:45 +05:30
userUncheckedIds = union(userUncheckedIds, [labelId]);
2020-07-28 23:09:34 +05:30
userCheckedIds = difference(userCheckedIds, [labelId]);
2018-03-17 18:26:18 +05:30
}
2017-08-17 22:00:37 +05:30
2020-07-28 23:09:34 +05:30
$dropdown.data('user-checked', userCheckedIds);
$dropdown.data('user-unchecked', userUncheckedIds);
2018-03-17 18:26:18 +05:30
}
// eslint-disable-next-line class-methods-use-this
setOriginalDropdownData($container, $dropdown) {
const labels = [];
2021-03-08 18:12:59 +05:30
$container.find('[name="label_name[]"]').map(function () {
2018-03-17 18:26:18 +05:30
return labels.push(this.value);
});
$dropdown.data('marked', labels);
}
}