From 122782f244d4259380d86cf557c001d98bfba672 Mon Sep 17 00:00:00 2001
From: Andrew Bastin Kalloor Biju <akalloor@lakeheadu.ca>
Date: Mon, 25 Nov 2019 19:19:21 +0000
Subject: [PATCH 1/3] Added headers field to state and added mutations to
 handle header list updates

---
 store/mutations.js | 16 ++++++++++++++++
 store/state.js     |  3 ++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/store/mutations.js b/store/mutations.js
index 1d3339c16..00e9590ee 100644
--- a/store/mutations.js
+++ b/store/mutations.js
@@ -7,6 +7,22 @@ export default {
     state.gql[object.attribute] = object.value;
   },
 
+  addGQLHeader(state, object) {
+    state.gql.headers.push(object);
+  },
+
+  removeGQLHeader(state, index) {
+    state.gql.headers.splice(index, 1);
+  },
+
+  setGQLHeaderKey(state, object) {
+    state.gql.headers[object.index].key = object.value;
+  },
+
+  setGQLHeaderValue(state, object) {
+    state.gql.headers[object.index].value = object.value;
+  },
+
   addHeaders(state, value) {
     state.request.headers.push(value);
   },
diff --git a/store/state.js b/store/state.js
index a4f7df544..99cc7900b 100644
--- a/store/state.js
+++ b/store/state.js
@@ -18,6 +18,7 @@ export default () => ({
     contentType: '',
   },
   gql: {
-    url: 'https://rickandmortyapi.com/graphql'
+    url: 'https://rickandmortyapi.com/graphql',
+    headers: []
   }
 });

From 146df237f240496e42b070b882691dfb60fe2127 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Mon, 25 Nov 2019 22:48:36 -0500
Subject: [PATCH 2/3] Added Headers for GraphQL requests

---
 pages/graphql.vue | 109 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 109 insertions(+)

diff --git a/pages/graphql.vue b/pages/graphql.vue
index 2add7ddce..70e7768a7 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -25,6 +25,82 @@
           </ul>
         </pw-section>
 
+        <pw-section class="orange" label="Headers" ref="headers">
+          <ul>
+            <li>
+              <div class="flex-wrap">
+                <label for="headerList">Header List</label>
+                <div>
+                  <button
+                    class="icon"
+                    @click="headers = []"
+                    v-tooltip.bottom="'Clear'"
+                  >
+                    <i class="material-icons">clear_all</i>
+                  </button>
+                </div>
+              </div>
+              <textarea
+                id="headerList"
+                readonly
+                v-textarea-auto-height="headerString"
+                v-model="headerString"
+                placeholder="(add at least one header)"
+                rows="1"
+              ></textarea>
+            </li>
+          </ul>
+          <ul v-for="(header, index) in headers" :key="index">
+            <li>
+              <input
+                :placeholder="'header ' + (index + 1)"
+                :name="'header' + index"
+                :value="header.key"
+                @change="
+                  $store.commit('setGQLHeaderKey', {
+                    index,
+                    value: $event.target.value 
+                  })
+                "
+                autofocus
+              />
+            </li>
+            <li>
+              <input
+                :placeholder="'value ' + (index + 1)"
+                :name="'value' + index"
+                :value="header.value"
+                @change="
+                  $store.commit('setGQLHeaderValue', {
+                    index,
+                    value: $event.target.value
+                  })
+                "
+                autofocus
+              />
+            </li>
+            <div>
+              <li>
+                <button
+                  class="icon"
+                  @click="removeRequestHeader(index)"
+                  id="header"
+                >
+                <i class="material-icons">delete</i>
+                </button>
+              </li>
+            </div>
+          </ul>
+          <ul>
+            <li>
+              <button class="icon" @click="addRequestHeader">
+                <i class="material-icons">add</i>
+                <span>Add New</span>
+              </button>
+            </li>
+          </ul>
+        </pw-section>
+
         <pw-section class="green" label="Schema" ref="schema">
           <div class="flex-wrap">
             <label>response</label>
@@ -156,9 +232,13 @@
 <script>
 import axios from "axios";
 import * as gql from "graphql";
+import textareaAutoHeight from '../directives/textareaAutoHeight';
 import AceEditor from "../components/ace-editor";
 
 export default {
+  directives: {
+    textareaAutoHeight
+  },
   components: {
     "pw-section": () => import("../components/section"),
     "gql-field": () => import("../components/graphql/field"),
@@ -187,6 +267,21 @@ export default {
       set(value) {
         this.$store.commit("setGQLState", { value, attribute: "url" });
       }
+    },
+    headers: {
+      get() {
+        return this.$store.state.gql.headers;
+      },
+      set(value) {
+        this.$store.commit("setGQLState", { value, attribute: "headers" });
+      }
+    },
+    headerString() {
+      const result = this.headers
+        .filter(({ key }) => !!key)
+        .map(({ key, value }) => `${key}: ${value}`)
+        .join(",\n");
+      return result === "" ? "" : `${result}`;
     }
   },
   methods: {
@@ -224,6 +319,7 @@ export default {
           method: "post",
           url: this.url,
           headers: {
+            ...this.headers,
             "content-type": "application/json"
           },
           data: query
@@ -343,6 +439,19 @@ export default {
         window.URL.revokeObjectURL(url);
         this.$refs.downloadResponse.innerHTML = this.downloadButton;
       }, 1000);
+    },
+    addRequestHeader(index) {
+      this.$store.commit("addGQLHeader", {
+        key: "",
+        value: ""
+      });
+      return false;
+    },
+    removeRequestHeader(index) {
+      this.$store.commit("removeGQLHeader", index);
+      this.$toast.error("Deleted", {
+        icon: "delete"
+      });
     }
   }
 };

From 5f79ca2872a1063257d1785ff537b0ac6539dab3 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Mon, 25 Nov 2019 23:42:41 -0500
Subject: [PATCH 3/3] Fixed header inclusion mistake

---
 pages/graphql.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/pages/graphql.vue b/pages/graphql.vue
index 70e7768a7..0de838f2b 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -315,16 +315,23 @@ export default {
           query: gql.getIntrospectionQuery()
         });
 
+        let headers = {};
+        this.headers.forEach((header) => {
+          headers[header.key] = header.value;
+        });
+
         const reqOptions = {
           method: "post",
           url: this.url,
           headers: {
-            ...this.headers,
+            ...headers,
             "content-type": "application/json"
           },
           data: query
         }
 
+        console.log(reqOptions);
+
         const reqConfig = this.$store.state.postwoman.settings.PROXY_ENABLED
           ? {
             method: "post",