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

Moved Cocs section to right sidebar (will fix overflow issue later today) + Basic lint

Browse Source
This commit is contained in:
Liyas Thomas
2019-11-19 08:55:57 +05:30
parent 8e3542863a
commit eca1dc8e66
3 changed files with 128 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
components/graphql/field.vue
View File

@@ -36,12 +36,19 @@ export default {
computed: { computed: {
fieldString() { fieldString() {
const args = (this.gqlField.args || []).reduce((acc, arg, index) => { const args = (this.gqlField.args || []).reduce((acc, arg, index) => {
return acc + `${arg.name}: ${arg.type.toString()}${(index !== this.gqlField.args.length - 1) ? ", " : ''}`; return (
}, ''); acc +
const argsString = (args.length > 0) ? `(${args})` : ''; `${arg.name}: ${arg.type.toString()}${
index !== this.gqlField.args.length - 1 ? ", " : ""
}`
);
}, "");
const argsString = args.length > 0 ? `(${args})` : "";
return `${this.gqlField.name}${argsString}: ${this.gqlField.type.toString()}`; return `${
this.gqlField.name
}${argsString}: ${this.gqlField.type.toString()}`;
} }
} }
} };
</script> </script>

6
components/graphql/type.vue
View File

@@ -1,8 +1,8 @@
<template> <template>
<div class="type-box"> <div class="type-box">
<div class="type-title">{{gqlType.name}}</div> <div class="type-title">{{ gqlType.name }}</div>
<div class="type-desc" v-if="gqlType.description"> <div class="type-desc" v-if="gqlType.description">
{{gqlType.description}} {{ gqlType.description }}
</div> </div>
<div v-if="gqlType.getFields"> <div v-if="gqlType.getFields">
@@ -43,5 +43,5 @@ export default {
props: { props: {
gqlType: Object gqlType: Object
} }
} };
</script> </script>

182
pages/graphql.vue
View File

@@ -1,72 +1,104 @@
<template> <template>
<div class="page"> <div class="page">
<pw-section class="blue" label="Endpoint" ref="endpoint"> <div class="content">
<ul> <div class="page-columns inner-left">
<li> <pw-section class="blue" label="Endpoint" ref="endpoint">
<label for="url">URL</label> <ul>
<input id="url" type="url" v-model="url" @keyup.enter="getSchema()" /> <li>
</li> <label for="url">URL</label>
<li> <input id="url" type="url" v-model="url" @keyup.enter="getSchema()" />
<label for="get" class="hide-on-small-screen">&nbsp;</label> </li>
<button id="get" name="get" @click="getSchema"> <li>
Get Schema <label for="get" class="hide-on-small-screen">&nbsp;</label>
<span><i class="material-icons">send</i></span> <button id="get" name="get" @click="getSchema">
</button> Get Schema
</li> <span><i class="material-icons">send</i></span>
</ul> </button>
</pw-section> </li>
<pw-section class="green" label="Schema" ref="schema"> </ul>
<Editor </pw-section>
:value="schemaString" <pw-section class="green" label="Schema" ref="schema">
:lang="'graphqlschema'" <Editor
:options="{ :value="schemaString"
maxLines: '16', :lang="'graphqlschema'"
minLines: '16', :options="{
fontSize: '16px', maxLines: '16',
autoScrollEditorIntoView: true, minLines: '16',
readOnly: true, fontSize: '16px',
showPrintMargin: false, autoScrollEditorIntoView: true,
useWorker: false readOnly: true,
}" showPrintMargin: false,
/> useWorker: false
</pw-section> }"
<pw-section class="purple" label="Docs" ref="docs"> />
<section> </pw-section>
</div>
<aside class="sticky-inner inner-right">
<pw-section class="purple" label="Docs" ref="docs">
<section>
<input
v-if="queryFields.length > 0"
id="queries-tab"
type="radio"
name="side"
checked="checked"
/>
<label v-if="queryFields.length > 0" for="queries-tab">Queries</label>
<div v-if="queryFields.length > 0" class="tab">
<div v-for="field in queryFields" :key="field.name">
<gql-field :gqlField="field" />
</div>
</div>
<input v-if="queryFields.length > 0" id="queries-tab" type="radio" name="side" checked="checked" /> <input
<label v-if="queryFields.length > 0" for="queries-tab">Queries</label> v-if="mutationFields.length > 0"
<div v-if="queryFields.length > 0" class="tab"> id="mutations-tab"
<div v-for="field in queryFields" :key="field.name"> type="radio"
<gql-field :gqlField="field" /> name="side"
</div> checked="checked"
</div> />
<label v-if="mutationFields.length > 0" for="mutations-tab"
>Mutations</label
>
<div v-if="mutationFields.length > 0" class="tab">
<div v-for="field in mutationFields" :key="field.name">
<gql-field :gqlField="field" />
</div>
</div>
<input
v-if="subscriptionFields.length > 0"
id="subscriptions-tab"
type="radio"
name="side"
checked="checked"
/>
<label v-if="subscriptionFields.length > 0" for="subscriptions-tab"
>Subscriptions</label
>
<div v-if="subscriptionFields.length > 0" class="tab">
<div v-for="field in subscriptionFields" :key="field.name">
<gql-field :gqlField="field" />
</div>
</div>
<input v-if="mutationFields.length > 0" id="mutations-tab" type="radio" name="side" checked="checked" /> <input
<label v-if="mutationFields.length > 0" for="mutations-tab">Mutations</label> v-if="gqlTypes.length > 0"
<div v-if="mutationFields.length > 0" class="tab"> id="gqltypes-tab"
<div v-for="field in mutationFields" :key="field.name"> type="radio"
<gql-field :gqlField="field" /> name="side"
</div> checked="checked"
</div> />
<label v-if="gqlTypes.length > 0" for="gqltypes-tab">Types</label>
<input v-if="subscriptionFields.length > 0" id="subscriptions-tab" type="radio" name="side" checked="checked" /> <div v-if="gqlTypes.length > 0" class="tab">
<label v-if="subscriptionFields.length > 0" for="subscriptions-tab">Subscriptions</label> <div v-for="type in gqlTypes" :key="type.name">
<div v-if="subscriptionFields.length > 0" class="tab"> <gql-type :gqlType="type" />
<div v-for="field in subscriptionFields" :key="field.name"> </div>
<gql-field :gqlField="field" /> </div>
</div> </section>
</div> </pw-section>
</aside>
<input v-if="gqlTypes.length > 0" id="gqltypes-tab" type="radio" name="side" checked="checked" /> </div>
<label v-if="gqlTypes.length > 0" for="gqltypes-tab">Types</label>
<div v-if="gqlTypes.length > 0" class="tab">
<div v-for="type in gqlTypes" :key="type.name">
<gql-type :gqlType="type" />
</div>
</div>
</section>
</pw-section>
</div> </div>
</template> </template>
@@ -144,12 +176,24 @@ export default {
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 subscriptionTypeName = schema.getSubscriptionType() ? schema.getSubscriptionType().name : ''; : "";
const mutationTypeName = schema.getMutationType()
? schema.getMutationType().name
: "";
const subscriptionTypeName = schema.getSubscriptionType()
? schema.getSubscriptionType().name
: "";
for (const type in typeMap) { for (const type in typeMap) {
if (!typeMap[type].name.startsWith("__") && !(([queryTypeName, mutationTypeName, subscriptionTypeName]).includes(typeMap[type].name)) && typeMap[type] instanceof gql.GraphQLObjectType) { if (
!typeMap[type].name.startsWith("__") &&
![queryTypeName, mutationTypeName, subscriptionTypeName].includes(
typeMap[type].name
) &&
typeMap[type] instanceof gql.GraphQLObjectType
) {
types.push(typeMap[type]); types.push(typeMap[type]);
} }
} }
@@ -168,7 +212,7 @@ export default {
this.$toast.error(error + " (F12 for details)", { this.$toast.error(error + " (F12 for details)", {
icon: "error" icon: "error"
}); });
console.log('Error', error); console.log("Error", error);
}); });
} }
} }