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

import { shortcut, store } from '@core/core';
import { ButtonGroup, Vertical, CenterAdapt, Label, Layout, Vtape } 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() {
            this.groupWidget.populate(this.renderList());
        },
    }

    render() {
        if (this.model.connections.length === 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: ButtonGroup,
            layouts: [{
                type: Vertical,
            }],
            items: this.renderList(),
            ref: (_ref: any) => {
                this.groupWidget = _ref;
            },
        };
    }

    private renderList() {
        return this.model.connections.map((item: Connection) => {
            return {
                type: ListItemXtype,
                name: item.connectionName,
                value: item.connectionName,
                creator: getCreator(item),
                databaseType: getDatabaseType(item),
            };
        });
    }
}