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]);
+        }
+      },
+    );
+  }
+}