2018-03-09 20:18:59 +00:00
|
|
|
import $ from 'jquery';
|
2017-05-23 14:21:33 +00:00
|
|
|
import 'deckar01-task_list';
|
2019-01-29 13:50:22 +00:00
|
|
|
import { __ } from '~/locale';
|
2021-06-21 03:10:27 +00:00
|
|
|
import createFlash from './flash';
|
2021-02-14 18:09:20 +00:00
|
|
|
import axios from './lib/utils/axios_utils';
|
2017-02-07 06:42:21 +00:00
|
|
|
|
2017-07-06 18:05:58 +00:00
|
|
|
export default class TaskList {
|
2017-02-07 06:42:21 +00:00
|
|
|
constructor(options = {}) {
|
|
|
|
this.selector = options.selector;
|
|
|
|
this.dataType = options.dataType;
|
2017-02-15 05:53:17 +00:00
|
|
|
this.fieldName = options.fieldName;
|
2019-01-10 21:22:28 +00:00
|
|
|
this.lockVersion = options.lockVersion;
|
2019-01-23 23:44:15 +00:00
|
|
|
this.taskListContainerSelector = `${this.selector} .js-task-list-container`;
|
2019-01-26 14:49:49 +00:00
|
|
|
this.updateHandler = this.update.bind(this);
|
2021-10-20 09:12:43 +00:00
|
|
|
this.onUpdate = options.onUpdate || (() => {});
|
2019-01-26 14:49:49 +00:00
|
|
|
this.onSuccess = options.onSuccess || (() => {});
|
2019-01-22 20:53:08 +00:00
|
|
|
this.onError =
|
|
|
|
options.onError ||
|
|
|
|
function showFlash(e) {
|
|
|
|
let errorMessages = '';
|
2017-01-16 18:43:03 +00:00
|
|
|
|
2019-01-22 20:53:08 +00:00
|
|
|
if (e.response.data && typeof e.response.data === 'object') {
|
|
|
|
errorMessages = e.response.data.errors.join(' ');
|
|
|
|
}
|
2017-01-16 18:43:03 +00:00
|
|
|
|
2021-06-21 03:10:27 +00:00
|
|
|
return createFlash({
|
|
|
|
message: errorMessages || __('Update failed'),
|
|
|
|
});
|
2019-01-22 20:53:08 +00:00
|
|
|
};
|
2017-01-16 18:43:03 +00:00
|
|
|
|
2017-02-07 06:42:21 +00:00
|
|
|
this.init();
|
|
|
|
}
|
|
|
|
|
|
|
|
init() {
|
2019-01-26 14:49:49 +00:00
|
|
|
this.disable(); // Prevent duplicate event bindings
|
|
|
|
|
2020-09-25 12:10:00 +00:00
|
|
|
const taskListFields = document.querySelectorAll(
|
|
|
|
`${this.taskListContainerSelector} .js-task-list-field[data-value]`,
|
|
|
|
);
|
|
|
|
|
2020-12-23 21:10:24 +00:00
|
|
|
taskListFields.forEach((taskListField) => {
|
2020-09-25 12:10:00 +00:00
|
|
|
// eslint-disable-next-line no-param-reassign
|
|
|
|
taskListField.value = taskListField.dataset.value;
|
|
|
|
});
|
|
|
|
|
2021-05-14 09:10:24 +00:00
|
|
|
this.enable();
|
2017-02-07 06:42:21 +00:00
|
|
|
}
|
|
|
|
|
2019-01-29 13:50:22 +00:00
|
|
|
getTaskListTarget(e) {
|
|
|
|
return e && e.currentTarget ? $(e.currentTarget) : $(this.taskListContainerSelector);
|
2019-01-23 23:44:15 +00:00
|
|
|
}
|
|
|
|
|
2021-05-14 09:10:24 +00:00
|
|
|
// Disable any task items that don't have a data-sourcepos attribute, on the
|
|
|
|
// assumption that if it doesn't then it wasn't generated from our markdown parser.
|
|
|
|
// This covers the case of markdown not being able to handle task lists inside
|
|
|
|
// markdown tables. It also includes hand coded HTML lists.
|
|
|
|
disableNonMarkdownTaskListItems(e) {
|
|
|
|
this.getTaskListTarget(e)
|
|
|
|
.find('.task-list-item')
|
|
|
|
.not('[data-sourcepos]')
|
|
|
|
.find('.task-list-item-checkbox')
|
|
|
|
.prop('disabled', true);
|
|
|
|
}
|
|
|
|
|
2022-07-26 09:09:02 +00:00
|
|
|
updateInapplicableTaskListItems(e) {
|
|
|
|
this.getTaskListTarget(e)
|
|
|
|
.find('.task-list-item-checkbox[data-inapplicable]')
|
|
|
|
.prop('disabled', true);
|
|
|
|
}
|
|
|
|
|
2019-01-23 23:44:15 +00:00
|
|
|
disableTaskListItems(e) {
|
|
|
|
this.getTaskListTarget(e).taskList('disable');
|
2022-07-26 09:09:02 +00:00
|
|
|
this.updateInapplicableTaskListItems();
|
2019-01-16 00:34:30 +00:00
|
|
|
}
|
|
|
|
|
2019-01-23 23:44:15 +00:00
|
|
|
enableTaskListItems(e) {
|
|
|
|
this.getTaskListTarget(e).taskList('enable');
|
2021-05-14 09:10:24 +00:00
|
|
|
this.disableNonMarkdownTaskListItems(e);
|
2022-07-26 09:09:02 +00:00
|
|
|
this.updateInapplicableTaskListItems(e);
|
2021-05-14 09:10:24 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
enable() {
|
|
|
|
this.enableTaskListItems();
|
|
|
|
$(document).on('tasklist:changed', this.taskListContainerSelector, this.updateHandler);
|
2019-01-16 00:34:30 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
disable() {
|
|
|
|
this.disableTaskListItems();
|
2019-01-23 23:44:15 +00:00
|
|
|
$(document).off('tasklist:changed', this.taskListContainerSelector);
|
2017-02-07 06:42:21 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
update(e) {
|
2017-02-08 09:23:45 +00:00
|
|
|
const $target = $(e.target);
|
2019-01-21 21:16:37 +00:00
|
|
|
const { index, checked, lineNumber, lineSource } = e.detail;
|
2017-02-08 08:10:04 +00:00
|
|
|
const patchData = {};
|
2019-01-18 00:52:22 +00:00
|
|
|
|
2017-02-07 06:42:21 +00:00
|
|
|
patchData[this.dataType] = {
|
2017-02-15 05:53:17 +00:00
|
|
|
[this.fieldName]: $target.val(),
|
2019-01-11 00:07:09 +00:00
|
|
|
lock_version: this.lockVersion,
|
2019-01-18 00:52:22 +00:00
|
|
|
update_task: {
|
2019-01-22 20:53:08 +00:00
|
|
|
index,
|
|
|
|
checked,
|
2019-01-18 00:52:22 +00:00
|
|
|
line_number: lineNumber,
|
|
|
|
line_source: lineSource,
|
|
|
|
},
|
2017-02-07 06:42:21 +00:00
|
|
|
};
|
2018-02-02 11:26:08 +00:00
|
|
|
|
2021-10-20 09:12:43 +00:00
|
|
|
this.onUpdate();
|
2019-01-23 23:44:15 +00:00
|
|
|
this.disableTaskListItems(e);
|
2019-01-16 00:34:30 +00:00
|
|
|
|
2018-10-10 07:13:34 +00:00
|
|
|
return axios
|
|
|
|
.patch($target.data('updateUrl') || $('form.js-issuable-update').attr('action'), patchData)
|
2019-01-16 00:33:58 +00:00
|
|
|
.then(({ data }) => {
|
|
|
|
this.lockVersion = data.lock_version;
|
2019-01-23 23:44:15 +00:00
|
|
|
this.enableTaskListItems(e);
|
2019-01-16 00:34:30 +00:00
|
|
|
|
2019-01-16 00:33:58 +00:00
|
|
|
return this.onSuccess(data);
|
|
|
|
})
|
2019-01-16 00:34:30 +00:00
|
|
|
.catch(({ response }) => {
|
2019-01-23 23:44:15 +00:00
|
|
|
this.enableTaskListItems(e);
|
2019-01-16 00:34:30 +00:00
|
|
|
|
|
|
|
return this.onError(response.data);
|
|
|
|
});
|
2017-02-07 06:42:21 +00:00
|
|
|
}
|
|
|
|
}
|