decision-webui-dcm/src/modules/components/test_status/test_status.ts

import { shortcut, store } from '@core/core';
import { TestStatusModelXtype, TestStatusModel } from './test_status.model';
import { CenterAdapt, Tab, Vertical, Label, TextButton, Left } from 'ui';
import { TEST_STATUS } from '@constants/constant';
import { TipIconXtype } from './tip_icon/tip_icon';
import { TipFailXtype, EVENT_CLOSE, EVENT_RELOAD, EVENT_DETAIL } from './tip_icon/tip_fail';
export const TestStatusXtype = 'dec.dcm.components.test_status';
export {
    EVENT_CLOSE,
    EVENT_RELOAD,
};
@shortcut(TestStatusXtype)
@store(TestStatusModelXtype)
export class TestStatus extends BI.Widget {
    props = {
        loadingCls: '',
        loadingText: '',
        successCls: '',
        successText: '',
        failCls: '',
        failText: '',
        retryText: '',
    }

    model: TestStatusModel['model'];
    store: TestStatusModel['store'];

    tab: any;
    failMessage: any;
    failDriverMessage: any;
    driverLink: any;
    detail: any;

    watch = {
        status: (status: string) => {
            this.tab.setSelect(status);
        },
    }

    render() {
        const { loadingCls, loadingText, successCls, successText, failCls, failText, retryText } = this.options;

        return {
            type: CenterAdapt,
            cls: 'bi-z-index-mask',
            items: [
                {
                    type: Vertical,
                    items: [
                        {
                            type: Tab,
                            cls: 'bi-card',
                            width: 450,
                            height: 250,
                            single: true,
                            showIndex: this.model.status,
                            ref: (_ref: any) => {
                                this.tab = _ref;
                            },
                            cardCreator: (index: string) => {
                                switch (index) {
                                    case TEST_STATUS.SUCCESS:
                                        return {
                                            type: TipIconXtype,
                                            tipCls: successCls,
                                            tipText: successText,
                                        };
                                    case TEST_STATUS.FAIL:
                                        return {
                                            type: TipFailXtype,
                                            tipCls: failCls,
                                            tipText: failText,
                                            retryText,
                                            listeners: [
                                                {
                                                    eventName: EVENT_RELOAD,
                                                    action: () => {
                                                        this.fireEvent(EVENT_RELOAD);
                                                        this.detail.setVisible(false);
                                                    },
                                                },
                                                {
                                                    eventName: EVENT_CLOSE,
                                                    action: () => {
                                                        this.fireEvent(EVENT_CLOSE);
                                                    },
                                                },
                                                {
                                                    eventName: EVENT_DETAIL,
                                                    action: (isCollapse: boolean) => {
                                                        this.tab.setHeight(isCollapse ? 250 : 200);
                                                        this.detail.setVisible(!isCollapse);
                                                    },
                                                },
                                            ],
                                        };
                                    default:
                                        return {
                                            type: TipIconXtype,
                                            tipCls: loadingCls,
                                            tipText: loadingText,
                                        };
                                }
                            },
                        },
                        {
                            type: Vertical,
                            cls: 'bi-card',
                            invisible: true,
                            bgap: 10,
                            items: [
                                {
                                    type: Vertical,
                                    cls: 'bi-header-background',
                                    vgap: 5,
                                    hgap: 10,
                                    scrolly: true,
                                    items: [
                                        {
                                            type: Label,
                                            whiteSpace: 'normal',
                                            width: 400,
                                            textAlign: 'left',
                                            text: '',
                                            ref: (_ref: any) => {
                                                this.failMessage = _ref;
                                            },
                                        },
                                        {
                                            type: Label,
                                            textAlign: 'left',
                                            invisible: true,
                                            ref: (_ref: any) => {
                                                this.failDriverMessage = _ref;
                                            },
                                        },
                                        {
                                            type: Left,
                                            invisible: true,
                                            items: [
                                                {
                                                    type: TextButton,
                                                    cls: 'bi-high-light bi-high-light-border-bottom',
                                                    text: BI.i18nText('Dec-Dcm_Connection_Download_Driver'),
                                                },
                                            ],
                                            ref: (_ref: any) => {
                                                this.driverLink = _ref;
                                            },
                                        },
                                    ],
                                },
                            ],
                            ref: (_ref: any) => {
                                this.detail = _ref;
                            },
                        },
                    ],
                },
            ],
        };
    }

    setSuccess() {
        this.store.setStatus(TEST_STATUS.SUCCESS);
    }

    setFail(message: string, driver = '', link = '') {
        this.store.setStatus(TEST_STATUS.FAIL);
        this.failMessage.setText(message);
        this.failDriverMessage.isVisible(!!driver);
        this.driverLink.isVisible(!!driver);
        if (driver) {
            this.failDriverMessage.setText(BI.i18nText('Dec-Dcm_Connection_Lack_Driver', driver));
            this.store.setLink(link);
        }
    }

    setLoading() {
        this.store.setStatus(TEST_STATUS.LOADING);
    }
}