decision-webui-dcm/src/modules/pages/connection/list/list.ts

import { shortcut, store } from '@core/core';
import { CenterAdapt, Layout, Vtape, Loader, Tab } from 'ui';
import { ListItemXtype } from './list_item/list_item';
import { ConnectionListModel, ConnectionListModelXtype } from './list.model';
import { getDatabaseType } from './list.service';
export const ConnectionListXtype = 'dec.dcm.connection.list';
@shortcut(ConnectionListXtype)
@store(ConnectionListModelXtype)
export class ConnectionList extends BI.LoadingPane {
    store: ConnectionListModel['store'];
    model: ConnectionListModel['model'];

    groupWidget: any;
    tab: any;

    beforeInit(cb: Function) {
        this.store.setConnections().then(() => {
            cb();
        });
    }

    watch = {
        connections: () => {
            const times = this.groupWidget.times;
            this.groupWidget.populate(this.renderList(0, this.groupWidget.times * 50));
            this.groupWidget.times = times;
        },
        shwoType: (type: 'list' | 'none') => {
            this.tab.setSelect(type);
        },
    }

    render() {
        return {
            type: Tab,
            single: true,
            showIndex: this.model.shwoType,
            ref: (_ref: any) => {
                this.tab = _ref;
            },
            cardCreator: (index: 'list' | 'none') => {
                if (index === 'none') {
                    return {
                        type: CenterAdapt,
                        items: [
                            {
                                type: Vtape,
                                width: 260,
                                height: 150,
                                items: [
                                    {
                                        el: {
                                            type: Layout,
                                            cls: 'data-connection-background',
                                        },
                                        height: 130,
                                    },
                                    {
                                        type: BI.Label.xtype,
                                        cls: 'bi-tips',
                                        text: BI.i18nText('Dec-Dcm_Connection_None'),
                                    },
                                ],
                            },
                        ],
                    };
                }
                
                return {
                    type: Loader,
                    itemsCreator: (options: {times: number}, populate) => {
                        populate(this.renderList((options.times - 1) * 50, options.times * 50));
                    },
                    hasNext: options => options.times * 50 < BI.size(this.model.connections),
                    ref: (_ref: any) => {
                        this.groupWidget = _ref;
                    },
                };
            },
        };
    }

    private renderList(start = 0, end = 0) {
        return this.model.connections.slice(start, end).map((item, index) => {
            return {
                type: ListItemXtype,
                name: item.connectionName,
                value: item.connectionName,
                creator: item.creator,
                databaseType: getDatabaseType(item),
                selected: this.model.connectionSelected ? this.model.connectionSelected === item.connectionName : index === 0,
            };
        });
    }
}