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

Push updated files

Browse Source
This commit is contained in:
Dmitry Yankowski
2020-02-25 11:10:40 -05:00
parent e88f98418a
commit 4867df5fe8
4 changed files with 226 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
components/section.vue
View File

@@ -6,10 +6,7 @@
{{ isCollapsed(label) ? "expand_more" : "expand_less" }} {{ isCollapsed(label) ? "expand_more" : "expand_less" }}
</i> </i>
</legend> </legend>
<div <div class="collapsible" :class="{ hidden: isCollapsed(label.toLowerCase()) }">
class="collapsible"
:class="{ hidden: isCollapsed(label.toLowerCase()) }"
>
<slot /> <slot />
</div> </div>
</fieldset> </fieldset>
@@ -25,11 +22,11 @@ fieldset.no-colored-frames legend {
export default { 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() { sectionString() {
return `${this.$route.path}/${this.label}`; return `${this.$route.path}/${this.label}`
} },
}, },
props: { props: {
@@ -44,18 +41,14 @@ export default {
methods: { methods: {
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")
// Save collapsed section into the collapsedSections array // Save collapsed section into the collapsedSections array
this.$store.commit("setCollapsedSection", this.sectionString); this.$store.commit("setCollapsedSection", this.sectionString)
}, },
isCollapsed(label) { isCollapsed(label) {
return ( return this.$store.state.theme.collapsedSections.includes(this.sectionString) || false
this.$store.state.theme.collapsedSections.includes( },
this.sectionString },
) || false }
);
}
}
};
</script> </script>

21
layouts/default.vue
View File

@@ -757,8 +757,7 @@ export default {
], ],
}) })
} }
let showExtensionsToast = let showExtensionsToast = localStorage.getItem("showExtensionsToast") === "yes"
localStorage.getItem("showExtensionsToast") === "yes";
// Just return if showExtensionsToast is "no" // Just return if showExtensionsToast is "no"
if (!showExtensionsToast) return if (!showExtensionsToast) return
@@ -783,15 +782,15 @@ export default {
onClick: (e, toastObject) => { onClick: (e, toastObject) => {
this.$store.commit("setMiscState", { this.$store.commit("setMiscState", {
value: false, value: false,
attribute: "showExtensionsToast" attribute: "showExtensionsToast",
}); })
localStorage.setItem("showExtensionsToast", "no"); localStorage.setItem("showExtensionsToast", "no")
toastObject.goAway(0); toastObject.goAway(0)
} },
} },
] ],
}); })
}, 15000); }, 15000)
} }
this._keyListener = function(e) { this._keyListener = function(e) {

424
pages/graphql.vue
View File

@@ -32,11 +32,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>
@@ -61,7 +57,7 @@
@input=" @input="
$store.commit('setGQLHeaderKey', { $store.commit('setGQLHeaderKey', {
index, index,
value: $event value: $event,
}) })
" "
autofocus autofocus
@@ -75,7 +71,7 @@
@change=" @change="
$store.commit('setGQLHeaderValue', { $store.commit('setGQLHeaderValue', {
index, index,
value: $event.target.value value: $event.target.value,
}) })
" "
autofocus autofocus
@@ -113,9 +109,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">
@@ -150,7 +144,7 @@
autoScrollEditorIntoView: true, autoScrollEditorIntoView: true,
readOnly: true, readOnly: true,
showPrintMargin: false, showPrintMargin: false,
useWorker: false useWorker: false,
}" }"
/> />
</pw-section> </pw-section>
@@ -181,7 +175,7 @@
fontSize: '16px', fontSize: '16px',
autoScrollEditorIntoView: true, autoScrollEditorIntoView: true,
showPrintMargin: false, showPrintMargin: false,
useWorker: false useWorker: false,
}" }"
/> />
</pw-section> </pw-section>
@@ -196,7 +190,7 @@
fontSize: '16px', fontSize: '16px',
autoScrollEditorIntoView: true, autoScrollEditorIntoView: true,
showPrintMargin: false, showPrintMargin: false,
useWorker: false useWorker: false,
}" }"
/> />
</pw-section> </pw-section>
@@ -225,7 +219,7 @@
autoScrollEditorIntoView: true, autoScrollEditorIntoView: true,
readOnly: true, readOnly: true,
showPrintMargin: false, showPrintMargin: false,
useWorker: false useWorker: false,
}" }"
/> />
</pw-section> </pw-section>
@@ -245,10 +239,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>
@@ -264,10 +255,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>
@@ -283,10 +271,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>
@@ -301,15 +286,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>
@@ -342,17 +320,17 @@
</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 +338,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 {
@@ -377,359 +355,339 @@ export default {
settings: { settings: {
SCROLL_INTO_ENABLED: SCROLL_INTO_ENABLED:
typeof this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED !== typeof this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED !== "undefined"
"undefined"
? this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED ? this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED
: true : true,
} },
}; }
}, },
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.settings.SCROLL_INTO_ENABLED) { if (target && this.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()
// 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()
this.response = this.$t("loading"); this.response = this.$t("loading")
this.settings.SCROLL_INTO_ENABLED && this.scrollInto("response"); this.settings.SCROLL_INTO_ENABLED && 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()
// 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()
this.schema = this.$t("loading"); this.schema = this.$t("loading")
this.settings.SCROLL_INTO_ENABLED && this.scrollInto("schema"); this.settings.SCROLL_INTO_ENABLED && this.scrollInto("schema")
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 const schema = gql.buildClientSchema(data.data.data)
: res;
const schema = gql.buildClientSchema(data.data.data);
this.schema = gql.printSchema(schema, { this.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()
} },
} },
}); })
}, },
scrollInto(view) { scrollInto(view) {
this.$refs[view].$el.scrollIntoView({ this.$refs[view].$el.scrollIntoView({
behavior: "smooth" behavior: "smooth",
}); })
} },
} },
}; }
</script> </script>

36
pages/index.vue
View File

@@ -1443,12 +1443,11 @@ export default {
settings: { settings: {
SCROLL_INTO_ENABLED: SCROLL_INTO_ENABLED:
typeof this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED !== typeof this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED !== "undefined"
"undefined"
? this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED ? this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED
: true : true,
} },
}; }
}, },
watch: { watch: {
urlExcludes: { urlExcludes: {
@@ -1970,21 +1969,14 @@ export default {
behavior: "smooth", behavior: "smooth",
}) })
}, },
handleUseHistory({ handleUseHistory({ label, method, url, path, usesScripts, preRequestScript }) {
label, this.label = label
method, this.method = method
url, this.url = url
path, this.path = path
usesScripts, this.showPreRequestScript = usesScripts
preRequestScript this.preRequestScript = preRequestScript
}) { this.settings.SCROLL_INTO_ENABLED && this.scrollInto("request")
this.label = label;
this.method = method;
this.url = url;
this.path = path;
this.showPreRequestScript = usesScripts;
this.preRequestScript = preRequestScript;
this.settings.SCROLL_INTO_ENABLED && this.scrollInto("request");
}, },
getVariablesFromPreRequestScript() { getVariablesFromPreRequestScript() {
if (!this.preRequestScript) { if (!this.preRequestScript) {
@@ -2019,8 +2011,8 @@ export default {
return await sendNetworkRequest(requestOptions, this.$store) return await sendNetworkRequest(requestOptions, this.$store)
}, },
async sendRequest() { async sendRequest() {
this.$toast.clear(); this.$toast.clear()
this.settings.SCROLL_INTO_ENABLED && this.scrollInto("response"); this.settings.SCROLL_INTO_ENABLED && this.scrollInto("response")
if (!this.isValidURL) { if (!this.isValidURL) {
this.$toast.error(this.$t("url_invalid_format"), { this.$toast.error(this.$t("url_invalid_format"), {