demo-tabledata-redis/src/web/src/modules/table_list/table_list.ts

import { shortcut, store } from '@core/core';
import { ListItem } from './list_item';
import { TableModelModel } from './table_list.model';
import { fineServletURL } from '@constants/env';
import { DatabaseIndex } from '../components/database_index/database_index';

@shortcut()
@store(TableModelModel)
export class TableList extends BI.Widget {
    static xtype = 'dec.dcm.connection.plugin.redis.table_list'

    store: TableModelModel['store']
    model: TableModelModel['model']

    databaseIndex: DatabaseIndex;
    buttonGroup: any;
    connectionTextValue: any;
    searchText: any;

    props = {
        database: '',
        value: {
            datasetData: {
                orderValue: 0,
            },
        },
    }

    watch = {
        connections: () => {
            this.connectionTextValue.populate(this.renderConnectionList());
            const name = this.model.connections.length > 0 ? this.model.connections[0] : '';
            this.connectionTextValue.setValue(name);
            this.store.setSelectedConnection(name);
        },
        'selectedConnection || search || orderValue': () => {
            this.store.initTableList();
        },
        tables: (tables: string[]) => {
            this.buttonGroup.populate(this.renderTableList());
        },
    }

    render() {
        const { orderValue = 0 } = this.options.value.datasetData || {};
        const inputType = typeof orderValue === 'string' ? 'formula' : 'int';

        return {
            type: BI.VTapeLayout.xtype,
            hgap: 10,
            bgap: 5,
            items: [{
                el: {
                    type: BI.HTapeLayout.xtype,
                    items: [{
                        type: BI.TextValueCombo.xtype,
                        ref: (_ref: any) => {
                            this.connectionTextValue = _ref;
                        },
                        items: [],
                        listeners: [{
                            eventName: BI.TextValueCombo.EVENT_CHANGE,
                            action: () => {
                                const name = this.connectionTextValue.getValue()[0];
                                this.store.setSelectedConnection(name);
                            },
                        }],
                    }, {
                        el: {
                            type: BI.IconButton.xtype,
                            cls: 'redis-site-font',
                            title: BI.i18nText('Plugin-Redis_Data_Connection'),
                            handler: () => {
                                window.location.href = `${fineServletURL}#management/connection`;
                            },
                        },
                        width: 25,
                    }, {
                        el: {
                            type: BI.IconButton.xtype,
                            cls: 'redis-refresh-font',
                            title: BI.i18nText('Plugin-Redis_Refresh'),
                            handler: () => {
                                this.store.initData();
                            },
                        },
                        width: 25,
                    }],
                },
                height: 25,
            }, {
                el: {
                    type: BI.HTapeLayout.xtype,
                    items: [{
                        el: {
                            type: BI.Label.xtype,
                            text: BI.i18nText('Plugin-Redis_Index'),
                            textAlign: 'left',
                        },
                        width: 24,
                    }, {
                        type: DatabaseIndex.xtype,
                        value: orderValue,
                        inputType,
                        ref: (_ref: any) => {
                            this.databaseIndex = _ref;
                        },
                        width: 24,
                        height: 22,
                    }, {
                        type: BI.TextEditor.xtype,
                        height: 24,
                        watermark: BI.i18nText('Plugin-Redis_Keys_Pattern'),
                        ref: (_ref: any) => {
                            this.searchText = _ref;
                        },
                    }, {
                        el: {
                            type: BI.Button.xtype,
                            minWidth: 50,
                            text: BI.i18nText('Plugin-Redis_Keys_Pattern_Search'),
                            handler: () => {
                                this.store.setSearch(this.searchText.getValue(), this.databaseIndex.getValue());
                            },
                        },
                        width: 50,
                    }],
                },
                height: 25,
            }, {
                type: BI.VTapeLayout.xtype,
                items: [{
                    type: BI.ButtonGroup.xtype,
                    chooseType: BI.Selection.None,
                    layouts: [{
                        type: BI.VerticalLayout.xtype,
                    }],
                    items: [],
                    ref: (_ref: any) => {
                        this.buttonGroup = _ref;
                    },
                }],
            }],
        };
    }

    private renderConnectionList() {
        return this.model.connections.map(item => {
            return {
                text: item,
                value: item,
            };
        });
    }

    private renderTableList() {
        return this.model.tables.map(item => {
            return {
                type: ListItem.xtype,
                text: item,
                value: item,
            };
        });
    }

    mounted() {
        this.store.initData();
    }

    public getSelectedDatabase() {
        return this.model.selectedConnection;
    }
}