Created a class to share functionality of creating new label from dropdown
This commit is contained in:
Phil Hughes
parent
7dd9b0dd3c
commit
d1a2be9f36
4 changed files with 134 additions and 65 deletions
|
|
@ -1,7 +1,9 @@
|
|||
$(() => {
|
||||
$(function () {
|
||||
$('.js-new-board-list').each(function () {
|
||||
const $this = $(this);
|
||||
|
||||
new gl.CreateLabelDropdown($this.closest('.dropdown').find('.dropdown-new-label'), $this.data('project-id'));
|
||||
|
||||
$this.glDropdown({
|
||||
data: function(term, callback) {
|
||||
$.ajax({
|
||||
|
|
|
|||
126
app/assets/javascripts/create_label.js.es6
Normal file
126
app/assets/javascripts/create_label.js.es6
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
(function (w) {
|
||||
class CreateLabelDropdown {
|
||||
constructor ($el, projectId) {
|
||||
this.$el = $el;
|
||||
this.projectId = projectId;
|
||||
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);
|
||||
this.$newLabelError = $('.js-label-error', this.$el);
|
||||
this.$newLabelCreateButton = $('.js-new-label-btn', this.$el);
|
||||
this.$colorSuggestions = $('.suggest-colors-dropdown a', this.$el);
|
||||
|
||||
this.$newLabelError.hide();
|
||||
this.$newLabelCreateButton.disable();
|
||||
|
||||
this.cleanBinding();
|
||||
this.addBinding();
|
||||
}
|
||||
|
||||
cleanBinding () {
|
||||
this.$colorSuggestions.off('click');
|
||||
this.$newLabelField.off('keyup change');
|
||||
this.$newColorField.off('keyup change');
|
||||
this.$dropdownBack.off('click');
|
||||
this.$cancelButton.off('click');
|
||||
this.$newLabelCreateButton.off('click');
|
||||
}
|
||||
|
||||
addBinding () {
|
||||
const self = this;
|
||||
|
||||
this.$colorSuggestions.on('click', function (e) {
|
||||
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));
|
||||
|
||||
this.$cancelButton.on('click', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
self.resetForm();
|
||||
self.$dropdownBack.trigger('click');
|
||||
});
|
||||
|
||||
this.$newLabelCreateButton.on('click', this.saveLabel.bind(this));
|
||||
}
|
||||
|
||||
addColorValue (e, $this) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
this.$newColorField.val($this.data('color')).trigger('change');
|
||||
this.$colorPreview
|
||||
.css('background-color', $this.data('color'))
|
||||
.parent()
|
||||
.addClass('is-active');
|
||||
}
|
||||
|
||||
enableLabelCreateButton () {
|
||||
if (this.$newLabelField.val() !== '' && this.$newColorField.val() !== '') {
|
||||
this.$newLabelError.hide();
|
||||
this.$newLabelCreateButton.enable();
|
||||
} else {
|
||||
this.$newLabelCreateButton.disable();
|
||||
}
|
||||
}
|
||||
|
||||
resetForm () {
|
||||
this.$newLabelField
|
||||
.val('')
|
||||
.trigger('change');
|
||||
|
||||
this.$newColorField
|
||||
.val('')
|
||||
.trigger('change');
|
||||
|
||||
this.$colorPreview
|
||||
.css('background-color', '')
|
||||
.parent()
|
||||
.removeClass('is-active');
|
||||
}
|
||||
|
||||
saveLabel (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
Api.newLabel(this.projectId, {
|
||||
name: this.$newLabelField.val(),
|
||||
color: this.$newColorField.val()
|
||||
}, (label) => {
|
||||
this.$newLabelCreateButton.enable();
|
||||
|
||||
if (label.message) {
|
||||
let errors;
|
||||
|
||||
if (typeof label.message === 'string') {
|
||||
errors = label.message;
|
||||
} else {
|
||||
errors = _.map(label.message, function (value, key) {
|
||||
return key + " " + value[0];
|
||||
}).join("<br/>");
|
||||
}
|
||||
|
||||
this.$newLabelError
|
||||
.html(errors)
|
||||
.show();
|
||||
} else {
|
||||
this.$dropdownBack.trigger('click');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (!w.gl) {
|
||||
w.gl = {};
|
||||
}
|
||||
|
||||
gl.CreateLabelDropdown = CreateLabelDropdown;
|
||||
})(window);
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
var _this;
|
||||
_this = this;
|
||||
$('.js-label-select').each(function(i, dropdown) {
|
||||
var $block, $colorPreview, $dropdown, $form, $loading, $newLabelCreateButton, $newLabelError, $selectbox, $sidebarCollapsedValue, $value, abilityName, defaultLabel, enableLabelCreateButton, issueURLSplit, issueUpdateURL, labelHTMLTemplate, labelNoneHTMLTemplate, labelUrl, newColorField, newLabelField, projectId, resetForm, saveLabel, saveLabelData, selectedLabel, showAny, showNo;
|
||||
var $block, $colorPreview, $dropdown, $form, $loading, $selectbox, $sidebarCollapsedValue, $value, abilityName, defaultLabel, enableLabelCreateButton, issueURLSplit, issueUpdateURL, labelHTMLTemplate, labelNoneHTMLTemplate, labelUrl, projectId, saveLabelData, selectedLabel, showAny, showNo;
|
||||
$dropdown = $(dropdown);
|
||||
projectId = $dropdown.data('project-id');
|
||||
labelUrl = $dropdown.data('labels');
|
||||
|
|
@ -13,8 +13,6 @@
|
|||
if ((selectedLabel != null) && !$dropdown.hasClass('js-multiselect')) {
|
||||
selectedLabel = selectedLabel.split(',');
|
||||
}
|
||||
newLabelField = $('#new_label_name');
|
||||
newColorField = $('#new_label_color');
|
||||
showNo = $dropdown.data('show-no');
|
||||
showAny = $dropdown.data('show-any');
|
||||
defaultLabel = $dropdown.data('default-label');
|
||||
|
|
@ -24,10 +22,6 @@
|
|||
$form = $dropdown.closest('form');
|
||||
$sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon span');
|
||||
$value = $block.find('.value');
|
||||
$newLabelError = $('.js-label-error');
|
||||
$colorPreview = $('.js-dropdown-label-color-preview');
|
||||
$newLabelCreateButton = $('.js-new-label-btn');
|
||||
$newLabelError.hide();
|
||||
$loading = $block.find('.block-loading').fadeOut();
|
||||
if (issueUpdateURL != null) {
|
||||
issueURLSplit = issueUpdateURL.split('/');
|
||||
|
|
@ -36,62 +30,9 @@
|
|||
labelHTMLTemplate = _.template('<% _.each(labels, function(label){ %> <a href="<%- ["",issueURLSplit[1], issueURLSplit[2],""].join("/") %>issues?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> <% }); %>');
|
||||
labelNoneHTMLTemplate = '<span class="no-value">None</span>';
|
||||
}
|
||||
if (newLabelField.length) {
|
||||
$('.suggest-colors-dropdown a').on("click", function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
newColorField.val($(this).data('color')).trigger('change');
|
||||
return $colorPreview.css('background-color', $(this).data('color')).parent().addClass('is-active');
|
||||
});
|
||||
resetForm = function() {
|
||||
newLabelField.val('').trigger('change');
|
||||
newColorField.val('').trigger('change');
|
||||
return $colorPreview.css('background-color', '').parent().removeClass('is-active');
|
||||
};
|
||||
$('.dropdown-menu-back').on('click', function() {
|
||||
return resetForm();
|
||||
});
|
||||
$('.js-cancel-label-btn').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
resetForm();
|
||||
return $('.dropdown-menu-back', $dropdown.parent()).trigger('click');
|
||||
});
|
||||
enableLabelCreateButton = function() {
|
||||
if (newLabelField.val() !== '' && newColorField.val() !== '') {
|
||||
$newLabelError.hide();
|
||||
return $newLabelCreateButton.enable();
|
||||
} else {
|
||||
return $newLabelCreateButton.disable();
|
||||
}
|
||||
};
|
||||
saveLabel = function() {
|
||||
return Api.newLabel(projectId, {
|
||||
name: newLabelField.val(),
|
||||
color: newColorField.val()
|
||||
}, function(label) {
|
||||
$newLabelCreateButton.enable();
|
||||
if (label.message != null) {
|
||||
var errorText = label.message;
|
||||
if (_.isObject(label.message)) {
|
||||
errorText = _.map(label.message, function(value, key) {
|
||||
return key + " " + value[0];
|
||||
}).join('<br/>');
|
||||
}
|
||||
return $newLabelError.html(errorText).show();
|
||||
} else {
|
||||
return $('.dropdown-menu-back', $dropdown.parent()).trigger('click');
|
||||
}
|
||||
});
|
||||
};
|
||||
newLabelField.on('keyup change', enableLabelCreateButton);
|
||||
newColorField.on('keyup change', enableLabelCreateButton);
|
||||
$newLabelCreateButton.disable().on('click', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
return saveLabel();
|
||||
});
|
||||
}
|
||||
|
||||
new gl.CreateLabelDropdown($dropdown.closest('.dropdown').find('.dropdown-new-label'), projectId);
|
||||
|
||||
saveLabelData = function() {
|
||||
var data, selected;
|
||||
selected = $dropdown.closest('.selectbox').find("input[name='" + ($dropdown.data('field-name')) + "']").map(function() {
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
= render 'shared/sort_dropdown'
|
||||
- elsif current_user
|
||||
.dropdown
|
||||
%button.btn.btn-create.js-new-board-list{ type: "button", data: { toggle: "dropdown", labels: labels_filter_path } }
|
||||
%button.btn.btn-create.js-new-board-list{ type: "button", data: { toggle: "dropdown", labels: labels_filter_path, project_id: @project.try(:id) } }
|
||||
Create new list
|
||||
.dropdown-menu.dropdown-menu-paging.dropdown-menu-align-right.dropdown-menu-issues-board-new.dropdown-menu-selectable
|
||||
= render partial: "shared/issuable/label_page_default", locals: { show_footer: true, show_create: true, show_boards_content: true, title: "Create a new list" }
|
||||
|
|
|
|||
Loading…
Reference in a new issue