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 6b675d5def
commit 2d5b70ab85
4 changed files with 101 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
pages/graphql.vue
View File

@@ -144,10 +144,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
@@ -308,6 +308,9 @@
max-height: calc(100vh - 186px);
overflow: auto;
}
.gqlRunQuery {
margin-bottom: 12px;
}
</style>
<script>
@@ -373,19 +376,19 @@ export default {
},
response: {
get() {
return this.$store.state.gql.response;
return this.$store.state.gql.response
},
set(value) {
this.$store.commit("setGQLState", { value, attribute: "response" });
}
this.$store.commit("setGQLState", { value, attribute: "response" })
},
},
schema: {
get() {
return this.$store.state.gql.schema;
return this.$store.state.gql.schema
},
set(value) {
this.$store.commit("setGQLState", { value, attribute: "schema" });
}
this.$store.commit("setGQLState", { value, attribute: "schema" })
},
},
variableString: {
get() {
@@ -426,13 +429,13 @@ export default {
return t
},
copySchema() {
this.$refs.copySchemaCode.innerHTML = this.doneButton;
const aux = document.createElement("textarea");
aux.innerText = this.schema;
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
this.$refs.copySchemaCode.innerHTML = this.doneButton
const aux = document.createElement("textarea")
aux.innerText = this.schema
document.body.appendChild(aux)
aux.select()
document.execCommand("copy")
document.body.removeChild(aux)
this.$toast.success(this.$t("copied_to_clipboard"), {
icon: "done",
})
@@ -452,13 +455,13 @@ export default {
setTimeout(() => (this.$refs.copyQueryButton.innerHTML = this.copyButton), 1000)
},
copyResponse() {
this.$refs.copyResponseButton.innerHTML = this.doneButton;
const aux = document.createElement("textarea");
aux.innerText = this.response;
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
this.$refs.copyResponseButton.innerHTML = this.doneButton
const aux = document.createElement("textarea")
aux.innerText = this.response
document.body.appendChild(aux)
aux.select()
document.execCommand("copy")
document.body.removeChild(aux)
this.$toast.success(this.$t("copied_to_clipboard"), {
icon: "done",
})
@@ -492,7 +495,7 @@ export default {
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()
const duration = Date.now() - startTime
@@ -509,10 +512,9 @@ export default {
}
},
async getSchema() {
const startTime = Date.now();
this.schema = this.$t("loading");
this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED &&
this.scrollInto("schema");
const startTime = Date.now()
this.schema = 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.
@@ -551,15 +553,15 @@ export default {
const data = this.$store.state.postwoman.settings.PROXY_ENABLED ? res.data : res
const schema = gql.buildClientSchema(data.data.data);
const schema = gql.buildClientSchema(data.data.data)
this.schema = gql.printSchema(schema, {
commentDescriptions: true
});
commentDescriptions: true,
})
console.log(
gql.printSchema(schema, {
commentDescriptions: true
commentDescriptions: true,
})
);
)
if (schema.getQueryType()) {
const fields = schema.getQueryType().getFields()
@@ -614,8 +616,8 @@ export default {
icon: "done",
})
} catch (error) {
this.$nuxt.$loading.finish();
this.schema = `${error}. ${this.$t("check_console_details")}`;
this.$nuxt.$loading.finish()
this.schema = `${error}. ${this.$t("check_console_details")}`
this.$toast.error(`${error} ${this.$t("f12_details")}`, {
icon: "error",
})
@@ -627,15 +629,15 @@ export default {
this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
},
downloadResponse() {
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);
a.href = url;
a.download = `${this.url} on ${Date()}.graphql`.replace(/\./g, "[dot]");
document.body.appendChild(a);
a.click();
this.$refs.downloadResponse.innerHTML = this.doneButton;
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)
a.href = url
a.download = `${this.url} on ${Date()}.graphql`.replace(/\./g, "[dot]")
document.body.appendChild(a)
a.click()
this.$refs.downloadResponse.innerHTML = this.doneButton
this.$toast.success(this.$t("download_started"), {
icon: "done",
})