diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-12-10 15:10:18 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-12-10 15:10:18 +0300 |
commit | e838c62efb5d95fe76b5bbb6cba8b73c40eb2008 (patch) | |
tree | 6950ae1392a4c596e0885e7f79a8b69d6b008afb /app/assets/javascripts/labels/create_label_dropdown.js | |
parent | 240609275dbc67cfd6eab5d5a55ab632db41a9ac (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/labels/create_label_dropdown.js')
-rw-r--r-- | app/assets/javascripts/labels/create_label_dropdown.js | 131 |
1 files changed, 131 insertions, 0 deletions
diff --git a/app/assets/javascripts/labels/create_label_dropdown.js b/app/assets/javascripts/labels/create_label_dropdown.js new file mode 100644 index 00000000000..8c166158a44 --- /dev/null +++ b/app/assets/javascripts/labels/create_label_dropdown.js @@ -0,0 +1,131 @@ +/* eslint-disable func-names */ + +import $ from 'jquery'; +import Api from '~/api'; +import { humanize } from '~/lib/utils/text_utility'; + +export default class CreateLabelDropdown { + constructor($el, namespacePath, projectPath) { + 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); + this.$addList = $('.js-add-list', 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.addListDefault = this.$addList.is(':checked'); + + this.cleanBinding(); + this.addBinding(); + } + + cleanBinding() { + // eslint-disable-next-line @gitlab/no-global-event-off + this.$colorSuggestions.off('click'); + // eslint-disable-next-line @gitlab/no-global-event-off + this.$newLabelField.off('keyup change'); + // eslint-disable-next-line @gitlab/no-global-event-off + this.$newColorField.off('keyup change'); + // eslint-disable-next-line @gitlab/no-global-event-off + this.$dropdownBack.off('click'); + // eslint-disable-next-line @gitlab/no-global-event-off + this.$cancelButton.off('click'); + // eslint-disable-next-line @gitlab/no-global-event-off + 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', (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.$addList.prop('checked', this.addListDefault); + + this.$colorPreview.css('background-color', '').parent().removeClass('is-active'); + } + + saveLabel(e) { + e.preventDefault(); + e.stopPropagation(); + + Api.newLabel( + this.namespacePath, + this.projectPath, + { + title: 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 = Object.keys(label.message) + .map((key) => `${humanize(key)} ${label.message[key].join(', ')}`) + .join('<br/>'); + } + + this.$newLabelError.html(errors).show(); + } else { + const addNewList = this.$addList.is(':checked'); + this.$dropdownBack.trigger('click'); + $(document).trigger('created.label', [label, addNewList]); + } + }, + ); + } +} |