Множественный выбор и групповые операции

Библиотека To Do List позволяет выбирать несколько задач и управлять ими одновременно.

К сведению

Узнайте, как выбирать и управлять несколькими задачами через интерфейс.

Предварительно выбранные задачи

Чтобы создать To Do List с заранее выбранными задачами, используйте конфигурационное свойство selected. Пример ниже предварительно выбирает три задачи при инициализации:

const list = new ToDo("#root", {
    tasks: [
        { id: "1", text: "Task 1" },
        { 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" },
        { id: "2", text: "Task 2" },
        { id: "2.1", text: "Task 2.1", parent: "2" },
        { id: "2.1.1", text: "Task 2.1.1", parent: "2.1" },
        { id: "2.2", text: "Task 2.2", parent: "2" },
    ],
    selected: ["1.1", "1.2", "2.2"],
});

console.log(list.getSelection()); // ["1.1", "1.2", "2.2"]

Выбор задач

Используйте метод selectTask() для выбора задач после инициализации. Метод принимает два параметра:

• id - идентификатор выбираемой задачи
• join - добавлять ли задачу к текущему выделению

Выбор одной задачи

По умолчанию параметр join равен false. Метод выбирает только указанную задачу и сбрасывает ранее выбранные.

Следующий фрагмент заменяет текущее выделение одной задачей:

const list = new ToDo("#root", {
    tasks: [
        { id: "1", text: "Task 1" },
        { 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" },
        { id: "2", text: "Task 2" },
        { id: "2.1", text: "Task 2.1", parent: "2" },
        { id: "2.1.1", text: "Task 2.1.1", parent: "2.1" },
        { id: "2.2", text: "Task 2.2", parent: "2" },
    ],
    selected: ["1.1", "1.2", "2.2"],
});

console.log(list.getSelection()) // ["1.1", "1.2", "2.2"]

list.selectTask({ 
    id: "2.1", 
    join: false // сбросить выделение ранее выбранных задач
});

console.log(list.getSelection()) // ["2.1"]

Выбор нескольких задач

Чтобы выбрать несколько задач, установите параметр join в true. Метод selectTask() добавит указанную задачу к текущему выделению.

Пример ниже выбирает несколько задач в цикле:

const list = new ToDo("#root", {
    tasks: [
        { id: "1", text: "Task 1" },
        { 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" },
        { id: "2", text: "Task 2" },
        { id: "2.1", text: "Task 2.1", parent: "2" },
        { id: "2.1.1", text: "Task 2.1.1", parent: "2.1" },
        { id: "2.2", text: "Task 2.2", parent: "2" },
    ]
});

const selected = ["1.1", "1.2", "2.2"];

for (id of selected) {
    list.selectTask({ id, join: true });
}

console.log(list.getSelection()) // ["1.1", "1.2", "2.2"]

Фрагмент ниже добавляет ещё одну задачу к текущему выделению:

console.log(list.getSelection()) // ["1.1", "1.2", "2.2"]

list.selectTask({ id: "2.1", join: true });

console.log(list.getSelection()) // ["1.1", "1.2", "2.2", "2.1"]

Получение всех выбранных задач

Чтобы получить идентификаторы всех текущих выбранных задач, используйте метод getSelection(). Пример ниже показывает разницу между несортированным и сортированным выводом:

// сортировка отключена
list.getSelection({ sorted: false }); // ["1.2", "1.1", "2.2", "2.1"]

// сортировка включена
list.getSelection({ sorted: true }); // ["1.1", "1.2", "2.1", "2.2"]

Включите параметр sorted, чтобы получить идентификаторы выбранных задач в порядке их отображения на экране.

Управление выбранными задачами

После выбора нескольких задач примените операции ко всем им сразу.

Библиотека предоставляет метод eachSelected() для перебора всех выбранных задач. Метод принимает дополнительные параметры sorted и reversed, управляющие сортировкой и направлением обхода.

Пример ниже удаляет все выбранные задачи:

list.eachSelected(id => {
    list.deleteTask({ id });
}, true);

Список доступных операций

Через методы API можно выполнять следующие групповые операции над несколькими выбранными задачами:

• copyTask() - копировать задачи
• pasteTask() - вставить задачи
• moveTask() - переместить задачи
• deleteTask() - удалить задачи
• checkTask(), uncheckTask() - отметить задачи как выполненные или невыполненные
• indentTask(), unindentTask() - увеличить или уменьшить уровень вложенности задач

Сброс выделения

Снять выделение с одной задачи

Чтобы снять выделение с одной задачи, передайте её идентификатор в метод unselectTask(). Фрагмент ниже снимает выделение с одной задачи:

list.unselectTask({ id: "1.1" });

Снять выделение со всех задач

Чтобы снять выделение со всех текущих выбранных задач, передайте id: null в метод unselectTask():

list.unselectTask({ id: null });

Горячие клавиши

К сведению

Дополнительную информацию смотрите в руководстве Навигация с клавиатуры.