Skip to content

Commit

Permalink
feat(web): add save button for new & edit connection
Browse files Browse the repository at this point in the history
  • Loading branch information
@XL-YiBai @ysfscream
XL-YiBai authored and ysfscream committed Mar 27, 2024
1 parent 3324fe8 commit 3fdea8c
Show file tree
Hide file tree
Showing 4 changed files with 140 additions and 99 deletions.
103 changes: 40 additions & 63 deletions src/views/connections/ConnectionForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,15 @@
<h2>{{ oper === 'create' ? $t('common.new') : $t('common.edit') }}</h2>
</div>
<div class="tail">
<a href="javascript:;" @click="connect" class="connect-btn">
<a href="javascript:;" @click="handleSave('connect')" class="connect-btn">
{{ $t('connections.connectBtn') }}
</a>
<el-dropdown trigger="click" @command="handleActionCommand">
<a href="javascript:;">
<i class="el-icon-arrow-down"></i>
</a>
<el-dropdown-menu class="connection-oper-item" slot="dropdown">
<el-dropdown-item command="handleSave">
<i class="el-icon-folder"></i>{{ $t('common.save') }}
</el-dropdown-item>
<el-dropdown-item command="save"> <i class="el-icon-folder"></i>{{ $t('common.save') }} </el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
Expand Down Expand Up @@ -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
Expand All @@ -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: {
Expand All @@ -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')
}
}
Expand Down Expand Up @@ -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)
}
Expand Down
5 changes: 5 additions & 0 deletions web/src/lang/common.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,11 @@ export default {
en: 'Delete Failed',
ja: '削除に失敗しました',
},
saveSuccess: {
zh: '保存成功',
en: 'Save Success',
ja: '保存に成功しました',
},
warning: {
zh: '提示',
en: 'Warning',
Expand Down
129 changes: 94 additions & 35 deletions web/src/views/connections/ConnectionForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,17 @@
<h2>{{ oper === 'create' ? $t('common.new') : $t('common.edit') }}</h2>
</div>
<div class="tail">
<a href="javascript:;" @click="save">
<a href="javascript:;" @click="handleSave('connect')" class="connect-btn">
{{ $t('connections.connectBtn') }}
</a>
<el-dropdown trigger="click" @command="handleActionCommand">
<a href="javascript:;">
<i class="el-icon-arrow-down"></i>
</a>
<el-dropdown-menu class="connection-oper-item" slot="dropdown">
<el-dropdown-item command="save"> <i class="el-icon-folder"></i>{{ $t('common.save') }} </el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>

Expand Down Expand Up @@ -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()
}
}
Expand Down Expand Up @@ -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<boolean> {
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() {
Expand Down Expand Up @@ -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
}
Expand All @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion web/src/views/connections/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
:click-method="toCreateConnection"
/>
<template v-else>
<ConnectionForm v-if="oper" ref="connectionForm" :oper="oper" @connect="onConnect" />
<ConnectionForm v-if="oper" ref="connectionForm" :oper="oper" @connect="onConnect" @refresh="loadData" />
<ConnectionsDetail
v-show="!oper"
ref="ConnectionsDetail"
Expand Down

0 comments on commit 3fdea8c

Please sign in to comment.