Operations with tasks
Adding a new task
To add a new task to the list, use the addTask() method:
list.addTask({
id: "1.1.1",
project: "first",
parent: "1.1",
targetId: "1.1.2",
reverse: true,
task: {
text: "Task 1.1.1",
}
});
Copying/pasting a task
Copy and paste
The quickest way to copy and paste a task is use the copyTask() method. For that, it is necessary to pass the following parameters to the method:
- the ID of the task that you want to copy and paste
- the ID of the future project (if it exists)
- the ID of the target task where the copied task should be pasted
- another two parameters (parent and reverse) are optional
list.copyTask({
id: "1.1", // ID of the task to copy
project: "p_2", // ID of the future project (if exists)
parent: "2.1", // ID of the future parent
targetId: "2.1.2", // ID of the target task
reverse: true // the task will be pasted before the target one
});
Copy to the clipboard
To copy a necessary task to the clipboard without its further pasting, pass just the ID of the task to the copyTask() method:
list.copyTask({
id: "1.1"
});
Paste from the clipboard
You can paste the copied task from the clipboard to the necessary place via the pasteTask() method:
list.pasteTask({
parent: "1",
targetId: "1.2",
});
Updating a task
To dynamically update parameters of a task, apply the updateTask() method:
list.updateTask({
id: "1.1.1",
task: {
text: "Completed task"
}
});
Moving a task
To move a task to another position, use the moveTask() method:
list.moveTask({
id: "1.1", // ID of the task to move
project:"p_2", // ID of the future project (if exists)
parent: "2", // ID of the future parent
targetId: "2.1", // ID of the target task
reverse: true // the task will be placed before the target one
});
note
If you move a parent task, it will be moved together with its subtasks.
Deleting a task
To delete a task, use the deleteTask() method:
list.deleteTask({ id: "1.2" });
note
The method removes the task with all its child tasks
Selecting/unselecting a task
To select a particular task, pass the ID of the task as a parameter to the selectTask() method:
list.selectTask({
id: "1.1",
});
tip
To get the ID of the currently selected task, use the getSelection()
method
To remove selection from a selected task, pass the ID of the task as a parameter to the unselectTask() method:
list.unselectTask({ id: "1.1" });
Expanding/collapsing a task
To collapse a task, use the collapseTask() method. The method takes the ID of the task as a parameter:
list.collapseTask({ id: "1.1" });
To expand a collapsed task by its ID, use the expandTask() method:
list.expandTask({ id: "1.1" });
Marking a task complete/incomplete
You may mark the necessary task as complete/incomplete via the corresponding checkTask() and uncheckTask() methods:
list.checkTask({
id: "1.1.1",
manual: false
});
list.uncheckTask({
id: "1.1.1",
manual: false
});
When manual: false
is set, the result of applying the method depends on the value which is specified for the behavior attribute of the selectable parameter of the taskShape property.
If the "auto" mode is specified via the taskShape property but you need to check/uncheck the task in the "manual" mode, set the manual parameter of the checkTask() or uncheckTask() method to true:
list.checkTask({
id: "1.1.1",
manual: true
});
list.uncheckTask({
id: "1.1.1",
manual: true
});
Changing the indent level of a task
To change the nesting level of a task dynamically, use the following two methods:
- indentTask() - to demote the nesting level of a task to one lower level
const list = new ToDo("#root", {
tasks: [
{ id: "1", text: "Task 1 #tag1" },
{ id: "1.1", text: "Task 1.1", parent: "1" },
{ id: "1.1.1", text: "Task 1.1.1", parent: "1.1" },
{ id: "1.2", text: "Task 1.2", parent: "1" },
]
});
list.indentTask({ id: "1.2" });
console.log(list.getParentIds({ id: "1.2" })); // ['1.1', '1']
- unindentTask() - to promote the nesting level of the task to one higher level
const list = new ToDo("#root", {
tasks: [
{ id: "1", text: "Task 1 #tag1" },
{ id: "1.1", text: "Task 1.1", parent: "1" },
{ id: "1.1.1", text: "Task 1.1.1", parent: "1.1" },
{ id: "1.2", text: "Task 1.2", parent: "1" },
]
});
list.unindentTask({ id: "1.2" });
console.log(list.getParentIds({ id: "1.2" })); // []
info
The result of applying the methods depends on the structure of the list
Filtering tasks
You can find the tasks that match the specified criteria with the help of the setFilter() method. The method supports the strict mode of filtering that allows you to filter tasks by the exact match.
// filter data by the specified rules
list.setFilter({
match: "#tag1",
highlight: true,
strict: true
});
To reset filtering, call the method without parameters:
// reset filtering
list.setFilter({});