Merge branch '38869-labels' into 'master'
Use ES6 modules in labels and labels manager See merge request gitlab-org/gitlab-ce!14794
This commit is contained in:
Phil Hughes
commit
a6b33275c0
4 changed files with 150 additions and 164 deletions
|
|
@ -29,7 +29,8 @@ import CILintEditor from './ci_lint_editor';
|
|||
/* global ProjectNew */
|
||||
/* global ProjectShow */
|
||||
/* global ProjectImport */
|
||||
/* global Labels */
|
||||
import Labels from './labels';
|
||||
import LabelManager from './label_manager';
|
||||
/* global Shortcuts */
|
||||
/* global ShortcutsFindFile */
|
||||
/* global Sidebar */
|
||||
|
|
@ -459,7 +460,7 @@ import U2FAuthenticate from './u2f/authenticate';
|
|||
case 'groups:labels:index':
|
||||
case 'projects:labels:index':
|
||||
if ($('.prioritized-labels').length) {
|
||||
new gl.LabelManager();
|
||||
new LabelManager();
|
||||
}
|
||||
$('.label-subscription').each((i, el) => {
|
||||
const $el = $(el);
|
||||
|
|
|
|||
|
|
@ -3,123 +3,119 @@
|
|||
|
||||
import Flash from './flash';
|
||||
|
||||
((global) => {
|
||||
class LabelManager {
|
||||
constructor({ togglePriorityButton, prioritizedLabels, otherLabels } = {}) {
|
||||
this.togglePriorityButton = togglePriorityButton || $('.js-toggle-priority');
|
||||
this.prioritizedLabels = prioritizedLabels || $('.js-prioritized-labels');
|
||||
this.otherLabels = otherLabels || $('.js-other-labels');
|
||||
this.errorMessage = 'Unable to update label prioritization at this time';
|
||||
this.emptyState = document.querySelector('#js-priority-labels-empty-state');
|
||||
this.sortable = Sortable.create(this.prioritizedLabels.get(0), {
|
||||
filter: '.empty-message',
|
||||
forceFallback: true,
|
||||
fallbackClass: 'is-dragging',
|
||||
dataIdAttr: 'data-id',
|
||||
onUpdate: this.onPrioritySortUpdate.bind(this),
|
||||
});
|
||||
this.bindEvents();
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
this.prioritizedLabels.find('.btn-action').on('mousedown', this, this.onButtonActionClick);
|
||||
return this.togglePriorityButton.on('click', this, this.onTogglePriorityClick);
|
||||
}
|
||||
|
||||
onTogglePriorityClick(e) {
|
||||
e.preventDefault();
|
||||
const _this = e.data;
|
||||
const $btn = $(e.currentTarget);
|
||||
const $label = $(`#${$btn.data('domId')}`);
|
||||
const action = $btn.parents('.js-prioritized-labels').length ? 'remove' : 'add';
|
||||
const $tooltip = $(`#${$btn.find('.has-tooltip:visible').attr('aria-describedby')}`);
|
||||
$tooltip.tooltip('destroy');
|
||||
_this.toggleLabelPriority($label, action);
|
||||
_this.toggleEmptyState($label, $btn, action);
|
||||
}
|
||||
|
||||
onButtonActionClick(e) {
|
||||
e.stopPropagation();
|
||||
$(e.currentTarget).tooltip('hide');
|
||||
}
|
||||
|
||||
toggleEmptyState($label, $btn, action) {
|
||||
this.emptyState.classList.toggle('hidden', !!this.prioritizedLabels[0].querySelector(':scope > li'));
|
||||
}
|
||||
|
||||
toggleLabelPriority($label, action, persistState) {
|
||||
if (persistState == null) {
|
||||
persistState = true;
|
||||
}
|
||||
let xhr;
|
||||
const _this = this;
|
||||
const url = $label.find('.js-toggle-priority').data('url');
|
||||
let $target = this.prioritizedLabels;
|
||||
let $from = this.otherLabels;
|
||||
if (action === 'remove') {
|
||||
$target = this.otherLabels;
|
||||
$from = this.prioritizedLabels;
|
||||
}
|
||||
$label.detach().appendTo($target);
|
||||
if ($from.find('li').length) {
|
||||
$from.find('.empty-message').removeClass('hidden');
|
||||
}
|
||||
if ($target.find('> li:not(.empty-message)').length) {
|
||||
$target.find('.empty-message').addClass('hidden');
|
||||
}
|
||||
// Return if we are not persisting state
|
||||
if (!persistState) {
|
||||
return;
|
||||
}
|
||||
if (action === 'remove') {
|
||||
xhr = $.ajax({
|
||||
url,
|
||||
type: 'DELETE'
|
||||
});
|
||||
// Restore empty message
|
||||
if (!$from.find('li').length) {
|
||||
$from.find('.empty-message').removeClass('hidden');
|
||||
}
|
||||
} else {
|
||||
xhr = this.savePrioritySort($label, action);
|
||||
}
|
||||
return xhr.fail(this.rollbackLabelPosition.bind(this, $label, action));
|
||||
}
|
||||
|
||||
onPrioritySortUpdate() {
|
||||
const xhr = this.savePrioritySort();
|
||||
return xhr.fail(function() {
|
||||
return new Flash(this.errorMessage, 'alert');
|
||||
});
|
||||
}
|
||||
|
||||
savePrioritySort() {
|
||||
return $.post({
|
||||
url: this.prioritizedLabels.data('url'),
|
||||
data: {
|
||||
label_ids: this.getSortedLabelsIds()
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
rollbackLabelPosition($label, originalAction) {
|
||||
const action = originalAction === 'remove' ? 'add' : 'remove';
|
||||
this.toggleLabelPriority($label, action, false);
|
||||
return new Flash(this.errorMessage, 'alert');
|
||||
}
|
||||
|
||||
getSortedLabelsIds() {
|
||||
const sortedIds = [];
|
||||
this.prioritizedLabels.find('> li').each(function() {
|
||||
const id = $(this).data('id');
|
||||
|
||||
if (id) {
|
||||
sortedIds.push(id);
|
||||
}
|
||||
});
|
||||
return sortedIds;
|
||||
}
|
||||
export default class LabelManager {
|
||||
constructor({ togglePriorityButton, prioritizedLabels, otherLabels } = {}) {
|
||||
this.togglePriorityButton = togglePriorityButton || $('.js-toggle-priority');
|
||||
this.prioritizedLabels = prioritizedLabels || $('.js-prioritized-labels');
|
||||
this.otherLabels = otherLabels || $('.js-other-labels');
|
||||
this.errorMessage = 'Unable to update label prioritization at this time';
|
||||
this.emptyState = document.querySelector('#js-priority-labels-empty-state');
|
||||
this.sortable = Sortable.create(this.prioritizedLabels.get(0), {
|
||||
filter: '.empty-message',
|
||||
forceFallback: true,
|
||||
fallbackClass: 'is-dragging',
|
||||
dataIdAttr: 'data-id',
|
||||
onUpdate: this.onPrioritySortUpdate.bind(this),
|
||||
});
|
||||
this.bindEvents();
|
||||
}
|
||||
|
||||
gl.LabelManager = LabelManager;
|
||||
})(window.gl || (window.gl = {}));
|
||||
bindEvents() {
|
||||
this.prioritizedLabels.find('.btn-action').on('mousedown', this, this.onButtonActionClick);
|
||||
return this.togglePriorityButton.on('click', this, this.onTogglePriorityClick);
|
||||
}
|
||||
|
||||
onTogglePriorityClick(e) {
|
||||
e.preventDefault();
|
||||
const _this = e.data;
|
||||
const $btn = $(e.currentTarget);
|
||||
const $label = $(`#${$btn.data('domId')}`);
|
||||
const action = $btn.parents('.js-prioritized-labels').length ? 'remove' : 'add';
|
||||
const $tooltip = $(`#${$btn.find('.has-tooltip:visible').attr('aria-describedby')}`);
|
||||
$tooltip.tooltip('destroy');
|
||||
_this.toggleLabelPriority($label, action);
|
||||
_this.toggleEmptyState($label, $btn, action);
|
||||
}
|
||||
|
||||
onButtonActionClick(e) {
|
||||
e.stopPropagation();
|
||||
$(e.currentTarget).tooltip('hide');
|
||||
}
|
||||
|
||||
toggleEmptyState($label, $btn, action) {
|
||||
this.emptyState.classList.toggle('hidden', !!this.prioritizedLabels[0].querySelector(':scope > li'));
|
||||
}
|
||||
|
||||
toggleLabelPriority($label, action, persistState) {
|
||||
if (persistState == null) {
|
||||
persistState = true;
|
||||
}
|
||||
let xhr;
|
||||
const _this = this;
|
||||
const url = $label.find('.js-toggle-priority').data('url');
|
||||
let $target = this.prioritizedLabels;
|
||||
let $from = this.otherLabels;
|
||||
if (action === 'remove') {
|
||||
$target = this.otherLabels;
|
||||
$from = this.prioritizedLabels;
|
||||
}
|
||||
$label.detach().appendTo($target);
|
||||
if ($from.find('li').length) {
|
||||
$from.find('.empty-message').removeClass('hidden');
|
||||
}
|
||||
if ($target.find('> li:not(.empty-message)').length) {
|
||||
$target.find('.empty-message').addClass('hidden');
|
||||
}
|
||||
// Return if we are not persisting state
|
||||
if (!persistState) {
|
||||
return;
|
||||
}
|
||||
if (action === 'remove') {
|
||||
xhr = $.ajax({
|
||||
url,
|
||||
type: 'DELETE'
|
||||
});
|
||||
// Restore empty message
|
||||
if (!$from.find('li').length) {
|
||||
$from.find('.empty-message').removeClass('hidden');
|
||||
}
|
||||
} else {
|
||||
xhr = this.savePrioritySort($label, action);
|
||||
}
|
||||
return xhr.fail(this.rollbackLabelPosition.bind(this, $label, action));
|
||||
}
|
||||
|
||||
onPrioritySortUpdate() {
|
||||
const xhr = this.savePrioritySort();
|
||||
return xhr.fail(function() {
|
||||
return new Flash(this.errorMessage, 'alert');
|
||||
});
|
||||
}
|
||||
|
||||
savePrioritySort() {
|
||||
return $.post({
|
||||
url: this.prioritizedLabels.data('url'),
|
||||
data: {
|
||||
label_ids: this.getSortedLabelsIds()
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
rollbackLabelPosition($label, originalAction) {
|
||||
const action = originalAction === 'remove' ? 'add' : 'remove';
|
||||
this.toggleLabelPriority($label, action, false);
|
||||
return new Flash(this.errorMessage, 'alert');
|
||||
}
|
||||
|
||||
getSortedLabelsIds() {
|
||||
const sortedIds = [];
|
||||
this.prioritizedLabels.find('> li').each(function() {
|
||||
const id = $(this).data('id');
|
||||
|
||||
if (id) {
|
||||
sortedIds.push(id);
|
||||
}
|
||||
});
|
||||
return sortedIds;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,44 +1,35 @@
|
|||
/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, vars-on-top, no-unused-vars, max-len */
|
||||
(function() {
|
||||
this.Labels = (function() {
|
||||
function Labels() {
|
||||
this.setSuggestedColor = this.setSuggestedColor.bind(this);
|
||||
this.updateColorPreview = this.updateColorPreview.bind(this);
|
||||
var form;
|
||||
form = $('.label-form');
|
||||
this.cleanBinding();
|
||||
this.addBinding();
|
||||
this.updateColorPreview();
|
||||
}
|
||||
export default class Labels {
|
||||
constructor() {
|
||||
this.setSuggestedColor = this.setSuggestedColor.bind(this);
|
||||
this.updateColorPreview = this.updateColorPreview.bind(this);
|
||||
this.cleanBinding();
|
||||
this.addBinding();
|
||||
this.updateColorPreview();
|
||||
}
|
||||
|
||||
Labels.prototype.addBinding = function() {
|
||||
$(document).on('click', '.suggest-colors a', this.setSuggestedColor);
|
||||
return $(document).on('input', 'input#label_color', this.updateColorPreview);
|
||||
};
|
||||
addBinding() {
|
||||
$(document).on('click', '.suggest-colors a', this.setSuggestedColor);
|
||||
return $(document).on('input', 'input#label_color', this.updateColorPreview);
|
||||
}
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
cleanBinding() {
|
||||
$(document).off('click', '.suggest-colors a');
|
||||
return $(document).off('input', 'input#label_color');
|
||||
}
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
updateColorPreview() {
|
||||
const previewColor = $('input#label_color').val();
|
||||
return $('div.label-color-preview').css('background-color', previewColor);
|
||||
// Updates the the preview color with the hex-color input
|
||||
}
|
||||
|
||||
Labels.prototype.cleanBinding = function() {
|
||||
$(document).off('click', '.suggest-colors a');
|
||||
return $(document).off('input', 'input#label_color');
|
||||
};
|
||||
|
||||
Labels.prototype.updateColorPreview = function() {
|
||||
var previewColor;
|
||||
previewColor = $('input#label_color').val();
|
||||
return $('div.label-color-preview').css('background-color', previewColor);
|
||||
// Updates the the preview color with the hex-color input
|
||||
};
|
||||
|
||||
// Updates the preview color with a click on a suggested color
|
||||
Labels.prototype.setSuggestedColor = function(e) {
|
||||
var color;
|
||||
color = $(e.currentTarget).data('color');
|
||||
$('input#label_color').val(color);
|
||||
this.updateColorPreview();
|
||||
// Notify the form, that color has changed
|
||||
$('.label-form').trigger('keyup');
|
||||
return e.preventDefault();
|
||||
};
|
||||
|
||||
return Labels;
|
||||
})();
|
||||
}).call(window);
|
||||
// Updates the preview color with a click on a suggested color
|
||||
setSuggestedColor(e) {
|
||||
const color = $(e.currentTarget).data('color');
|
||||
$('input#label_color').val(color);
|
||||
this.updateColorPreview();
|
||||
// Notify the form, that color has changed
|
||||
$('.label-form').trigger('keyup');
|
||||
return e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -79,8 +79,6 @@ import './issuable_context';
|
|||
import './issuable_form';
|
||||
import './issue';
|
||||
import './issue_status_select';
|
||||
import './label_manager';
|
||||
import './labels';
|
||||
import './labels_select';
|
||||
import './layout_nav';
|
||||
import LazyLoader from './lazy_loader';
|
||||
|
|
|
|||
Loading…
Reference in a new issue