diff --git a/private/constants.ts b/private/constants.ts index 80ba494..f882542 100644 --- a/private/constants.ts +++ b/private/constants.ts @@ -1,6 +1,6 @@ export const OTHER_CONNECT = 'other'; export const JNDI_CONNECT = 'JNDI'; -export const MYSQL_CONNECT = 'mysql'; +export const MYSQL_CONNECT = 'MySQL'; export const DEFAULT_INFO = 'DESIGNER'; export const ACTION_DELETE = 'ACTION_DELETE'; export const ACTION_COPY = 'ACTION_COPY'; diff --git a/src/app/app.ts b/src/app/app.ts index f44392b..678d9be 100644 --- a/src/app/app.ts +++ b/src/app/app.ts @@ -1,4 +1,4 @@ -import {Vtape, Vertical, Absolute} from '../ui/index'; +import {Vtape, Absolute} from '../ui/index'; import appModel from './app.model'; import title from './title/title'; import linkSet from './connection/link_set'; @@ -7,6 +7,9 @@ import '../less/index.less'; const className = 'dec.dcm.main'; const Widget = BI.inherit(BI.Widget, { + props: { + baseCls: 'dec-webui-dcm-layout bi-background', + }, _store() { return BI.Models.getModel(appModel); }, @@ -16,7 +19,6 @@ const Widget = BI.inherit(BI.Widget, { render() { return { type: Vtape, - cls: 'dec-webui-dcm-layout bi-background', items: [ { el: { diff --git a/src/app/connection/link_set.ts b/src/app/connection/link_set.ts index ab3b8c5..07b25c7 100644 --- a/src/app/connection/link_set.ts +++ b/src/app/connection/link_set.ts @@ -6,6 +6,9 @@ import Right from './right/right'; import {TAB_LINK_SET} from '@private/constants'; const className = 'dec.dcm.linkset'; const Widget: WidgetType = { + props: { + baseCls: 'bi-card', + }, _store() { return BI.Models.getModel(linkSetModel); }, @@ -17,7 +20,6 @@ const Widget: WidgetType = { render() { return { type: Htape, - cls: 'bi-card', items: [{ el: { type: Vtape, diff --git a/src/app/connection/right/right_edit/right_edit.ts b/src/app/connection/right/right_edit/right_edit.ts index 38a9cce..edaf66a 100644 --- a/src/app/connection/right/right_edit/right_edit.ts +++ b/src/app/connection/right/right_edit/right_edit.ts @@ -1,8 +1,7 @@ -import {WidgetType, Vertical, MultiSelectItem, TextAreaEditor, Button, TextValueCombo, TextEditor} from '@ui/index'; +import {WidgetType, Vertical, MultiSelectItem, TextAreaEditor, Button, TextValueCombo, TextEditor, VerticalAdapt, Label} from '@ui/index'; import {LinkType} from '@ui/type'; import {CONNECT_CHARSET} from '@private/constants'; import Model from '../../link_set.model'; -import FormItem from '@shared/components/form_item'; import Title from '@shared/components/title'; import {getDrivers, connectNameChecker} from './right_edit.service'; let connectionName: any = null; @@ -31,236 +30,340 @@ const Widget: WidgetType = { vgap: 10, items: [ { - type: FormItem, - text: BI.i18nText('Dec-Dcm_Connection_Form_ConnectionName'), - hint: BI.i18nText('Dec-Dcm_Connection_Form_ConnectionName-Change-Confirm'), - form: { - type: TextEditor, - width: 300, - value: linkSelected.connectionName, - ref(ref: any) { - connectionName = ref; + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_ConnectionName'), }, - listeners: [{ - eventName: BI.Editor.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - connectionName: this.getValue(), - }); - }, - }, { - eventName: BI.Editor.EVENT_FOCUS, - action() { - that.store.setConnectionNameErr(''); + { + type: TextEditor, + width: 300, + value: linkSelected.connectionName, + ref(ref: any) { + connectionName = ref; }, - }], - }, + listeners: [{ + eventName: BI.Editor.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + connectionName: this.getValue(), + }); + }, + }, { + eventName: BI.Editor.EVENT_FOCUS, + action() { + that.store.setConnectionNameErr(''); + }, + }], + }, + { + type: Label, + cls: 'bi-water-mark', + lgap: 5, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_ConnectionName-Change-Confirm'), + }, + ], }, { - type: FormItem, - text: BI.i18nText('Dec-Dcm_First_Step'), - height: 420, - form: { - type: Vertical, - vgap: 10, - items: [ - { - type: FormItem, - text: BI.i18nText('Dec-Dcm_Connection_Form_Driver'), - form: { - type: TextValueCombo, - width: 300, - text: linkSelected.driver, - items: getDrivers(linkSelected), - listeners: [{ - eventName: BI.TextValueCombo.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - driver: this.getValue()[0], - }); + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_First_Step'), + }, + { + type: Vertical, + vgap: 10, + items: [ + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_Driver'), }, - }], - }, - }, - { - type: FormItem, - text: BI.i18nText('Dec-Dcm_Connection_Form_URL'), - form: { - type: TextEditor, - watermark: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input'), - width: 300, - value: linkSelected.url, - listeners: [{ - eventName: BI.Editor.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - url: this.getValue(), - }); + { + type: TextValueCombo, + width: 300, + text: linkSelected.driver, + items: getDrivers(linkSelected), + listeners: [{ + eventName: BI.TextValueCombo.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + driver: this.getValue()[0], + }); + }, + }], }, - }], + ], }, - }, - { - type: FormItem, - text: BI.i18nText('Dec-Dcm_Connection_Form_OriginalCharsetName'), - form: { - type: TextValueCombo, - width: 300, - text: linkSelected.originalCharsetName === '' ? BI.i18nText('Dec-Dcm_Connection_Form_Auto') : linkSelected.originalCharsetName, + { + type: VerticalAdapt, items: [ { - text: BI.i18nText('Dec-Dcm_Connection_Form_Auto'), - value: '', + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_URL'), + }, + { + type: TextEditor, + watermark: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input'), + width: 300, + value: linkSelected.url, + listeners: [{ + eventName: BI.Editor.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + url: this.getValue(), + }); + }, + }], }, - ...CONNECT_CHARSET, ], - listeners: [{ - eventName: BI.TextValueCombo.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - originalCharsetName: this.getValue()[0], - }); + }, + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_OriginalCharsetName'), }, - }], + { + type: TextValueCombo, + width: 300, + text: linkSelected.originalCharsetName === '' ? BI.i18nText('Dec-Dcm_Connection_Form_Auto') : linkSelected.originalCharsetName, + items: [ + { + text: BI.i18nText('Dec-Dcm_Connection_Form_Auto'), + value: '', + }, + ...CONNECT_CHARSET, + ], + listeners: [{ + eventName: BI.TextValueCombo.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + originalCharsetName: this.getValue()[0], + }); + }, + }], + }, + ], }, - }, - { - type: FormItem, - text: BI.i18nText('Dec-Dcm_Connection_Form_UserName'), - form: { - type: TextEditor, - allowBlank: true, - watermark: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input'), - width: 300, - value: linkSelected.user, - listeners: [{ - eventName: BI.Editor.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - user: this.getValue(), - }); + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_UserName'), + }, + { + type: TextEditor, + allowBlank: true, + watermark: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input'), + width: 300, + value: linkSelected.user, + listeners: [{ + eventName: BI.Editor.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + user: this.getValue(), + }); + }, + }], }, - }], + ], }, - }, - { - type: FormItem, - text: BI.i18nText('Dec-Dcm_Connection_Form_Password'), - form: { - type: TextEditor, - inputType: 'password', - allowBlank: true, - watermark: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input'), - width: 300, - value: linkSelected.password, - listeners: [{ - eventName: BI.Editor.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - password: this.getValue(), - }); + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_Password'), + }, + { + type: TextEditor, + inputType: 'password', + allowBlank: true, + watermark: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input'), + width: 300, + value: linkSelected.password, + listeners: [{ + eventName: BI.Editor.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + password: this.getValue(), + }); + }, + }], }, - }], + ], }, - }, - { - type: Title, - text: BI.i18nText('Dec-Dcm_Connection_Form_Pool_Properties'), - }, - { - type: FormItem, - text: BI.i18nText('Dec-Dcm_Connection_Form_SQL_Validation_Query'), - height: 100, - form: { - type: TextAreaEditor, - allowBlank: true, - watermark: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input'), - width: 300, - height: 100, - value: linkSelected.validationQuery, - listeners: [{ - eventName: BI.Editor.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - validationQuery: this.getValue(), - }); + { + type: Title, + text: BI.i18nText('Dec-Dcm_Connection_Form_Pool_Properties'), + }, + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_SQL_Validation_Query'), + }, + { + type: TextAreaEditor, + cls: 'bi-border', + allowBlank: true, + watermark: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input'), + width: 300, + height: 100, + value: linkSelected.validationQuery, + listeners: [{ + eventName: BI.Editor.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + validationQuery: this.getValue(), + }); + }, + }], }, - }], + ], }, - }, - { - type: FormItem, - text: BI.i18nText('Dec-Dcm_Connection_Form_Connection-Check'), - form: { - type: MultiSelectItem, - text: BI.i18nText('Dec-Dcm_Yes'), - selected: linkSelected.testOnBorrow, - width: 60, - listeners: [{ - eventName: BI.Editor.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - testOnBorrow: this.isSelected(), - }); + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_Connection-Check'), }, - }], + { + type: MultiSelectItem, + text: BI.i18nText('Dec-Dcm_Yes'), + selected: linkSelected.testOnBorrow, + width: 60, + listeners: [{ + eventName: BI.Editor.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + testOnBorrow: this.isSelected(), + }); + }, + }], + }, + ], }, - }, - { - type: FormItem, - text: BI.i18nText('Dec-Dcm_Connection_Form_Connection_Max_Number'), - form: { - type: TextEditor, - allowBlank: true, - watermark: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input'), - width: 60, - value: linkSelected.maxActive, - errorText: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input-Number'), - validationChecker: connectNameChecker, - listeners: [{ - eventName: BI.Editor.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - maxActive: this.getValue(), - }); + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_Connection_Max_Number'), + }, + { + type: TextEditor, + allowBlank: true, + watermark: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input'), + width: 60, + value: linkSelected.maxActive, + errorText: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input-Number'), + validationChecker: connectNameChecker, + listeners: [{ + eventName: BI.Editor.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + maxActive: this.getValue(), + }); + }, + }], }, - }], + ], }, - }, - ], - }, + ], + }, + ], }, { - type: FormItem, - text: BI.i18nText('Dec-Dcm_Second_Step'), - form: { - type: Button, - width: 80, - text: BI.i18nText('Dec-Dcm_Test_Connection'), - level: 'ignore', - }, + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Second_Step'), + }, + { + type: Button, + width: 80, + text: BI.i18nText('Dec-Dcm_Test_Connection'), + level: 'ignore', + }, + ], }, { - type: FormItem, - text: BI.i18nText('Dec-Dcm_Third_Step'), - form: { - type: FormItem, - text: BI.i18nText('Dec-Dcm_Connection_Form_Pattern'), - form: { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Third_Step'), + }, + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_Pattern'), + }, + { type: TextEditor, width: 300, disabled: true, }, - }, + ], }, ], }; diff --git a/src/app/connection/right/right_edit/right_edit_jndi.ts b/src/app/connection/right/right_edit/right_edit_jndi.ts index 4a789d9..8c56730 100644 --- a/src/app/connection/right/right_edit/right_edit_jndi.ts +++ b/src/app/connection/right/right_edit/right_edit_jndi.ts @@ -1,5 +1,4 @@ -import {Vertical, Editor, TextValueCombo, TextButton, Label, TextEditor} from '@ui'; -import FormItem from '@shared/components/form_item'; +import {Vertical, TextValueCombo, TextButton, Label, TextEditor, VerticalAdapt} from '@ui'; import {JNDI_FACTORYS, OTHER_ATTRIBUTES, CONNECT_CHARSET} from '@private/constants'; import {AttributeType} from '../right.typing'; import ModelName from './right_edit.model'; @@ -11,9 +10,7 @@ const Widget = BI.inherit(BI.Widget, { }, watch: { isCollapse(isCollapse) { - const height = isCollapse ? 550 : 200; const text = isCollapse ? BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Collapse-Attributes') : BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Other_Attributes'); - this.jndiFormRef.setHeight(height); this.collapseRef.setText(text); this.otherAttributesRef.setVisible(isCollapse); }, @@ -26,152 +23,204 @@ const Widget = BI.inherit(BI.Widget, { vgap: 10, items: [ { - type: FormItem, - text: BI.i18nText('Dec-Dcm_Connection_JNDI_Form_ConnectionName'), - form: { - type: TextEditor, - width: 300, - allowBlank: true, - value: connectionName, - }, + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_JNDI_Form_ConnectionName'), + }, + { + type: TextEditor, + width: 300, + allowBlank: true, + value: connectionName, + }, + ], }, { - type: FormItem, - text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Context'), - height: 200, - ref: _ref => { - this.jndiFormRef = _ref; - }, - form: { - type: Vertical, - vgap: 10, - items: [ - { - type: FormItem, - text: 'INTIAL_CONTEXT_FACTORY', - width: 180, - form: { - type: TextValueCombo, - width: 300, - value: factory, - items: BI.map(JNDI_FACTORYS, (index: number, item: string) => { - return { - text: item, - value: item, - }; - }), - }, - }, - { - type: FormItem, - text: 'PROVIDER_URL', - width: 180, - form: { - type: TextEditor, - width: 300, - allowBlank: true, - value: url, - }, - }, - { - type: FormItem, - text: 'SECURITY_PRINCIPAL', - width: 180, - form: { - type: TextEditor, - width: 300, - allowBlank: true, - value: principal, - }, - }, - { - type: FormItem, - text: 'SECURITY_CREDENTIALS', - width: 180, - form: { - type: TextEditor, - width: 300, - allowBlank: true, - value: credentials, + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Context'), + }, + { + type: Vertical, + vgap: 10, + items: [ + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 180, + textAlign: 'left', + text: 'INTIAL_CONTEXT_FACTORY', + }, + { + type: TextValueCombo, + width: 300, + value: factory, + items: BI.map(JNDI_FACTORYS, (index: number, item: string) => { + return { + text: item, + value: item, + }; + }), + }, + ], }, - }, - { - type: FormItem, - width: 180, - form: { - type: TextButton, - text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Other_Attributes'), - width: 300, - textAlign: 'right', - ref: _ref => { - this.collapseRef = _ref; - }, - handler: () => { - this.store.setIsCollapse(!this.model.isCollapse); - }, + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 180, + textAlign: 'left', + text: 'PROVIDER_URL', + }, + { + type: TextEditor, + width: 300, + allowBlank: true, + value: url, + }, + ], }, - }, - { - type: Vertical, - invisible: true, - ref: _ref => { - this.otherAttributesRef = _ref; + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 180, + textAlign: 'left', + text: 'SECURITY_PRINCIPAL', + }, + { + type: TextEditor, + width: 300, + allowBlank: true, + value: principal, + }, + ], }, - items: BI.map(OTHER_ATTRIBUTES, (index: number, item: AttributeType) => { - return { - type: FormItem, - text: item.text, - width: 180, - form: { + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 180, + textAlign: 'left', + text: 'SECURITY_CREDENTIALS', + }, + { type: TextEditor, width: 300, allowBlank: true, - value: this.options[item.name], + value: credentials, }, - }; - }), - }, - ], - }, + ], + }, + { + type: VerticalAdapt, + items: [ + { + type: TextButton, + text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Other_Attributes'), + width: 480, + textAlign: 'right', + ref: _ref => { + this.collapseRef = _ref; + }, + handler: () => { + this.store.setIsCollapse(!this.model.isCollapse); + }, + }, + ], + }, + { + type: Vertical, + invisible: true, + ref: _ref => { + this.otherAttributesRef = _ref; + }, + items: this._getOtherItems(), + }, + ], + }, + ], }, { - type: FormItem, - text: '', - height: 25, - form: { - type: Label, - cls: 'bi-error', - text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Notice'), - }, + type: Label, + cls: 'bi-error', + lgap: 10, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Notice'), }, { - type: FormItem, - text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Advanced'), - height: 40, - form: { - type: Vertical, - items: [ - { - type: FormItem, - text: BI.i18nText('Dec-Dcm_Connection_Form_OriginalCharsetName'), - width: 180, - form: { - type: TextValueCombo, - width: 300, - items: [{ - text: BI.i18nText('Dec-Dcm_Connection_Form_Auto'), - value: originalCharsetName, - }, - ...CONNECT_CHARSET, - ], - }, + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Advanced'), + }, + { + type: Label, + cls: 'bi-font-bold', + width: 180, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_OriginalCharsetName'), + }, + { + type: TextValueCombo, + width: 300, + items: [{ + text: BI.i18nText('Dec-Dcm_Connection_Form_Auto'), + value: originalCharsetName, }, - ], - }, + ...CONNECT_CHARSET, + ], + }, + ], }, ], }; }, + _getOtherItems() { + return BI.map(OTHER_ATTRIBUTES, (index: number, item: AttributeType) => { + return { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 180, + textAlign: 'left', + text: item.text, + }, + { + type: TextEditor, + width: 300, + allowBlank: true, + value: this.options[item.name], + }, + ], + }; + }); + }, }); BI.shortcut(classNameEdit, Widget); export default classNameEdit; diff --git a/src/app/connection/right/right_edit/right_edit_mysql.ts b/src/app/connection/right/right_edit/right_edit_mysql.ts index 03da872..0d36f01 100644 --- a/src/app/connection/right/right_edit/right_edit_mysql.ts +++ b/src/app/connection/right/right_edit/right_edit_mysql.ts @@ -1,15 +1,26 @@ -import {WidgetType, Vertical, MultiSelectItem, TextAreaEditor, Button, TextValueCombo, TextEditor} from '@ui/index'; +import {WidgetType, Vertical, MultiSelectItem, TextAreaEditor, Button, TextValueCombo, TextEditor, VerticalAdapt, Label} from '@ui/index'; import {LinkType} from '@ui/type'; import {CONNECT_CHARSET} from '@private/constants'; import Model from '../../link_set.model'; -import FormItem from '@shared/components/form_item'; import Title from '@shared/components/title'; import {getDrivers, connectNameChecker} from './right_edit.service'; +let connectionName: any = null; const className = 'dec.dcm.component.right.edit.mysql'; const Widget: WidgetType = { _store() { return BI.Models.getModel(Model); }, + watch: { + connectionNameErr(msg: string) { + if (msg) { + BI.Bubbles.show('singleBubble', msg, connectionName, { + level: 'error', + }); + } else { + BI.Bubbles.hide('singleBubble'); + } + }, + }, render() { const linkSelected: LinkType = this.model.linkSelected; const that = this; @@ -19,203 +30,292 @@ const Widget: WidgetType = { vgap: 10, items: [ { - type: FormItem, - text: BI.i18nText('Dec-Dcm_Connection_Form_ConnectionName'), - hint: BI.i18nText('Dec-Dcm_Connection_Form_ConnectionName-Change-Confirm'), - form: { - type: TextEditor, - width: 300, - value: linkSelected.connectionName, - listeners: [{ - eventName: BI.Editor.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - connectionName: this.getValue(), - }); + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_ConnectionName'), + }, + { + type: TextEditor, + width: 300, + value: linkSelected.connectionName, + ref(ref: any) { + connectionName = ref; }, - }], - }, + listeners: [{ + eventName: BI.Editor.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + connectionName: this.getValue(), + }); + }, + }, { + eventName: BI.Editor.EVENT_FOCUS, + action() { + that.store.setConnectionNameErr(''); + }, + }], + }, + { + type: Label, + cls: 'bi-water-mark', + lgap: 5, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_ConnectionName-Change-Confirm'), + }, + ], }, + { - type: FormItem, - text: BI.i18nText('Dec-Dcm_Connection_Form_Driver'), - form: { - type: TextValueCombo, - width: 300, - text: linkSelected.driver, - items: getDrivers(linkSelected), - listeners: [{ - eventName: BI.TextValueCombo.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - driver: this.getValue()[0], - }); - }, - }], - }, + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_Driver'), + }, + { + type: TextValueCombo, + width: 300, + text: linkSelected.driver, + items: getDrivers(linkSelected), + listeners: [{ + eventName: BI.TextValueCombo.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + driver: this.getValue()[0], + }); + }, + }], + }, + ], }, { - type: FormItem, - text: BI.i18nText('Dec-Dcm_Connection_Form_URL'), - form: { - type: TextEditor, - watermark: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input'), - width: 300, - value: linkSelected.url, - listeners: [{ - eventName: BI.Editor.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - url: this.getValue(), - }); - }, - }], - }, + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_URL'), + }, + { + type: TextEditor, + watermark: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input'), + width: 300, + value: linkSelected.url, + listeners: [{ + eventName: BI.Editor.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + url: this.getValue(), + }); + }, + }], + }, + ], }, { - type: FormItem, - text: BI.i18nText('Dec-Dcm_Connection_Form_OriginalCharsetName'), - form: { - type: TextValueCombo, - width: 300, - text: linkSelected.originalCharsetName === '' ? BI.i18nText('Dec-Dcm_Connection_Form_Auto') : linkSelected.originalCharsetName, - items: [ - { - text: BI.i18nText('Dec-Dcm_Connection_Form_Auto'), - value: '', - }, - ...CONNECT_CHARSET, - ], - listeners: [{ - eventName: BI.TextValueCombo.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - originalCharsetName: this.getValue()[0], - }); - }, - }], - }, + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_OriginalCharsetName'), + }, + { + type: TextValueCombo, + width: 300, + text: linkSelected.originalCharsetName === '' ? BI.i18nText('Dec-Dcm_Connection_Form_Auto') : linkSelected.originalCharsetName, + items: [ + { + text: BI.i18nText('Dec-Dcm_Connection_Form_Auto'), + value: '', + }, + ...CONNECT_CHARSET, + ], + listeners: [{ + eventName: BI.TextValueCombo.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + originalCharsetName: this.getValue()[0], + }); + }, + }], + }, + ], }, { - type: FormItem, - text: BI.i18nText('Dec-Dcm_Connection_Form_UserName'), - form: { - type: TextEditor, - allowBlank: true, - watermark: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input'), - width: 300, - value: linkSelected.user, - listeners: [{ - eventName: BI.Editor.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - user: this.getValue(), - }); - }, - }], - }, + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_UserName'), + }, + { + type: TextEditor, + allowBlank: true, + watermark: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input'), + width: 300, + value: linkSelected.user, + listeners: [{ + eventName: BI.Editor.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + user: this.getValue(), + }); + }, + }], + }, + ], }, { - type: FormItem, - text: BI.i18nText('Dec-Dcm_Connection_Form_Password'), - form: { - type: TextEditor, - inputType: 'password', - allowBlank: true, - watermark: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input'), - width: 300, - value: linkSelected.password, - listeners: [{ - eventName: BI.Editor.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - password: this.getValue(), - }); - }, - }], - }, + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_Password'), + }, + { + type: TextEditor, + inputType: 'password', + allowBlank: true, + watermark: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input'), + width: 300, + value: linkSelected.password, + listeners: [{ + eventName: BI.Editor.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + password: this.getValue(), + }); + }, + }], + }, + ], }, { type: Title, text: BI.i18nText('Dec-Dcm_Connection_Form_Pool_Properties'), }, { - type: FormItem, - text: BI.i18nText('Dec-Dcm_Connection_Form_SQL_Validation_Query'), - height: 100, - form: { - type: TextAreaEditor, - allowBlank: true, - watermark: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input'), - width: 300, - height: 100, - value: linkSelected.validationQuery, - listeners: [{ - eventName: BI.Editor.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - validationQuery: this.getValue(), - }); - }, - }], - }, + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_SQL_Validation_Query'), + }, + { + type: TextAreaEditor, + cls: 'bi-border', + allowBlank: true, + watermark: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input'), + width: 300, + height: 100, + value: linkSelected.validationQuery, + listeners: [{ + eventName: BI.Editor.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + validationQuery: this.getValue(), + }); + }, + }], + }, + ], }, { - type: FormItem, - text: BI.i18nText('Dec-Dcm_Connection_Form_Connection-Check'), - form: { - type: MultiSelectItem, - text: BI.i18nText('Dec-Dcm_Yes'), - selected: linkSelected.testOnBorrow, - width: 60, - listeners: [{ - eventName: BI.Editor.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - testOnBorrow: this.isSelected(), - }); - }, - }], - }, + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_Connection-Check'), + }, + { + type: MultiSelectItem, + text: BI.i18nText('Dec-Dcm_Yes'), + selected: linkSelected.testOnBorrow, + width: 60, + listeners: [{ + eventName: BI.Editor.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + testOnBorrow: this.isSelected(), + }); + }, + }], + }, + ], }, { - type: FormItem, - text: BI.i18nText('Dec-Dcm_Connection_Form_Connection_Max_Number'), - form: { - type: TextEditor, - allowBlank: true, - watermark: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input'), - width: 60, - value: linkSelected.maxActive, - errorText: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input-Number'), - validationChecker: connectNameChecker, - listeners: [{ - eventName: BI.Editor.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - maxActive: this.getValue(), - }); - }, - }], - }, + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_Connection_Max_Number'), + }, + { + type: TextEditor, + allowBlank: true, + watermark: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input'), + width: 60, + value: linkSelected.maxActive, + errorText: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input-Number'), + validationChecker: connectNameChecker, + listeners: [{ + eventName: BI.Editor.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + maxActive: this.getValue(), + }); + }, + }], + }, + ], }, { - type: FormItem, - text: BI.i18nText('Dec-Dcm_Test_Connection'), - form: { - type: Button, - text: BI.i18nText('Dec-Dcm_Test_Connection'), - level: 'ignore', - }, + type: VerticalAdapt, + items: [ + { + type: Button, + width: 80, + text: BI.i18nText('Dec-Dcm_Test_Connection'), + level: 'ignore', + }, + ], }, ], }; diff --git a/src/app/connection/right/right_show/right_show_jndi.ts b/src/app/connection/right/right_show/right_show_jndi.ts index 65967b0..d4db6e1 100644 --- a/src/app/connection/right/right_show/right_show_jndi.ts +++ b/src/app/connection/right/right_show/right_show_jndi.ts @@ -1,5 +1,4 @@ -import {Vertical, TextButton, Label} from '@ui'; -import FormItem from '@shared/components/form_item'; +import {Vertical, TextButton, Label, VerticalAdapt} from '@ui'; import {OTHER_ATTRIBUTES} from '@private/constants'; import {AttributeType} from '../right.typing'; import ModelName from './right_show.model'; @@ -11,9 +10,7 @@ const Widget = BI.inherit(BI.Widget, { }, watch: { isCollapse(isCollapse) { - const height = isCollapse ? 550 : 200; const text = isCollapse ? BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Collapse-Attributes') : BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Other_Attributes'); - this.jndiFormRef.setHeight(height); this.collapseRef.setText(text); this.otherAttributesRef.setVisible(isCollapse); }, @@ -26,119 +23,181 @@ const Widget = BI.inherit(BI.Widget, { vgap: 10, items: [ { - type: FormItem, - text: BI.i18nText('Dec-Dcm_Connection_JNDI_Form_ConnectionName'), - form: { - type: Label, - text: connectionName, - }, + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_JNDI_Form_ConnectionName'), + }, + { + type: Label, + text: connectionName, + }, + ], }, { - type: FormItem, - text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Context'), - height: 200, - ref: _ref => { - this.jndiFormRef = _ref; - }, - form: { - type: Vertical, - vgap: 10, - items: [ - { - type: FormItem, - text: 'INTIAL_CONTEXT_FACTORY', - width: 180, - form: { - type: Label, - text: factory, + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Context'), + }, + { + type: Vertical, + vgap: 10, + items: [ + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 180, + textAlign: 'left', + text: 'INTIAL_CONTEXT_FACTORY', + }, + { + type: Label, + text: factory, + }, + ], }, - }, - { - type: FormItem, - text: 'PROVIDER_URL', - width: 180, - form: { - type: Label, - text: url, + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 180, + textAlign: 'left', + text: 'PROVIDER_URL', + }, + { + type: Label, + text: url, + }, + ], }, - }, - { - type: FormItem, - text: 'SECURITY_PRINCIPAL', - width: 180, - form: { - type: Label, - text: principal, + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 180, + textAlign: 'left', + text: 'SECURITY_PRINCIPAL', + }, + { + type: Label, + value: principal, + }, + ], }, - }, - { - type: FormItem, - text: 'SECURITY_CREDENTIALS', - width: 180, - form: { - type: Label, - text: credentials, + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 180, + textAlign: 'left', + text: 'SECURITY_CREDENTIALS', + }, + { + type: Label, + value: credentials, + }, + ], + }, + { + type: VerticalAdapt, + items: [ + { + type: TextButton, + text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Other_Attributes'), + width: 480, + textAlign: 'right', + ref: _ref => { + this.collapseRef = _ref; + }, + handler: () => { + this.store.setIsCollapse(!this.model.isCollapse); + }, + }, + ], }, - }, - { - type: FormItem, - width: 180, - form: { - type: TextButton, - text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Other_Attributes'), - width: 300, - textAlign: 'right', - value: true, + { + type: Vertical, + invisible: true, ref: _ref => { - this.collapseRef = _ref; + this.otherAttributesRef = _ref; }, - handler: () => { - this.store.setIsCollapse(!this.model.isCollapse); - }, - }, - }, - { - type: Vertical, - invisible: true, - ref: _ref => { - this.otherAttributesRef = _ref; + items: this._getOtherItems(), }, - items: BI.map(OTHER_ATTRIBUTES, (index: number, item: AttributeType) => { - return { - type: FormItem, - text: item.text, - width: 180, - form: { - type: Label, - text: this.options[item.name], - }, - }; - }), - }, - ], - }, + ], + }, + ], }, { - type: FormItem, - text: '', - height: 25, - form: { - type: Label, - cls: 'bi-error', - text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Notice'), - }, + type: Label, + cls: 'bi-error', + lgap: 10, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Notice'), }, { - type: FormItem, - text: BI.i18nText('Dec-Dcm_Connection_Form_OriginalCharsetName'), - form: { - type: Label, - text: originalCharsetName ? originalCharsetName : BI.i18nText('Dec-Dcm_Connection_Form_Auto'), - }, + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Advanced'), + }, + { + type: Label, + cls: 'bi-font-bold', + width: 180, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_OriginalCharsetName'), + }, + { + type: Label, + text: originalCharsetName ? originalCharsetName : BI.i18nText('Dec-Dcm_Connection_Form_Auto'), + }, + ], }, ], }; }, + _getOtherItems() { + return BI.map(OTHER_ATTRIBUTES, (index: number, item: AttributeType) => { + return { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 180, + textAlign: 'left', + text: item.text, + }, + { + type: Label, + value: this.options[item.name], + }, + ], + }; + }); + }, }); BI.shortcut(className, Widget); export default className; diff --git a/src/app/connection/right/right_title/right_title.ts b/src/app/connection/right/right_title/right_title.ts index ea60e76..ed988d0 100644 --- a/src/app/connection/right/right_title/right_title.ts +++ b/src/app/connection/right/right_title/right_title.ts @@ -1,9 +1,12 @@ -import {WidgetType, Left, Label, Button, LeftRightVerticalAdapt} from '@ui/index'; +import {WidgetType, Label, Button, LeftRightVerticalAdapt} from '@ui/index'; import RightTitleModel from '../../link_set.model'; import {LinkType} from '@ui/type'; import {OTHER_CONNECT} from '@private/constants'; const className = 'dec.dcm.component.right.title'; const Widget: WidgetType = { + props: { + baseCls: 'bi-border-bottom', + }, _store() { return BI.Models.getModel(RightTitleModel); }, @@ -17,7 +20,6 @@ const Widget: WidgetType = { return { type: LeftRightVerticalAdapt, height: 40, - cls: 'bi-border-bottom', items: { left: [ { diff --git a/src/app/status/left/left_item.ts b/src/app/status/left/left_item.ts index fe90df6..6ee3a49 100644 --- a/src/app/status/left/left_item.ts +++ b/src/app/status/left/left_item.ts @@ -6,6 +6,7 @@ const Widget: WidgetType = { title: '', id: '', creator: '', + baseCls: 'bi-list-item-active', }, _store() { return BI.Models.getModel(Model); diff --git a/src/app/status/link_status.ts b/src/app/status/link_status.ts index 66c56a5..80f2687 100644 --- a/src/app/status/link_status.ts +++ b/src/app/status/link_status.ts @@ -6,6 +6,9 @@ import {TAB_LINK_POOL} from '@private/constants'; const className = 'dec.dcm.linkstatus'; const Widget: WidgetType = { + props: { + baseCls: 'bi-card', + }, _store() { return BI.Models.getModel(linkStatusModel); }, @@ -17,7 +20,6 @@ const Widget: WidgetType = { render() { return { type: Htape, - cls: 'bi-card', items: [{ el: { type: Vtape, diff --git a/src/app/status/right/right.ts b/src/app/status/right/right.ts index ceb454e..4c3d3ab 100644 --- a/src/app/status/right/right.ts +++ b/src/app/status/right/right.ts @@ -6,9 +6,12 @@ import {InfoType} from './right.typings'; import {LinkType} from '@ui/type'; import pluginListConstant from '../../app.constant'; -const className = 'dec.dcm.component.linkStatus.right'; +const className = 'dcm-link-form'; const Widget: WidgetType = { + props: { + baseCls: 'dec-webui-dcm-title bi-card bi-border-bottom', + }, _store() { return BI.Models.getModel(Model); }, @@ -30,7 +33,6 @@ const Widget: WidgetType = { render() { return { type: Vertical, - cls: 'dcm-link-form', items: [ { type: VerticalAdapt, diff --git a/src/app/title/item/title_item.ts b/src/app/title/item/title_item.ts index 3690a51..6b92eb6 100644 --- a/src/app/title/item/title_item.ts +++ b/src/app/title/item/title_item.ts @@ -4,6 +4,7 @@ import {getSelectStyle} from './title_item.service'; const className = 'dec.dcm.title.item'; const Widget = BI.inherit(BI.BasicButton, { props: { + baseCls: 'bi-font-bold', text: '', }, _store() { @@ -20,7 +21,6 @@ const Widget = BI.inherit(BI.BasicButton, { return { type: Label, - cls: 'bi-font-bold', height: 40, hgap: 15, text, diff --git a/src/shared/components/form_item.ts b/src/shared/components/form_item.ts deleted file mode 100644 index 20c9f51..0000000 --- a/src/shared/components/form_item.ts +++ /dev/null @@ -1,31 +0,0 @@ -import {WidgetType, Htape, Label} from '@ui/index'; -const className = 'dec.dcm.shared.component.form.item'; -const Widget: WidgetType = { - props: { - height: 24, - }, - render() { - const {text, form, hint, width = 115} = this.options; - - return { - type: Htape, - items: [{ - el: { - type: Label, - cls: 'bi-font-bold', - textAlign: 'left', - text, - }, - width, - }, form, hint ? { - type: Label, - cls: 'bi-water-mark', - lgap: 5, - textAlign: 'left', - text: hint, - } : null], - }; - }, -}; -BI.shortcut(className, BI.inherit(BI.Widget, Widget)); -export default className; diff --git a/src/shared/components/title.ts b/src/shared/components/title.ts index 0cda0af..f1843e2 100644 --- a/src/shared/components/title.ts +++ b/src/shared/components/title.ts @@ -1,12 +1,14 @@ import {WidgetType, Label} from '@ui/index'; const className = 'dec.dcm.shared.component.title'; const Widget: WidgetType = { + props: { + baseCls: 'bi-tips bi-border-bottom', + }, render() { const {text} = this.options; return { type: Label, - cls: 'bi-water-mark bi-border-bottom', height: 24, bgap: 10, textAlign: 'left',