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

import { shortcut, store } from '@core/core';
import { ConnectionModel } from './connection.model';
import { PAGE_INDEX } from '@constants/constant';
import { ConnectionList } from './list/list';
import { ConnectionJdbc } from './connection_jdbc/connection_jdbc';
import { ConnectionJndi } from './connection_jndi/connection_jndi';
import { ConnectionPlugin } from './connection_plugin/connection_plugin';
import { connectionType } from '@constants/env';
import { getAllDatabaseTypes, connectionCanEdit, getJdbcDatabaseType, getTextByDatabaseType } from '../../app.service';
import { ConnectionJDBC } from '../../crud/crud.typings';
import { Button, HTapeLayout, Label, ListView } from '@fui/core';

@shortcut()
@store(ConnectionModel)
export class Connection extends BI.Widget {
    static xtype = 'dec.dcm.connection';

    store: ConnectionModel['store'];
    model: ConnectionModel['model'];

    connectionTitleWidget: Label;
    connectionEditWidget: Button;
    listView: ListView;
    title: HTapeLayout;

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

    beforeRender(cb: Function) {
        this.store.initConnectionLicInfo(cb);
    }

    render() {
        this.store.setConnectionSelected('');

        return {
            type: BI.HTapeLayout.xtype,
            hgap: 10,
            items: [
                {
                    el: {
                        type: BI.VTapeLayout.xtype,
                        cls: 'bi-border-right',
                        rgap: 10,
                        items: [
                            {
                                el: {
                                    type: BI.LeftRightVerticalAdaptLayout.xtype,
                                    cls: 'bi-border-bottom',
                                    items: {
                                        left: [
                                            {
                                                type: BI.Button.xtype,
                                                text: BI.i18nText('Dec-Dcm_Connection_New'),
                                                handler: () => {
                                                    this.store.createNewConnection();
                                                },
                                            },
                                        ],
                                        right: [
                                            {
                                                type: 'dec.connection.driver.entry',
                                                from: '.dec-dcm',
                                            },
                                        ],
                                    },
                                },
                                height: 40,
                            },
                            {
                                type: ConnectionList.xtype,
                                tgap: 10,
                            },
                        ],
                    },
                    width: 275,
                },
                {
                    type: BI.VTapeLayout.xtype,
                    items: [
                        {
                            el: {
                                type: BI.HTapeLayout.xtype,
                                ref: (_ref: HTapeLayout) => {
                                    this.title = _ref;
                                },
                                cls: 'bi-border-bottom',
                                items: [
                                    {
                                        type: BI.Label.xtype,
                                        textAlign: 'left',
                                        ref: (_ref: Label) => {
                                            this.connectionTitleWidget = _ref;
                                        },
                                    },
                                    {
                                        el: {
                                            type: BI.VerticalAdaptLayout.xtype,
                                            items: [{
                                                type: BI.Button.xtype,
                                                $value: 'connection-edit',
                                                invisible: true,
                                                text: BI.i18nText('Dec-Dcm_Edit'),
                                                ref: (_ref: Button) => {
                                                    this.connectionEditWidget = _ref;
                                                },
                                                handler: () => {
                                                    this.store.getConnectionStatus()
                                                        .then(re => {
                                                            this.store.setPageIndex(PAGE_INDEX.MAINTAIN);
                                                            this.store.setDatebaseTypeSelected('');
                                                        })
                                                        .catch(() => {
                                                        });
                                                },
                                            }],
                                        },
                                        width: 90,
                                    },
                                ],
                            },
                            height: 40,
                        },
                        {
                            type: BI.ListView.xtype,
                            ref: (_ref: ListView) => {
                                this.listView = _ref;
                            },
                        },
                    ],
                },
            ],
        };
    }

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

    private renderItems() {
        switch (this.model.connectionSelectedOne.connectionType) {
            case connectionType.JDBC:
                return [{
                    type: ConnectionJdbc.xtype,
                }];
            case connectionType.JNDI:
                return [{
                    type: ConnectionJndi.xtype,
                }];
            default:
                return [{
                    type: ConnectionPlugin.xtype,
                }];
        }
    }

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

    private renderEmpty() {
        return [{
            type: BI.Layout.xtype,
        }];
    }

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