debian-mirror-gitlab/app/assets/javascripts/labels/create_label_dropdown.js

134 lines
4.1 KiB
JavaScript
Raw Normal View History

2019-12-21 20:55:43 +05:30
/* eslint-disable func-names */
2018-05-09 12:01:36 +05:30
import $ from 'jquery';
2022-01-26 12:08:38 +05:30
import Api from '~/api';
import { humanize } from '~/lib/utils/text_utility';
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
export default class CreateLabelDropdown {
constructor($el, namespacePath, projectPath) {
2017-08-17 22:00:37 +05:30
this.$el = $el;
this.namespacePath = namespacePath;
this.projectPath = projectPath;
this.$dropdownBack = $('.dropdown-menu-back', this.$el.closest('.dropdown'));
this.$cancelButton = $('.js-cancel-label-btn', this.$el);
this.$newLabelField = $('#new_label_name', this.$el);
this.$newColorField = $('#new_label_color', this.$el);
this.$colorPreview = $('.js-dropdown-label-color-preview', this.$el);
2019-07-07 11:18:12 +05:30
this.$addList = $('.js-add-list', this.$el);
2017-08-17 22:00:37 +05:30
this.$newLabelError = $('.js-label-error', this.$el);
2022-03-02 08:16:31 +05:30
this.$newLabelErrorContent = $('.gl-alert-content', this.$newLabelError);
2017-08-17 22:00:37 +05:30
this.$newLabelCreateButton = $('.js-new-label-btn', this.$el);
this.$colorSuggestions = $('.suggest-colors-dropdown a', this.$el);
this.$newLabelError.hide();
this.$newLabelCreateButton.disable();
2019-07-07 11:18:12 +05:30
this.addListDefault = this.$addList.is(':checked');
2017-08-17 22:00:37 +05:30
this.cleanBinding();
this.addBinding();
}
2018-03-17 18:26:18 +05:30
cleanBinding() {
2021-02-22 17:27:13 +05:30
// eslint-disable-next-line @gitlab/no-global-event-off
2017-08-17 22:00:37 +05:30
this.$colorSuggestions.off('click');
2021-02-22 17:27:13 +05:30
// eslint-disable-next-line @gitlab/no-global-event-off
2017-08-17 22:00:37 +05:30
this.$newLabelField.off('keyup change');
2021-02-22 17:27:13 +05:30
// eslint-disable-next-line @gitlab/no-global-event-off
2017-08-17 22:00:37 +05:30
this.$newColorField.off('keyup change');
2021-02-22 17:27:13 +05:30
// eslint-disable-next-line @gitlab/no-global-event-off
2017-08-17 22:00:37 +05:30
this.$dropdownBack.off('click');
2021-02-22 17:27:13 +05:30
// eslint-disable-next-line @gitlab/no-global-event-off
2017-08-17 22:00:37 +05:30
this.$cancelButton.off('click');
2021-02-22 17:27:13 +05:30
// eslint-disable-next-line @gitlab/no-global-event-off
2017-08-17 22:00:37 +05:30
this.$newLabelCreateButton.off('click');
}
2018-03-17 18:26:18 +05:30
addBinding() {
2017-08-17 22:00:37 +05:30
const self = this;
2021-03-08 18:12:59 +05:30
this.$colorSuggestions.on('click', function (e) {
2017-08-17 22:00:37 +05:30
const $this = $(this);
self.addColorValue(e, $this);
});
this.$newLabelField.on('keyup change', this.enableLabelCreateButton.bind(this));
this.$newColorField.on('keyup change', this.enableLabelCreateButton.bind(this));
this.$dropdownBack.on('click', this.resetForm.bind(this));
2021-03-08 18:12:59 +05:30
this.$cancelButton.on('click', (e) => {
2017-08-17 22:00:37 +05:30
e.preventDefault();
e.stopPropagation();
self.resetForm();
self.$dropdownBack.trigger('click');
});
this.$newLabelCreateButton.on('click', this.saveLabel.bind(this));
}
2018-03-17 18:26:18 +05:30
addColorValue(e, $this) {
2017-08-17 22:00:37 +05:30
e.preventDefault();
e.stopPropagation();
this.$newColorField.val($this.data('color')).trigger('change');
2021-03-08 18:12:59 +05:30
this.$colorPreview.css('background-color', $this.data('color')).parent().addClass('is-active');
2017-08-17 22:00:37 +05:30
}
2018-03-17 18:26:18 +05:30
enableLabelCreateButton() {
2017-08-17 22:00:37 +05:30
if (this.$newLabelField.val() !== '' && this.$newColorField.val() !== '') {
this.$newLabelError.hide();
this.$newLabelCreateButton.enable();
} else {
this.$newLabelCreateButton.disable();
}
}
2018-03-17 18:26:18 +05:30
resetForm() {
2018-12-13 13:39:08 +05:30
this.$newLabelField.val('').trigger('change');
2017-08-17 22:00:37 +05:30
2018-12-13 13:39:08 +05:30
this.$newColorField.val('').trigger('change');
2017-08-17 22:00:37 +05:30
2019-07-07 11:18:12 +05:30
this.$addList.prop('checked', this.addListDefault);
2021-03-08 18:12:59 +05:30
this.$colorPreview.css('background-color', '').parent().removeClass('is-active');
2017-08-17 22:00:37 +05:30
}
2018-03-17 18:26:18 +05:30
saveLabel(e) {
2017-08-17 22:00:37 +05:30
e.preventDefault();
e.stopPropagation();
2018-12-13 13:39:08 +05:30
Api.newLabel(
this.namespacePath,
this.projectPath,
{
title: this.$newLabelField.val(),
color: this.$newColorField.val(),
},
2021-03-08 18:12:59 +05:30
(label) => {
2018-12-13 13:39:08 +05:30
this.$newLabelCreateButton.enable();
if (label.message) {
let errors;
if (typeof label.message === 'string') {
errors = label.message;
} else {
errors = Object.keys(label.message)
2021-03-08 18:12:59 +05:30
.map((key) => `${humanize(key)} ${label.message[key].join(', ')}`)
2018-12-13 13:39:08 +05:30
.join('<br/>');
}
2022-03-02 08:16:31 +05:30
this.$newLabelErrorContent.html(errors);
this.$newLabelError.show();
2017-08-17 22:00:37 +05:30
} else {
2019-07-07 11:18:12 +05:30
const addNewList = this.$addList.is(':checked');
2018-12-13 13:39:08 +05:30
this.$dropdownBack.trigger('click');
2019-07-07 11:18:12 +05:30
$(document).trigger('created.label', [label, addNewList]);
2018-12-13 13:39:08 +05:30
}
},
);
2017-08-17 22:00:37 +05:30
}
}