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

import { Button, Htape, Vtape, Label, VerticalAdapt, ListView, 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 } from '@constants/env';
import { getAllDatabaseTypes, connectionCanEdit, getJdbcDatabaseType, getTextByDatabaseType } from '../../app.service';
import { ConnectionJDBC } from '../../crud/crud.typings';

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) => {
            if (name) {
                const canEdit = connectionCanEdit(this.model.connectionSelectedOne);
                const type = this.getSelectConnectionType();
                this.connectionTitleWidget.setText(`${name}（${getTextByDatabaseType(type)}）`);
                this.connectionEditWidget.setVisible(canEdit);
                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()));
                }
            } else {
                this.listView.populate(BI.createItems(this.renderEmpty()));
                this.connectionTitleWidget.setText('');
                this.connectionEditWidget.setVisible(false);
            }
        },
    }

    render() {
        this.store.setConnectionSelected('');
        
        return {
            type: Htape,
            hgap: 10,
            items: [
                {
                    el: {
                        type: Vtape,
                        cls: 'bi-border-right',
                        rgap: 10,
                        items: [
                            {
                                el: {
                                    type: VerticalAdapt,
                                    cls: 'bi-border-bottom',
                                    items: [{
                                        type: Button,
                                        text: BI.i18nText('Dec-Dcm_Connection_New'),
                                        handler: () => {
                                            this.store.setPageIndex(PAGE_INDEX.DATEBASE);
                                        },
                                    }],
                                },
                                height: 40,
                            },
                            {
                                type: ConnectionListXtype,
                                tgap: 10,
                            },
                        ],
                    },
                    width: 275,
                },
                {
                    type: Vtape,
                    items: [
                        {
                            el: {
                                type: Htape,
                                ref: (_ref: any) => {
                                    this.title = _ref;
                                },
                                cls: 'bi-border-bottom',
                                items: [
                                    {
                                        type: Label,
                                        textAlign: 'left',
                                        ref: (_ref: any) => {
                                            this.connectionTitleWidget = _ref;
                                        },
                                    },
                                    {
                                        el: {
                                            type: VerticalAdapt,
                                            items: [{
                                                type: Button,
                                                invisible: true,
                                                text: BI.i18nText('Dec-Dcm_Edit'),
                                                ref: (_ref: any) => {
                                                    this.connectionEditWidget = _ref;
                                                },
                                                handler: () => {
                                                    this.store.getConnectionStatus().then(re => {
                                                        this.store.setPageIndex(PAGE_INDEX.MAINTAIN);
                                                        this.store.setDatebaseTypeSelected('');
                                                    })
                                                        .catch(() => {});
                                                },
                                            }],
                                        },
                                        width: 90,
                                    },
                                ],
                            },
                            height: 40,
                        },
                        {
                            type: ListView,
                            ref: (_ref: any) => {
                                this.listView = _ref;
                            },
                        },
                    ],
                },
            ],
        };
    }

    mounted() {
        this.store.setDatebaseTypeSelected('');
    }

    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 renderEmpty() {
        return [{
            type: Layout,
        }];
    }

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

    private getSelectConnectionType() {
        let databaseType = this.model.connectionSelectedOne.connectionType;
        if (databaseType === connectionType.JDBC) {
            const connectionJDBC = this.model.connectionSelectedOne.connectionData as ConnectionJDBC;
            databaseType = getJdbcDatabaseType(connectionJDBC.database, connectionJDBC.driver).databaseType;
        }
        
        return databaseType;
    }
}