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

import { Button, Htape, Vtape, Label, VerticalAdapt, ListView, LeftRightVerticalAdapt, CenterAdapt, Layout } from 'ui';
import { shortcut, store } from '@core/core';
import { ConnectionModel, ConnectionModelXtype } from './connection.model';
import { PAGE_INDEX } from '@constants/constant';
import { ConnectionListXtype } from './list/list';
import { ConnectionJdbcXtype } from './connection_jdbc/connection_jdbc';
import { ConnectionJndiXtype } from './connection_jndi/connection_jndi';
import { ConnectionPluginXtype } from './connection_plugin/connection_plugin';
import { connectionType, editStatusEvent } from '@constants/env';
import { getAllDatabaseTypes } from '../../app.service';

export const ConnectionXtype = 'dec.dcm.connection';
@shortcut(ConnectionXtype)
@store(ConnectionModelXtype)
export class Connection extends BI.Widget {
    store: ConnectionModel['store'];
    model: ConnectionModel['model'];

    connectionTitleWidget: any;
    connectionEditWidget: any;
    listView: any;
    title: any;

    watch = {
        connectionSelected:(name: string) => {
            this.connectionTitleWidget.setText(`${name}`);
            this.connectionEditWidget.setVisible(!!name);
            if (name) {
                const hasRegistered = this.hasRegistered();
                this.title.setVisible(hasRegistered);
                if (!hasRegistered) {
                    this.listView.populate(BI.createItems(this.renderNoRegistered()));
                } else {
                    this.listView.populate(BI.createItems(this.renderItems()));
                }
            }
        },
    }

    render() {
        this.store.setConnectionSelected('');
        
        return {
            type: Htape,
            items: [
                {
                    el: {
                        type: Vtape,
                        cls: 'bi-border-right',
                        items: [
                            {
                                el: {
                                    type: VerticalAdapt,
                                    cls: 'bi-border-bottom',
                                    lgap: 10,
                                    items: [{
                                        type: Button,
                                        text: BI.i18nText('Dec-Dcm_Connection_New'),
                                        handler: () => {
                                            this.store.setPageIndex(PAGE_INDEX.DATEBASE);
                                        },
                                    }],
                                },
                                height: 40,
                            },
                            {
                                type: ConnectionListXtype,
                                tgap: 5,
                            },
                        ],
                    },
                    width: 275,
                },
                {
                    type: Vtape,
                    items: [
                        {
                            el: {
                                type: LeftRightVerticalAdapt,
                                ref: (_ref: any) => {
                                    this.title = _ref;
                                },
                                cls: 'bi-border-bottom',
                                items: {
                                    left: [
                                        {
                                            type: Label,
                                            lgap: 5,
                                            ref: (_ref: any) => {
                                                this.connectionTitleWidget = _ref;
                                            },
                                        },
                                    ],
                                    right: [
                                        {
                                            type: Button,
                                            rgap: 5,
                                            level: 'ignore',
                                            invisible: true,
                                            text: BI.i18nText('Dec-Dcm_Edit'),
                                            ref: (_ref: any) => {
                                                this.connectionEditWidget = _ref;
                                            },
                                            handler: () => {
                                                this.store.setPageIndex(PAGE_INDEX.MAINTAIN);
                                                this.store.setDatebaseTypeSelected('');
                                                Dec ? Dec.socket.emit(editStatusEvent.OPEN, this.model.connectionSelected) : null;
                                            },
                                        },
                                    ],
                                },
                            },
                            height: 40,
                        },
                        {
                            type: ListView,
                            vgap: 15,
                            ref: (_ref: any) => {
                                this.listView = _ref;
                            },
                        },
                    ],
                },
            ],
        };
    }

    private renderItems() {
        switch (this.model.connectionSelectedOne.connectionType) {
            case connectionType.JDBC:
                return [{
                    type: ConnectionJdbcXtype,
                }];
            case connectionType.JNDI:
                return [{
                    type: ConnectionJndiXtype,
                }];
            default:
                return [{
                    type: ConnectionPluginXtype,
                }];
        }
    }

    private renderNoRegistered() {
        return [{
            type: CenterAdapt,
            height: 500,
            items: [
                {
                    type: Vtape,
                    width: 300,
                    height: 150,
                    items: [
                        {
                            el: {
                                type: Layout,
                                cls: 'error-page-background',
                            },
                            height: 130,
                        },
                        {
                            type: Label,
                            cls: 'bi-tips',
                            text: BI.i18nText('Dec-Dcm_Connection_Np_Registered'),
                        },
                    ],
                },
            ],
        }];
    }

    private hasRegistered() {
        const allDatabaseTypes = getAllDatabaseTypes();
        switch (this.model.connectionSelectedOne.connectionType) {
            case connectionType.JDBC:
                return true;
            case connectionType.JNDI:
                return true;
            default:
                return allDatabaseTypes.some(item => item.databaseType === this.model.connectionSelectedOne.connectionType);
        }
    }
}