Updated field, type and graphql page to use the new argument and typelink components

This commit is contained in:
Andrew Bastin
2020-01-09 13:32:38 -05:00
parent faa420753f
commit cc396aecd3
3 changed files with 58 additions and 9 deletions

View File

@@ -288,7 +288,7 @@
</label>
<div v-if="queryFields.length > 0" class="tab">
<div v-for="field in queryFields" :key="field.name">
<gql-field :gqlField="field" />
<gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
</div>
</div>
@@ -304,7 +304,7 @@
</label>
<div v-if="mutationFields.length > 0" class="tab">
<div v-for="field in mutationFields" :key="field.name">
<gql-field :gqlField="field" />
<gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
</div>
</div>
@@ -320,7 +320,7 @@
</label>
<div v-if="subscriptionFields.length > 0" class="tab">
<div v-for="field in subscriptionFields" :key="field.name">
<gql-field :gqlField="field" />
<gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
</div>
</div>
@@ -335,8 +335,8 @@
{{ $t("types") }}
</label>
<div v-if="gqlTypes.length > 0" class="tab">
<div v-for="type in gqlTypes" :key="type.name">
<gql-type :gqlType="type" />
<div v-for="type in gqlTypes" :key="type.name" :id="`type_${type.name}`">
<gql-type :gqlType="type" :jumpTypeCallback="handleJumpToType" />
</div>
</div>
</section>
@@ -563,6 +563,24 @@ export default {
}
},
methods: {
handleJumpToType(type) {
const typesTab = document.getElementById("gqltypes-tab");
typesTab.checked = true;
const rootTypeName = this.resolveRootType(type).name;
const target = document.getElementById(`type_${rootTypeName}`);
if (target) {
target.scrollIntoView({
behavior: 'smooth'
});
}
},
resolveRootType(type) {
let t = type;
while (t.ofType != null) t = t.ofType;
return t;
},
copySchema() {
this.$refs.copySchemaCode.innerHTML = this.doneButton;
const aux = document.createElement("textarea");