BigW Consortium Gitlab

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

import UsersSelect from './users_select';
4

5 6 7 8
class Todos {
  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 42 43 44 45
    $('form.filter-form').on('submit', function applyFilters(event) {
      event.preventDefault();
      gl.utils.visitUrl(`${this.action}&${$(this).serialize()}`);
    });
    return new UsersSelect();
  }
46

47 48 49 50 51 52 53 54 55 56
  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(),
    });
  }
57

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

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

78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94
  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
95
    }
96
  }
Fatih Acet committed
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 132
  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');
  }

133 134 135 136 137
  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;
  }
138

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

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

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

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

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