debian-mirror-gitlab/app/assets/javascripts/pages/dashboard/todos/index/todos.js

202 lines
6 KiB
JavaScript
Raw Normal View History

2021-12-11 22:18:48 +05:30
/* eslint-disable class-methods-use-this */
2018-05-09 12:01:36 +05:30
import $ from 'jquery';
2021-04-29 21:17:54 +05:30
import { getGroups } from '~/api/groups_api';
import { getProjects } from '~/api/projects_api';
2020-11-24 15:15:51 +05:30
import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
2021-09-30 23:02:18 +05:30
import createFlash from '~/flash';
2021-03-11 19:13:27 +05:30
import axios from '~/lib/utils/axios_utils';
2018-03-17 18:26:18 +05:30
import { isMetaClick } from '~/lib/utils/common_utils';
2019-12-21 20:55:43 +05:30
import { addDelimiter } from '~/lib/utils/text_utility';
2021-03-11 19:13:27 +05:30
import { visitUrl } from '~/lib/utils/url_utility';
2018-03-27 19:54:05 +05:30
import { __ } from '~/locale';
2021-03-11 19:13:27 +05:30
import UsersSelect from '~/users_select';
2017-09-10 17:25:29 +05:30
export default class Todos {
2017-08-17 22:00:37 +05:30
constructor() {
this.initFilters();
this.bindEvents();
this.todo_ids = [];
this.cleanupWrapper = this.cleanup.bind(this);
document.addEventListener('beforeunload', this.cleanupWrapper);
}
cleanup() {
this.unbindEvents();
document.removeEventListener('beforeunload', this.cleanupWrapper);
}
unbindEvents() {
$('.js-done-todo, .js-undo-todo, .js-add-todo').off('click', this.updateRowStateClickedWrapper);
$('.js-todos-mark-all', '.js-todos-undo-all').off('click', this.updateallStateClickedWrapper);
$('.todo').off('click', this.goToTodoUrl);
}
bindEvents() {
this.updateRowStateClickedWrapper = this.updateRowStateClicked.bind(this);
this.updateAllStateClickedWrapper = this.updateAllStateClicked.bind(this);
$('.js-done-todo, .js-undo-todo, .js-add-todo').on('click', this.updateRowStateClickedWrapper);
$('.js-todos-mark-all, .js-todos-undo-all').on('click', this.updateAllStateClickedWrapper);
$('.todo').on('click', this.goToTodoUrl);
}
initFilters() {
2021-04-29 21:17:54 +05:30
this.initAjaxFilterDropdown(getGroups, $('.js-group-search'), 'group_id');
this.initAjaxFilterDropdown(getProjects, $('.js-project-search'), 'project_id');
2017-08-17 22:00:37 +05:30
this.initFilterDropdown($('.js-type-search'), 'type');
this.initFilterDropdown($('.js-action-search'), 'action_id');
return new UsersSelect();
}
2021-04-29 21:17:54 +05:30
initAjaxFilterDropdown(apiMethod, $dropdown, fieldName) {
initDeprecatedJQueryDropdown($dropdown, {
fieldName,
selectable: true,
filterable: true,
filterRemote: true,
data(search, callback) {
return apiMethod(search, {}, (data) => {
callback(
data.map((d) => ({
id: d.id,
text: d.full_name || d.name_with_namespace,
})),
);
});
},
clicked: () => {
const $formEl = $dropdown.closest('form.filter-form');
$formEl.submit();
},
});
}
2017-08-17 22:00:37 +05:30
initFilterDropdown($dropdown, fieldName, searchFields) {
2020-11-24 15:15:51 +05:30
initDeprecatedJQueryDropdown($dropdown, {
2017-08-17 22:00:37 +05:30
fieldName,
selectable: true,
2021-12-11 22:18:48 +05:30
filterable: Boolean(searchFields),
2017-08-17 22:00:37 +05:30
search: { fields: searchFields },
data: $dropdown.data('data'),
2018-11-18 11:00:15 +05:30
clicked: () => {
const $formEl = $dropdown.closest('form.filter-form');
$formEl.submit();
},
2017-08-17 22:00:37 +05:30
});
}
updateRowStateClicked(e) {
2017-09-10 17:25:29 +05:30
e.stopPropagation();
2017-08-17 22:00:37 +05:30
e.preventDefault();
2018-11-08 19:23:39 +05:30
const { target } = e;
2017-08-17 22:00:37 +05:30
target.setAttribute('disabled', true);
target.classList.add('disabled');
2018-03-17 18:26:18 +05:30
axios[target.dataset.method](target.dataset.href)
.then(({ data }) => {
2017-08-17 22:00:37 +05:30
this.updateRowState(target);
2018-03-17 18:26:18 +05:30
this.updateBadges(data);
2018-12-13 13:39:08 +05:30
})
.catch(() => {
2018-12-05 23:21:45 +05:30
this.updateRowState(target, true);
2021-09-30 23:02:18 +05:30
return createFlash({
message: __('Error updating status of to-do item.'),
});
2018-12-05 23:21:45 +05:30
});
2017-08-17 22:00:37 +05:30
}
2018-12-05 23:21:45 +05:30
updateRowState(target, isInactive = false) {
2017-08-17 22:00:37 +05:30
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');
2018-12-05 23:21:45 +05:30
if (isInactive === true) {
restoreBtn.classList.add('hidden');
doneBtn.classList.remove('hidden');
} else if (target === doneBtn) {
2017-08-17 22:00:37 +05:30
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);
}
}
updateAllStateClicked(e) {
2017-09-10 17:25:29 +05:30
e.stopPropagation();
2017-08-17 22:00:37 +05:30
e.preventDefault();
const target = e.currentTarget;
target.setAttribute('disabled', true);
target.classList.add('disabled');
2018-03-17 18:26:18 +05:30
axios[target.dataset.method](target.dataset.href, {
ids: this.todo_ids,
2018-12-13 13:39:08 +05:30
})
.then(({ data }) => {
this.updateAllState(target, data);
this.updateBadges(data);
})
2021-09-30 23:02:18 +05:30
.catch(() =>
createFlash({
message: __('Error updating status for all to-do items.'),
}),
);
2017-08-17 22:00:37 +05:30
}
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');
2018-12-13 13:39:08 +05:30
this.todo_ids = target === markAllDoneBtn ? data.updated_ids : [];
2017-08-17 22:00:37 +05:30
undoAllBtn.classList.toggle('hidden');
markAllDoneBtn.classList.toggle('hidden');
todoListContainer.classList.toggle('hidden');
nothingHereContainer.classList.toggle('hidden');
}
updateBadges(data) {
$(document).trigger('todo:toggle', data.count);
2022-03-02 08:16:31 +05:30
document.querySelector('.js-todos-pending .js-todos-badge').innerHTML = addDelimiter(
data.count,
);
document.querySelector('.js-todos-done .js-todos-badge').innerHTML = addDelimiter(
data.done_count,
);
2017-08-17 22:00:37 +05:30
}
goToTodoUrl(e) {
const todoLink = this.dataset.url;
2021-03-08 18:12:59 +05:30
if (!todoLink || e.target.closest('a')) {
2017-08-17 22:00:37 +05:30
return;
}
2018-03-17 18:26:18 +05:30
e.stopPropagation();
e.preventDefault();
if (isMetaClick(e)) {
2017-08-17 22:00:37 +05:30
const windowTarget = '_blank';
2018-03-17 18:26:18 +05:30
window.open(todoLink, windowTarget);
2017-08-17 22:00:37 +05:30
} else {
2018-03-17 18:26:18 +05:30
visitUrl(todoLink);
2017-08-17 22:00:37 +05:30
}
}
}