diff --git a/src/views/connections/ConnectionForm.vue b/src/views/connections/ConnectionForm.vue
index 17d6d6dba..3945cac6e 100644
--- a/src/views/connections/ConnectionForm.vue
+++ b/src/views/connections/ConnectionForm.vue
@@ -20,7 +20,7 @@
{{ oper === 'create' ? $t('common.new') : $t('common.edit') }}
@@ -689,10 +687,10 @@ export default class ConnectionForm extends Vue {
return
}
- const data = { ...this.record }
+ const { ssl, certType, cert, key, ca } = this.record
// SSL File validation
- if (data.ssl && data.certType === 'self') {
- if (!data.cert && !data.key && !data.ca) {
+ if (ssl && certType === 'self') {
+ if (!cert && !key && !ca) {
this.$message.warning(this.$tc('connections.sslFileRequired'))
resolve(false)
return
@@ -703,74 +701,55 @@ export default class ConnectionForm extends Vue {
})
}
- private handleActionCommand(command: string) {
- if (command === 'handleSave') {
- this.handleSave()
- }
- }
-
- private async handleSave() {
- const valid = await this.validateForm()
- if (!valid) {
- return
- }
- const { id } = this.$route.params
- await this.saveData()
- this.$message.success(this.$tc('common.saveSuccess'))
- this.$emit('refresh')
- this.handleBack(id)
- }
-
private async saveData() {
- const data = { ...this.record }
const { connectionService } = useServices()
+ const data = { ...this.record }
+ let res: ConnectionModel | undefined = undefined
+ data.properties = emptyToNull(data.properties)
+
if (this.oper === 'create') {
- localStorage.setItem('newConnectionRecord', JSON.stringify(data))
- return this.record
+ // 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) {
- const res = await connectionService.update(data.id, {
+ res = await connectionService.update(data.id, {
...data,
- properties: emptyToNull(data.properties),
updateAt: time.getNowDate(),
})
this.$log.info(`Connection ${res?.name} was edited, ID: ${res?.id}`)
- return res
- } else {
- return this.record
}
}
+ return res
}
- private async connect() {
+ private async handleSave(type: 'connect' | 'save') {
const valid = await this.validateForm()
if (!valid) {
return
}
- const { connectionService } = useServices()
- let msgError = ''
- let res: ConnectionModel | undefined = undefined
- const data = (await this.saveData())!
-
- if (this.oper === 'create') {
- res = await connectionService.create({
- ...data,
- properties: emptyToNull(data.properties),
- createAt: time.getNowDate(),
- updateAt: time.getNowDate(),
- })
- localStorage.removeItem('newConnectionRecord')
- this.$log.info(`Created for the first time: ${res?.name}, ID: ${res?.id}`)
- msgError = this.$tc('common.createfailed')
- } else {
- msgError = this.$tc('common.editfailed')
- res = data
+ 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
}
- // update ActiveConnection & connect
- if (res && res.id) {
+ 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
this.changeActiveConnection({
id: res.id,
client: {
@@ -779,9 +758,12 @@ export default class ConnectionForm extends Vue {
})
this.$emit('connect')
this.$router.push(`/recent_connections/${res.id}`)
- } else {
- this.$message.error(msgError)
- this.$log.error(msgError)
+ }
+ }
+
+ private handleActionCommand(command: 'save') {
+ if (command === 'save') {
+ this.handleSave('save')
}
}
@@ -921,12 +903,7 @@ export default class ConnectionForm extends Vue {
private initRecord() {
const { id } = this.$route.params
if (this.oper === 'create') {
- const oldRecord = localStorage.getItem('newConnectionRecord')
- if (oldRecord) {
- this.record = JSON.parse(oldRecord)
- } else {
- this.record = _.cloneDeep(this.defaultRecord)
- }
+ this.record = _.cloneDeep(this.defaultRecord)
} else if (this.oper === 'edit' && id !== '0') {
this.loadDetail(id)
}
diff --git a/web/src/lang/common.ts b/web/src/lang/common.ts
index e00430d61..bf302efe5 100644
--- a/web/src/lang/common.ts
+++ b/web/src/lang/common.ts
@@ -79,6 +79,11 @@ export default {
en: 'Delete Failed',
ja: '削除に失敗しました',
},
+ saveSuccess: {
+ zh: '保存成功',
+ en: 'Save Success',
+ ja: '保存に成功しました',
+ },
warning: {
zh: '提示',
en: 'Warning',
diff --git a/web/src/views/connections/ConnectionForm.vue b/web/src/views/connections/ConnectionForm.vue
index 851c67f4e..c20f8e41d 100644
--- a/web/src/views/connections/ConnectionForm.vue
+++ b/web/src/views/connections/ConnectionForm.vue
@@ -10,9 +10,17 @@
{{ oper === 'create' ? $t('common.new') : $t('common.edit') }}
@@ -551,7 +559,7 @@ export default class ConnectionCreate 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()
}
}
@@ -585,39 +593,76 @@ export default class ConnectionCreate extends Vue {
}
}
- private save() {
- this.vueForm.validate(async (valid: boolean) => {
- if (!valid) {
- return false
- }
- const data = { ...this.record }
- data.properties = emptyToNull(data.properties)
- let res: ConnectionModel | null = null
- let msgError = ''
- if (this.oper === 'create') {
- // create a new connection
- res = await createConnection({ ...data, createAt: time.getNowDate(), updateAt: time.getNowDate() })
- msgError = this.$tc('common.createfailed')
- } else {
- // update a exisit connection
- if (data.id) {
- res = await updateConnection(data.id, { ...data, updateAt: time.getNowDate() })
- msgError = this.$tc('common.editfailed')
+ private validateForm(): Promise {
+ return new Promise((resolve, reject) => {
+ this.vueForm.validate((valid: boolean) => {
+ if (!valid) {
+ resolve(false)
+ return
}
+
+ resolve(true)
+ })
+ })
+ }
+
+ private async saveData() {
+ const data = { ...this.record }
+ data.properties = emptyToNull(data.properties)
+ let res: ConnectionModel | null = null
+
+ if (this.oper === 'create') {
+ // create a new connection
+ res = await createConnection({
+ ...data,
+ createAt: time.getNowDate(),
+ updateAt: time.getNowDate(),
+ })
+ } else {
+ // update a exisit connection
+ if (data.id) {
+ res = await updateConnection(data.id, { ...data, updateAt: time.getNowDate() })
}
+ }
+
+ 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)
+ 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: {},
- messages: [],
- })
- this.$emit('connect')
- this.$router.push(`/recent_connections/${res.id}`)
- } else {
- this.$message.error(msgError)
- }
- })
+ this.changeActiveConnection({
+ id: res.id,
+ client: {},
+ messages: [],
+ } as Client)
+ this.$emit('connect')
+ this.$router.push(`/recent_connections/${res.id}`)
+ }
+ }
+
+ private handleActionCommand(command: 'save') {
+ if (command === 'save') {
+ this.handleSave('save')
+ }
}
private setClientID() {
@@ -700,12 +745,18 @@ export default class ConnectionCreate extends Vue {
this.record = oneConnection
}
- private created() {
- this.loadData()
+ 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 created() {
+ this.loadData()
+ this.initRecord()
this.advancedVisible = this.getterAdvancedVisible
this.willMessageVisible = this.getterWillMessageVisible
}
@@ -719,6 +770,14 @@ export default class ConnectionCreate 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/web/src/views/connections/index.vue b/web/src/views/connections/index.vue
index d8e22698e..4bdc7ec2c 100644
--- a/web/src/views/connections/index.vue
+++ b/web/src/views/connections/index.vue
@@ -13,7 +13,7 @@
:click-method="toCreateConnection"
/>
-
+