BigW Consortium Gitlab

todos.js 4.84 KB
Newer Older
1
/* eslint-disable class-methods-use-this, no-unneeded-ternary, quote-props */
2 3
/* global UsersSelect */

4 5 6 7
class Todos {
  constructor() {
    this.initFilters();
    this.bindEvents();
8
    this.todo_ids = [];
9

10 11 12
    this.cleanupWrapper = this.cleanup.bind(this);
    document.addEventListener('beforeunload', this.cleanupWrapper);
  }
Fatih Acet committed
13

14 15 16 17
  cleanup() {
    this.unbindEvents();
    document.removeEventListener('beforeunload', this.cleanupWrapper);
  }
Fatih Acet committed
18

19 20
  unbindEvents() {
    $('.js-done-todo, .js-undo-todo, .js-add-todo').off('click', this.updateRowStateClickedWrapper);
21
    $('.js-todos-mark-all', '.js-todos-undo-all').off('click', this.updateallStateClickedWrapper);
22 23
    $('.todo').off('click', this.goToTodoUrl);
  }
24

25 26
  bindEvents() {
    this.updateRowStateClickedWrapper = this.updateRowStateClicked.bind(this);
27
    this.updateAllStateClickedWrapper = this.updateAllStateClicked.bind(this);
28

29
    $('.js-done-todo, .js-undo-todo, .js-add-todo').on('click', this.updateRowStateClickedWrapper);
30
    $('.js-todos-mark-all, .js-todos-undo-all').on('click', this.updateAllStateClickedWrapper);
31 32
    $('.todo').on('click', this.goToTodoUrl);
  }
Fatih Acet committed
33

34 35 36 37
  initFilters() {
    this.initFilterDropdown($('.js-project-search'), 'project_id', ['text']);
    this.initFilterDropdown($('.js-type-search'), 'type');
    this.initFilterDropdown($('.js-action-search'), 'action_id');
38

39 40 41 42 43 44
    $('form.filter-form').on('submit', function applyFilters(event) {
      event.preventDefault();
      gl.utils.visitUrl(`${this.action}&${$(this).serialize()}`);
    });
    return new UsersSelect();
  }
45

46 47 48 49 50 51 52 53 54 55
  initFilterDropdown($dropdown, fieldName, searchFields) {
    $dropdown.glDropdown({
      fieldName,
      selectable: true,
      filterable: searchFields ? true : false,
      search: { fields: searchFields },
      data: $dropdown.data('data'),
      clicked: () => $dropdown.closest('form.filter-form').submit(),
    });
  }
56

57 58 59 60
  updateRowStateClicked(e) {
    e.preventDefault();

    const target = e.target;
61
    target.setAttribute('disabled', true);
62 63 64
    target.classList.add('disabled');
    $.ajax({
      type: 'POST',
65
      url: target.dataset.href,
66 67
      dataType: 'json',
      data: {
68
        '_method': target.dataset.method,
69 70 71 72 73 74 75
      },
      success: (data) => {
        this.updateRowState(target);
        return this.updateBadges(data);
      },
    });
  }
Fatih Acet committed
76

77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93
  updateRowState(target) {
    const row = target.closest('li');
    const restoreBtn = row.querySelector('.js-undo-todo');
    const doneBtn = row.querySelector('.js-done-todo');

    target.classList.add('hidden');
    target.removeAttribute('disabled');
    target.classList.remove('disabled');

    if (target === doneBtn) {
      row.classList.add('done-reversible');
      restoreBtn.classList.remove('hidden');
    } else if (target === restoreBtn) {
      row.classList.remove('done-reversible');
      doneBtn.classList.remove('hidden');
    } else {
      row.parentNode.removeChild(row);
Bryce Johnson committed
94
    }
95
  }
Fatih Acet committed
96

97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131
  updateAllStateClicked(e) {
    e.preventDefault();

    const target = e.currentTarget;
    const requestData = { '_method': target.dataset.method, ids: this.todo_ids };
    target.setAttribute('disabled', true);
    target.classList.add('disabled');
    $.ajax({
      type: 'POST',
      url: target.dataset.href,
      dataType: 'json',
      data: requestData,
      success: (data) => {
        this.updateAllState(target, data);
        return this.updateBadges(data);
      },
    });
  }

  updateAllState(target, data) {
    const markAllDoneBtn = document.querySelector('.js-todos-mark-all');
    const undoAllBtn = document.querySelector('.js-todos-undo-all');
    const todoListContainer = document.querySelector('.js-todos-list-container');
    const nothingHereContainer = document.querySelector('.js-nothing-here-container');

    target.removeAttribute('disabled');
    target.classList.remove('disabled');

    this.todo_ids = (target === markAllDoneBtn) ? data.updated_ids : [];
    undoAllBtn.classList.toggle('hidden');
    markAllDoneBtn.classList.toggle('hidden');
    todoListContainer.classList.toggle('hidden');
    nothingHereContainer.classList.toggle('hidden');
  }

132 133 134 135 136
  updateBadges(data) {
    $(document).trigger('todo:toggle', data.count);
    document.querySelector('.todos-pending .badge').innerHTML = data.count;
    document.querySelector('.todos-done .badge').innerHTML = data.done_count;
  }
137

138 139
  goToTodoUrl(e) {
    const todoLink = this.dataset.url;
140

141 142
    if (!todoLink) {
      return;
Bryce Johnson committed
143
    }
Fatih Acet committed
144

145 146 147 148
    if (gl.utils.isMetaClick(e)) {
      const windowTarget = '_blank';
      const selected = e.target;
      e.preventDefault();
Kushal Pandya committed
149

150 151 152
      if (selected.tagName === 'IMG') {
        const avatarUrl = selected.parentElement.getAttribute('href');
        window.open(avatarUrl, windowTarget);
Fatih Acet committed
153
      } else {
154
        window.open(todoLink, windowTarget);
Fatih Acet committed
155
      }
156 157
    } else {
      gl.utils.visitUrl(todoLink);
Bryce Johnson committed
158 159
    }
  }
160
}
Fatih Acet committed
161

162 163
window.gl = window.gl || {};
gl.Todos = Todos;