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

import { shortcut, store } from '../../core/core';
import { VtapeXtype, LabelXtype, HtapeXtype, LeftRightVerticalAdaptLayoutXtype, IconButtonXtype, ButtonGroupXtype, VerticalXtype } from 'ui';
import { ParameterInput } from './parameter_input/parameter_input';
import { ParameterModel } from './parameter.model';
import { ParametersType } from './parameter.typings';

@shortcut()
@store(ParameterModel)
export class Parameter extends BI.Widget {
    static xtype = 'plugin.report.redis.components.parameter';
    props = {
        title: '',
        showRefresh: true,
        height: 200,
        value: [] as ParametersType[],
    }

    parameterInputs: any;

    model: ParameterModel['model']
    store: ParameterModel['store']

    watch = {
        parameters: () => {
            this.parameterInputs.populate(this.renderParameterInputs());
        },
        selectedId: (id: string) => {
            this.parameterInputs.setValue(id);
        },
    }

    render() {
        const { title, showRefresh } = this.options;
        this.setDefalue();
        
        return {
            type: VtapeXtype,
            items: [{
                el: {
                    type: LeftRightVerticalAdaptLayoutXtype,
                    items: {
                        left: [{
                            type: LabelXtype,
                            lgap: 2,
                            text: title,
                            textAlign: 'left',
                        }],
                        right: [{
                            type: IconButtonXtype,
                            cls: 'text-add-tip-font',
                            width: 25,
                            title: BI.i18nText('Plugin-Redis_Parameter_Insert'),
                            handler: () => {
                                this.store.setParameters([{
                                    name: '',
                                    value: '',
                                    id: BI.UUID(),
                                    type: 'string',
                                }, ...this.model.parameters]);
                            },
                        }, {
                            type: IconButtonXtype,
                            cls: 'close-font bi-error',
                            width: 25,
                            title: BI.i18nText('Plugin-Redis_Parameter_Delete'),
                            handler: () => {
                                if (this.model.selectedId) {
                                    BI.Msg.confirm(BI.i18nText('BI-Basic_Prompt'), BI.i18nText('Plugin-Redis_Parameter_Delete_Confirm'), (re: boolean) => {
                                        if (re) {
                                            this.store.removeSelectedParameter();
                                        }
                                    });
                                } else {
                                    BI.Msg.alert(BI.i18nText('BI-Basic_Prompt'), BI.i18nText('Plugin-Redis_Parameter_Delete_Alert'));
                                }
                            },
                        }, {
                            type: IconButtonXtype,
                            cls: 'add-up-font',
                            width: 25,
                            title: BI.i18nText('Plugin-Redis_Parameter_Move_Up'),
                            handler: () => {
                                this.store.move('up');
                            },
                        }, {
                            type: IconButtonXtype,
                            cls: 'minus-down-font',
                            width: 25,
                            title: BI.i18nText('Plugin-Redis_Parameter_Move_Down'),
                            handler: () => {
                                this.store.move('down');
                            },
                        }, showRefresh ? {
                            type: IconButtonXtype,
                            cls: 'refresh-font',
                            width: 25,
                            title: BI.i18nText('Plugin-Redis_Parameter_Refresh'),
                            handler: () => {
                                this.setDefalue();
                            },
                        } : null],
                    },
                    
                },
                height: 25,
            }, {
                el: {
                    type: HtapeXtype,
                    cls: 'bi-border',
                    items: [{
                        el: {
                            type: LabelXtype,
                            text: BI.i18nText('Plugin-Redis_Dataset_Parameter_Name'),
                        },
                        width: 0.5,
                    }, {
                        el: {
                            type: LabelXtype,
                            cls: 'bi-border-left',
                            text: BI.i18nText('Plugin-Redis_Dataset_Parameter_Value'),
                        },
                        width: 0.5,
                    }],
                },
                height: 25,
            }, {
                type: ButtonGroupXtype,
                cls: 'bi-border',
                layouts: [{
                    type: VerticalXtype,
                }],
                items: this.renderParameterInputs(),
                ref: (_ref: any) => {
                    this.parameterInputs = _ref;
                },
            }],
        };
    }

    public getValue() {
        return this.model.parameters.map(item => {
            return {
                name: item.name,
                value: item.value,
                type: item.type,
            };
        });
    }

    private setDefalue() {
        const { value = [] } = this.options;
        this.store.setParameters(value.map(item => {
            return {
                ...item,
                id: BI.UUID(),
            };
        }));
    }

    private renderParameterInputs() {
        return this.model.parameters.map(item => {
            return {
                type: ParameterInput.xtype,
                inputName: item.name,
                inputValue: item.value,
                id: item.id,
                value: item.id,
                selected: item.id === this.model.selectedId,
            };
        });
    }
}