@etsoo/react 1.5.79 → 1.5.82

package/src/app/ServiceApp.ts

@@ -1,353 +0,0 @@
-import {
-    BridgeUtils,
-    createClient,
-    IActionResult,
-    IApi,
-    IApiPayload,
-    RefreshTokenProps,
-    RefreshTokenResult
-} from '@etsoo/appscript';
-import { DomUtils } from '@etsoo/shared';
-import { CoreConstants } from './CoreConstants';
-import { IServiceAppSettings } from './IServiceAppSettings';
-import { IServicePageData } from './IServicePage';
-import { IServiceUser, ServiceLoginResult } from './IServiceUser';
-import { ISmartERPUser } from './ISmartERPUser';
-import { ReactApp } from './ReactApp';
-import { RefreshTokenRQ } from './RefreshTokenRQ';
-
-/**
- * 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/components/ShowDataComparison.tsx

@@ -1,108 +0,0 @@
-import { NotificationMessageType } from '@etsoo/notificationbase';
-import { Utils } from '@etsoo/shared';
-import {
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableRow
-} from '@mui/material';
-import React from 'react';
-import { globalApp } from '../app/ReactApp';
-
-/**
- * Audit line update data model
- */
-export interface AuditLineUpdateData {
-    oldData: Record<string, unknown>;
-    newData: Record<string, unknown>;
-}
-
-/**
- * Check obj is instance of AuditLineUpdateData
- * @param obj Input
- * @returns Result
- */
-export function IsAuditLineUpdateData(obj: any): obj is AuditLineUpdateData {
-    return (
-        typeof obj === 'object' &&
-        'oldData' in obj &&
-        typeof obj.oldData === 'object' &&
-        'newData' in obj &&
-        typeof obj.newData === 'object'
-    );
-}
-
-// Format value
-const formatValue = (value: unknown) => {
-    if (value == null) return '';
-    if (value instanceof Date && typeof globalApp !== 'undefined')
-        return globalApp.formatDate(value, 'ds');
-    return `${value}`;
-};
-
-/**
- * Show data comparison
- * @param data Data
- * @param modelTitle Model window title
- * @param getLabel Get label callback
- */
-export const ShowDataComparison = (
-    data: AuditLineUpdateData,
-    modelTitle?: string,
-    getLabel?: (field: string) => string
-) => {
-    if (typeof globalApp === 'undefined') return;
-
-    modelTitle ??= globalApp.get<string>('dataComparison');
-    getLabel ??= (key) => {
-        return globalApp.get(Utils.formatInitial(key)) ?? key;
-    };
-
-    const keys = new Set([
-        ...Object.keys(data.oldData),
-        ...Object.keys(data.newData)
-    ]);
-
-    const rows = Array.from(keys).map((field) => ({
-        field,
-        oldValue: data.oldData[field],
-        newValue: data.newData[field]
-    }));
-
-    const inputs = (
-        <Table>
-            <TableHead>
-                <TableRow>
-                    <TableCell width="18%">{getLabel('field')}</TableCell>
-                    <TableCell width="41%" align="right">
-                        {getLabel('oldValue')}
-                    </TableCell>
-                    <TableCell width="41%" align="right">
-                        {getLabel('newValue')}
-                    </TableCell>
-                </TableRow>
-            </TableHead>
-            <TableBody>
-                {rows.map((row) => (
-                    <TableRow key={row.field}>
-                        <TableCell>{getLabel!(row.field)}</TableCell>
-                        <TableCell align="right">
-                            {formatValue(row.oldValue)}
-                        </TableCell>
-                        <TableCell align="right">
-                            {formatValue(row.newValue)}
-                        </TableCell>
-                    </TableRow>
-                ))}
-            </TableBody>
-        </Table>
-    );
-
-    globalApp.notifier.alert(
-        [undefined, modelTitle],
-        undefined,
-        NotificationMessageType.Info,
-        { fullScreen: globalApp.smDown, inputs }
-    );
-};

package/src/mu/AuditDisplay.tsx

@@ -1,117 +0,0 @@
-import { Utils } from '@etsoo/shared';
-import { Button, Divider, Theme, Typography, useTheme } from '@mui/material';
-import React, { CSSProperties } from 'react';
-import { globalApp } from '..';
-import {
-    AuditLineUpdateData,
-    ShowDataComparison
-} from '../components/ShowDataComparison';
-import { ListMoreDisplay, ListMoreDisplayProps } from './ListMoreDisplay';
-
-/**
- * Audit line data model
- */
-export interface AuditLine {
-    id: number;
-    creation: Date;
-    user: string;
-    action: string;
-    changes?: AuditLineUpdateData;
-}
-
-/**
- * Audit display props
- */
-export interface AuditDisplayProps
-    extends Omit<ListMoreDisplayProps<AuditLine>, 'children'> {
-    /**
-     * Get list item style callback
-     */
-    getItemStyle?: (index: number, theme: Theme) => CSSProperties;
-
-    /**
-     * Item/line renderer
-     */
-    itemRenderer?: (data: AuditLine, index: number) => React.ReactNode;
-}
-
-// Get label
-const getLabel = (key: string) => {
-    return globalApp.get(Utils.formatInitial(key)) ?? key;
-};
-
-// Format date
-const formatDate = (date: Date) => {
-    if (typeof globalApp === 'undefined') return date.toUTCString();
-    return globalApp.formatDate(date, 'ds');
-};
-
-/**
- * Audit display
- * @param props Props
- * @returns Component
- */
-export function AuditDisplay(props: AuditDisplayProps) {
-    // Theme
-    const theme = useTheme();
-
-    // Title
-    var title = getLabel('dataComparison');
-
-    // Destruct
-    const {
-        getItemStyle = (index, theme) => ({
-            padding: [theme.spacing(1.5), theme.spacing(1)].join(' '),
-            background:
-                index % 2 === 0
-                    ? theme.palette.grey[100]
-                    : theme.palette.grey[50]
-        }),
-        itemRenderer = (data) => {
-            const changes = data.changes;
-            return (
-                <React.Fragment>
-                    {changes != null && (
-                        <Button
-                            variant="outlined"
-                            size="small"
-                            onClick={() => ShowDataComparison(changes, title)}
-                            sx={{
-                                marginLeft: theme.spacing(1),
-                                marginTop: theme.spacing(-0.5),
-                                float: 'right'
-                            }}
-                        >
-                            {title}
-                        </Button>
-                    )}
-                    <Typography>
-                        {formatDate(data.creation) +
-                            ', [' +
-                            getLabel(data.action) +
-                            '], ' +
-                            data.user}
-                    </Typography>
-                </React.Fragment>
-            );
-        },
-        headerTitle = (
-            <React.Fragment>
-                <Typography>{getLabel('audits')}</Typography>
-                <Divider />
-            </React.Fragment>
-        ),
-        ...rest
-    } = props;
-
-    // Layout
-    return (
-        <ListMoreDisplay headerTitle={headerTitle} {...rest}>
-            {(data, index) => (
-                <div key={data.id} style={getItemStyle(index, theme)}>
-                    {itemRenderer(data, index)}
-                </div>
-            )}
-        </ListMoreDisplay>
-    );
-}

package/src/mu/AutocompleteExtendedProps.ts

@@ -1,83 +0,0 @@
-import { DataTypes } from '@etsoo/shared';
-import { AutocompleteProps } from '@mui/material';
-import { ChangeEventHandler } from 'react';
-
-/**
- * Autocomplete extended props
- */
-export type AutocompleteExtendedProps<
-    T extends object,
-    D extends DataTypes.Keys<T>
-> = Omit<
-    AutocompleteProps<T, undefined, false, false>,
-    'renderInput' | 'options'
-> & {
-    /**
-     * Id field
-     */
-    idField?: D;
-
-    /**
-     * Id value
-     */
-    idValue?: T[D];
-
-    /**
-     * Autocomplete for the input
-     */
-    inputAutoComplete?: string;
-
-    /**
-     * If `true`, the label is displayed in an error state.
-     * @default false
-     */
-    inputError?: boolean;
-
-    /**
-     * The helper text content.
-     */
-    inputHelperText?: React.ReactNode;
-
-    /**
-     * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
-     * @default 'none'
-     */
-    inputMargin?: 'dense' | 'normal' | 'none';
-
-    /**
-     * Input onChange hanlder
-     */
-    inputOnChange?: ChangeEventHandler<HTMLInputElement> | undefined;
-
-    /**
-     * If `true`, the label will indicate that the `input` is required.
-     * @default false
-     */
-    inputRequired?: boolean;
-
-    /**
-     * The variant to use.
-     * @default 'outlined'
-     */
-    inputVariant?: 'standard' | 'outlined' | 'filled';
-
-    /**
-     * Label of the field
-     */
-    label: string;
-
-    /**
-     * Name of the field
-     */
-    name: string;
-
-    /**
-     * Is the field read only?
-     */
-    readOnly?: boolean;
-
-    /**
-     * Is search field?
-     */
-    search?: boolean;
-};

package/src/mu/BackButton.tsx

@@ -1,55 +0,0 @@
-import { IconButton, IconButtonProps, useTheme } from '@mui/material';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-
-/**
- * BackButton props
- */
-export interface BackButtonProps extends IconButtonProps {}
-
-/**
- * BackButton
- * @param props Props
- * @returns Component
- */
-export function BackButton(props: BackButtonProps) {
-    // Destruct
-    const { color = 'primary', size = 'small', onClick, ...rest } = props;
-
-    // Theme
-    const theme = useTheme();
-
-    // Navigate
-    const navigate = useNavigate();
-
-    // Color
-    const pColor =
-        color != 'inherit' && color != 'default' && color in theme.palette
-            ? theme.palette[color]
-            : theme.palette.primary;
-
-    // Click handler
-    const onClickLocal = async (event: React.MouseEvent<HTMLButtonElement>) => {
-        if (onClick) onClick(event);
-
-        // Navigate
-        navigate(-1);
-    };
-
-    return (
-        <IconButton
-            aria-label="Back"
-            color={color}
-            size={size}
-            onClick={onClickLocal}
-            sx={{
-                backgroundColor: pColor.contrastText,
-                border: `1px solid ${pColor.light}`
-            }}
-            {...rest}
-        >
-            <ArrowBackIcon />
-        </IconButton>
-    );
-}