Save collapsed sections to state
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
@@ -3,10 +3,13 @@
|
||||
<legend @click.prevent="collapse">
|
||||
<span>{{ label }}</span>
|
||||
<i class="material-icons">
|
||||
{{ isCollapsed ? "expand_more" : "expand_less" }}
|
||||
{{ isCollapsed(label) ? "expand_more" : "expand_less" }}
|
||||
</i>
|
||||
</legend>
|
||||
<div class="collapsible" :class="{ hidden: collapsed }">
|
||||
<div
|
||||
class="collapsible"
|
||||
:class="{ hidden: isCollapsed(label.toLowerCase()) }"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</fieldset>
|
||||
@@ -22,13 +25,10 @@ fieldset.no-colored-frames legend {
|
||||
export default {
|
||||
computed: {
|
||||
frameColorsEnabled() {
|
||||
return this.$store.state.postwoman.settings.FRAME_COLORS_ENABLED || false
|
||||
return this.$store.state.postwoman.settings.FRAME_COLORS_ENABLED || false;
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
isCollapsed: false,
|
||||
sectionString() {
|
||||
return `${this.$route.path}/${this.label}`;
|
||||
}
|
||||
},
|
||||
|
||||
@@ -44,10 +44,18 @@ export default {
|
||||
|
||||
methods: {
|
||||
collapse({ target }) {
|
||||
const parent = target.parentNode.parentNode
|
||||
parent.querySelector(".collapsible").classList.toggle("hidden")
|
||||
this.isCollapsed = !this.isCollapsed
|
||||
const parent = target.parentNode.parentNode;
|
||||
parent.querySelector(".collapsible").classList.toggle("hidden");
|
||||
// Save collapsed section to local state
|
||||
this.$store.commit("setCollapsedSection", this.sectionString);
|
||||
},
|
||||
},
|
||||
}
|
||||
isCollapsed(label) {
|
||||
return (
|
||||
this.$store.state.theme.collapsedSections.includes(
|
||||
this.sectionString
|
||||
) || false
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -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",
|
||||
})
|
||||
|
||||
@@ -7,6 +7,12 @@ export default {
|
||||
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) {
|
||||
gql.headers.push(object)
|
||||
},
|
||||
|
||||
@@ -1,40 +1,43 @@
|
||||
export default () => ({
|
||||
request: {
|
||||
method: 'GET',
|
||||
url: 'https://httpbin.org',
|
||||
path: '/get',
|
||||
label: '',
|
||||
auth: 'None',
|
||||
httpUser: '',
|
||||
httpPassword: '',
|
||||
passwordFieldType: 'password',
|
||||
bearerToken: '',
|
||||
method: "GET",
|
||||
url: "https://httpbin.org",
|
||||
path: "/get",
|
||||
label: "",
|
||||
auth: "None",
|
||||
httpUser: "",
|
||||
httpPassword: "",
|
||||
passwordFieldType: "password",
|
||||
bearerToken: "",
|
||||
headers: [],
|
||||
params: [],
|
||||
bodyParams: [],
|
||||
rawParams: '',
|
||||
rawParams: "",
|
||||
rawInput: false,
|
||||
requestType: '',
|
||||
contentType: '',
|
||||
requestType: "",
|
||||
contentType: "",
|
||||
},
|
||||
gql: {
|
||||
url: 'https://rickandmortyapi.com/graphql',
|
||||
url: "https://rickandmortyapi.com/graphql",
|
||||
headers: [],
|
||||
schema: '',
|
||||
variablesJSONString: '{}',
|
||||
query: '',
|
||||
response: ''
|
||||
schema: "",
|
||||
variablesJSONString: "{}",
|
||||
query: "",
|
||||
response: "",
|
||||
},
|
||||
theme: {
|
||||
collapsedSections: [],
|
||||
},
|
||||
oauth2: {
|
||||
tokens: [],
|
||||
tokenReqs: [],
|
||||
tokenReqSelect: '',
|
||||
tokenReqName: '',
|
||||
accessTokenName: '',
|
||||
oidcDiscoveryUrl: '',
|
||||
authUrl: '',
|
||||
accessTokenUrl: '',
|
||||
clientId: '',
|
||||
scope: '',
|
||||
tokenReqSelect: "",
|
||||
tokenReqName: "",
|
||||
accessTokenName: "",
|
||||
oidcDiscoveryUrl: "",
|
||||
authUrl: "",
|
||||
accessTokenUrl: "",
|
||||
clientId: "",
|
||||
scope: "",
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user