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

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

src/views/connections/ConnectionForm.vue

@@ -20,9 +20,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>
 
@@ -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<boolean> {
+    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;

src/views/connections/index.vue

@@ -24,7 +24,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"

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