Кастомизация личного кабинета

Добавление нового таба

Рисунок 1 - Дополнительная вкладка на странице личного кабинета

С помощью UEAccountSettingsTab вы можете добавлять новые табы на страницу личного кабинета.

Компонент Tab будет подключаться через AccountSettingsPageStore, основной задачей которого является управление переключением вкладок и хранение информации об изменениях в текущей вкладке (флаг isTabDirty).

Если будет предпринята попытка переключить вкладки с несохраненными данными на текущей вкладке (isTabDirty = false), пользователь получит окно с предупреждением.

Описание UEAccountSettingsTab

import {UeModuleBase, UserInfoType} from '@unidata/core-app';
import {ComponentType} from 'react';
import {AccountSettingsPageStore} from '../../page/user_settings/store/AccountSettingsPageStore';
import {Nullable} from '@unidata/core';

export type UEAccountSettingsTab = UeModuleBase & {
    default: {
        component: ComponentType<{
            store: AccountSettingsPageStore;
        }>;
        resolver: (userData: Nullable<UserInfoType>) => boolean;
        meta: {
           order: number;
           getTabName: () => string;
        };
    };
}

Добавление новой панели настроек

Рисунок 2 - Панель дополнительных настроек

С помощью UEAccountSettingsPanel вы можете добавить дополнительную панель настроек на вкладку "Общие настройки".

В этом случае компонент UE подключится через вкладку общих настроек учетной записи. В props передается Store, в котором хранится информация о текущем пользователе и предоставляются методы изменения и сохранения пользовательских данных.

Описание UEAccountSettingsPanel

import {UeModuleBase, UserInfoType} from '@unidata/core-app';
import {ComponentType} from 'react';
import {AccountGeneralSettingsTabStore} from '../../uemodule/general_account_settings/store/AccountGeneralSettingsTabStore';
import {Nullable} from '@unidata/core';

export type UEAccountSettingsPanel = UeModuleBase & {
    default: {
        component: ComponentType<{
            store: AccountGeneralSettingsTabStore;
        }>;
        resolver: (userData: Nullable<UserInfoType>) => boolean;
        meta: {
           order: number;
        };
    };
}