Отобразить количество непрочитанных карточек
Расширение в данном примере предназначено для добавления кнопки на панель инструментов грида. Расширение получает список карточек и по нажатию на кнопку отображает общее количество карточек, а также количество непрочитанных.
Ссылка на пример на GitHub: GridToolbarButton.
extensionManager.registerExtension({ (1)
name: "GridToolbarButton",
version: "6.1",
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 | Кнопка, при нажатии на которую открывается модальное окно с информацией. |