Кастомный график отсутствий в формате timeline

Всем привет! ‍

Подготовил новое видео, где показываю пример реализации кастомного графика отсутствий в формате timeline.

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

Для реализации использовал библиотеку vis-timeline.

Файл модуля оставлю в комментариях к посту. Его можно импортировать на вашу площадку и сразу протестировать готовый виджет из видео.

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

Код:

/** Структура которую ожидает виджет для отображения графика */
interface Absence {
    id: string,
    fio: string,
    title: string,
    start: string,
    end: string,
    //принимает значения: vacation, sick, dayoff, business_trip
    absencesType: string,
    url: string
}


async function onInit(): Promise<void> {
    const [absences, users] = await Promise.all([
        Namespace.app.absence.search().where(f => f.__deletedAt.eq(null)).size(10000).all(),
        System.users.search().where(f => f.__deletedAt.eq(null)).size(10000).all()
    ]);

    if (!absences.length) {
        return;
    }

    const userNames = new Map(users.map(user => [user.id, user.data.__name]));

    const data: Absence[] = absences.map(item => ({
        id: item.id,
        fio: userNames.get(item.data.employee!.id) ?? '',
        title: item.data.absence_type!.name,
        start: item.data.start_date!.format(),
        end: item.data.end_date!.format(),
        absencesType: item.data.absence_type!.code,
        url: `${System.company.url}/(p:item/${item.namespace}/${item.code}/${item.id})`
    }));

    Context.data.absence_data = data;
}

Еще больше полезной информации в ТГ канале WhatDaELMA365