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

import { shortcut, store } from '@core/core';
import { ButtonGroup, Vertical, CenterAdapt, Label, Layout, Vtape, LoadingBar } 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;
    loadingBar: any;

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

    watch = {
        connections: () => {
            this.groupWidget.populate(this.renderList());
        },
        showItemNum: () => {
            this.groupWidget.addItems(this.renderList(this.model.showItemNum - 50));
            BI.size(this.model.connections) > this.model.showItemNum ?
                this.loadingBar.setLoaded() :
                this.loadingBar.setEnd();
        },
    }

    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: Vertical,
            items: [{
                type: ButtonGroup,
                layouts: [{
                    type: Vertical,
                }],
                items: this.renderList(),
                ref: (_ref: any) => {
                    this.groupWidget = _ref;
                },
            }, {
                type: LoadingBar,
                ref: (_ref: any) => {
                    this.loadingBar = _ref;
                },
                handler: () => {
                    this.loadingBar.setLoading();
                    this.store.setItemNum(this.model.showItemNum + 50);
                },
            }],
            
        };
    }

    created() {
        if (this.model.showItemNum) {
            BI.size(this.model.connections) > this.model.showItemNum ?
                this.loadingBar.setLoaded() :
                null;
        }
    }

    private renderList(start = 0) {
        const itemNum = Math.min(this.model.connections.length, this.model.showItemNum);
        
        return this.model.connections.slice(start, itemNum).map((item: Connection) => {
            return {
                type: ListItemXtype,
                name: item.connectionName,
                value: item.connectionName,
                creator: getCreator(item),
                databaseType: getDatabaseType(item),
            };
        });
    }
}