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

import { shortcut, store } from '@core/core';
import { TableList } from './table_list/table_list';
import '../less/index.less';
import { DatabaseIndex } from './components/database_index/database_index';
import { RedisModel, ParameterType } from './app.model';
import { Preview } from './components/preview/preview';
import './app.less';
import { redisField } from './app.constant';

@shortcut()
@store(RedisModel)
export class RedisDataset extends BI.Widget {
    static xtype = 'dec.dcm.connection.plugin.redis.dataset'
    private textWidth = 100;
    databaseIndex: DatabaseIndex;
    iconCombo: any;
    queryCondition: any;
    tableList: TableList;
    parameterEditor: any;
    previewButton: any;

    store: RedisModel['store']
    model: RedisModel['model']

    props = {
        value: {
            datasetData: {
                database: '',
                orderValue: 0,
                query: '',
                parameters: [],
            },
        },
    }

    watch = {
        parameters: () => {
            this.parameterEditor.populate(this.renderItems(), [this.model.paramHeader]);
        },
        ableSave: (ableSave: boolean) => {
            this.previewButton.setEnable(ableSave);
        },
    }

    render() {
        const { database = '', orderValue = 0, query = '', parameters = [] } = this.options.value.datasetData || {};
        this.store.setParameters(parameters);
        this.store.setAbleSave(!!query);
        const inputType = typeof orderValue === 'string' ? 'formula' : 'int';
        
        return {
            type: BI.HTapeLayout.xtype,
            tgap: 15,
            items: [{
                el: {
                    type: TableList.xtype,
                    cls: 'bi-border-right',
                    database,
                    ref: (_ref: any) => {
                        this.tableList = _ref;
                    },
                },
                width: 300,
            }, {
                type: BI.VerticalLayout.xtype,
                lgap: 5,
                bgap: 10,
                items: [{
                    type: BI.HTapeLayout.xtype,
                    height: 22,
                    items: [{
                        el: {
                            type: BI.Label.xtype,
                            text: BI.i18nText('Plugin-Redis_DB_Index'),
                            textAlign: 'left',
                        },
                        width: this.textWidth,
                    }, {
                        type: BI.HTapeLayout.xtype,
                        items: [{
                            el: {
                                type: BI.IconCombo.xtype,
                                height: 22,
                                width: 28,
                                value: inputType,
                                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.databaseIndex.setSelect(typeValue);
                                    },
                                }],
                            },
                            width: 28,
                        }, {
                            type: DatabaseIndex.xtype,
                            rgap: 11,
                            value: orderValue,
                            inputType,
                            ref: (_ref: any) => {
                                this.databaseIndex = _ref;
                            },
                        }],
                    }],
                }, {
                    type: BI.HTapeLayout.xtype,
                    height: 200,
                    rgap: 5,
                    items: [{
                        el: {
                            type: BI.Label.xtype,
                            text: BI.i18nText('Plugin-Redis_Query_Condition'),
                            textAlign: 'left',
                        },
                        width: this.textWidth,
                    }, {
                        type: BI.TextAreaEditor.xtype,
                        cls: 'bi-border',
                        height: 200,
                        allowBlank: true,
                        value: query,
                        ref: (_ref: any) => {
                            this.queryCondition = _ref;
                        },
                        listeners: [{
                            eventName: 'EVENT_CHANGE',
                            action: () => {
                                const value = this.queryCondition.getValue();
                                this.store.setAbleSave(!!value);
                            },
                        }],
                    }],
                }, {
                    type: BI.HTapeLayout.xtype,
                    height: 24,
                    rgap: 5,
                    items: [{
                        type: BI.Label.xtype,
                        height: 24,
                        text: BI.i18nText('Plugin-Redis_Set_Parameter'),
                        textAlign: 'left',
                    }, {
                        el: {
                            type: BI.Button.xtype,
                            text: BI.i18nText('Plugin-Redis_Refresh'),
                            level: 'ignore',
                            handler: () => {
                                Dec.Utils.getDataSetParameters(this.getParamSearchValue(), res => {
                                    const newParameters = BI.Services.getService('dec.service.data.set').getParameters(res.data, this.model.parameters);
                                    this.store.setParameters(newParameters);
                                });
                            },
                        },
                        width: 80,
                    }, {
                        el: {
                            type: BI.Button.xtype,
                            text: BI.i18nText('Plugin-Redis_Preview'),
                            disabled: !BI.get(this.model, 'ableSave'),
                            handler: () => {
                                this.openPreview();
                            },
                            ref: (_ref: any) => {
                                this.previewButton = _ref;
                            },
                        },
                        width: 80,
                    }],
                }, {
                    type: BI.StyleTable.xtype,
                    cls: 'param-table',
                    height: 200,
                    columnSize: [300, 300, ''],
                    items: this.renderItems(),
                    header: [this.model.paramHeader],
                    ref:  (_ref: any) => {
                        this.parameterEditor = _ref;
                    },
                }],
            }],
        };
    }

    private renderItems() {
        const self = this;
        
        return this.model.parameters.map((item, index) => [{
            type: BI.Label.xtype,
            text: item.name,
            textAlign: 'left',
            height: 30,
            lgap: 10,
        }, {
            type: BI.IconTextValueCombo.xtype,
            cls: 'field-type-change',
            height: 30,
            items: redisField,
            value: item.type,
            listeners: [{
                eventName: BI.IconTextValueCombo.EVENT_CHANGE,
                action () {
                    self.store.setParamType(index, this.getValue()[0]);
                },
            }],
        }, this.createParameterValueItem(item, (value: string) => {
            self.store.setParamValue(index, value);
        })]);
    }

    private createParameterValueItem(param: ParameterType, cb: Function) {
        return BI.Services.getService('dec.service.data.set').createParameterValueItem(param, cb);
    }

    public getValue() {
        return {
            database: this.tableList.getSelectedDatabase(),
            orderValue: this.databaseIndex.getValue(),
            query: this.queryCondition.getValue(),
            parameters: this.model.parameters,
        };
    }

    private getParamSearchValue() {
        return {
            datasetType: 'Redis',
            datasetName: BI.get(this.model, 'dataSetName'),
            datasetData: this.getValue(),
        };
    }

    private openPreview() {
        const id = BI.UUID();
        BI.Popovers.create(id, {
            type: 'bi.popover',
            width: 800,
            height: 500,
            body: {
                type: Preview.xtype,
                previewedDataSet: this.getParamSearchValue(),
            },
        }).open(id);
    }
}