Работа над хоткеями

client/components/share/StdDialog.vue

@@ -74,6 +74,34 @@
                 <q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="okClick">OK</q-btn>
             </div>
         </div>
+
+        <!--------------------------------------------------->
+        <div v-show="type == 'hotKey'" class="bg-white no-wrap">
+            <div class="header row">
+                <div class="caption col row items-center q-ml-md">
+                    <q-icon v-show="caption" class="q-mr-sm" :class="iconColor" name="las la-exclamation-circle" size="28px"></q-icon>
+                    <div v-html="caption"></div>
+                </div>
+                <div class="close-icon column justify-center items-center">
+                    <q-btn flat round dense v-close-popup>
+                        <q-icon name="la la-times" size="18px"></q-icon>
+                    </q-btn>
+                </div>
+            </div>
+
+            <div class="q-mx-md">
+                <div v-html="message"></div>
+                <div class="q-my-md text-center">
+                    <div v-show="hotKeyCode == ''" class="text-grey-5">Нет</div>
+                    <div>{{ hotKeyCode }}</div>
+                </div>
+            </div>
+
+            <div class="buttons row justify-end q-pa-md">
+                <q-btn class="q-px-md q-ml-sm" dense no-caps v-close-popup>Отмена</q-btn>
+                <q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="okClick" :disabled="hotKeyCode == ''">OK</q-btn>
+            </div>
+        </div>
     </q-dialog>
 </template>
 
@@ -82,7 +110,7 @@
 import Vue from 'vue';
 import Component from 'vue-class-component';
 
-//import * as utils from '../../share/utils';
+import * as utils from '../../share/utils';
 
 export default @Component({
     watch: {
@@ -99,6 +127,7 @@ class StdDialog extends Vue {
     inputValue = '';
     error = '';
     iconColor = '';
+    hotKeyCode = '';
 
     created() {
         if (this.$root.addKeyHook) {
@@ -120,6 +149,11 @@ class StdDialog extends Vue {
         if (opts && opts.color) {
             this.iconColor = `text-${opts.color}`;
         }
+
+        this.hotKeyCode = '';
+        if (opts && opts.hotKeyCode) {
+            this.hotKeyCode = opts.hotKeyCode;
+        }
     }
 
     onHide() {
@@ -158,6 +192,12 @@ class StdDialog extends Vue {
             this.$refs.dialog.shake();
             return;
         }
+
+        if (this.type == 'hotKey' && this.hotKeyCode == '') {
+            this.$refs.dialog.shake();
+            return;
+        }
+
         this.ok = true;
         this.$refs.dialog.hide();
     }
@@ -218,9 +258,38 @@ class StdDialog extends Vue {
         });
     }
 
+    getHotKey(message, caption, opts) {
+        return new Promise((resolve) => {
+            this.init(message, caption, opts);
+
+            this.hideTrigger = () => {
+                if (this.ok) {
+                    resolve(this.hotKeyCode);
+                } else {
+                    resolve(false);
+                }
+            };
+
+            this.type = 'hotKey';
+            this.active = true;
+        });
+    }
+
     keyHook(event) {
-        if (this.active && event.code == 'Enter') {
-            this.okClick();
+        if (this.active) {
+            if (this.type == 'hotKey') {
+                if (event.type == 'keydown') {
+                    this.hotKeyCode = utils.keyEventToCode(event);
+                }
+            } else {
+                if (event.code == 'Enter')
+                    this.okClick();
+                if (event.code == 'Escape') {
+                    this.$nextTick(() => {
+                        this.$refs.dialog.hide();
+                    });
+                }
+            }
             event.stopPropagation();
             event.preventDefault();
         }

client/share/utils.js

@@ -202,4 +202,20 @@ export function escapeXml(str) {
         .replace(/"/g, '"')
         .replace(/'/g, ''')
     ;
+}
+
+export function keyEventToCode(event) {
+    let result = [];
+    if (event.metaKey)
+        result.push('Meta');
+    if (event.ctrlKey)
+        result.push('Ctrl');
+    if (event.shiftKey)
+        result.push('Shift');
+    if (event.altKey)
+        result.push('Alt');
+    
+    result.push(event.code);
+
+    return result.join('+');
 }