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

Disable spell check on input fields

Browse Source
This commit is contained in:
Dmitry Yankowski
2020-02-25 01:43:55 -05:00
parent 1d616c7ec6
commit 90d347dc89
3 changed files with 270 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

481
pages/graphql.vue
View File

@@ -6,7 +6,13 @@
<ul> <ul>
<li> <li>
<label for="url">{{ $t("url") }}</label> <label for="url">{{ $t("url") }}</label>
<input id="url" type="url" v-model="url" @keyup.enter="getSchema()" /> <input
id="url"
type="url"
v-model="url"
spellcheck="false"
@keyup.enter="getSchema()"
/>
</li> </li>
<div> <div>
<li> <li>
@@ -26,7 +32,11 @@
<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 class="icon" @click="headers = []" v-tooltip.bottom="$t('clear')"> <button
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>
@@ -51,7 +61,7 @@
@input=" @input="
$store.commit('setGQLHeaderKey', { $store.commit('setGQLHeaderKey', {
index, index,
value: $event, value: $event
}) })
" "
autofocus autofocus
@@ -65,7 +75,7 @@
@change=" @change="
$store.commit('setGQLHeaderValue', { $store.commit('setGQLHeaderValue', {
index, index,
value: $event.target.value, value: $event.target.value
}) })
" "
autofocus autofocus
@@ -103,7 +113,9 @@
@click="ToggleExpandResponse" @click="ToggleExpandResponse"
ref="ToggleExpandResponse" ref="ToggleExpandResponse"
v-tooltip="{ v-tooltip="{
content: !expandResponse ? $t('expand_response') : $t('collapse_response'), content: !expandResponse
? $t('expand_response')
: $t('collapse_response')
}" }"
> >
<i class="material-icons"> <i class="material-icons">
@@ -138,7 +150,7 @@
autoScrollEditorIntoView: true, autoScrollEditorIntoView: true,
readOnly: true, readOnly: true,
showPrintMargin: false, showPrintMargin: false,
useWorker: false, useWorker: false
}" }"
/> />
</pw-section> </pw-section>
@@ -169,7 +181,7 @@
fontSize: '16px', fontSize: '16px',
autoScrollEditorIntoView: true, autoScrollEditorIntoView: true,
showPrintMargin: false, showPrintMargin: false,
useWorker: false, useWorker: false
}" }"
/> />
</pw-section> </pw-section>
@@ -184,7 +196,7 @@
fontSize: '16px', fontSize: '16px',
autoScrollEditorIntoView: true, autoScrollEditorIntoView: true,
showPrintMargin: false, showPrintMargin: false,
useWorker: false, useWorker: false
}" }"
/> />
</pw-section> </pw-section>
@@ -213,7 +225,7 @@
autoScrollEditorIntoView: true, autoScrollEditorIntoView: true,
readOnly: true, readOnly: true,
showPrintMargin: false, showPrintMargin: false,
useWorker: false, useWorker: false
}" }"
/> />
</pw-section> </pw-section>
@@ -233,7 +245,10 @@
</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 :gqlField="field" :jumpTypeCallback="handleJumpToType" /> <gql-field
:gqlField="field"
:jumpTypeCallback="handleJumpToType"
/>
</div> </div>
</div> </div>
@@ -249,7 +264,10 @@
</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 :gqlField="field" :jumpTypeCallback="handleJumpToType" /> <gql-field
:gqlField="field"
:jumpTypeCallback="handleJumpToType"
/>
</div> </div>
</div> </div>
@@ -265,7 +283,10 @@
</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 :gqlField="field" :jumpTypeCallback="handleJumpToType" /> <gql-field
:gqlField="field"
:jumpTypeCallback="handleJumpToType"
/>
</div> </div>
</div> </div>
@@ -280,8 +301,15 @@
{{ $t("types") }} {{ $t("types") }}
</label> </label>
<div v-if="gqlTypes.length > 0" class="tab"> <div v-if="gqlTypes.length > 0" class="tab">
<div v-for="type in gqlTypes" :key="type.name" :id="`type_${type.name}`"> <div
<gql-type :gqlType="type" :jumpTypeCallback="handleJumpToType" /> v-for="type in gqlTypes"
:key="type.name"
:id="`type_${type.name}`"
>
<gql-type
:gqlType="type"
:jumpTypeCallback="handleJumpToType"
/>
</div> </div>
</div> </div>
</section> </section>
@@ -314,17 +342,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"),
@@ -332,7 +360,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 {
@@ -352,333 +380,356 @@ export default {
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(() => (this.$refs.copySchemaCode.innerHTML = this.copyButton), 1000) setTimeout(
() => (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(() => (this.$refs.copyQueryButton.innerHTML = this.copyButton), 1000) setTimeout(
() => (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(() => (this.$refs.copyResponseButton.innerHTML = this.copyButton), 1000) setTimeout(
() => (this.$refs.copyResponseButton.innerHTML = this.copyButton),
1000
);
}, },
async runQuery() { async runQuery() {
const startTime = Date.now() const startTime = Date.now();
this.$nuxt.$loading.start()
this.response = this.$t("loading")
this.settings.SCROLL_INTO_ENABLED && this.scrollInto("response")
try {
let headers = {}
this.headers.forEach(header => {
headers[header.key] = header.value
})
let variables = JSON.parse(this.variableString)
const gqlQueryString = this.gqlQueryString
const reqOptions = {
method: "post",
url: this.url,
headers: {
...headers,
"content-type": "application/json",
},
data: JSON.stringify({ query: gqlQueryString, variables }),
}
const data = await sendNetworkRequest(reqOptions, this.$store)
this.response = JSON.stringify(data.data, null, 2)
this.$nuxt.$loading.finish()
const duration = Date.now() - startTime
this.$toast.info(this.$t("finished_in", { duration }), {
icon: "done",
})
} catch (error) {
this.$nuxt.$loading.finish()
this.$toast.error(`${error} ${this.$t("f12_details")}`, {
icon: "error",
})
console.log("Error", error)
}
},
async getSchema() {
const startTime = Date.now()
this.schema = this.$t("loading")
this.settings.SCROLL_INTO_ENABLED && 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();
this.response = this.$t("loading");
this.settings.SCROLL_INTO_ENABLED && this.scrollInto("response");
try { try {
const query = JSON.stringify({ let headers = {};
query: gql.getIntrospectionQuery(),
})
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);
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: query, data: JSON.stringify({ query: gqlQueryString, variables })
} };
const data = await sendNetworkRequest(reqOptions, this.$store);
this.response = JSON.stringify(data.data, null, 2);
this.$nuxt.$loading.finish();
const duration = Date.now() - startTime;
this.$toast.info(this.$t("finished_in", { duration }), {
icon: "done"
});
} catch (error) {
this.$nuxt.$loading.finish();
this.$toast.error(`${error} ${this.$t("f12_details")}`, {
icon: "error"
});
console.log("Error", error);
}
},
async getSchema() {
const startTime = Date.now();
// Start showing the loading bar as soon as possible.
// The nuxt axios module will hide it when the request is made.
this.$nuxt.$loading.start();
this.schema = this.$t("loading");
this.settings.SCROLL_INTO_ENABLED && this.scrollInto("schema");
try {
const query = JSON.stringify({
query: gql.getIntrospectionQuery()
});
let headers = {};
this.headers.forEach(header => {
headers[header.key] = header.value;
});
const reqOptions = {
method: "post",
url: this.url,
headers: {
...headers,
"content-type": "application/json"
},
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 || `https://postwoman.apollotv.xyz/`, this.$store.state.postwoman.settings.PROXY_URL ||
data: reqOptions, `https://postwoman.apollotv.xyz/`,
data: reqOptions
} }
: reqOptions : reqOptions;
const res = await axios(reqConfig) const res = await axios(reqConfig);
const data = this.$store.state.postwoman.settings.PROXY_ENABLED ? res.data : res const data = this.$store.state.postwoman.settings.PROXY_ENABLED
const schema = gql.buildClientSchema(data.data.data) ? res.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() ? schema.getQueryType().name : "" const queryTypeName = schema.getQueryType()
const mutationTypeName = schema.getMutationType() ? schema.getMutationType().name : "" ? schema.getQueryType().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(typeMap[type].name) && ![queryTypeName, mutationTypeName, subscriptionTypeName].includes(
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 == Infinity ? 16 : Infinity this.responseBodyMaxLines =
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>

3
pages/index.vue
View File

@@ -187,6 +187,7 @@
id="url" id="url"
name="url" name="url"
type="url" type="url"
spellcheck="false"
v-model="url" v-model="url"
/> />
</li> </li>
@@ -197,6 +198,7 @@
id="path" id="path"
name="path" name="path"
v-model="path" v-model="path"
spellcheck="false"
@input="pathInputHandler" @input="pathInputHandler"
/> />
</li> </li>
@@ -207,6 +209,7 @@
name="label" name="label"
type="text" type="text"
v-model="label" v-model="label"
spellcheck="false"
:placeholder="$t('optional')" :placeholder="$t('optional')"
/> />
</li> </li>

1
pages/realtime.vue
View File

@@ -11,6 +11,7 @@
<input <input
id="url" id="url"
type="url" type="url"
spellcheck="false"
:class="{ error: !urlValid }" :class="{ error: !urlValid }"
v-model="url" v-model="url"
@keyup.enter="urlValid ? toggleConnection() : null" @keyup.enter="urlValid ? toggleConnection() : null"