From a798e26da5aaf349d06d19ef2da550eef5bc250d Mon Sep 17 00:00:00 2001 From: XL-YiBai Date: Tue, 26 Mar 2024 00:04:47 +0800 Subject: [PATCH] feat(web): add save button for new & edit connection --- web/src/database/index.ts | 3 + web/src/lang/common.ts | 5 + web/src/utils/api/connection.ts | 12 ++ web/src/views/connections/ConnectionForm.vue | 162 ++++++++++++++----- web/src/views/connections/index.vue | 2 +- 5 files changed, 147 insertions(+), 37 deletions(-) diff --git a/web/src/database/index.ts b/web/src/database/index.ts index a1e6919017..c3327b92b1 100644 --- a/web/src/database/index.ts +++ b/web/src/database/index.ts @@ -93,6 +93,9 @@ class DB { public set(key: string, value: T): T { return this.read().set(key, value).write() } + public unset(key: string) { + this.db.unset(key).write() + } public insert(key: string, value: T): T { const data: $TSFixed = this.read().get(key) return data.insert(value).write() diff --git a/web/src/lang/common.ts b/web/src/lang/common.ts index e00430d612..bf302efe53 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/utils/api/connection.ts b/web/src/utils/api/connection.ts index efbbe051ea..fff7e165de 100644 --- a/web/src/utils/api/connection.ts +++ b/web/src/utils/api/connection.ts @@ -55,4 +55,16 @@ export const updateConnectionPushProp = (id: string, properties: MessageModel['p return db.update('connections', id, connection) } +export const getNewConnectionRecord = (): ConnectionModel => { + return db.get('newConnectionRecord') +} + +export const createNewConnectionRecord = (data: ConnectionModel) => { + db.set('newConnectionRecord', data) +} + +export const removeNewConnectionRecord = () => { + db.unset('newConnectionRecord') +} + export default {} diff --git a/web/src/views/connections/ConnectionForm.vue b/web/src/views/connections/ConnectionForm.vue index 851c67f4e1..0307beeddb 100644 --- a/web/src/views/connections/ConnectionForm.vue +++ b/web/src/views/connections/ConnectionForm.vue @@ -10,9 +10,19 @@

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

- + {{ $t('connections.connectBtn') }} + + + + + + + {{ $t('common.save') }} + + +
@@ -509,7 +519,15 @@ import { Component, Vue, Prop, Watch } from 'vue-property-decorator' import { Getter, Action } from 'vuex-class' import _ from 'lodash' import time from '@/utils/time' -import { loadConnection, createConnection, updateConnection, loadSuggestConnections } from '@/utils/api/connection' +import { + loadConnection, + createConnection, + updateConnection, + loadSuggestConnections, + getNewConnectionRecord, + createNewConnectionRecord, + removeNewConnectionRecord, +} from '@/utils/api/connection' import { emptyToNull } from '@/utils/handleString' import { getClientId } from '@/utils/idGenerator' import { getMQTTProtocol, getDefaultRecord } from '@/utils/mqttUtils' @@ -551,7 +569,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 +603,93 @@ 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 } - } - // update ActiveConnection & connect - if (res && res.id) { - this.changeActiveConnection({ - id: res.id, - client: {}, - messages: [], - }) - this.$emit('connect') - this.$router.push(`/recent_connections/${res.id}`) + + resolve(true) + }) + }) + } + + 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 } + let res: ConnectionModel | null = null + + if (this.oper === 'create') { + createNewConnectionRecord(data) + return this.record + } else { + // update a exisit connection + if (data.id) { + data.properties = emptyToNull(data.properties) + res = await updateConnection(data.id, { ...data, updateAt: time.getNowDate() }) } else { - this.$message.error(msgError) + return this.record } - }) + } + + return res + } + + private async connect() { + const valid = await this.validateForm() + if (!valid) { + return + } + + let res: ConnectionModel | undefined = undefined + let msgError = '' + const data = (await this.saveData())! + + if (this.oper === 'create') { + msgError = this.$tc('common.createfailed') + // create a new connection + res = await createConnection({ + ...data, + properties: emptyToNull(data.properties), + createAt: time.getNowDate(), + updateAt: time.getNowDate(), + }) + removeNewConnectionRecord() + } else { + msgError = this.$tc('common.editfailed') + } + + // update ActiveConnection & connect + if (res && res.id) { + this.changeActiveConnection({ + id: res.id, + client: {}, + messages: [], + } as Client) + this.$emit('connect') + this.$router.push(`/recent_connections/${res.id}`) + } else { + this.$message.error(msgError) + } } private setClientID() { @@ -700,12 +772,22 @@ 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') { + const oldRecord = getNewConnectionRecord() + if (oldRecord) { + this.record = oldRecord + } else { + this.record = _.cloneDeep(this.defaultRecord) + } + } else if (this.oper === 'edit' && id !== '0') { this.loadDetail(id) } + } + + private created() { + this.initRecord() this.advancedVisible = this.getterAdvancedVisible this.willMessageVisible = this.getterWillMessageVisible } @@ -719,6 +801,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 d8e22698ea..4bdc7ec2c0 100644 --- a/web/src/views/connections/index.vue +++ b/web/src/views/connections/index.vue @@ -13,7 +13,7 @@ :click-method="toCreateConnection" />