demo-tabledata-redis/src/web/src/modules/components/database_index/database_index.ts

import { shortcut, store } from '@core/core';
import { DatabaseIndexModel } from './database_index.model';
import { openFormulaPopover } from './database_index.service';

@shortcut()
@store(DatabaseIndexModel)
export class DatabaseIndex extends BI.Widget {
    static xtype = 'plugin.report.redis.components.database_index'

    databaseIndexTab: any;
    textEditor: any;
    formulaPane: any;

    model: DatabaseIndexModel['model']
    store: DatabaseIndexModel['store']

    props = {
        value: '',
        inputType: 'int',
    }

    render() {
        const { value, inputType } = this.options;
        this.store.setInpueValue(value);
        this.store.setInputType(inputType);

        return {
            type: BI.Tab.xtype,
            single: true,
            showIndex: this.model.inputType,
            ref: (_ref: any) => {
                this.databaseIndexTab = _ref;
            },
            cardCreator: (index: 'int'|'formula') => {
                if (index === 'int') {
                    return {
                        type: BI.TextEditor.xtype,
                        warningTitle: '',
                        value: parseInt(this.model.inputValue as string, 10) || 0,
                        validationChecker: (v: string) => this.checkInteger(v),
                        errorText: BI.i18nText('Plugin-Redis_Check_Integer'),
                        listeners: [{
                            eventName: 'EVENT_CHANGE',
                            action: () => {
                                this.store.setInpueValue(parseInt(this.textEditor.getValue(), 10));
                            },
                        }],
                        ref: (_ref: any) => {
                            this.textEditor = _ref;
                        },
                    };
                }
                
                return {
                    type: BI.TextEditor.xtype,
                    allowBlank: true,
                    value: this.model.inputValue,
                    ref: (_ref: any) => {
                        this.formulaPane = _ref;
                    },
                };
            },
        };
    }
    private checkInteger(value: string) {
        return /^[\d]+$/.test(value);
    }

    public setSelect(value: string) {
        this.databaseIndexTab.setSelect(value);
        this.store.setInputType(value);
        if (value === 'formula') {
            openFormulaPopover({
                formula: this.model.inputValue === 0 ? '' : this.model.inputValue as string,
            }, BI.ComplexFormulaInserter.xtype).then(value => {
                this.store.setInpueValue(value.formula);
                this.formulaPane.setValue(value.formula);
            });
        }
    }

    public getValue() {
        return this.model.inputType === 'int' ? parseInt(`${this.model.inputValue}`, 10) : this.model.inputValue;
    }
}