@etsoo/materialui 1.0.1

package/src/app/ServiceApp.ts

@@ -0,0 +1,352 @@
+import {
+    BridgeUtils,
+    createClient,
+    IActionResult,
+    IApi,
+    IApiPayload,
+    RefreshTokenProps,
+    RefreshTokenResult
+} from '@etsoo/appscript';
+import { CoreConstants, RefreshTokenRQ } from '@etsoo/react';
+import { DomUtils } from '@etsoo/shared';
+import { IServiceAppSettings } from './IServiceAppSettings';
+import { IServicePageData } from './IServicePage';
+import { IServiceUser, ServiceLoginResult } from './IServiceUser';
+import { ISmartERPUser } from './ISmartERPUser';
+import { ReactApp } from './ReactApp';
+
+/**
+ * Core Service App
+ * Service login to core system, get the refesh token and access token
+ * Use the acess token to the service api, get a service access token
+ * Use the new acess token and refresh token to login
+ */
+export class ServiceApp<
+    U extends IServiceUser = IServiceUser,
+    P extends IServicePageData = IServicePageData,
+    S extends IServiceAppSettings = IServiceAppSettings
+> extends ReactApp<S, ISmartERPUser, P> {
+    /**
+     * Service API
+     */
+    readonly serviceApi: IApi;
+
+    private _serviceUser?: U;
+    /**
+     * Service user
+     */
+    get serviceUser() {
+        return this._serviceUser;
+    }
+    protected set serviceUser(value: U | undefined) {
+        this._serviceUser = value;
+    }
+
+    /**
+     * Service passphrase
+     */
+    protected servicePassphrase: string = '';
+
+    /**
+     * Constructor
+     * @param settings Settings
+     * @param name Application name
+     */
+    constructor(settings: S, name: string) {
+        super(settings, name);
+
+        // Check
+        if (settings.serviceId == null || settings.serviceEndpoint == null) {
+            throw new Error('No service settings');
+        }
+
+        // Service API
+        const api = createClient();
+        api.baseUrl = settings.serviceEndpoint;
+
+        this.setApi(api);
+        this.serviceApi = api;
+    }
+
+    /**
+     * Load SmartERP core
+     */
+    loadSmartERP() {
+        if (BridgeUtils.host == null) {
+            window.location.href = this.settings.webUrl;
+        } else {
+            BridgeUtils.host.loadApp('core');
+        }
+    }
+
+    /**
+     * Go to the login page
+     * @param tryLogin Try to login again
+     */
+    override toLoginPage(tryLogin?: boolean) {
+        const parameters = `?serviceId=${this.settings.serviceId}&${
+            DomUtils.CultureField
+        }=${this.culture}${tryLogin ? '' : '&tryLogin=false'}`;
+
+        if (BridgeUtils.host == null) {
+            const coreUrl = this.settings.webUrl;
+            window.location.href = coreUrl + parameters;
+        } else {
+            BridgeUtils.host.loadApp('core', parameters);
+        }
+    }
+
+    /**
+     * Refresh token
+     * @param props Props
+     */
+    override async refreshToken<D extends object = RefreshTokenRQ>(
+        props?: RefreshTokenProps<D>
+    ) {
+        // Destruct
+        const {
+            callback,
+            data,
+            relogin = false,
+            showLoading = false
+        } = props ?? {};
+
+        // Token
+        const token = this.getCacheToken();
+        if (token == null || token === '') {
+            if (callback) callback(false);
+            return false;
+        }
+
+        // Reqest data
+        // Merge additional data passed
+        const rq: RefreshTokenRQ = {
+            deviceId: this.deviceId,
+            timezone: this.getTimeZone(),
+            ...data
+        };
+
+        // Login result type
+        type LoginResult = IActionResult<U>;
+
+        // Payload
+        const payload: IApiPayload<LoginResult, any> = {
+            showLoading,
+            config: { headers: { [CoreConstants.TokenHeaderRefresh]: token } },
+            onError: (error) => {
+                if (callback) callback(error);
+
+                // Prevent further processing
+                return false;
+            }
+        };
+
+        // Success callback
+        const success = async (
+            result: LoginResult,
+            failCallback?: (result: RefreshTokenResult) => void
+        ) => {
+            // Token
+            const refreshToken = this.getResponseToken(payload.response);
+            if (refreshToken == null || result.data == null) {
+                if (failCallback) failCallback(this.get('noData')!);
+                return false;
+            }
+
+            // User data
+            const userData = result.data;
+
+            // Use core system access token to service api to exchange service access token
+            const serviceResult = await this.serviceApi.put<
+                ServiceLoginResult<U>
+            >(
+                'Auth/ExchangeToken',
+                {
+                    token: this.encryptEnhanced(
+                        userData.token,
+                        this.settings.serviceId.toString()
+                    )
+                },
+                {
+                    showLoading,
+                    onError: (error) => {
+                        if (failCallback) failCallback(error);
+
+                        // Prevent further processing
+                        return false;
+                    }
+                }
+            );
+
+            if (serviceResult == null) return false;
+
+            if (!serviceResult.ok) {
+                if (failCallback) failCallback(serviceResult);
+                return false;
+            }
+
+            if (serviceResult.data == null) {
+                if (failCallback) failCallback(this.get('noData')!);
+                return false;
+            }
+
+            // Login
+            this.userLoginEx(userData, refreshToken, serviceResult.data);
+
+            // Success callback
+            if (failCallback) failCallback(true);
+
+            return true;
+        };
+
+        // Call API
+        const result = await this.api.put<LoginResult>(
+            'Auth/RefreshToken',
+            rq,
+            payload
+        );
+        if (result == null) return false;
+
+        if (!result.ok) {
+            if (result.type === 'TokenExpired' && relogin) {
+                // Try login
+                // Dialog to receive password
+                var labels = this.getLabels('reloginTip', 'login');
+                this.notifier.prompt(
+                    labels.reloginTip,
+                    async (pwd) => {
+                        if (pwd == null) {
+                            this.toLoginPage();
+                            return;
+                        }
+
+                        // Set password for the action
+                        rq.pwd = this.encrypt(this.hash(pwd));
+
+                        // Submit again
+                        const result = await this.api.put<LoginResult>(
+                            'Auth/RefreshToken',
+                            rq,
+                            payload
+                        );
+
+                        if (result == null) return;
+
+                        if (result.ok) {
+                            await success(
+                                result,
+                                (loginResult: RefreshTokenResult) => {
+                                    if (loginResult === true) {
+                                        if (callback) callback(true);
+                                        return;
+                                    }
+
+                                    const message =
+                                        this.formatRefreshTokenResult(
+                                            loginResult
+                                        );
+                                    if (message) this.notifier.alert(message);
+                                }
+                            );
+                            return;
+                        }
+
+                        // Popup message
+                        this.alertResult(result);
+                        return false;
+                    },
+                    labels.login,
+                    { type: 'password' }
+                );
+
+                // Fake truth to avoid reloading
+                return true;
+            }
+
+            if (callback) callback(result);
+            return false;
+        }
+
+        return await success(result, callback);
+    }
+
+    /**
+     * Service decrypt message
+     * @param messageEncrypted Encrypted message
+     * @param passphrase Secret passphrase
+     * @returns Pure text
+     */
+    serviceDecrypt(messageEncrypted: string, passphrase?: string) {
+        return this.decrypt(
+            messageEncrypted,
+            passphrase ?? this.servicePassphrase
+        );
+    }
+
+    /**
+     * Service encrypt message
+     * @param message Message
+     * @param passphrase Secret passphrase
+     * @param iterations Iterations, 1000 times, 1 - 99
+     * @returns Result
+     */
+    serviceEncrypt(message: string, passphrase?: string, iterations?: number) {
+        return this.encrypt(
+            message,
+            passphrase ?? this.servicePassphrase,
+            iterations
+        );
+    }
+
+    /**
+     * Try login
+     * @param data Additional data
+     * @param showLoading Show loading bar or not
+     * @returns Result
+     */
+    override async tryLogin<D extends object = {}>(
+        data?: D,
+        showLoading?: boolean
+    ) {
+        // Reset user state
+        const result = await super.tryLogin(data, showLoading);
+        if (!result) return false;
+
+        // Refresh token
+        return await this.refreshToken({
+            callback: (result) => this.doRefreshTokenResult(result),
+            data,
+            showLoading,
+            relogin: true
+        });
+    }
+
+    /**
+     * User login extended
+     * @param user Core system user
+     * @param refreshToken Refresh token
+     * @param serviceUser Service user
+     */
+    userLoginEx(
+        user: ISmartERPUser,
+        refreshToken: string,
+        serviceUser: U
+    ): void {
+        // Service user login
+        this.servicePassphrase =
+            this.decrypt(
+                serviceUser.serviceDeviceId,
+                this.settings.serviceId.toString()
+            ) ?? '';
+
+        // Service user
+        this.serviceUser = serviceUser;
+
+        // Service API token
+        this.serviceApi.authorize(this.settings.authScheme, serviceUser.token);
+
+        // Keep = true, means service could hold the refresh token for long access
+        // Trigger Context change and serviceUser is ready then
+        super.userLogin(user, refreshToken, true);
+    }
+}

package/src/index.ts

@@ -0,0 +1,77 @@
+export * from './app/CommonApp';
+export * from './app/IServiceAppSettings';
+export * from './app/IServicePage';
+export * from './app/IServiceUser';
+export * from './app/ISmartERPUser';
+export * from './app/Labels';
+export * from './app/ReactApp';
+export * from './app/ServiceApp';
+
+export * from './pages/CommonPage';
+export * from './pages/CommonPageProps';
+export * from './pages/DataGridPage';
+export * from './pages/DataGridPageProps';
+export * from './pages/EditPage';
+export * from './pages/FixedListPage';
+export * from './pages/ListPage';
+export * from './pages/ListPageProps';
+export * from './pages/ResponsivePage';
+export * from './pages/ResponsivePageProps';
+export * from './pages/SearchPageProps';
+export * from './pages/TablePage';
+export * from './pages/ViewPage';
+
+export * from './texts/DateText';
+export * from './texts/MoneyText';
+export * from './texts/NumberText';
+
+export * from './AuditDisplay';
+export * from './BackButton';
+export * from './BridgeCloseButton';
+export * from './ButtonLink';
+export * from './ComboBox';
+export * from './CountdownButton';
+export * from './CustomFabProps';
+export * from './DataGridEx';
+export * from './DataGridRenderers';
+export * from './DialogButton';
+export * from './DnDList';
+export * from './DraggablePaperComponent';
+export * from './EmailInput';
+export * from './FabBox';
+export * from './FlexBox';
+export * from './GridDataFormat';
+export * from './IconButtonLink';
+export * from './InputField';
+export * from './ItemList';
+export * from './ListItemRightIcon';
+export * from './ListMoreDisplay';
+export * from './LoadingButton';
+export * from './MaskInput';
+export * from './MobileListItemRenderer';
+export * from './MoreFab';
+export * from './MUGlobal';
+export * from './NotifierMU';
+export * from './OptionGroup';
+export * from './PList';
+export * from './ProgressCount';
+export * from './PullToRefreshUI';
+export * from './ResponsibleContainer';
+export * from './RLink';
+export * from './ScrollerListEx';
+export * from './ScrollTopFab';
+export * from './SearchBar';
+export * from './SearchField';
+export * from './SearchOptionGroup';
+export * from './SelectBool';
+export * from './SelectEx';
+export * from './ShowDataComparison';
+export * from './Switch';
+export * from './SwitchAnt';
+export * from './TabBox';
+export * from './TableEx';
+export * from './TextFieldEx';
+export * from './Tiplist';
+export * from './TooltipClick';
+export * from './UserAvatar';
+export * from './UserAvatarEditor';

package/src/pages/CommonPage.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import { FabBox } from '../FabBox';
+import { ScrollTopFab } from '../ScrollTopFab';
+import { MUGlobal } from '../MUGlobal';
+import { CommonPageProps } from './CommonPageProps';
+import { MoreFab } from '../MoreFab';
+import { Container, Fab } from '@mui/material';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import { BackButton } from '../BackButton';
+import { Labels } from '../app/Labels';
+import { ReactAppStateDetector } from '../app/ReactApp';
+
+/**
+ * Default scroll container
+ */
+export const CommonPageScrollContainer = global;
+
+/**
+ * Common page
+ * @param props Props
+ */
+export function CommonPage(props: CommonPageProps) {
+    // Destruct
+    const {
+        children,
+        disableGutters = true,
+        fabButtons,
+        fabColumnDirection,
+        fabPaddingAdjust = 1.5,
+        fabSize = 'small',
+        maxWidth = false,
+        moreActions,
+        onRefresh,
+        onUpdate,
+        onUpdateAll,
+        paddings = MUGlobal.pagePaddings,
+        scrollContainer,
+        supportBack = false,
+        targetFields,
+        sx = {},
+        ...rest
+    } = props;
+
+    // Fab padding
+    const fabPadding = MUGlobal.increase(
+        MUGlobal.pagePaddings,
+        fabPaddingAdjust
+    );
+
+    if (typeof sx === 'object' && sx != null && !Reflect.has(sx, 'padding')) {
+        // Set default padding
+        Reflect.set(sx, 'padding', paddings);
+    }
+
+    // Labels
+    const labels = Labels.CommonPage;
+
+    // Update
+    const update = onUpdateAll
+        ? onUpdateAll
+        : onUpdate
+        ? (authorized?: boolean) => {
+              if (authorized == null || authorized) onUpdate();
+          }
+        : onRefresh
+        ? (authorized?: boolean) => {
+              if (authorized) onRefresh();
+          }
+        : undefined;
+
+    // Return the UI
+    return (
+        <React.Fragment>
+            {update && (
+                <ReactAppStateDetector
+                    targetFields={targetFields}
+                    update={update}
+                />
+            )}
+            <Container
+                disableGutters={disableGutters}
+                maxWidth={maxWidth}
+                sx={sx}
+                id="page-container"
+                {...rest}
+            >
+                <FabBox
+                    sx={{
+                        zIndex: 1,
+                        bottom: (theme) =>
+                            MUGlobal.updateWithTheme(fabPadding, theme.spacing),
+                        right: (theme) =>
+                            MUGlobal.updateWithTheme(fabPadding, theme.spacing)
+                    }}
+                    columnDirection={fabColumnDirection}
+                >
+                    {scrollContainer && (
+                        <ScrollTopFab
+                            size={fabSize}
+                            target={scrollContainer}
+                            title={labels.scrollTop}
+                        />
+                    )}
+                    {fabButtons}
+                    {onRefresh != null && (
+                        <Fab
+                            title={labels.refresh}
+                            size={fabSize}
+                            onClick={onRefresh}
+                            sx={{ display: { xs: 'none', md: 'inherit' } }}
+                        >
+                            <RefreshIcon />
+                        </Fab>
+                    )}
+                    <MoreFab
+                        size={fabSize}
+                        title={labels.more}
+                        actions={moreActions}
+                    />
+                    {supportBack && (
+                        <BackButton title={labels.back} size={fabSize} />
+                    )}
+                </FabBox>
+                {children}
+            </Container>
+        </React.Fragment>
+    );
+}

package/src/pages/CommonPageProps.ts

@@ -0,0 +1,70 @@
+import { UserKey } from '@etsoo/appscript';
+import { IStateUpdate, ListItemReact } from '@etsoo/react';
+import { ContainerProps } from '@mui/material';
+import { CustomFabSize } from '../CustomFabProps';
+
+/**
+ * Common page props
+ * Default container id is 'pageContainer'
+ */
+export interface CommonPageProps extends Omit<ContainerProps, 'id'> {
+    /**
+     * Fab buttons
+     */
+    fabButtons?: React.ReactNode;
+
+    /**
+     * Fab size
+     */
+    fabSize?: CustomFabSize;
+
+    /**
+     * Fab flex column direction, undefined to hide it
+     */
+    fabColumnDirection?: boolean;
+
+    /**
+     * Fab padding adjust
+     */
+    fabPaddingAdjust?: number;
+
+    /**
+     * More actions
+     */
+    moreActions?: ListItemReact[];
+
+    /**
+     * On refresh callback, only when authorized = true
+     */
+    onRefresh?: () => void | PromiseLike<void>;
+
+    /**
+     * On page update, when authorized = null or true case, may uses onRefresh
+     */
+    onUpdate?: () => void | PromiseLike<void>;
+
+    /**
+     * On page update, all cases with authorized
+     */
+    onUpdateAll?: IStateUpdate;
+
+    /**
+     * Paddings
+     */
+    paddings?: Record<string, string | number>;
+
+    /**
+     * Scroll container
+     */
+    scrollContainer?: HTMLElement | object;
+
+    /**
+     * Support back click
+     */
+    supportBack?: boolean;
+
+    /**
+     * State last changed fields
+     */
+    targetFields?: UserKey[];
+}