Отобразить количество непрочитанных карточек

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

Данный пример демонстрирует только изменение панели настроек в таблице с помощью скрипта.

Начальный код расширения должен импортировать прямо или косвенно все остальные строки, чтобы затем объединить код в один пакет.

extensionManager.registerExtension({ (1)
    name: "GridToolbarButton",
    version: "5.5.17",
    initialize() {
        app.folderPluginProvider.addFactory(new ToolbarButtonPluginFactory());
    },
})

1	Регистрация расширения позволяет корректно установить все обработчики событий, сервисы и прочие сущности web-приложения.

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

export function ToolbarButtonMessageContent(props: IToolbarButtonMessageContent) {
    const { data, services } = props;

    useStore(services.tableData.$data); (1)

    const loadedRows = data.rows.filter(x => getRowLoaded(x).loaded).length; (2)
    const unreadRows = data.rows.filter(x => getUnreadRow(x).isUnread).length; (3)

    return (
        <>
            <LabeledText label={"На текущий момент загружено карточек"} text={loadedRows} />
            <LabeledText label={"Из них не прочитано"} text={unreadRows} />
        </>
    )
}

1	Обновляем компонент при изменении хранилища `$data` из `services.tableData`.
2	Количество загруженных карточек.
3	Количество непрочитанных карточек.

Затем нужно получить плагины грида:

export class ToolbarButtonPluginFactory implements IFolderPluginFactory {
    id: string = "ToolbarButtonPluginFactory";

    getTablePlugins(): ITablePlugins[] { (1)
        return [ ToolbarButtonPlugins ];
    }
}

1	Возвращаем плагины грида.

Добавляем кнопку, отображающую информацию в модальном окне при нажатии:

export const ToolbarButtonButtonPlugin: TablePlugins.Toolbar.Component<$MessageWindow & $TableData> = {
    name: "ToolbarButtonButtonPlugin",
    description: "Отображает кнопку в панели инструментов таблицы",
    feature: ToolbarButtonFeature,
    composition: TableCompositionNames.Toolbar,
    order: CompositionPluginOrder.Priority,
    component: (props) => {
        const { data, services } = props.composition;

        const showInfo = () => {
            services.messageWindow.showInfo(() => <ToolbarButtonMessageContent data={data} services={services} />); (1)
        };

        return <IconButton iconClassName="dv-ico ico-modal-info" onClick={showInfo} />(2)
    }
};

1	Вызывается модальное окно с информацией.
2	Кнопка, при нажатии на которую открывается модальное окно с информацией.

Проверка примера

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