BigW Consortium Gitlab

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

import UsersSelect from './users_select';
4

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

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

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

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

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

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

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

40 41
    return new UsersSelect();
  }
42

43 44 45 46 47 48 49 50 51 52
  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(),
    });
  }
53

54
  updateRowStateClicked(e) {
55
    e.stopPropagation();
56 57 58
    e.preventDefault();

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

75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91
  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
92
    }
93
  }
Fatih Acet committed
94

95
  updateAllStateClicked(e) {
96
    e.stopPropagation();
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
    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');
  }

131 132 133 134 135
  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;
  }
136

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

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

144 145 146
    if (gl.utils.isMetaClick(e)) {
      const windowTarget = '_blank';
      const selected = e.target;
147
      e.stopPropagation();
148
      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
}