btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

Save collapsed sections to state

Browse Source 
When you refresh or navigate to a new page and back, your collapsed sections will be as you set them.
This commit is contained in:
Dmitry Yankowski
2020-02-24 23:34:06 -05:00
parent 403254a983
commit a3d6573d93
4 changed files with 248 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
components/section.vue
View File

@@ -6,10 +6,13 @@
<legend @click.prevent="collapse"> <legend @click.prevent="collapse">
<span>{{ label }}</span> <span>{{ label }}</span>
<i class="material-icons"> <i class="material-icons">
{{ isCollapsed ? "expand_more" : "expand_less" }} {{ isCollapsed(label) ? "expand_more" : "expand_less" }}
</i> </i>
</legend> </legend>
<div class="collapsible" :class="{ hidden: collapsed }"> <div
class="collapsible"
:class="{ hidden: isCollapsed(label.toLowerCase()) }"
>
<slot /> <slot />
</div> </div>
</fieldset> </fieldset>
@@ -26,13 +29,10 @@ export default {
computed: { computed: {
frameColorsEnabled() { frameColorsEnabled() {
return this.$store.state.postwoman.settings.FRAME_COLORS_ENABLED || false; return this.$store.state.postwoman.settings.FRAME_COLORS_ENABLED || false;
}
}, },
sectionString() {
data() { return `${this.$route.path}/${this.label}`;
return { }
isCollapsed: false
};
}, },
props: { props: {
@@ -49,7 +49,15 @@ export default {
collapse({ target }) { collapse({ target }) {
const parent = target.parentNode.parentNode; const parent = target.parentNode.parentNode;
parent.querySelector(".collapsible").classList.toggle("hidden"); parent.querySelector(".collapsible").classList.toggle("hidden");
this.isCollapsed = !this.isCollapsed; // Save collapsed section to local state
this.$store.commit("setCollapsedSection", this.sectionString);
},
isCollapsed(label) {
return (
this.$store.state.theme.collapsedSections.includes(
this.sectionString
) || false
);
} }
} }
}; };

441
pages/graphql.vue
View File

@@ -6,12 +6,7 @@
<ul> <ul>
<li> <li>
<label for="url">{{ $t("url") }}</label> <label for="url">{{ $t("url") }}</label>
<input <input id="url" type="url" v-model="url" @keyup.enter="getSchema()" />
id="url"
type="url"
v-model="url"
@keyup.enter="getSchema()"
/>
</li> </li>
<div> <div>
<li> <li>
@@ -31,11 +26,7 @@
<div class="flex-wrap"> <div class="flex-wrap">
<label for="headerList">{{ $t("header_list") }}</label> <label for="headerList">{{ $t("header_list") }}</label>
<div> <div>
<button <button class="icon" @click="headers = []" v-tooltip.bottom="$t('clear')">
class="icon"
@click="headers = []"
v-tooltip.bottom="$t('clear')"
>
<i class="material-icons">clear_all</i> <i class="material-icons">clear_all</i>
</button> </button>
</div> </div>
@@ -60,7 +51,7 @@
@input=" @input="
$store.commit('setGQLHeaderKey', { $store.commit('setGQLHeaderKey', {
index, index,
value: $event value: $event,
}) })
" "
autofocus autofocus
@@ -74,7 +65,7 @@
@change=" @change="
$store.commit('setGQLHeaderValue', { $store.commit('setGQLHeaderValue', {
index, index,
value: $event.target.value value: $event.target.value,
}) })
" "
autofocus autofocus
@@ -112,9 +103,7 @@
@click="ToggleExpandResponse" @click="ToggleExpandResponse"
ref="ToggleExpandResponse" ref="ToggleExpandResponse"
v-tooltip="{ v-tooltip="{
content: !expandResponse content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
? $t('expand_response')
: $t('collapse_response')
}" }"
> >
<i class="material-icons"> <i class="material-icons">
@@ -149,20 +138,16 @@
autoScrollEditorIntoView: true, autoScrollEditorIntoView: true,
readOnly: true, readOnly: true,
showPrintMargin: false, showPrintMargin: false,
useWorker: false useWorker: false,
}" }"
/> />
</pw-section> </pw-section>
<pw-section class="cyan" :label="$t('query')" ref="query"> <pw-section class="cyan" :label="$t('query')" ref="query">
<div class="flex-wrap"> <div class="flex-wrap gqlRunQuery">
<label for="gqlQuery">{{ $t("query") }}</label> <label for="gqlQuery">{{ $t("query") }}</label>
<div> <div>
<button <button @click="runQuery()" v-tooltip.bottom="$t('run_query')">
class="icon"
@click="runQuery()"
v-tooltip.bottom="$t('run_query')"
>
<i class="material-icons">play_arrow</i> <i class="material-icons">play_arrow</i>
</button> </button>
<button <button
@@ -184,7 +169,7 @@
fontSize: '16px', fontSize: '16px',
autoScrollEditorIntoView: true, autoScrollEditorIntoView: true,
showPrintMargin: false, showPrintMargin: false,
useWorker: false useWorker: false,
}" }"
/> />
</pw-section> </pw-section>
@@ -199,7 +184,7 @@
fontSize: '16px', fontSize: '16px',
autoScrollEditorIntoView: true, autoScrollEditorIntoView: true,
showPrintMargin: false, showPrintMargin: false,
useWorker: false useWorker: false,
}" }"
/> />
</pw-section> </pw-section>
@@ -228,7 +213,7 @@
autoScrollEditorIntoView: true, autoScrollEditorIntoView: true,
readOnly: true, readOnly: true,
showPrintMargin: false, showPrintMargin: false,
useWorker: false useWorker: false,
}" }"
/> />
</pw-section> </pw-section>
@@ -248,10 +233,7 @@
</label> </label>
<div v-if="queryFields.length > 0" class="tab"> <div v-if="queryFields.length > 0" class="tab">
<div v-for="field in queryFields" :key="field.name"> <div v-for="field in queryFields" :key="field.name">
<gql-field <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
:gqlField="field"
:jumpTypeCallback="handleJumpToType"
/>
</div> </div>
</div> </div>
@@ -267,10 +249,7 @@
</label> </label>
<div v-if="mutationFields.length > 0" class="tab"> <div v-if="mutationFields.length > 0" class="tab">
<div v-for="field in mutationFields" :key="field.name"> <div v-for="field in mutationFields" :key="field.name">
<gql-field <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
:gqlField="field"
:jumpTypeCallback="handleJumpToType"
/>
</div> </div>
</div> </div>
@@ -286,10 +265,7 @@
</label> </label>
<div v-if="subscriptionFields.length > 0" class="tab"> <div v-if="subscriptionFields.length > 0" class="tab">
<div v-for="field in subscriptionFields" :key="field.name"> <div v-for="field in subscriptionFields" :key="field.name">
<gql-field <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
:gqlField="field"
:jumpTypeCallback="handleJumpToType"
/>
</div> </div>
</div> </div>
@@ -304,15 +280,8 @@
{{ $t("types") }} {{ $t("types") }}
</label> </label>
<div v-if="gqlTypes.length > 0" class="tab"> <div v-if="gqlTypes.length > 0" class="tab">
<div <div v-for="type in gqlTypes" :key="type.name" :id="`type_${type.name}`">
v-for="type in gqlTypes" <gql-type :gqlType="type" :jumpTypeCallback="handleJumpToType" />
:key="type.name"
:id="`type_${type.name}`"
>
<gql-type
:gqlType="type"
:jumpTypeCallback="handleJumpToType"
/>
</div> </div>
</div> </div>
</section> </section>
@@ -339,20 +308,23 @@
max-height: calc(100vh - 186px); max-height: calc(100vh - 186px);
overflow: auto; overflow: auto;
} }
.gqlRunQuery {
margin-bottom: 12px;
}
</style> </style>
<script> <script>
import axios from "axios"; import axios from "axios"
import * as gql from "graphql"; import * as gql from "graphql"
import textareaAutoHeight from "../directives/textareaAutoHeight"; import textareaAutoHeight from "../directives/textareaAutoHeight"
import { commonHeaders } from "../functions/headers"; import { commonHeaders } from "../functions/headers"
import AceEditor from "../components/ace-editor"; import AceEditor from "../components/ace-editor"
import QueryEditor from "../components/graphql/queryeditor"; import QueryEditor from "../components/graphql/queryeditor"
import { sendNetworkRequest } from "../functions/network"; import { sendNetworkRequest } from "../functions/network"
export default { export default {
directives: { directives: {
textareaAutoHeight textareaAutoHeight,
}, },
components: { components: {
"pw-section": () => import("../components/section"), "pw-section": () => import("../components/section"),
@@ -360,7 +332,7 @@ export default {
"gql-type": () => import("../components/graphql/type"), "gql-type": () => import("../components/graphql/type"),
autocomplete: () => import("../components/autocomplete"), autocomplete: () => import("../components/autocomplete"),
Editor: AceEditor, Editor: AceEditor,
QueryEditor: QueryEditor QueryEditor: QueryEditor,
}, },
data() { data() {
return { return {
@@ -373,359 +345,338 @@ export default {
downloadButton: '<i class="material-icons">get_app</i>', downloadButton: '<i class="material-icons">get_app</i>',
doneButton: '<i class="material-icons">done</i>', doneButton: '<i class="material-icons">done</i>',
expandResponse: false, expandResponse: false,
responseBodyMaxLines: 16 responseBodyMaxLines: 16,
}; }
}, },
computed: { computed: {
url: { url: {
get() { get() {
return this.$store.state.gql.url; return this.$store.state.gql.url
}, },
set(value) { set(value) {
this.$store.commit("setGQLState", { value, attribute: "url" }); this.$store.commit("setGQLState", { value, attribute: "url" })
} },
}, },
headers: { headers: {
get() { get() {
return this.$store.state.gql.headers; return this.$store.state.gql.headers
}, },
set(value) { set(value) {
this.$store.commit("setGQLState", { value, attribute: "headers" }); this.$store.commit("setGQLState", { value, attribute: "headers" })
} },
}, },
gqlQueryString: { gqlQueryString: {
get() { get() {
return this.$store.state.gql.query; return this.$store.state.gql.query
}, },
set(value) { set(value) {
this.$store.commit("setGQLState", { value, attribute: "query" }); this.$store.commit("setGQLState", { value, attribute: "query" })
} },
}, },
response: { response: {
get() { get() {
return this.$store.state.gql.response; return this.$store.state.gql.response
}, },
set(value) { set(value) {
this.$store.commit("setGQLState", { value, attribute: "response" }); this.$store.commit("setGQLState", { value, attribute: "response" })
} },
}, },
schema: { schema: {
get() { get() {
return this.$store.state.gql.schema; return this.$store.state.gql.schema
}, },
set(value) { set(value) {
this.$store.commit("setGQLState", { value, attribute: "schema" }); this.$store.commit("setGQLState", { value, attribute: "schema" })
} },
}, },
variableString: { variableString: {
get() { get() {
return this.$store.state.gql.variablesJSONString; return this.$store.state.gql.variablesJSONString
}, },
set(value) { set(value) {
this.$store.commit("setGQLState", { this.$store.commit("setGQLState", {
value, value,
attribute: "variablesJSONString" attribute: "variablesJSONString",
}); })
} },
}, },
headerString() { headerString() {
const result = this.headers const result = this.headers
.filter(({ key }) => !!key) .filter(({ key }) => !!key)
.map(({ key, value }) => `${key}: ${value}`) .map(({ key, value }) => `${key}: ${value}`)
.join(",\n"); .join(",\n")
return result === "" ? "" : `${result}`; return result === "" ? "" : `${result}`
} },
}, },
methods: { methods: {
handleJumpToType(type) { handleJumpToType(type) {
const typesTab = document.getElementById("gqltypes-tab"); const typesTab = document.getElementById("gqltypes-tab")
typesTab.checked = true; typesTab.checked = true
const rootTypeName = this.resolveRootType(type).name; const rootTypeName = this.resolveRootType(type).name
const target = document.getElementById(`type_${rootTypeName}`); const target = document.getElementById(`type_${rootTypeName}`)
if (target && this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED) { if (target && this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED) {
target.scrollIntoView({ target.scrollIntoView({
behavior: "smooth" behavior: "smooth",
}); })
} }
}, },
resolveRootType(type) { resolveRootType(type) {
let t = type; let t = type
while (t.ofType != null) t = t.ofType; while (t.ofType != null) t = t.ofType
return t; return t
}, },
copySchema() { copySchema() {
this.$refs.copySchemaCode.innerHTML = this.doneButton; this.$refs.copySchemaCode.innerHTML = this.doneButton
const aux = document.createElement("textarea"); const aux = document.createElement("textarea")
aux.innerText = this.schema; aux.innerText = this.schema
document.body.appendChild(aux); document.body.appendChild(aux)
aux.select(); aux.select()
document.execCommand("copy"); document.execCommand("copy")
document.body.removeChild(aux); document.body.removeChild(aux)
this.$toast.success(this.$t("copied_to_clipboard"), { this.$toast.success(this.$t("copied_to_clipboard"), {
icon: "done" icon: "done",
}); })
setTimeout( setTimeout(() => (this.$refs.copySchemaCode.innerHTML = this.copyButton), 1000)
() => (this.$refs.copySchemaCode.innerHTML = this.copyButton),
1000
);
}, },
copyQuery() { copyQuery() {
this.$refs.copyQueryButton.innerHTML = this.doneButton; this.$refs.copyQueryButton.innerHTML = this.doneButton
const aux = document.createElement("textarea"); const aux = document.createElement("textarea")
aux.innerText = this.gqlQueryString; aux.innerText = this.gqlQueryString
document.body.appendChild(aux); document.body.appendChild(aux)
aux.select(); aux.select()
document.execCommand("copy"); document.execCommand("copy")
document.body.removeChild(aux); document.body.removeChild(aux)
this.$toast.success(this.$t("copied_to_clipboard"), { this.$toast.success(this.$t("copied_to_clipboard"), {
icon: "done" icon: "done",
}); })
setTimeout( setTimeout(() => (this.$refs.copyQueryButton.innerHTML = this.copyButton), 1000)
() => (this.$refs.copyQueryButton.innerHTML = this.copyButton),
1000
);
}, },
copyResponse() { copyResponse() {
this.$refs.copyResponseButton.innerHTML = this.doneButton; this.$refs.copyResponseButton.innerHTML = this.doneButton
const aux = document.createElement("textarea"); const aux = document.createElement("textarea")
aux.innerText = this.response; aux.innerText = this.response
document.body.appendChild(aux); document.body.appendChild(aux)
aux.select(); aux.select()
document.execCommand("copy"); document.execCommand("copy")
document.body.removeChild(aux); document.body.removeChild(aux)
this.$toast.success(this.$t("copied_to_clipboard"), { this.$toast.success(this.$t("copied_to_clipboard"), {
icon: "done" icon: "done",
}); })
setTimeout( setTimeout(() => (this.$refs.copyResponseButton.innerHTML = this.copyButton), 1000)
() => (this.$refs.copyResponseButton.innerHTML = this.copyButton),
1000
);
}, },
async runQuery() { async runQuery() {
const startTime = Date.now(); const startTime = Date.now()
this.$nuxt.$loading.start(); this.$nuxt.$loading.start()
this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED && this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED && this.scrollInto("response")
this.scrollInto("response");
try { try {
let headers = {}; let headers = {}
this.headers.forEach(header => { this.headers.forEach(header => {
headers[header.key] = header.value; headers[header.key] = header.value
}); })
let variables = JSON.parse(this.variableString); let variables = JSON.parse(this.variableString)
const gqlQueryString = this.gqlQueryString; const gqlQueryString = this.gqlQueryString
const reqOptions = { const reqOptions = {
method: "post", method: "post",
url: this.url, url: this.url,
headers: { headers: {
...headers, ...headers,
"content-type": "application/json" "content-type": "application/json",
}, },
data: JSON.stringify({ query: gqlQueryString, variables }) data: JSON.stringify({ query: gqlQueryString, variables }),
}; }
const data = await sendNetworkRequest(reqOptions, this.$store); const data = await sendNetworkRequest(reqOptions, this.$store)
this.response = JSON.stringify(data.data, null, 2); this.response = JSON.stringify(data.data, null, 2)
this.$nuxt.$loading.finish(); this.$nuxt.$loading.finish()
const duration = Date.now() - startTime; const duration = Date.now() - startTime
this.$toast.info(this.$t("finished_in", { duration }), { this.$toast.info(this.$t("finished_in", { duration }), {
icon: "done" icon: "done",
}); })
} catch (error) { } catch (error) {
this.$nuxt.$loading.finish(); this.$nuxt.$loading.finish()
this.$toast.error(`${error} ${this.$t("f12_details")}`, { this.$toast.error(`${error} ${this.$t("f12_details")}`, {
icon: "error" icon: "error",
}); })
console.log("Error", error); console.log("Error", error)
} }
}, },
async getSchema() { async getSchema() {
const startTime = Date.now(); const startTime = Date.now()
this.schema = this.$t("loading"); this.schema = this.$t("loading")
this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED && this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED && this.scrollInto("schema")
this.scrollInto("schema");
// Start showing the loading bar as soon as possible. // Start showing the loading bar as soon as possible.
// The nuxt axios module will hide it when the request is made. // The nuxt axios module will hide it when the request is made.
this.$nuxt.$loading.start(); this.$nuxt.$loading.start()
try { try {
const query = JSON.stringify({ const query = JSON.stringify({
query: gql.getIntrospectionQuery() query: gql.getIntrospectionQuery(),
}); })
let headers = {}; let headers = {}
this.headers.forEach(header => { this.headers.forEach(header => {
headers[header.key] = header.value; headers[header.key] = header.value
}); })
const reqOptions = { const reqOptions = {
method: "post", method: "post",
url: this.url, url: this.url,
headers: { headers: {
...headers, ...headers,
"content-type": "application/json" "content-type": "application/json",
}, },
data: query data: query,
}; }
const reqConfig = this.$store.state.postwoman.settings.PROXY_ENABLED const reqConfig = this.$store.state.postwoman.settings.PROXY_ENABLED
? { ? {
method: "post", method: "post",
url: url:
this.$store.state.postwoman.settings.PROXY_URL || this.$store.state.postwoman.settings.PROXY_URL || `https://postwoman.apollotv.xyz/`,
`https://postwoman.apollotv.xyz/`, data: reqOptions,
data: reqOptions
} }
: reqOptions; : reqOptions
const res = await axios(reqConfig); const res = await axios(reqConfig)
const data = this.$store.state.postwoman.settings.PROXY_ENABLED const data = this.$store.state.postwoman.settings.PROXY_ENABLED ? res.data : res
? res.data
: res;
const schema = gql.buildClientSchema(data.data.data); const schema = gql.buildClientSchema(data.data.data)
this.schema = gql.printSchema(schema, { this.schema = gql.printSchema(schema, {
commentDescriptions: true commentDescriptions: true,
}); })
console.log( console.log(
gql.printSchema(schema, { gql.printSchema(schema, {
commentDescriptions: true commentDescriptions: true,
}) })
); )
if (schema.getQueryType()) { if (schema.getQueryType()) {
const fields = schema.getQueryType().getFields(); const fields = schema.getQueryType().getFields()
const qFields = []; const qFields = []
for (const field in fields) { for (const field in fields) {
qFields.push(fields[field]); qFields.push(fields[field])
} }
this.queryFields = qFields; this.queryFields = qFields
} }
if (schema.getMutationType()) { if (schema.getMutationType()) {
const fields = schema.getMutationType().getFields(); const fields = schema.getMutationType().getFields()
const mFields = []; const mFields = []
for (const field in fields) { for (const field in fields) {
mFields.push(fields[field]); mFields.push(fields[field])
} }
this.mutationFields = mFields; this.mutationFields = mFields
} }
if (schema.getSubscriptionType()) { if (schema.getSubscriptionType()) {
const fields = schema.getSubscriptionType().getFields(); const fields = schema.getSubscriptionType().getFields()
const sFields = []; const sFields = []
for (const field in fields) { for (const field in fields) {
sFields.push(fields[field]); sFields.push(fields[field])
} }
this.subscriptionFields = sFields; this.subscriptionFields = sFields
} }
const typeMap = schema.getTypeMap(); const typeMap = schema.getTypeMap()
const types = []; const types = []
const queryTypeName = schema.getQueryType() const queryTypeName = schema.getQueryType() ? schema.getQueryType().name : ""
? schema.getQueryType().name const mutationTypeName = schema.getMutationType() ? schema.getMutationType().name : ""
: "";
const mutationTypeName = schema.getMutationType()
? schema.getMutationType().name
: "";
const subscriptionTypeName = schema.getSubscriptionType() const subscriptionTypeName = schema.getSubscriptionType()
? schema.getSubscriptionType().name ? schema.getSubscriptionType().name
: ""; : ""
for (const type in typeMap) { for (const type in typeMap) {
if ( if (
!typeMap[type].name.startsWith("__") && !typeMap[type].name.startsWith("__") &&
![queryTypeName, mutationTypeName, subscriptionTypeName].includes( ![queryTypeName, mutationTypeName, subscriptionTypeName].includes(typeMap[type].name) &&
typeMap[type].name
) &&
typeMap[type] instanceof gql.GraphQLObjectType typeMap[type] instanceof gql.GraphQLObjectType
) { ) {
types.push(typeMap[type]); types.push(typeMap[type])
} }
} }
this.gqlTypes = types; this.gqlTypes = types
this.$refs.queryEditor.setValidationSchema(schema); this.$refs.queryEditor.setValidationSchema(schema)
this.$nuxt.$loading.finish(); this.$nuxt.$loading.finish()
const duration = Date.now() - startTime; const duration = Date.now() - startTime
this.$toast.info(this.$t("finished_in", { duration }), { this.$toast.info(this.$t("finished_in", { duration }), {
icon: "done" icon: "done",
}); })
} catch (error) { } catch (error) {
this.$nuxt.$loading.finish(); this.$nuxt.$loading.finish()
this.schema = `${error}. ${this.$t("check_console_details")}`; this.schema = `${error}. ${this.$t("check_console_details")}`
this.$toast.error(`${error} ${this.$t("f12_details")}`, { this.$toast.error(`${error} ${this.$t("f12_details")}`, {
icon: "error" icon: "error",
}); })
console.log("Error", error); console.log("Error", error)
} }
}, },
ToggleExpandResponse() { ToggleExpandResponse() {
this.expandResponse = !this.expandResponse; this.expandResponse = !this.expandResponse
this.responseBodyMaxLines = this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
this.responseBodyMaxLines == Infinity ? 16 : Infinity;
}, },
downloadResponse() { downloadResponse() {
const dataToWrite = JSON.stringify(this.schema, null, 2); const dataToWrite = JSON.stringify(this.schema, null, 2)
const file = new Blob([dataToWrite], { type: "application/json" }); const file = new Blob([dataToWrite], { type: "application/json" })
const a = document.createElement("a"); const a = document.createElement("a")
const url = URL.createObjectURL(file); const url = URL.createObjectURL(file)
a.href = url; a.href = url
a.download = `${this.url} on ${Date()}.graphql`.replace(/\./g, "[dot]"); a.download = `${this.url} on ${Date()}.graphql`.replace(/\./g, "[dot]")
document.body.appendChild(a); document.body.appendChild(a)
a.click(); a.click()
this.$refs.downloadResponse.innerHTML = this.doneButton; this.$refs.downloadResponse.innerHTML = this.doneButton
this.$toast.success(this.$t("download_started"), { this.$toast.success(this.$t("download_started"), {
icon: "done" icon: "done",
}); })
setTimeout(() => { setTimeout(() => {
document.body.removeChild(a); document.body.removeChild(a)
window.URL.revokeObjectURL(url); window.URL.revokeObjectURL(url)
this.$refs.downloadResponse.innerHTML = this.downloadButton; this.$refs.downloadResponse.innerHTML = this.downloadButton
}, 1000); }, 1000)
}, },
addRequestHeader(index) { addRequestHeader(index) {
this.$store.commit("addGQLHeader", { this.$store.commit("addGQLHeader", {
key: "", key: "",
value: "" value: "",
}); })
return false; return false
}, },
removeRequestHeader(index) { removeRequestHeader(index) {
// .slice() is used so we get a separate array, rather than just a reference // .slice() is used so we get a separate array, rather than just a reference
const oldHeaders = this.headers.slice(); const oldHeaders = this.headers.slice()
this.$store.commit("removeGQLHeader", index); this.$store.commit("removeGQLHeader", index)
this.$toast.error(this.$t("deleted"), { this.$toast.error(this.$t("deleted"), {
icon: "delete", icon: "delete",
action: { action: {
text: this.$t("undo"), text: this.$t("undo"),
duration: 4000, duration: 4000,
onClick: (e, toastObject) => { onClick: (e, toastObject) => {
this.headers = oldHeaders; this.headers = oldHeaders
toastObject.remove(); toastObject.remove()
} },
} },
}); })
// console.log(oldHeaders); // console.log(oldHeaders);
}, },
scrollInto(view) { scrollInto(view) {
this.$refs[view].$el.scrollIntoView({ this.$refs[view].$el.scrollIntoView({
behavior: "smooth" behavior: "smooth",
}); })
} },
} },
}; }
</script> </script>

6
store/mutations.js
View File

@@ -7,6 +7,12 @@ export default {
gql[attribute] = value; gql[attribute] = value;
}, },
setCollapsedSection({ theme }, value) {
theme.collapsedSections.includes(value)
? (theme.collapsedSections = theme.collapsedSections.filter(section => section !== value))
: theme.collapsedSections.push(value)
},
addGQLHeader({ gql }, object) { addGQLHeader({ gql }, object) {
gql.headers.push(object); gql.headers.push(object);
}, },

53
store/state.js
View File

@@ -1,40 +1,43 @@
export default () => ({ export default () => ({
request: { request: {
method: 'GET', method: "GET",
url: 'https://httpbin.org', url: "https://httpbin.org",
path: '/get', path: "/get",
label: '', label: "",
auth: 'None', auth: "None",
httpUser: '', httpUser: "",
httpPassword: '', httpPassword: "",
passwordFieldType: 'password', passwordFieldType: "password",
bearerToken: '', bearerToken: "",
headers: [], headers: [],
params: [], params: [],
bodyParams: [], bodyParams: [],
rawParams: '', rawParams: "",
rawInput: false, rawInput: false,
requestType: '', requestType: "",
contentType: '', contentType: "",
}, },
gql: { gql: {
url: 'https://rickandmortyapi.com/graphql', url: "https://rickandmortyapi.com/graphql",
headers: [], headers: [],
schema: '', schema: "",
variablesJSONString: '{}', variablesJSONString: "{}",
query: '', query: "",
response: '' response: "",
},
theme: {
collapsedSections: [],
}, },
oauth2: { oauth2: {
tokens: [], tokens: [],
tokenReqs: [], tokenReqs: [],
tokenReqSelect: '', tokenReqSelect: "",
tokenReqName: '', tokenReqName: "",
accessTokenName: '', accessTokenName: "",
oidcDiscoveryUrl: '', oidcDiscoveryUrl: "",
authUrl: '', authUrl: "",
accessTokenUrl: '', accessTokenUrl: "",
clientId: '', clientId: "",
scope: '', scope: "",
}, },
}) })