UI: Submit the form when press CTRL + ENTER (#4766)

* fixes: submit the form when press enter

* add Enter submit for component missing

* add ctrl+enter event key for submitting form

* add directive.js check keyup event

* fix build test failure

* using directive in main.js

* fix warning show in the test unit

* fix multiple submits

* fix travis run test failures

* fix filter button style

* fix the problem of ctrl+enter keyup on firefox browser

* removed computed function not using

* remove space errror

* add ref for ctrl+enter submit

* resolve conflit and fix build

* add missing directive

* add missing directive & ref button

* fixes errors

* fixes errors

* add preventDefault()

* fix ctrl keypress not support on firefox

Author: Hoang Nguyen

ui/src/components/view/DedicateModal.vue

@@ -18,16 +18,20 @@
 <template>
   <a-modal
     v-model="dedicatedDomainModal"
+    v-ctrl-enter="handleDedicateForm"
     :title="label"
+    :closable="true"
     :maskClosable="false"
-    :okText="$t('label.ok')"
-    :cancelText="$t('label.cancel')"
-    @cancel="closeModal"
-    @ok="handleDedicateForm">
+    :footer="null"
+    @cancel="closeModal">
     <DedicateDomain
       @domainChange="id => domainId = id"
       @accountChange="id => dedicatedAccount = id"
       :error="domainError" />
+    <div :span="24" class="action-button">
+      <a-button @click="closeModal">{{ this.$t('label.cancel') }}</a-button>
+      <a-button type="primary" @click="handleDedicateForm">{{ this.$t('label.ok') }}</a-button>
+    </div>
   </a-modal>
 </template>
 
@@ -63,7 +67,8 @@ export default {
       dedicatedDomainModal: false,
       domainId: null,
       dedicatedAccount: null,
-      domainError: false
+      domainError: false,
+      isSubmitted: false
     }
   },
   watch: {
@@ -100,23 +105,27 @@ export default {
             this.fetchParentData()
             this.dedicatedDomainId = this.domainId
             this.dedicatedDomainModal = false
+            this.isSubmitted = false
           },
           errorMessage: this.$t('error.dedicate.zone.failed'),
           errorMethod: () => {
             this.fetchParentData()
             this.dedicatedDomainModal = false
+            this.isSubmitted = false
           },
           loadingMessage: this.$t('message.dedicating.zone'),
           catchMessage: this.$t('error.fetching.async.job.result'),
           catchMethod: () => {
             this.parentFetchData()
             this.fetchParentData()
             this.dedicatedDomainModal = false
+            this.isSubmitted = false
           }
         })
       }).catch(error => {
         this.$notifyError(error)
         this.dedicatedDomainModal = false
+        this.isSubmitted = false
       })
     },
     dedicatePod () {
@@ -138,23 +147,27 @@ export default {
             this.fetchParentData()
             this.dedicatedDomainId = this.domainId
             this.dedicatedDomainModal = false
+            this.isSubmitted = false
           },
           errorMessage: this.$t('error.dedicate.pod.failed'),
           errorMethod: () => {
             this.fetchParentData()
             this.dedicatedDomainModal = false
+            this.isSubmitted = false
           },
           loadingMessage: this.$t('message.dedicating.pod'),
           catchMessage: this.$t('error.fetching.async.job.result'),
           catchMethod: () => {
             this.parentFetchData()
             this.fetchParentData()
             this.dedicatedDomainModal = false
+            this.isSubmitted = false
           }
         })
       }).catch(error => {
         this.$notifyError(error)
         this.dedicatedDomainModal = false
+        this.isSubmitted = false
       })
     },
     dedicateCluster () {
@@ -176,23 +189,27 @@ export default {
             this.fetchParentData()
             this.dedicatedDomainId = this.domainId
             this.dedicatedDomainModal = false
+            this.isSubmitted = false
           },
           errorMessage: this.$t('error.dedicate.cluster.failed'),
           errorMethod: () => {
             this.fetchParentData()
             this.dedicatedDomainModal = false
+            this.isSubmitted = false
           },
           loadingMessage: this.$t('message.dedicating.cluster'),
           catchMessage: this.$t('error.fetching.async.job.result'),
           catchMethod: () => {
             this.parentFetchData()
             this.fetchParentData()
             this.dedicatedDomainModal = false
+            this.isSubmitted = false
           }
         })
       }).catch(error => {
         this.$notifyError(error)
         this.dedicatedDomainModal = false
+        this.isSubmitted = false
       })
     },
     dedicateHost () {
@@ -214,26 +231,34 @@ export default {
             this.fetchParentData()
             this.dedicatedDomainId = this.domainId
             this.dedicatedDomainModal = false
+            this.isSubmitted = false
           },
           errorMessage: this.$t('error.dedicate.host.failed'),
           errorMethod: () => {
             this.fetchParentData()
             this.dedicatedDomainModal = false
+            this.isSubmitted = false
           },
           loadingMessage: this.$t('message.dedicating.host'),
           catchMessage: this.$t('error.fetching.async.job.result'),
           catchMethod: () => {
             this.parentFetchData()
             this.fetchParentData()
             this.dedicatedDomainModal = false
+            this.isSubmitted = false
           }
         })
       }).catch(error => {
         this.$notifyError(error)
         this.dedicatedDomainModal = false
+        this.isSubmitted = false
       })
     },
     handleDedicateForm () {
+      if (this.isSubmitted) {
+        return
+      }
+      this.isSubmitted = true
       if (this.$route.meta.name === 'zone') {
         this.dedicateZone()
       }

ui/src/components/view/FormView.vue

@@ -21,10 +21,7 @@
     :visible="showForm"
     :closable="true"
     :confirmLoading="currentAction.loading"
-    :okText="$t('label.ok')"
-    :cancelText="$t('label.cancel')"
     style="top: 20px;"
-    @ok="handleSubmit"
     @cancel="close"
     centered
   >

ui/src/components/view/ResourceLimitTab.vue

@@ -21,6 +21,7 @@
       :form="form"
       @submit="handleSubmit"
       layout="vertical"
+      v-ctrl-enter="handleSubmit"
     >
       <a-form-item
         v-for="(item, index) in dataResource"
@@ -115,6 +116,8 @@ export default {
     handleSubmit (e) {
       e.preventDefault()
 
+      if (this.formLoading) return
+
       this.form.validateFields((err, values) => {
         if (err) {
           return

ui/src/main.js

@@ -28,6 +28,7 @@ import './permission' // permission control
 import './utils/filter' // global filter
 import { pollJobPlugin, notifierPlugin, toLocaleDatePlugin, configUtilPlugin, apiMetaUtilPlugin } from './utils/plugins'
 import { VueAxios } from './utils/request'
+import './utils/directives'
 
 Vue.config.productionTip = false
 Vue.use(VueAxios, router)

ui/src/style/vars.less

@@ -241,8 +241,17 @@ a {
   }
 }
 
+.action-button {
+  text-align: right;
+  padding-top: 15px;
+
+  button {
+    margin-right: 5px;
+  }
+}
+
 @media only screen and (max-width: 576px) {
   .ant-pagination-options {
     display: inline-block;
   }
-} 
+} 

ui/src/utils/directives.js

@@ -0,0 +1,47 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import Vue from 'vue'
+
+const ENTER_KEY_CODE = 13
+let lastFocusElm = null
+
+Vue.directive('ctrlEnter', {
+  bind: (el, binding, vnode) => {
+    el.addEventListener('keydown', (e) => {
+      if (e.ctrlKey && e.keyCode === ENTER_KEY_CODE) {
+        e.preventDefault()
+        lastFocusElm = e.target
+        vnode.context.$refs.submit.$el.focus()
+      }
+    })
+
+    el.addEventListener('keyup', (e) => {
+      if (!e.ctrlKey || e.keyCode !== ENTER_KEY_CODE) {
+        e.preventDefault()
+        return
+      }
+
+      e.preventDefault()
+      if (typeof binding.value === 'function') {
+        if (lastFocusElm) lastFocusElm.focus()
+        const argument = binding.arg || e
+        binding.value(argument)
+      }
+    })
+  }
+})

ui/src/views/AutogenView.vue

@@ -124,15 +124,14 @@
         :visible="showAction"
         :closable="true"
         :maskClosable="false"
-        :okText="$t('label.ok')"
-        :cancelText="$t('label.cancel')"
+        :footer="null"
         style="top: 20px;"
         :width="modalWidth"
-        @ok="handleSubmit"
-        @cancel="closeAction"
         :ok-button-props="getOkProps()"
         :cancel-button-props="getCancelProps()"
         :confirmLoading="actionLoading"
+        @cancel="closeAction"
+        v-ctrl-enter="handleSubmit"
         centered
       >
         <span slot="title">
@@ -322,6 +321,11 @@
                   :placeholder="field.description" />
               </span>
             </a-form-item>
+
+            <div :span="24" class="action-button">
+              <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
+              <a-button type="primary" @click="handleSubmit" ref="submit">{{ $t('label.ok') }}</a-button>
+            </div>
           </a-form>
         </a-spin>
         <br />
@@ -764,7 +768,7 @@ export default {
 
       params.page = this.page
       params.pagesize = this.pageSize
-      this.searchParams = params
+
       api(this.apiName, params).then(json => {
         var responseName
         var objectName
@@ -852,6 +856,7 @@ export default {
         }
       }).finally(f => {
         this.loading = false
+        this.searchParams = params
       })
     },
     closeAction () {
@@ -1077,6 +1082,7 @@ export default {
       this.message = {}
     },
     handleSubmit (e) {
+      if (this.actionLoading) return
       this.promises = []
       if (!this.dataView && this.currentAction.groupAction && this.selectedRowKeys.length > 0) {
         if (this.selectedRowKeys.length > 0) {

ui/src/views/auth/Login.vue

@@ -22,6 +22,7 @@
     ref="formLogin"
     :form="form"
     @submit="handleSubmit"
+    v-ctrl-enter="handleSubmit"
   >
     <a-tabs
       :activeKey="customActiveKey"
@@ -103,6 +104,7 @@
         class="login-button"
         :loading="state.loginBtn"
         :disabled="state.loginBtn"
+        ref="submit"
       >{{ $t('label.login') }}</a-button>
     </a-form-item>
     <translation-menu/>
@@ -169,6 +171,7 @@ export default {
         customActiveKey,
         Login
       } = this
+      if (state.loginBtn) return
 
       state.loginBtn = true
 

ui/src/views/compute/AssignInstance.vue

@@ -17,7 +17,7 @@
 
 <template>
   <div>
-    <div class="form">
+    <div class="form" v-ctrl-enter="submitData">
 
       <div v-if="loading" class="loading">
         <a-icon type="loading" style="color: #1890ff;"></a-icon>
@@ -81,7 +81,7 @@
         <a-button @click="closeAction">
           {{ $t('label.cancel') }}
         </a-button>
-        <a-button type="primary" @click="submitData">
+        <a-button type="primary" @click="submitData" ref="submit">
           {{ $t('label.submit') }}
         </a-button>
       </div>
@@ -205,6 +205,8 @@ export default {
       this.$emit('close-action')
     },
     submitData () {
+      if (this.loading) return
+
       let variableKey = ''
       let variableValue = ''