decision-webui-dcm/src/modules/pages/connection_pool/connection_pool.ts

import { shortcut, store } from '@core/core';
import { ConnectionPoolModel } from './connection_pool.model';
import { ListItem } from './list_item/list_item';
import { Pool } from './pool/pool';
import { PAGE_SIZE } from '@constants/constant';
import { Label } from '@fui/core';
@shortcut()
@store(ConnectionPoolModel)
export class ConnectionPool extends BI.Widget {
    static xtype = 'dec.dcm.connection_pool';

    title: Label;

    model: ConnectionPoolModel['model'];
    store: ConnectionPoolModel['store'];

    watch = {
        selected: (selected: string) => {
            this.title.setText(selected);
        },
    }

    mounted() {
        const defaultSelected = this.model.connectionJDBC.length > 0 ? this.model.connectionJDBC[0].connectionName : '';
        this.store.setSelected(defaultSelected);
    }

    render() {
        if (BI.size(this.model.connectionJDBC) === 0) {
            return this.renderNoConnection();
        }
        
        return {
            type: BI.HTapeLayout.xtype,
            items: [
                {
                    el: {
                        type: BI.VTapeLayout.xtype,
                        cls: 'bi-border-right',
                        items: [
                            {
                                el: {
                                    type: BI.Label.xtype,
                                    cls: 'bi-border-bottom',
                                    textAlign: 'left',
                                    text: BI.i18nText('Dec-Dcm_Data_Connections'),
                                    lgap: 10,
                                },
                                height: 40,
                            },
                            {
                                type: BI.Loader.xtype,
                                itemsCreator: (options: {times: number}, populate) => {
                                    populate(this.renderList((options.times - 1) * PAGE_SIZE, options.times * PAGE_SIZE));
                                },
                                hasNext: options => options.times * PAGE_SIZE < BI.size(this.model.connectionJDBC),
                            },
                        ],
                    },
                    width: 275,
                },
                this.renderPool(),
            ],
        };
    }

    private renderPool() {
        return {
            type: BI.VTapeLayout.xtype,
            items: [
                {
                    el: {
                        type: BI.Label.xtype,
                        cls: 'bi-border-bottom',
                        textAlign: 'left',
                        lgap: 10,
                        ref: (_ref: Label) => {
                            this.title = _ref;
                        },
                    },
                    height: 40,
                },
                {
                    type: Pool.xtype,
                },
            ],
        };
    }

    private renderNoConnection() {
        return {
            type: BI.CenterAdaptLayout.xtype,
            items: [
                {
                    type: BI.VTapeLayout.xtype,
                    width: 260,
                    height: 150,
                    items: [
                        {
                            el: {
                                type: BI.Layout.xtype,
                                cls: 'data-connection-background',
                            },
                            height: 130,
                        },
                        {
                            type: BI.Label.xtype,
                            cls: 'bi-tips',
                            text: BI.i18nText('Dec-Dcm_Connection_NO_Connection_Pool'),
                        },
                    ],
                },
            ],
        };
    }

    private renderList(start = 0, end = 0) {
        const defaultSelected = this.model.connectionJDBC.length > 0 ? this.model.connectionJDBC[0].connectionName : '';
        
        return this.model.connectionJDBC.slice(start, end).map(item => {
            return {
                type: ListItem.xtype,
                name: item.connectionName,
                value: item.connectionName,
                selected: item.connectionName === defaultSelected,
            };
        });
    }
}