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

import { shortcut } from '@core/core';
import { VerticalXtype, TextEditorXtype, HtapeXtype, LabelXtype, IconComboXtype, TabXtype, CodeEditorXtype } from 'ui';
import { Parameter } from './components/parameter/parameter';
import { TableList } from './table_list/table_list';
import '../less/index.less';

@shortcut()
export class RedisDataset extends BI.Widget {
    static xtype = 'dec.dcm.connection.plugin.redis.dataset'
    private textWidth = 100;
    databaseNoTab: any;
    iconCombo: any;

    render() {
        return {
            type: HtapeXtype,
            items: [{
                el: {
                    type: TableList.xtype,
                    cls: 'bi-border-right',
                },
                width: 300,
            }, {
                type: VerticalXtype,
                hgap: 5,
                vgap: 10,
                items: [{
                    type: HtapeXtype,
                    height: 22,
                    items: [{
                        el: {
                            type: LabelXtype,
                            text: BI.i18nText('Plugin-Redis_DB_Index'),
                            textAlign: 'left',
                        },
                        width: this.textWidth,
                    }, {
                        type: HtapeXtype,
                        items: [{
                            el: {
                                type: IconComboXtype,
                                height: 22,
                                width: 28,
                                value: 'int',
                                items: [{
                                    text: BI.i18nText('Plugin-Redis_Parameter_Type_Int'),
                                    value: 'int',
                                    iconCls: 'input-int-font',
                                }, {
                                    text: BI.i18nText('Plugin-Redis_Parameter_Type_Formula'),
                                    value: 'formula',
                                    iconCls: 'input-formula-font',
                                }],
                                ref: (_ref: any) => {
                                    this.iconCombo = _ref;
                                },
                                listeners: [{
                                    eventName: 'EVENT_CHANGE',
                                    action: () => {
                                        const typeValue = this.iconCombo.getValue()[0];
                                        this.databaseNoTab.setSelect(typeValue);
                                    },
                                }],
                            },
                            width: 28,
                        }, {
                            type: TabXtype,
                            single: true,
                            showIndex: 'int',
                            ref: (_ref: any) => {
                                this.databaseNoTab = _ref;
                            },
                            cardCreator: (index: 'int'|'formula') => {
                                if (index === 'int') {
                                    return {
                                        type: TextEditorXtype,
                                        warningTitle: '',
                                        value: 0,
                                        validationChecker: (v: string) => this.checkInteger(v),
                                        errorText: BI.i18nText('Plugin-Redis_Check_Integer'),
                                    };
                                }
                                
                                return {
                                    type: TextEditorXtype,
                                    allowBlank: true,
                                };
                            },
                        }],
                    }],
                }, {
                    type: HtapeXtype,
                    height: 200,
                    items: [{
                        el: {
                            type: LabelXtype,
                            text: BI.i18nText('Plugin-Redis_Query_Condition'),
                            textAlign: 'left',
                        },
                        width: this.textWidth,
                    }, {
                        type: CodeEditorXtype,
                        cls: 'bi-border',
                        height: 200,
                    }],
                }, {
                    type: Parameter.xtype,
                }],
            }],
        };
    }

    private checkInteger(value: string) {
        return /^[\d]+$/.test(value);
    }
}