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

Во-первых, мы добавили возможность устанавливать уровень приоритета для одной или сразу нескольких выбранных задач. Более того, теперь вы можете позволить нескольким конечным пользователям удобно работать над одними и теми же задачами и видеть изменения друг друга в режиме реального времени, внедрив многопользовательский бэкенд. И, наконец, есть возможность обогатить свой список дел JavaScript представлением таблицы с помощью сетки из нашей библиотеки Suite.

Приоритет задачи

Расстановка приоритетов — один из ключевых критериев повышения эффективности управления задачами. Начиная с версии 1.2, вы можете позволить конечным пользователям упорядочивать задачи в списке дел JavaScript в соответствии с их важностью, устанавливая уровень приоритета для всех из них или сбрасывая его при необходимости. С помощью этой функции конечные пользователи могут сделать весь рабочий процесс более предсказуемым и своевременно решать каждую задачу.

На практике теперь можно добавить статус приоритета любому количеству выбранных задач двумя способами:

  • через выпадающий список в контекстном меню задачи

Меню приоритета предлагает доступные уровни приоритета для задач. После выбора нужной опции задача будет выделена определенным цветом, соответствующим заданному уровню приоритета. В меню также есть возможность сброса заданного статуса приоритета.

  • через сочетания клавиш

Чтобы указать приоритет задачи с помощью клавиатуры, конечным пользователям необходимо нажать «Alt+ID» нужного уровня приоритета. По умолчанию идентификатор приоритета обозначается числами (1, 2, 3 и 0), начиная с 1 для задачи с наивысшим приоритетом и увеличиваясь на единицу для каждого более низкого уровня, и 0 для задач без приоритета.

Когда дело доходит до добавления этой функции в ваш список дел, вы должны указать список приоритетных элементов, используя недавно добавленное свойство конфигурации priorities. По сути, это свойство представляет собой массив объектов, описывающих приоритетные элементы. Он принимает следующие параметры:

  • id (обязательно) — устанавливает идентификатор для элемента, который обозначает уровень приоритета. По умолчанию существует 4 уровня приоритета:

1 — высокий — высокий уровень приоритета

2 — средний — средний уровень приоритета

3 — low — низкий уровень приоритета

0 | ноль — нет приоритета

  • label (обязательно) — название приоритетного элемента.
  • color (необязательно) — устанавливает цвет для заданного приоритетного элемента.
  • горячая клавиша (необязательно) — определяет пользовательскую комбинацию горячих клавиш для установки определенного уровня приоритета.
const list = new ToDo("#root", {
// other parameters
    priorities: [
        {
            id: 1,
            label: "Critical",
            color: "#f33",
        },
        {
            id: 2,
            label: "Major",
            color: "rgba(255, 225, 0, 1)",
        },
   ... // other priority settings        
    ],
});

Помимо списка по умолчанию, включающего 4 параметра (например, «Высокий», «Средний», «Низкий» и «Без приоритета»), вы можете составить собственный список приоритетных элементов и добавить для них собственные комбинации горячих клавиш, как показано в примере выше.

Свойство tasks нашего списка дел также получило параметр priority, предназначенный для указания начального статуса приоритета.

const tasks: [
   {
...
       priority?: number | null,
   },
   {...} // more task objects
];

Чтобы настроить отображение задачи с определенным уровнем приоритета в списке задач, необходимо указать параметр priority в объекте taskShape. Этот параметр имеет два логических атрибута:

  • обложка — включает/отключает выделение всей задачи цветом, соответствующим ее уровню приоритета.
  • метка — включает/отключает отображение метки приоритета, добавленной к заданной задаче.
const list = new ToDo("#root", {
...
        taskShape: {
        priority: {
            cover: true,
            label: true,
        },
    },
});

Более того, теперь конечные пользователи могут сортировать задачи по приоритету через контекстное меню на панели инструментов.

Синхронизация одновременных действий нескольких пользователей

Такие инструменты управления задачами, как наш список дел, очень популярны в бизнес-приложениях, используемых компаниями разного размера. Поэтому здорово иметь возможность обеспечить хороший пользовательский интерфейс для любого количества пользователей одновременно. Специально для этого релиза наша команда разработчиков подготовила новую демонстрацию, посвященную реализации списка дел на JavaScript с многопользовательским бэкендом.

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

Для добавления многопользовательского бэкенда в веб-проект, прежде всего, необходимо пройти авторизацию на сервере перед инициализацией To Do List с помощью функции login():

function login(url) {
    var token = sessionStorage.getItem("login-token");
    if (token) {
        return Promise.resolve(token);
    }
    return fetch(url + "/login?id=1")
        .then(raw => raw.text())
        .then(token => {
            sessionStorage.setItem("login-token", token);
            return token;
        });
}

Эта функция должна возвращать токен сервера, необходимый для всех последующих взаимодействий с сервером. Маркер включается в каждый запрос как значение заголовка Remote-Token следующим образом:

login(url).then(token => {
    const restProvider = new RestDataProvider(url);
    restProvider.setHeaders({
        "Remote-Token": token,
    });

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

// create server-client connection
const events = new RemoteEvents(url + "/api/v1", token);
// get client handlers
const handlers = todoUpdates(
    list.api,
    restProvider.getIDResolver()
);
// add client handlers for server events
events.on(handlers);

Кроме того, вы также можете указать собственную логику обработки событий сервера. Для этого объект обработчиков, передаваемый в RemoteEvents.on(handlers), должен иметь следующую структуру:

{
   "tasks": tasksHandler: function(obj: any),
   "projects": projectsHandler: function(obj: any)
}

Когда в бэкенде происходит какое-либо изменение, сервер возвращает имя измененного элемента. Эти имена могут различаться в зависимости от реализации сервера.

Данные, которые должны быть обновлены во внешнем интерфейсе, будут помещены в аргумент obj функции function(obj: any). Имеется тип: строковое поле, служащее для пояснения операции. Он может принимать следующие значения:

  • для задач — «добавить задачу», «обновить задачу», «удалить задачу», «переместить задачу» и «клонировать задачу».
  • для проектов — «добавить-проект», «обновить-проект» и «удалить-проект».

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

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

Представление данных задачи с помощью виджета сетки

Возможность представления данных в табличном формате часто требуется в современных бизнес-приложениях. Вот почему наша команда разработчиков создала новую демонстрацию, которая наглядно демонстрирует список дел JavaScript со встроенным представлением сетки. Это реализовано с использованием соответствующего JavaScript Grid widget из нашей библиотеки Suite. Таким образом, конечные пользователи получают прекрасную возможность управлять данными задач с помощью двух мощных инструментов в одном.

Как видите, можно добавлять и обрабатывать задачи в обоих представлениях, и все изменения будут синхронизированы.

Это все новинки, представленные в DHTMLX To Do List 1.2.

Источник: релизная статья, опубликованная 16 мая 2023 г. в блоге DHTMLX.