Добавление новых страниц

Добавление кастомной страницы

Для добавления новой страницы необходимо в файле инициализации модуля зарегистрировать новый путь с помощью пакета @universe-platform/router

Пример index.ts файла с регистраций новой страницы: .. code-block:

import {RouterStore, PageGroups, BaseRouteItem} from '@universe-platform/router';

/*
* Новая страница должна быть добавлена в глбоальное пространство имен UniverseRouter
*/
declare global {
    namespace UniverseRouter {
        export interface IRouteMeta {
            ExamplePage: BaseRouteItem;
        }
    }
}

/*
* Регистрация новой страницы в init методе
*/
export function init (routerStore: RouterStore) {

    routerStore.registerRoute('ExamplePage', {
        menuRoute: '/expamplePage',
        route: '/expamplePage',
        groupName: PageGroups.DATA_MANAGEMENT,
        icon: 'switch',
        color: 'lime',
        menuDisplayName: 'module.expamplePage>page>title',
        menuOrder: 5,
        lazyComponent: () => import('./page/ExamplePage'),
        resolver: () => true,
    })

    return {
        id: 'exampleModule'
    };
}

Описание объекта в методе registerRoute

  • ``ExamplePage: `` - Системное названее страницы (должно быть уникальным)

  • ``menuRoute: `` - Основной путь страницы

  • route: `` - Путь с добавление QueryParams. Eсли их нет, то указывается как и в ``menuRoute. Припер пути с QueryParams - /expamplePage/:id

  • ``groupName: `` - Название группы меню, в которой будет находиться страница. Обработка данных - PageGroups.DATA_MANAGEMENT ("dataManagement"). Управление структурой данных - PageGroups.MODEL ("model"). Администрирование системы - PageGroups.ADMINISTRATION ("administration").

  • ``icon: `` - Иконка в пункте меню. Доступные иконки описаны в StoryBook.

  • ``color: `` - Не обязательный параметр, по умолчанию используеться серый цвет. Доступны цвета: 'green', 'blue', 'purple', 'red', 'lime', 'pink'.

  • ``menuDisplayName: `` - Путь до локализации i18n.

  • ``menuOrder: `` - Номер в очереди пунктов меню.

  • ``lazyComponent: `` - Метод в котором импортируется файл с отображением новой страницы.