feat: Active toggle for GraphQL headers

pages/graphql.vue

@@ -87,6 +87,36 @@
                   autofocus
                 />
               </li>
+              <div>
+                <li>
+                  <button
+                    class="icon"
+                    @click="
+                      $store.commit('setActiveGQLHeader', {
+                        index,
+                        value: header.hasOwnProperty('active') ? !header.active : false,
+                      })
+                    "
+                    v-tooltip.bottom="{
+                      content: header.hasOwnProperty('active')
+                        ? header.active
+                          ? $t('turn_off')
+                          : $t('turn_on')
+                        : $t('turn_off'),
+                    }"
+                  >
+                    <i class="material-icons">
+                      {{
+                        header.hasOwnProperty("active")
+                          ? header.active
+                            ? "check_box"
+                            : "check_box_outline_blank"
+                          : "check_box"
+                      }}
+                    </i>
+                  </button>
+                </li>
+              </div>
               <div>
                 <li>
                   <button
@@ -627,9 +657,11 @@ export default {
 
       try {
         let headers = {}
-        this.headers.forEach(({ key, value }) => {
-          headers[key] = value
-        })
+        this.headers
+          .filter((item) => (item.hasOwnProperty("active") ? item.active == true : true))
+          .forEach(({ key, value }) => {
+            headers[key] = value
+          })
 
         let variables = JSON.parse(this.variableString || "{}")
 
@@ -738,9 +770,11 @@ export default {
         })
 
         let headers = {}
-        this.headers.forEach(({ key, value }) => {
-          headers[key] = value
-        })
+        this.headers
+          .filter((item) => (item.hasOwnProperty("active") ? item.active == true : true))
+          .forEach(({ key, value }) => {
+            headers[key] = value
+          })
 
         const reqOptions = {
           method: "post",
@@ -806,9 +840,11 @@ export default {
         })
 
         let headers = {}
-        this.headers.forEach(({ key, value }) => {
-          headers[key] = value
-        })
+        this.headers
+          .filter((item) => (item.hasOwnProperty("active") ? item.active == true : true))
+          .forEach(({ key, value }) => {
+            headers[key] = value
+          })
 
         const reqOptions = {
           method: "post",

store/mutations.js

@@ -1,4 +1,4 @@
-import Vue from "vue";
+import Vue from "vue"
 
 export default {
   setState({ request }, { attribute, value }) {
@@ -19,6 +19,14 @@ export default {
     gql.headers.push(object)
   },
 
+  setActiveGQLHeader({ gql }, { index, value }) {
+    if (!gql.headers[index].hasOwnProperty("active")) {
+      Vue.set(gql.headers[index], "active", value)
+    } else {
+      gql.headers[index].active = value
+    }
+  },
+
   removeGQLHeader({ gql }, index) {
     gql.headers.splice(index, 1)
   },