@etsoo/materialui 1.0.1

package/src/UserAvatarEditor.tsx

@@ -0,0 +1,287 @@
+import { Button, ButtonGroup, Slider, Stack } from '@mui/material';
+import React from 'react';
+import AvatarEditor from 'react-avatar-editor';
+import RotateLeftIcon from '@mui/icons-material/RotateLeft';
+import RotateRightIcon from '@mui/icons-material/RotateRight';
+import ClearAllIcon from '@mui/icons-material/ClearAll';
+import ComputerIcon from '@mui/icons-material/Computer';
+import DoneIcon from '@mui/icons-material/Done';
+import pica from 'pica';
+import { Labels } from './app/Labels';
+
+/**
+ * User avatar editor to Blob helper
+ */
+export interface UserAvatarEditorToBlob {
+    (
+        canvas: HTMLCanvasElement,
+        mimeType?: string,
+        quality?: number
+    ): Promise<Blob>;
+}
+
+/**
+ * User avatar editor on done handler
+ */
+export interface UserAvatarEditorOnDoneHandler {
+    (canvas: HTMLCanvasElement, toBlob: UserAvatarEditorToBlob): void;
+}
+
+/**
+ * User avatar editor props
+ */
+export interface UserAvatarEditorProps {
+    /**
+     * Cropping border size
+     */
+    border?: number;
+
+    /**
+     * Image source
+     */
+    image?: string | File;
+
+    /**
+     * Max width to save
+     */
+    maxWidth?: number;
+
+    /**
+     * On done handler
+     */
+    onDone: UserAvatarEditorOnDoneHandler;
+
+    /**
+     * Return scaled result?
+     */
+    scaledResult?: boolean;
+
+    /**
+     * Width of the editor
+     */
+    width?: number;
+
+    /**
+     * Height of the editor
+     */
+    height?: number;
+}
+
+interface EditorState {
+    scale: number;
+    rotate: number;
+}
+
+const defaultState: EditorState = {
+    scale: 1,
+    rotate: 0
+};
+
+/**
+ * User avatar editor
+ * https://github.com/mosch/react-avatar-editor
+ * @param props Props
+ * @returns Component
+ */
+export function UserAvatarEditor(props: UserAvatarEditorProps) {
+    // Destruct
+    const {
+        border = 30,
+        image,
+        maxWidth,
+        onDone,
+        scaledResult = false,
+        width = 200,
+        height = 200
+    } = props;
+
+    // Container width
+    const containerWidth = width + 2 * border + 44 + 4;
+
+    // Calculated max width
+    const maxWidthCalculated =
+        maxWidth == null || maxWidth < 200 ? 3 * width : maxWidth;
+
+    // Labels
+    const labels = Labels.UserAvatarEditor;
+
+    // Ref
+    const ref = React.createRef<AvatarEditor>();
+
+    // Button ref
+    const buttonRef = React.createRef<HTMLButtonElement>();
+
+    // Preview image state
+    const [previewImage, setPreviewImage] = React.useState(image);
+
+    // Is ready state
+    const [ready, setReady] = React.useState(false);
+
+    // Editor states
+    const [editorState, setEditorState] = React.useState(defaultState);
+
+    // Handle zoom
+    const handleZoom = (
+        _event: Event,
+        value: number | number[],
+        _activeThumb: number
+    ) => {
+        const scale = typeof value === 'number' ? value : value[0];
+        const newState = { ...editorState, scale };
+        setEditorState(newState);
+    };
+
+    // Handle image load
+    const handleLoad = () => {
+        setReady(true);
+    };
+
+    // Handle file change
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const files = event.target.files;
+        if (files == null || files.length == 0) return;
+
+        // Reset all settings
+        handleReset();
+
+        // Set new preview image
+        setPreviewImage(files[0]);
+
+        // Set ready state
+        setReady(false);
+
+        // Make the submit button visible
+        buttonRef.current?.scrollIntoView(false);
+    };
+
+    // Handle reset
+    const handleReset = () => {
+        setEditorState({ ...defaultState });
+    };
+
+    // Handle rotate
+    const handleRotate = (r: number) => {
+        let rotate = editorState.rotate + r;
+        if (rotate >= 360 || rotate <= -360) rotate = 0;
+
+        const newState = { ...editorState, rotate };
+        setEditorState(newState);
+    };
+
+    // Handle done
+    const handleDone = () => {
+        // Data
+        var data = scaledResult
+            ? ref.current?.getImageScaledToCanvas()
+            : ref.current?.getImage();
+        if (data == null) return;
+
+        // pica
+        const picaInstance = pica();
+
+        // toBlob helper
+        // Convenience method, similar to canvas.toBlob(), but with promise interface & polyfill for old browsers.
+        const toBlob = (
+            canvas: HTMLCanvasElement,
+            mimeType: string = 'image/jpeg',
+            quality: number = 1
+        ) => {
+            return picaInstance.toBlob(canvas, mimeType, quality);
+        };
+
+        if (data.width > maxWidthCalculated) {
+            // Target height
+            const heightCalculated = (height * maxWidthCalculated) / width;
+
+            // Target
+            const to = document.createElement('canvas');
+            to.width = maxWidthCalculated;
+            to.height = heightCalculated;
+
+            // Large photo, resize it
+            // https://github.com/nodeca/pica
+            picaInstance
+                .resize(data, to, {
+                    unsharpAmount: 160,
+                    unsharpRadius: 0.6,
+                    unsharpThreshold: 1
+                })
+                .then((result) => onDone(result, toBlob));
+        } else {
+            onDone(data, toBlob);
+        }
+    };
+
+    return (
+        <Stack direction="column" spacing={0.5} width={containerWidth}>
+            <Button
+                variant="outlined"
+                size="medium"
+                component="label"
+                startIcon={<ComputerIcon />}
+                fullWidth
+            >
+                {labels.upload}
+                <input
+                    id="fileInput"
+                    type="file"
+                    accept="image/png, image/jpeg"
+                    multiple={false}
+                    hidden
+                    onChange={handleFileChange}
+                />
+            </Button>
+            <Stack direction="row" spacing={0.5}>
+                <AvatarEditor
+                    ref={ref}
+                    border={border}
+                    width={width}
+                    height={height}
+                    onLoadSuccess={handleLoad}
+                    image={previewImage ?? ''}
+                    scale={editorState.scale}
+                    rotate={editorState.rotate}
+                />
+                <ButtonGroup
+                    size="small"
+                    orientation="vertical"
+                    disabled={!ready}
+                >
+                    <Button
+                        onClick={() => handleRotate(90)}
+                        title={labels.rotateRight}
+                    >
+                        <RotateRightIcon />
+                    </Button>
+                    <Button
+                        onClick={() => handleRotate(-90)}
+                        title={labels.rotateLeft}
+                    >
+                        <RotateLeftIcon />
+                    </Button>
+                    <Button onClick={handleReset} title={labels.reset}>
+                        <ClearAllIcon />
+                    </Button>
+                </ButtonGroup>
+            </Stack>
+            <Slider
+                title={labels.zoom}
+                disabled={!ready}
+                min={1}
+                max={5}
+                step={0.01}
+                value={editorState.scale}
+                onChange={handleZoom}
+            />
+            <Button
+                ref={buttonRef}
+                variant="contained"
+                startIcon={<DoneIcon />}
+                disabled={!ready}
+                onClick={handleDone}
+            >
+                {labels.done}
+            </Button>
+        </Stack>
+    );
+}

package/src/app/CommonApp.ts

@@ -0,0 +1,223 @@
+import {
+    IActionResult,
+    IApiPayload,
+    IAppSettings,
+    IUser,
+    RefreshTokenProps,
+    RefreshTokenResult
+} from '@etsoo/appscript';
+import { CoreConstants, IPageData, RefreshTokenRQ } from '@etsoo/react';
+import { ReactApp } from './ReactApp';
+
+/**
+ * Common independent application
+ * 通用独立程序
+ */
+export abstract class CommonApp<
+    U extends IUser = IUser,
+    P extends IPageData = IPageData,
+    S extends IAppSettings = IAppSettings
+> extends ReactApp<S, U, P> {
+    /**
+     * Override persistedFields
+     */
+    protected override get persistedFields() {
+        return [...super.persistedFields, CoreConstants.FieldUserIdSaved];
+    }
+
+    /**
+     * Init call update fields in local storage
+     * @returns Fields
+     */
+    protected override initCallEncryptedUpdateFields(): string[] {
+        const fields = super.initCallEncryptedUpdateFields();
+        fields.push(CoreConstants.FieldUserIdSaved);
+        return fields;
+    }
+
+    /**
+     * Do user login
+     * @param data User data
+     * @param refreshToken Refresh token
+     * @param keep Keep login
+     * @returns Success data
+     */
+    protected doUserLogin(
+        data: U,
+        refreshToken: string,
+        keep: boolean
+    ): string | undefined {
+        this.userLogin(data, refreshToken, keep);
+        return undefined;
+    }
+
+    /**
+     * 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
+        const rq: RefreshTokenRQ = {
+            deviceId: this.deviceId,
+            timezone: this.getTimeZone(),
+            ...data
+        };
+
+        // Login result type
+        type LoginResult = IActionResult<U>;
+
+        // Payload
+        const payload: IApiPayload<LoginResult, any> = {
+            // No loading bar needed to avoid screen flicks
+            showLoading,
+            config: { headers: { [CoreConstants.TokenHeaderRefresh]: token } },
+            onError: (error) => {
+                if (callback) callback(error);
+
+                // Prevent further processing
+                return false;
+            }
+        };
+
+        // Success callback
+        const success = (
+            result: LoginResult,
+            failCallback?: (
+                result: RefreshTokenResult,
+                serviceToken?: string
+            ) => void
+        ) => {
+            // Token
+            const refreshToken = this.getResponseToken(payload.response);
+            if (refreshToken == null || result.data == null) {
+                if (failCallback) failCallback(this.get('noData')!);
+                return false;
+            }
+
+            // Keep
+            const keep = this.storage.getData(
+                CoreConstants.FieldLoginKeep,
+                false
+            );
+
+            // User login
+            var successData = this.doUserLogin(result.data, refreshToken, keep);
+
+            // Callback
+            if (failCallback) failCallback(true, successData);
+
+            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) {
+                            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 success(result, callback);
+    }
+
+    /**
+     * Try login
+     * @param data Additional data
+     * @param showLoading Show loading bar or not
+     * @returns Result
+     */
+    override async tryLogin<D extends object = RefreshTokenRQ>(
+        data?: D,
+        showLoading?: boolean
+    ) {
+        // Reset user state
+        const result = await super.tryLogin(data);
+        if (!result) return false;
+
+        // Refresh token
+        return await this.refreshToken({
+            callback: (result) => this.doRefreshTokenResult(result),
+            data,
+            showLoading,
+            relogin: true
+        });
+    }
+}

package/src/app/IServiceAppSettings.ts

@@ -0,0 +1,13 @@
+import { IAppSettings } from '@etsoo/appscript';
+import { DataTypes } from '@etsoo/shared';
+
+/**
+ * Service app settings interface
+ */
+export interface IServiceAppSettings<S extends DataTypes.IdType = number>
+    extends IAppSettings {
+    /**
+     * Service id
+     */
+    readonly serviceId: S;
+}

package/src/app/IServicePage.ts

@@ -0,0 +1,6 @@
+import { IPageData } from '@etsoo/react';
+
+/**
+ * Service page data interface
+ */
+export interface IServicePageData extends IPageData {}

package/src/app/IServiceUser.ts

@@ -0,0 +1,17 @@
+import { IActionResult, IUser } from '@etsoo/appscript';
+
+/**
+ * Service user interface
+ */
+export interface IServiceUser extends IUser {
+    /**
+     * Service device id
+     */
+    serviceDeviceId: string;
+}
+
+/**
+ * Service user login result
+ */
+export type ServiceLoginResult<U extends IServiceUser = IServiceUser> =
+    IActionResult<U>;

package/src/app/ISmartERPUser.ts

@@ -0,0 +1,16 @@
+import { IActionResult, IUser } from '@etsoo/appscript';
+
+/**
+ * SmartERP user interface
+ */
+export interface ISmartERPUser extends IUser {
+    /**
+     * Service refresh token
+     */
+    readonly serviceToken?: string;
+}
+
+/**
+ * SmartERP user login result
+ */
+export type SmartERPLoginResult = IActionResult<ISmartERPUser>;

package/src/app/Labels.ts

@@ -0,0 +1,77 @@
+import { DataTypes, Utils } from '@etsoo/shared';
+
+/**
+ * Labels
+ */
+export namespace Labels {
+    /**
+     * Common page labels
+     */
+    export const CommonPage = {
+        add: 'Add',
+        back: 'Back',
+        delete: 'Delete',
+        more: 'More',
+        pullToRefresh: 'Pull down to refresh',
+        refresh: 'Refresh',
+        refreshing: 'Refreshing',
+        releaseToRefresh: 'Release to refresh',
+        reset: 'Reset',
+        save: 'Save',
+        scrollTop: 'Scroll to top',
+        submit: 'Submit'
+    };
+
+    /**
+     * Notification MU labels
+     */
+    export const NotificationMU = {
+        alertTitle: 'Warning',
+        alertOK: 'OK',
+        confirmTitle: 'Confirm',
+        confirmYes: 'OK',
+        confirmNo: 'Cancel',
+        promptTitle: 'Input',
+        promptCancel: 'Cancel',
+        promptOK: 'OK',
+        loading: 'Loading',
+        success: 'Success',
+        warning: 'Warning',
+        info: 'Information'
+    };
+
+    /**
+     * UserAvatarEditor labels
+     */
+    export const UserAvatarEditor = {
+        done: 'Done',
+        reset: 'Reset',
+        rotateLeft: 'Rotate left 90°',
+        rotateRight: 'Rotate right 90°',
+        upload: 'Upload',
+        zoom: 'Zoom'
+    };
+
+    /**
+     * setLabelReference key reference
+     */
+    export interface setLabelsReference {
+        commonPage?: DataTypes.StringDictionary;
+        notificationMU?: DataTypes.StringDictionary;
+        userAvatarEditor?: DataTypes.StringDictionary;
+    }
+
+    /**
+     * Set components' labels
+     * @param labels Labels
+     * @param reference Key reference
+     */
+    export const setLabels = (
+        labels: DataTypes.StringRecord,
+        reference: setLabelsReference = {}
+    ) => {
+        Utils.setLabels(CommonPage, labels, reference.commonPage);
+        Utils.setLabels(NotificationMU, labels, reference.notificationMU);
+        Utils.setLabels(UserAvatarEditor, labels, reference.userAvatarEditor);
+    };
+}