BigW Consortium Gitlab

label_manager.js 3.79 KB
Newer Older
1
/* 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, max-len */
2
/* global Sortable */
3

4 5
import Flash from './flash';

6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
export default 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.emptyState = document.querySelector('#js-priority-labels-empty-state');
    this.sortable = Sortable.create(this.prioritizedLabels.get(0), {
      filter: '.empty-message',
      forceFallback: true,
      fallbackClass: 'is-dragging',
      dataIdAttr: 'data-id',
      onUpdate: this.onPrioritySortUpdate.bind(this),
    });
    this.bindEvents();
  }
22

23 24 25 26
  bindEvents() {
    this.prioritizedLabels.find('.btn-action').on('mousedown', this, this.onButtonActionClick);
    return this.togglePriorityButton.on('click', this, this.onTogglePriorityClick);
  }
27

28 29 30 31 32 33 34 35 36 37 38
  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');
    _this.toggleLabelPriority($label, action);
    _this.toggleEmptyState($label, $btn, action);
  }
39

40 41 42 43
  onButtonActionClick(e) {
    e.stopPropagation();
    $(e.currentTarget).tooltip('hide');
  }
44

45 46 47
  toggleEmptyState($label, $btn, action) {
    this.emptyState.classList.toggle('hidden', !!this.prioritizedLabels[0].querySelector(':scope > li'));
  }
48

49 50 51
  toggleLabelPriority($label, action, persistState) {
    if (persistState == null) {
      persistState = true;
52
    }
53 54 55 56 57 58 59 60
    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;
61
    }
62 63 64 65 66 67 68 69 70 71 72 73 74 75 76
    $label.detach().appendTo($target);
    if ($from.find('li').length) {
      $from.find('.empty-message').removeClass('hidden');
    }
    if ($target.find('> li:not(.empty-message)').length) {
      $target.find('.empty-message').addClass('hidden');
    }
    // Return if we are not persisting state
    if (!persistState) {
      return;
    }
    if (action === 'remove') {
      xhr = $.ajax({
        url,
        type: 'DELETE'
77
      });
78 79 80 81 82 83
      // Restore empty message
      if (!$from.find('li').length) {
        $from.find('.empty-message').removeClass('hidden');
      }
    } else {
      xhr = this.savePrioritySort($label, action);
84
    }
85 86
    return xhr.fail(this.rollbackLabelPosition.bind(this, $label, action));
  }
87

88 89 90
  onPrioritySortUpdate() {
    const xhr = this.savePrioritySort();
    return xhr.fail(function() {
91
      return new Flash(this.errorMessage, 'alert');
92 93
    });
  }
94

95 96 97 98 99 100 101 102
  savePrioritySort() {
    return $.post({
      url: this.prioritizedLabels.data('url'),
      data: {
        label_ids: this.getSortedLabelsIds()
      }
    });
  }
103

104 105 106 107
  rollbackLabelPosition($label, originalAction) {
    const action = originalAction === 'remove' ? 'add' : 'remove';
    this.toggleLabelPriority($label, action, false);
    return new Flash(this.errorMessage, 'alert');
108 109
  }

110 111 112 113 114 115 116 117 118 119 120 121
  getSortedLabelsIds() {
    const sortedIds = [];
    this.prioritizedLabels.find('> li').each(function() {
      const id = $(this).data('id');

      if (id) {
        sortedIds.push(id);
      }
    });
    return sortedIds;
  }
}