demo-tabledata-redis/src/web/src/modules/app.show.ts

import { shortcut } from '@core/core';
import { FormItem } from './components/form_item/form_item';
import { PoolConfig } from './components/pool/pool';
import { ProxyConfig } from './components/proxy/proxy';
import { POOL_CONFIG, PROXY_CONFIG, BASIC_CONFIG } from '@constants/constant';

@shortcut()
export class RedisShow extends BI.Widget {
    static xtype = 'dec.dcm.connection.plugin.redis.show'
    props = {
        value: {
            basicConfig : {
                ...BASIC_CONFIG,
            },
            poolConfig: {
                ...POOL_CONFIG,
            },
            proxyConfig: {
                ...PROXY_CONFIG,
            },
        },
    }
    render() {
        const value = BI.get(this.options, 'value');
        const basicConfig = BI.get(value, 'basicConfig', BASIC_CONFIG);
        const poolConfig = BI.get(value, 'poolConfig', POOL_CONFIG);
        const proxyConfig = BI.get(value, 'proxyConfig', PROXY_CONFIG);
        const { host, port, newCharsetName } = basicConfig;
        
        return {
            type: BI.VerticalLayout.xtype,
            hgap: 15,
            vgap: 10,
            items: [
                {
                    type: FormItem.xtype,
                    name: BI.i18nText('Plugin-Redis_Host'),
                    forms: [{
                        type: BI.Label.xtype,
                        text: host,
                    }],
                },
                {
                    type: FormItem.xtype,
                    name: BI.i18nText('Plugin-Redis_Port'),
                    forms: [{
                        type: BI.Label.xtype,
                        text: port,
                    }],
                },
                {
                    type: FormItem.xtype,
                    name: BI.i18nText('Plugin-Redis_Password'),
                    forms: [{
                        type: BI.Label.xtype,
                        text: '*****',
                    }],
                },
                {
                    type: BI.FloatLeftLayout.xtype,
                    hgap: 20,
                    items: [
                        {
                            type: BI.TextButton.xtype,
                            cls: 'bi-high-light',
                            text: BI.i18nText('Plugin-Redis_Pool_Config'),
                            handler: () => {
                                const id = BI.UUID();
                                BI.Popovers.create(id, {
                                    type: BI.BarPopover.xtype,
                                    width: 400,
                                    height: 300,
                                    header: BI.i18nText('Plugin-Redis_Pool_Config'),
                                    body: {
                                        type: PoolConfig.xtype,
                                        poolConfig,
                                    },
                                    footer: {},
                                }).open(id);
                            },
                        },
                        {
                            type: BI.TextButton.xtype,
                            cls: 'bi-high-light',
                            text: BI.i18nText('Plugin-Redis_Proxy_Config'),
                            handler: () => {
                                const id = BI.UUID();
                                BI.Popovers.create(id, {
                                    type: BI.BarPopover.xtype,
                                    width: 650,
                                    height: 280,
                                    header: BI.i18nText('Plugin-Redis_Pool_Config'),
                                    body: {
                                        type: ProxyConfig.xtype,
                                        proxyConfig,
                                    },
                                    footer: {},
                                }).open(id);
                            },
                        },
                    ],
                },
                {
                    type: FormItem.xtype,
                    name: BI.i18nText('Plugin-Redis_Connection_Form_OriginalCharsetName'),
                    forms: [{
                        type: BI.Label.xtype,
                        text: newCharsetName ? newCharsetName : BI.i18nText('BI-Basic_Auto'),
                    }],
                },
            ],
        };
    }
}