gitlab-org--gitlab-foss/app/assets/javascripts/todos.js.es6

180 lines
5.1 KiB
JavaScript
Raw Normal View History

/* eslint-disable class-methods-use-this, no-new, func-names, prefer-template, no-unneeded-ternary, object-shorthand, space-before-function-paren, comma-dangle, quote-props, consistent-return, no-else-return, no-param-reassign, max-len */
/* global UsersSelect */
((global) => {
2016-09-08 09:13:15 -04:00
class Todos {
2016-09-27 07:40:31 -04:00
constructor({ el } = {}) {
2016-09-08 09:13:15 -04:00
this.allDoneClicked = this.allDoneClicked.bind(this);
this.doneClicked = this.doneClicked.bind(this);
this.el = el || $('.js-todos-options');
2016-09-28 10:58:36 -04:00
this.perPage = this.el.data('perPage');
2016-07-24 16:45:11 -04:00
this.clearListeners();
this.initBtnListeners();
this.initFilters();
2016-07-24 16:45:11 -04:00
}
2016-09-08 09:13:15 -04:00
clearListeners() {
2016-07-24 16:45:11 -04:00
$('.done-todo').off('click');
$('.js-todos-mark-all').off('click');
return $('.todo').off('click');
2016-09-08 09:13:15 -04:00
}
2016-07-24 16:45:11 -04:00
2016-09-08 09:13:15 -04:00
initBtnListeners() {
2016-07-24 16:45:11 -04:00
$('.done-todo').on('click', this.doneClicked);
$('.js-todos-mark-all').on('click', this.allDoneClicked);
return $('.todo').on('click', this.goToTodoUrl);
2016-09-08 09:13:15 -04:00
}
2016-07-24 16:45:11 -04:00
2016-09-08 09:13:15 -04:00
initFilters() {
new UsersSelect();
2016-08-31 13:33:12 -04:00
this.initFilterDropdown($('.js-project-search'), 'project_id', ['text']);
this.initFilterDropdown($('.js-type-search'), 'type');
this.initFilterDropdown($('.js-action-search'), 'action_id');
$('form.filter-form').on('submit', function (event) {
event.preventDefault();
2017-01-13 16:54:16 -05:00
gl.utils.visitUrl(this.action + '&' + $(this).serialize());
});
2016-09-08 09:13:15 -04:00
}
2016-09-08 09:13:15 -04:00
initFilterDropdown($dropdown, fieldName, searchFields) {
$dropdown.glDropdown({
2016-09-08 09:13:15 -04:00
fieldName,
selectable: true,
2016-08-31 13:33:12 -04:00
filterable: searchFields ? true : false,
search: { fields: searchFields },
data: $dropdown.data('data'),
clicked: function() {
return $dropdown.closest('form.filter-form').submit();
}
});
2016-09-08 09:13:15 -04:00
}
2016-09-08 09:13:15 -04:00
doneClicked(e) {
2016-07-24 16:45:11 -04:00
e.preventDefault();
e.stopImmediatePropagation();
2016-09-08 09:13:15 -04:00
const $target = $(e.currentTarget);
$target.disable();
2016-07-24 16:45:11 -04:00
return $.ajax({
type: 'POST',
2016-09-08 09:13:15 -04:00
url: $target.attr('href'),
2016-07-24 16:45:11 -04:00
dataType: 'json',
data: {
'_method': 'delete'
},
success: (data) => {
2016-09-08 09:13:15 -04:00
this.redirectIfNeeded(data.count);
this.clearDone($target.closest('li'));
return this.updateBadges(data);
}
2016-07-24 16:45:11 -04:00
});
2016-09-08 09:13:15 -04:00
}
2016-07-24 16:45:11 -04:00
2016-09-08 09:13:15 -04:00
allDoneClicked(e) {
2016-07-24 16:45:11 -04:00
e.preventDefault();
e.stopImmediatePropagation();
const $target = $(e.currentTarget);
2016-09-08 09:13:15 -04:00
$target.disable();
2016-07-24 16:45:11 -04:00
return $.ajax({
type: 'POST',
2016-09-08 09:13:15 -04:00
url: $target.attr('href'),
2016-07-24 16:45:11 -04:00
dataType: 'json',
data: {
'_method': 'delete'
},
success: (data) => {
2016-09-08 09:13:15 -04:00
$target.remove();
$('.js-todos-all').html('<div class="nothing-here-block">You\'re all done!</div>');
2016-09-08 09:13:15 -04:00
return this.updateBadges(data);
}
2016-07-24 16:45:11 -04:00
});
2016-09-08 09:13:15 -04:00
}
2016-07-24 16:45:11 -04:00
2016-09-08 09:13:15 -04:00
clearDone($row) {
const $ul = $row.closest('ul');
2016-07-24 16:45:11 -04:00
$row.remove();
if (!$ul.find('li').length) {
return $ul.parents('.panel').remove();
}
2016-09-08 09:13:15 -04:00
}
2016-07-24 16:45:11 -04:00
2016-09-08 09:13:15 -04:00
updateBadges(data) {
2016-08-08 17:19:46 -04:00
$(document).trigger('todo:toggle', data.count);
$('.todos-pending .badge').text(data.count);
2016-07-24 16:45:11 -04:00
return $('.todos-done .badge').text(data.done_count);
2016-09-08 09:13:15 -04:00
}
2016-07-24 16:45:11 -04:00
2016-09-08 09:13:15 -04:00
getTotalPages() {
2016-07-24 16:45:11 -04:00
return this.el.data('totalPages');
2016-09-08 09:13:15 -04:00
}
2016-07-24 16:45:11 -04:00
2016-09-08 09:13:15 -04:00
getCurrentPage() {
2016-07-24 16:45:11 -04:00
return this.el.data('currentPage');
2016-09-08 09:13:15 -04:00
}
2016-07-24 16:45:11 -04:00
2016-09-08 09:13:15 -04:00
getTodosPerPage() {
2016-07-24 16:45:11 -04:00
return this.el.data('perPage');
2016-09-08 09:13:15 -04:00
}
2016-07-24 16:45:11 -04:00
2016-09-08 09:13:15 -04:00
redirectIfNeeded(total) {
2016-09-08 09:54:48 -04:00
const currPages = this.getTotalPages();
const currPage = this.getCurrentPage();
2016-09-08 09:13:15 -04:00
// Refresh if no remaining Todos
2016-07-24 16:45:11 -04:00
if (!total) {
2016-09-08 09:13:15 -04:00
window.location.reload();
2016-07-24 16:45:11 -04:00
return;
}
// Do nothing if no pagination
2016-07-24 16:45:11 -04:00
if (!currPages) {
return;
}
2016-09-08 09:13:15 -04:00
const newPages = Math.ceil(total / this.getTodosPerPage());
let url = location.href;
2016-07-24 16:45:11 -04:00
if (newPages !== currPages) {
// Redirect to previous page if there's one available
2016-07-24 16:45:11 -04:00
if (currPages > 1 && currPage === currPages) {
2016-09-08 09:13:15 -04:00
const pageParams = {
2016-07-24 16:45:11 -04:00
page: currPages - 1
};
url = gl.utils.mergeUrlParams(pageParams, url);
}
2017-01-13 16:54:16 -05:00
return gl.utils.visitUrl(url);
2016-07-24 16:45:11 -04:00
}
2016-09-08 09:13:15 -04:00
}
2016-07-24 16:45:11 -04:00
2016-09-08 09:13:15 -04:00
goToTodoUrl(e) {
const todoLink = $(this).data('url');
2017-01-31 04:14:01 -05:00
let targetLink = $(e.target).attr('href');
if ($(e.target).is('img')) { // See if clicked target was Avatar
targetLink = $(e.target).parent().attr('href'); // Parent of Avatar is link
}
2016-07-24 16:45:11 -04:00
if (!todoLink) {
return;
}
2017-01-31 04:14:01 -05:00
// Allow Meta-Click (Cmd+Click or Ctrl+Click)
// or Mouse3-click (middle-click)
// to open in a new tab
if (e.metaKey || e.ctrlKey || e.which === 2) {
2016-07-24 16:45:11 -04:00
e.preventDefault();
2017-01-31 04:14:01 -05:00
// Meta-Click on username leads to different URL than todoLink.
// Turbolinks can resolve that URL, but window.open requires URL manually.
if (targetLink !== todoLink) {
return window.open(targetLink, '_blank');
} else {
return window.open(todoLink, '_blank');
}
2016-07-24 16:45:11 -04:00
} else {
2017-01-13 16:54:16 -05:00
return gl.utils.visitUrl(todoLink);
2016-07-24 16:45:11 -04:00
}
2016-09-08 09:13:15 -04:00
}
}
2016-07-24 16:45:11 -04:00
2016-09-08 09:13:15 -04:00
global.Todos = Todos;
})(window.gl || (window.gl = {}));