diff --git a/src/lang/common.ts b/src/lang/common.ts index 4fd605928..a63a40b2e 100644 --- a/src/lang/common.ts +++ b/src/lang/common.ts @@ -111,6 +111,13 @@ export default { ja: '削除に失敗しました', hu: 'Sikertelen törlés', }, + saveSuccess: { + zh: '保存成功', + en: 'Save Success', + tr: 'Kaydetme Başarılı', + ja: '保存に成功しました', + hu: 'Sikeres mentés' + }, warning: { zh: '提示', en: 'Warning', diff --git a/src/views/connections/ConnectionForm.vue b/src/views/connections/ConnectionForm.vue index f44d5d901..3945cac6e 100644 --- a/src/views/connections/ConnectionForm.vue +++ b/src/views/connections/ConnectionForm.vue @@ -20,9 +20,17 @@

{{ oper === 'create' ? $t('common.new') : $t('common.edit') }}

- + {{ $t('connections.connectBtn') }} + + + + + + {{ $t('common.save') }} + +
@@ -632,7 +640,7 @@ export default class ConnectionForm extends Vue { private handleCreateNewConnection(val: string) { if (val === 'create') { // reinit the form when page jump to creation page - this.record = _.cloneDeep(this.defaultRecord) + this.initRecord() } } @@ -671,58 +679,92 @@ export default class ConnectionForm extends Vue { } } - private async save() { - this.vueForm.validate(async (valid: boolean) => { - if (!valid) { - return false - } - const data = { ...this.record } - data.properties = emptyToNull(data.properties) - let res: ConnectionModel | undefined = undefined - const { connectionService } = useServices() - let msgError = '' - // SSL File validation - if (data.ssl && data.certType === 'self') { - if (!data.cert && !data.key && !data.ca) { - this.$message.warning(this.$tc('connections.sslFileRequired')) + private validateForm(): Promise { + return new Promise((resolve, reject) => { + this.vueForm.validate((valid: boolean) => { + if (!valid) { + resolve(false) return } - } - if (this.oper === 'create') { - // create a new connection - res = await connectionService.create({ + + const { ssl, certType, cert, key, ca } = this.record + // SSL File validation + if (ssl && certType === 'self') { + if (!cert && !key && !ca) { + this.$message.warning(this.$tc('connections.sslFileRequired')) + resolve(false) + return + } + } + resolve(true) + }) + }) + } + + private async saveData() { + const { connectionService } = useServices() + const data = { ...this.record } + let res: ConnectionModel | undefined = undefined + data.properties = emptyToNull(data.properties) + + if (this.oper === 'create') { + // create a new connection + res = await connectionService.create({ + ...data, + createAt: time.getNowDate(), + updateAt: time.getNowDate(), + }) + this.$log.info(`Created for the first time: ${res?.name}, ID: ${res?.id}`) + } else { + // update a exisit connection + if (data.id) { + res = await connectionService.update(data.id, { ...data, - createAt: time.getNowDate(), updateAt: time.getNowDate(), }) - this.$log.info(`Created for the first time: ${res?.name}, ID: ${res?.id}`) - msgError = this.$tc('common.createfailed') - } else { - // update a exisit connection - if (data.id) { - res = await connectionService.update(data.id, { - ...data, - updateAt: time.getNowDate(), - }) - this.$log.info(`Connection ${res?.name} was edited, ID: ${res?.id}`) - msgError = this.$tc('common.editfailed') - } + this.$log.info(`Connection ${res?.name} was edited, ID: ${res?.id}`) } + } + return res + } + + private async handleSave(type: 'connect' | 'save') { + const valid = await this.validateForm() + if (!valid) { + return + } + + const res = await this.saveData() + // Save failed + if (!(res && res.id)) { + const msgError = this.oper === 'create' ? this.$tc('common.createfailed') : this.$tc('common.editfailed') + this.$message.error(msgError) + this.$log.error(msgError) + return + } + + if (type === 'save') { + const { id } = this.$route.params + this.$emit('refresh') + this.handleBack(id) + this.$message.success(this.$tc('common.saveSuccess')) + } else { // update ActiveConnection & connect - if (res && res.id) { - this.changeActiveConnection({ - id: res.id, - client: { - connected: false, - }, - }) - this.$emit('connect') - this.$router.push(`/recent_connections/${res.id}`) - } else { - this.$message.error(msgError) - this.$log.error(msgError) - } - }) + this.changeActiveConnection({ + id: res.id, + client: { + connected: false, + }, + }) + this.$emit('connect') + this.$router.push(`/recent_connections/${res.id}`) + } + } + + private handleActionCommand(command: 'save') { + if (command === 'save') { + this.handleSave('save') + } } private setClientID() { @@ -858,12 +900,18 @@ export default class ConnectionForm extends Vue { } } - private async created() { - await this.loadSuggestConnections() + private initRecord() { const { id } = this.$route.params - if (this.oper === 'edit' && id !== '0') { + if (this.oper === 'create') { + this.record = _.cloneDeep(this.defaultRecord) + } else if (this.oper === 'edit' && id !== '0') { this.loadDetail(id) } + } + + private async created() { + await this.loadSuggestConnections() + this.initRecord() this.advancedVisible = this.getterAdvancedVisible this.willMessageVisible = this.getterWillMessageVisible } @@ -877,6 +925,14 @@ export default class ConnectionForm extends Vue { padding: 0 16px; .topbar { -webkit-app-region: drag; + .tail { + a { + padding: 0 12px; + } + .connect-btn { + border-right: 1px solid var(--color-border-default); + } + } } .el-form { padding-top: 80px; diff --git a/src/views/connections/index.vue b/src/views/connections/index.vue index 196a92c21..08ed7eaf7 100644 --- a/src/views/connections/index.vue +++ b/src/views/connections/index.vue @@ -24,7 +24,7 @@ :click-method="toCreateConnection" />