BigW Consortium Gitlab

label_manager.js.es6 3.42 KB
Newer Older
1 2 3
/* eslint-disable comma-dangle, class-methods-use-this, no-underscore-dangle, no-param-reassign, no-unused-vars, consistent-return, func-names, space-before-function-paren, padded-blocks, max-len */
/* global Flash */

4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
((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.prioritizedLabels.sortable({
        items: 'li',
        placeholder: 'list-placeholder',
        axis: 'y',
        update: this.onPrioritySortUpdate.bind(this)
      });
      this.bindEvents();
    }

    bindEvents() {
      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');
      return _this.toggleLabelPriority($label, action);
    }

    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;
      }
      if ($from.find('li').length === 1) {
        $from.find('.empty-message').removeClass('hidden');
      }
      if (!$target.find('li').length) {
        $target.find('.empty-message').addClass('hidden');
      }
      $label.detach().appendTo($target);
56
      // Return if we are not persisting state
57 58 59 60 61 62 63 64
      if (!persistState) {
        return;
      }
      if (action === 'remove') {
        xhr = $.ajax({
          url,
          type: 'DELETE'
        });
65
        // Restore empty message
66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97
        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() {
98 99 100
      const sortedIds = [];
      this.prioritizedLabels.find('li').each(function() {
        sortedIds.push($(this).data('id'));
101
      });
102
      return sortedIds;
103 104 105 106 107 108
    }
  }

  gl.LabelManager = LabelManager;

})(window.gl || (window.gl = {}));