Merge branch 'master' into feature/fast-url

2020-02-26 13:33:26 +05:30
parent 54207e3f33 02c4d40f94
commit 7148738112
13 changed files with 286 additions and 219 deletions
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -6,7 +6,13 @@
          <ul>
            <li>
              <label for="url">{{ $t("url") }}</label>
-              <input id="url" type="url" v-model="url" @keyup.enter="getSchema()" />
+              <input
+                id="url"
+                type="url"
+                v-model="url"
+                spellcheck="false"
+                @keyup.enter="getSchema()"
+              />
            </li>
            <div>
              <li>
@@ -129,7 +135,7 @@
            </div>
          </div>
          <Editor
-            :value="schemaString"
+            :value="schema"
            :lang="'graphqlschema'"
            :options="{
              maxLines: responseBodyMaxLines,
@@ -144,10 +150,10 @@
        </pw-section>

        <pw-section class="cyan" :label="$t('query')" ref="query">
-          <div class="flex-wrap">
+          <div class="flex-wrap gqlRunQuery">
            <label for="gqlQuery">{{ $t("query") }}</label>
            <div>
-              <button class="icon" @click="runQuery()" v-tooltip.bottom="$t('run_query')">
+              <button @click="runQuery()" v-tooltip.bottom="$t('run_query')">
                <i class="material-icons">play_arrow</i>
              </button>
              <button
@@ -204,8 +210,9 @@
            </div>
          </div>
          <Editor
-            :value="responseString"
+            :value="response"
            :lang="'json'"
+            :lint="false"
            :options="{
              maxLines: responseBodyMaxLines,
              minLines: '16',
@@ -308,6 +315,9 @@
  max-height: calc(100vh - 186px);
  overflow: auto;
 }
+.gqlRunQuery {
+  margin-bottom: 12px;
+}
 </style>

 <script>
@@ -333,18 +343,23 @@ export default {
  },
  data() {
    return {
-      schemaString: "",
      commonHeaders,
      queryFields: [],
      mutationFields: [],
      subscriptionFields: [],
      gqlTypes: [],
-      responseString: "",
      copyButton: '<i class="material-icons">file_copy</i>',
      downloadButton: '<i class="material-icons">get_app</i>',
      doneButton: '<i class="material-icons">done</i>',
      expandResponse: false,
      responseBodyMaxLines: 16,
+
+      settings: {
+        SCROLL_INTO_ENABLED:
+          typeof this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED !== "undefined"
+            ? this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED
+            : true,
+      },
    }
  },

@@ -373,6 +388,22 @@ export default {
        this.$store.commit("setGQLState", { value, attribute: "query" })
      },
    },
+    response: {
+      get() {
+        return this.$store.state.gql.response
+      },
+      set(value) {
+        this.$store.commit("setGQLState", { value, attribute: "response" })
+      },
+    },
+    schema: {
+      get() {
+        return this.$store.state.gql.schema
+      },
+      set(value) {
+        this.$store.commit("setGQLState", { value, attribute: "schema" })
+      },
+    },
    variableString: {
      get() {
        return this.$store.state.gql.variablesJSONString
@@ -400,7 +431,7 @@ export default {
      const rootTypeName = this.resolveRootType(type).name

      const target = document.getElementById(`type_${rootTypeName}`)
-      if (target && this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED) {
+      if (target && this.settings.SCROLL_INTO_ENABLED) {
        target.scrollIntoView({
          behavior: "smooth",
        })
@@ -414,7 +445,7 @@ export default {
    copySchema() {
      this.$refs.copySchemaCode.innerHTML = this.doneButton
      const aux = document.createElement("textarea")
-      aux.innerText = this.schemaString
+      aux.innerText = this.schema
      document.body.appendChild(aux)
      aux.select()
      document.execCommand("copy")
@@ -440,7 +471,7 @@ export default {
    copyResponse() {
      this.$refs.copyResponseButton.innerHTML = this.doneButton
      const aux = document.createElement("textarea")
-      aux.innerText = this.responseString
+      aux.innerText = this.response
      document.body.appendChild(aux)
      aux.select()
      document.execCommand("copy")
@@ -453,8 +484,12 @@ export default {
    async runQuery() {
      const startTime = Date.now()

+      // Start showing the loading bar as soon as possible.
+      // The nuxt axios module will hide it when the request is made.
      this.$nuxt.$loading.start()
-      this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED && this.scrollInto("response")
+
+      this.response = this.$t("loading")
+      if (this.settings.SCROLL_INTO_ENABLED) this.scrollInto("response")

      try {
        let headers = {}
@@ -477,8 +512,7 @@ export default {
        }

        const data = await sendNetworkRequest(reqOptions, this.$store)
-
-        this.responseString = JSON.stringify(data.data, null, 2)
+        this.response = JSON.stringify(data.data, null, 2)

        this.$nuxt.$loading.finish()
        const duration = Date.now() - startTime
@@ -486,6 +520,7 @@ export default {
          icon: "done",
        })
      } catch (error) {
+        this.response = `${error}. ${this.$t("check_console_details")}`
        this.$nuxt.$loading.finish()

        this.$toast.error(`${error} ${this.$t("f12_details")}`, {
@@ -496,13 +531,14 @@ export default {
    },
    async getSchema() {
      const startTime = Date.now()
-      this.schemaString = this.$t("loading")
-      this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED && this.scrollInto("schema")

      // Start showing the loading bar as soon as possible.
      // The nuxt axios module will hide it when the request is made.
      this.$nuxt.$loading.start()

+      this.schema = this.$t("loading")
+      if (this.settings.SCROLL_INTO_ENABLED) this.scrollInto("schema")
+
      try {
        const query = JSON.stringify({
          query: gql.getIntrospectionQuery(),
@@ -523,8 +559,6 @@ export default {
          data: query,
        }

-        // console.log(reqOptions);
-
        const reqConfig = this.$store.state.postwoman.settings.PROXY_ENABLED
          ? {
              method: "post",
@@ -537,9 +571,8 @@ export default {
        const res = await axios(reqConfig)

        const data = this.$store.state.postwoman.settings.PROXY_ENABLED ? res.data : res
-
        const schema = gql.buildClientSchema(data.data.data)
-        this.schemaString = gql.printSchema(schema, {
+        this.schema = gql.printSchema(schema, {
          commentDescriptions: true,
        })

@@ -597,7 +630,8 @@ export default {
        })
      } catch (error) {
        this.$nuxt.$loading.finish()
-        this.schemaString = `${error}. ${this.$t("check_console_details")}`
+
+        this.schema = `${error}. ${this.$t("check_console_details")}`
        this.$toast.error(`${error} ${this.$t("f12_details")}`, {
          icon: "error",
        })
@@ -609,7 +643,7 @@ export default {
      this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
    },
    downloadResponse() {
-      const dataToWrite = JSON.stringify(this.schemaString, null, 2)
+      const dataToWrite = JSON.stringify(this.schema, null, 2)
      const file = new Blob([dataToWrite], { type: "application/json" })
      const a = document.createElement("a")
      const url = URL.createObjectURL(file)
@@ -650,7 +684,6 @@ export default {
          },
        },
      })
-      // console.log(oldHeaders);
    },
    scrollInto(view) {
      this.$refs[view].$el.scrollIntoView({
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -185,6 +185,7 @@
                name="url"
                type="url"
                v-model="uri"
+                spellcheck="false"
              />
            </li>
            <div>
@@ -1424,6 +1425,13 @@ export default {
      files: [],
      filenames: "",
      navigatorShare: navigator.share,
+
+      settings: {
+        SCROLL_INTO_ENABLED:
+          typeof this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED !== "undefined"
+            ? this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED
+            : true,
+      },
    }
  },
  watch: {
@@ -1980,7 +1988,7 @@ export default {
      this.path = path
      this.showPreRequestScript = usesScripts
      this.preRequestScript = preRequestScript
-      this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED && this.scrollInto("request")
+      if (this.settings.SCROLL_INTO_ENABLED) this.scrollInto("request")
    },
    getVariablesFromPreRequestScript() {
      if (!this.preRequestScript) {
@@ -2015,7 +2023,7 @@ export default {
    },
    async sendRequest() {
      this.$toast.clear()
-      this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED && this.scrollInto("response")
+      if (this.settings.SCROLL_INTO_ENABLED) this.scrollInto("response")
      if (!this.isValidURL) {
        this.$toast.error(this.$t("url_invalid_format"), {
          icon: "error",
--- a/pages/realtime.vue
+++ b/pages/realtime.vue
@@ -11,6 +11,7 @@
              <input
                id="url"
                type="url"
+                spellcheck="false"
                :class="{ error: !urlValid }"
                v-model="url"
                @keyup.enter="urlValid ? toggleConnection() : null"