feat(web): add save button for new & edit connection

web/src/database/index.ts

@@ -93,6 +93,9 @@ class DB {
   public set<T>(key: string, value: T): T {
     return this.read().set(key, value).write()
   }
+  public unset(key: string) {
+    this.db.unset(key).write()
+  }
   public insert<T>(key: string, value: T): T {
     const data: $TSFixed = this.read().get(key)
     return data.insert(value).write()

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',

web/src/utils/api/connection.ts

@@ -55,4 +55,16 @@ export const updateConnectionPushProp = (id: string, properties: MessageModel['p
   return db.update<ConnectionModel>('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 {}

web/src/views/connections/ConnectionForm.vue

@@ -10,9 +10,19 @@
         <h2>{{ oper === 'create' ? $t('common.new') : $t('common.edit') }}</h2>
       </div>
       <div class="tail">
-        <a href="javascript:;" @click="save">
+        <a href="javascript:;" @click="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-menu>
+        </el-dropdown>
       </div>
     </div>
 
@@ -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<boolean> {
+    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;

web/src/views/connections/index.vue

@@ -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"