Конфигурация

Настройте параметры DHTMLX To Do List под свои нужды. Доступные параметры конфигурации позволяют:

• настроить внешний вид счётчика, отображающего прогресс выполнения задач
• настроить формат дат
• настроить или отключить перетаскивание задач
• отключить валидацию срока выполнения задач
• изменить режим отметки задач как выполненных
• настроить внешний вид панели инструментов
• управлять историей изменений
• настроить скрытие выполненных задач
• инициализировать To Do List в режиме только для чтения

совет

Чтобы динамически изменить параметры конфигурации после инициализации, используйте метод setConfig(). Метод уничтожает текущий компонент и пересоздаёт его с объединёнными настройками. После этого вызовите соответствующий setConfig() Toolbar, чтобы повторно привязать панель инструментов к новому API.

Задачи

Счётчик выполненных подзадач

Измените тип счётчика, показывающего, сколько дочерних задач выполнено.

По умолчанию каждая родительская задача отображает счётчик в виде отношения выполненных дочерних задач к общему их числу.

Чтобы отображать значение счётчика в виде процента, установите taskShape.counter.type в "percentage". Подробнее см. в описании taskShape. Пример ниже переключает счётчик в процентный режим:

const list = new ToDo("#root", {
    tasks,
    users,
    projects,
    taskShape: {
        counter: {
            type: "percentage" // по умолчанию "number"
        }
    }
});

Связанный пример: To do list. Счётчик подзадач и формат даты

Формат даты

По умолчанию To Do List отображает даты в формате "%d %M %Y" (например, 09 Mar 2033). Чтобы указать другой формат, используйте параметр date свойства taskShape. Следующий фрагмент задаёт формат даты с разделителем-косой чертой:

const list = new ToDo("#root", {
    tasks,
    users,
    projects,
    taskShape: {
        date: {
            format: "%d/%m/%Y", // по умолчанию "%d %M %Y"
            validate: true
        }
    }
});

Связанный пример: To do list. Счётчик подзадач и формат даты

Проверьте список доступных символов.

Перетаскивание

Перетаскивание включено по умолчанию. Выберите одну или несколько задач и перетащите всё выделение сразу. Чтобы создать копию выбранных задач, удерживайте клавишу Alt во время перетаскивания.

Используйте свойство drag для того, чтобы:

• запретить раскрытие свёрнутых задач при наведении во время перетаскивания
• полностью отключить перетаскивание

Пример ниже сохраняет свёрнутые задачи закрытыми, когда пользователь перетаскивает элементы над ними:

const list = new ToDo("#root", {
    tasks: [
        { id: "1", text: "Task 1 #tag1" },
        ...
    ],
    drag: {
        expand: false // по умолчанию true
    }
});

Следующий фрагмент полностью отключает перетаскивание:

const list = new ToDo("#root", {
    tasks: [
        { id: "1", text: "Task 1 #tag1" },
        ...
    ],
    drag: false // по умолчанию true
});

Подпишитесь на события перетаскивания, чтобы отслеживать его жизненный цикл:

• start-drag — срабатывает, когда пользователь начинает перетаскивать задачи; передаёт id исходной задачи и режим ("move" или "copy")
• drag — срабатывает во время перетаскивания задач
• end-drag — срабатывает по завершении перетаскивания; передаёт id целевой задачи, позицию сброса ("top", "bottom", "in" или null) и режим

Фрагмент ниже записывает в консоль начало и завершение операции перетаскивания:

list.api.on("start-drag", ({ start, mode }) => {
    console.log("drag started from", start, "in", mode, "mode");
});

list.api.on("end-drag", ({ target, dropPosition, mode }) => {
    console.log("dropped on", target, "at", dropPosition, "in", mode, "mode");
});

История изменений: События start-drag и end-drag добавлены в v1.1.

Валидация срока выполнения

Если для задачи задан срок выполнения, валидация отслеживает выполнение задачи. Срок отображается зелёным цветом, пока задача не просрочена.

Даты просроченных задач отображаются красным.

Валидация включена по умолчанию. Чтобы отключить её, установите taskShape.date.validate в false. Подробнее см. в описании taskShape. Фрагмент кода ниже отключает валидацию срока выполнения:

const list = new ToDo("#root", {
    tasks,
    users,
    projects,
    taskShape: {
        date: {
            format: "%d %M %Y",
            validate: false // по умолчанию true
        }
    }
});

В этой конфигурации сроки выполнения отображаются серым цветом.

Режим отметки задач как выполненных

По умолчанию To Do List отмечает и снимает отметку задач в режиме "auto":

• отметить все дочерние задачи как выполненные → родительская задача становится выполненной автоматически
• отметить родительскую задачу как выполненную → все дочерние задачи становятся выполненными автоматически
• отметить хотя бы одну дочернюю задачу выполненной задачи как невыполненную → родительская задача становится невыполненной автоматически
• отметить родительскую задачу как невыполненную → все дочерние задачи становятся невыполненными автоматически

Чтобы отключить это поведение и активировать режим "manual", установите taskShape.completed.behavior в "manual". Подробнее см. в описании taskShape. Пример ниже активирует ручной режим:

const list = new ToDo("#root", {
    tasks,
    users,
    projects,
    taskShape: {
        completed: {
            behavior: "manual" // по умолчанию "auto"
        }
    }
});

Связанный пример: To do list. Два варианта отметки родительской задачи как выполненной

История изменений

To Do List отслеживает историю изменений по умолчанию. Пользователи могут отменять и повторять операции с помощью методов undo() и redo().

Используйте свойство history для настройки этого поведения. Свойство принимает логическое значение (краткая форма) или объект с расширенными параметрами:

• projects — включить ветвление истории, чтобы каждый проект хранил отдельную историю; при значении false всё приложение использует общую историю
• limit — максимальное количество операций в истории

Пример ниже ограничивает историю 20 операциями и отключает ветвление по проектам:

const list = new ToDo("#root", {
    tasks,
    users,
    projects,
    history: { projects: false, limit: 20 }
});

list.addTask({ task: { text: "New task" } });
list.undo(); // отменить последнее действие
list.redo(); // восстановить его

Чтобы полностью отключить управление историей, установите свойство в false. Методы undo() и redo() станут недоступны, а соответствующие элементы панели инструментов исчезнут.

История изменений: Конфигурация history, методы undo() и redo() добавлены в v1.3.

Панель инструментов

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

Чтобы изменить структуру панели инструментов по умолчанию, используйте свойство конфигурации items компонента Toolbar. Фрагмент ниже оставляет только элементы управления поиском и выпадающим списком:

const toolbar = new Toolbar("#toolbar", {
    api: list.api,
    items: ["search", "combo"]
});

Свойство items определяет, какие элементы управления отображает панель инструментов. Перечислите их в нужном порядке.

Режим скрытия выполненных задач

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

Режим только для чтения

В разделе Режим только для чтения описано, как сделать To Do List доступным только для чтения.