Merge pull request #620 from AndrewBastin/feat/quick-query-run

Added shortcut to quickly run the GraphQL query

components/graphql/queryeditor.vue

@@ -5,17 +5,17 @@
 </template>
 
 <style lang="scss">
-  .show-if-initialized {
-    opacity: 0;
+.show-if-initialized {
+  opacity: 0;
 
-    &.initialized {
-      opacity: 1;
-    }
-
-    & > * {
-      transition: none;
-    }
+  &.initialized {
+    opacity: 1;
   }
+
+  & > * {
+    transition: none;
+  }
+}
 </style>
 
 <script>
@@ -42,6 +42,10 @@ export default {
       type: String,
       default: "json",
     },
+    onRunGQLQuery: {
+      type: Function,
+      default: () => {},
+    },
     options: {
       type: Object,
       default: {},
@@ -65,12 +69,12 @@ export default {
       }
     },
     theme() {
-      this.initialized = false;
+      this.initialized = false
       this.editor.setTheme(`ace/theme/${this.defineTheme()}`, () => {
         this.$nextTick().then(() => {
-          this.initialized = true;
-        });
-      });
+          this.initialized = true
+        })
+      })
     },
     lang(value) {
       this.editor.getSession().setMode(`ace/mode/${value}`)
@@ -93,16 +97,16 @@ export default {
     // Set the theme and show the editor only after it's been set to prevent FOUC.
     editor.setTheme(`ace/theme/${this.defineTheme()}`, () => {
       this.$nextTick().then(() => {
-        this.initialized = true;
-      });
-    });
+        this.initialized = true
+      })
+    })
 
     // Set the theme and show the editor only after it's been set to prevent FOUC.
     editor.setTheme(`ace/theme/${this.defineTheme()}`, () => {
       this.$nextTick().then(() => {
-        this.initialized = true;
-      });
-    });
+        this.initialized = true
+      })
+    })
 
     const completer = {
       getCompletions: (editor, _session, { row, column }, _prefix, callback) => {
@@ -134,6 +138,15 @@ export default {
     this.editor = editor
     this.cacheValue = this.value
 
+    editor.commands.addCommand({
+      name: "runGQLQuery",
+      exec: () => this.onRunGQLQuery(this.editor.getValue()),
+      bindKey: {
+        mac: "cmd-enter",
+        win: "ctrl-enter",
+      },
+    })
+
     editor.on("change", () => {
       const content = editor.getValue()
       this.$emit("input", content)
@@ -190,7 +203,7 @@ export default {
   },
 
   beforeDestroy() {
-    this.editor.destroy();
-  }
-};
+    this.editor.destroy()
+  },
+}
 </script>

functions/platformutils.js

@@ -0,0 +1,3 @@
+export function getPlatformSpecialKey() {
+  return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? "⌘" : "Ctrl"
+}

layouts/default.vue

@@ -642,6 +642,7 @@ import intializePwa from "../assets/js/pwa"
 import * as version from "../.postwoman/version.json"
 import { hasExtensionInstalled } from "../functions/strategies/ExtensionStrategy"
 import { hasChromeExtensionInstalled } from "../functions/strategies/ChromeStrategy"
+import { getPlatformSpecialKey } from "~/functions/platformutils"
 import firebase from "firebase/app"
 import { fb } from "../functions/fb"
 
@@ -653,9 +654,7 @@ export default {
   },
 
   methods: {
-    getSpecialKey() {
-      return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? "⌘" : "Ctrl"
-    },
+    getSpecialKey: getPlatformSpecialKey,
     linkActive(path) {
       return {
         "nuxt-link-exact-active": this.$route.path === path,

pages/graphql.vue

@@ -153,7 +153,10 @@
           <div class="flex-wrap gqlRunQuery">
             <label for="gqlQuery">{{ $t("query") }}</label>
             <div>
-              <button @click="runQuery()" v-tooltip.bottom="$t('run_query')">
+              <button
+                @click="runQuery()"
+                v-tooltip.bottom="`${$t('run_query')} (${getSpecialKey()}-Enter)`"
+              >
                 <i class="material-icons">play_arrow</i>
               </button>
               <button
@@ -169,6 +172,7 @@
           <QueryEditor
             ref="queryEditor"
             v-model="gqlQueryString"
+            :onRunGQLQuery="runQuery"
             :options="{
               maxLines: responseBodyMaxLines,
               minLines: '16',
@@ -327,6 +331,7 @@ import textareaAutoHeight from "../directives/textareaAutoHeight"
 import { commonHeaders } from "../functions/headers"
 import AceEditor from "../components/ace-editor"
 import QueryEditor from "../components/graphql/queryeditor"
+import { getPlatformSpecialKey } from "~/functions/platformutils"
 import { sendNetworkRequest } from "../functions/network"
 
 export default {
@@ -424,6 +429,7 @@ export default {
     },
   },
   methods: {
+    getSpecialKey: getPlatformSpecialKey,
     handleJumpToType(type) {
       const typesTab = document.getElementById("gqltypes-tab")
       typesTab.checked = true