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