Виджеты главной страницы

Раздел "Главная" представляет собой список виджетов, которые можно настроить (Рисунок 1). Размер и местоположение виджета можно настроить в пользовательском интерфейсе.

Рисунок 1 - Виджеты в разделе Главная

UEDataPageWidget предоставляет возможность добавить на главную страницу "виджет".

Описание UEDataPageWidget

import {UeModuleBase} from '@unidata/core-app';
import {ComponentType} from 'react';

export type UEDataPageWidget = UeModuleBase & {
    default: {
        component: ComponentType<{}>;
        meta: {
            order: number; // 0 - 100
            getDisplayName: () => string;
            isDeletable: boolean;

           // see the documentation for https://github.com/STRML/react-grid-layout
            dataGrid: () => {
                i: string; // unique identifier of the widget
                x: number; // position on the grill on the x axis
                y: number; // position on the grill on the y axis
                w: number; // width (in grid columns-by default 12)
                h: number; // height (in grid lines)
                minW?: number; // Minimum width in grid units.
                maxW?: number; // Maximum width in grid units.
                minH?: number; // Minimum height in grid units.
                maxH?: number; // Maximum height in grid units.
                moved?: boolean; // set by DragEvents (onDragStart, onDrag, onDragStop) and ResizeEvents (onResizeStart, onResize, onResizeStop)
                static?: boolean; // If true, equal to `isDraggable: false` and `isResizable: false`.
                isDraggable?: boolean; // If false, will not be draggable. Overrides `static`.
                isResizable?: boolean; // If false, will not be resizable. Overrides `static`.
            };
        };
    };
}

Пример реализации: Виджет "Избранные записи"

class FavoriteWidget extends React.Component<{}, {}> {
    static dataGrid = () => {
        return {
            i: 'favorites',
            x: 2,
            y: 0,
            w: 2,
            h: 2
        };
    };

    override render () {
        return (
            <CardPanel
                title={i18n.t('module.data-ee>ue>widgets>favorite>cardTitle')}
                noBodyPadding={true}
                leftExtraItems={<Icon name={'star-folder'}/>}
                isWide={true}
            >
                <div className={styles.container}>
                    <FavoriteList/>
                </div>
            </CardPanel>
        );
    }
}

export const favoriteWidgetUE: UEDataPageWidget = {
    'default': {
        type: UEList.DataPageWizard,
        moduleId: 'favoriteWidget',
        active: true,
        system: false,
        component: FavoriteWidget,
        resolver: () => {
            return UserManager.getUserLogin() !== UserStore.GUEST_LOGIN;
        },
        meta: {
            order: 20,
            getDisplayName: () => i18n.t('module.data-ee>ue>widgets>favorite>cardTitle'),
            dataGrid: FavoriteWidget.dataGrid,
            isDeletable: true
        }
    }
};

Пример реализации: Виджет "Задачи"

class LastTaskWidget extends React.PureComponent<{}> {
    override render () {
        const containerClassName = joinClassNames(
            styles.container,
            'scrollable'
        );

        return (
            <CardPanel
                leftExtraItems={<Icon name={'tasks'}/>}
                title={i18n.t('module.workflow>menuItems>workflow')}
                isWide={true}
                noBodyPadding={true}
                hideOverflow={true}>
                <div className={containerClassName}>
                    <EmbeddedTasksList isOpen={true} pageSize={10} isOnlyMyTasks={true}/>
                </div>
            </CardPanel>
        );
    }
}

export const lastTaskWidgetUE: UEDataPageWidget = {
    'default': {
        type: UEList.DataPageWizard,
        moduleId: 'lastTaskWidget',
        active: true,
        system: false,
        component: LastTaskWidget,
        resolver: () => {
            return UserManager.getUserLogin() !== UserStore.GUEST_LOGIN;
        },
        meta: {
            order: 80,
            getDisplayName: () => i18n.t('module.workflow>menuItems>workflow'),
            dataGrid: () => {
                return {
                    i: 'lastTask',
                    x: 7,
                    y: 0,
                    w: 2,
                    h: 2
                };
            },
            isDeletable: true
        }
    }
};