demo-tabledata-redis/src/web/src/modules/components/proxy/proxy_edit.ts

import { shortcut } from '@core/core';
import { PROXY_CONFIG } from '@constants/constant';
import { FormItem } from '../form_item/form_item';
@shortcut()
export class ProxyEdit extends BI.Widget {
    static xtype = 'dec.dcm.connection.plugin.redis.components.proxy_edit'

    props = {
        proxyConfig : {
            ...PROXY_CONFIG,
        },
    }

    isOpen = true;

    form = {
        host: null,
        port: null,
        username: null,
        password: null,
        privateKeyPath: null,
    }

    oldPassword = '';

    render() {
        const { open, host, port, username, password, privateKeyPath } = this.options.proxyConfig;
        this.isOpen = open;
        this.oldPassword = password;
        
        return {
            type: BI.VerticalLayout.xtype,
            hgap: 15,
            vgap: 10,
            items: [
                {
                    type: FormItem.xtype,
                    name: BI.i18nText('Plugin-Redis_Proxy_Open'),
                    forms: [{
                        type: BI.CenterAdaptLayout.xtype,
                        items: [
                            {
                                type: BI.MultiSelectItem.xtype,
                                width: 30,
                                selected: this.isOpen,
                                handler: () => {
                                    this.isOpen = !this.isOpen;
                                },
                            }, {
                                type: BI.Label.xtype,
                                text: BI.i18nText('Plugin-Redis_Proxy_Description'),
                            },
                        ],
                    }],
                },
                {
                    type: FormItem.xtype,
                    name: BI.i18nText('Plugin-Redis_Proxy_Host'),
                    forms: [{
                        type: BI.TextEditor.xtype,
                        width: 300,
                        allowBlank: true,
                        value: host,
                        ref: (_ref: any) => {
                            this.form.host = _ref;
                        },
                    }],
                },
                {
                    type: FormItem.xtype,
                    name: BI.i18nText('Plugin-Redis_Proxy_Port'),
                    forms: [{
                        type: BI.TextEditor.xtype,
                        width: 300,
                        allowBlank: true,
                        value: port,
                        ref: (_ref: any) => {
                            this.form.port = _ref;
                        },
                    }],
                },
                {
                    type: FormItem.xtype,
                    name: BI.i18nText('Plugin-Redis_Proxy_Username'),
                    forms: [{
                        type: BI.TextEditor.xtype,
                        width: 300,
                        allowBlank: true,
                        value: username,
                        ref: (_ref: any) => {
                            this.form.username = _ref;
                        },
                    }],
                },
                {
                    type: FormItem.xtype,
                    name: BI.i18nText('Plugin-Redis_Proxy_Password'),
                    forms: [{
                        type: BI.Editor.xtype,
                        cls: 'bi-border',
                        width: 300,
                        height: 20,
                        allowBlank: true,
                        value: password,
                        inputType: 'password',
                        ref: (_ref: any) => {
                            this.form.password = _ref;
                        },
                    }],
                },
                {
                    type: FormItem.xtype,
                    name: BI.i18nText('Plugin-Redis_Proxy_Private_Key_Path'),
                    forms: [
                        {
                            type: BI.TextEditor.xtype,
                            width: 300,
                            allowBlank: true,
                            value: privateKeyPath,
                            watermark: BI.i18nText('Plugin-Redis_Proxy_Private_Key_Path_Mark'),
                            ref: (_ref: any) => {
                                this.form.privateKeyPath = _ref;
                            },
                        },
                    ],
                },
            ],
        };
    }

    public getSubmitValue() {
        return {
            open: this.isOpen,
            host: this.form.host.getValue(),
            port: this.form.port.getValue(),
            username: this.form.username.getValue(),
            password: this.oldPassword === this.form.password.getValue() ? this.oldPassword : BI.encode(this.form.password.getValue()),
            privateKeyPath: this.form.privateKeyPath.getValue(),
        };
    }
}