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

import { shortcut, store } from '@core/core';
import { CenterAdapt, Label, Layout, Vtape, Loader } from 'ui';
import { ListItemXtype } from './list_item/list_item';
import { ConnectionListModel, ConnectionListModelXtype } from './list.model';
import { Connection } from '../../../crud/crud.typings';
import { getCreator, 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;

    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;
        },
    }

    render() {
        if (BI.size(this.model.connections) === 0) {
            return {
                type: CenterAdapt,
                items: [
                    {
                        type: Vtape,
                        width: 260,
                        height: 150,
                        items: [
                            {
                                el: {
                                    type: Layout,
                                    cls: 'data-connection-background',
                                },
                                height: 130,
                            },
                            {
                                type: Label,
                                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: Connection) => {
            return {
                type: ListItemXtype,
                name: item.connectionName,
                value: item.connectionName,
                creator: getCreator(item),
                databaseType: getDatabaseType(item),
            };
        });
    }
}