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

fix: tab switching side effect

Browse Source
This commit is contained in:
liyasthomas
2022-03-24 19:59:59 +05:30
committed by Andrew Bastin
parent a03f31a526
commit 7ea482b7ed
2 changed files with 62 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/hoppscotch-app/components/collections/ChooseType.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div v-if="show"> <div v-if="show">
<SmartTabs :id="'collections_tab'" v-model="collectionTab"> <SmartTabs :id="'collections_tab'" v-model="selectedCollectionTab">
<SmartTab <SmartTab
:id="'my-collections'" :id="'my-collections'"
:label="`${$t('collection.my_collections')}`" :label="`${$t('collection.my_collections')}`"
@@ -75,7 +75,7 @@ type TeamData = GetMyTeamsQuery["myTeams"][number]
type CollectionTabs = "my-collections" | "team-collections" type CollectionTabs = "my-collections" | "team-collections"
const collectionTab = ref<CollectionTabs>("my-collections") const selectedCollectionTab = ref<CollectionTabs>("my-collections")
defineProps<{ defineProps<{
doc: boolean doc: boolean
@@ -116,7 +116,7 @@ const updateSelectedTeam = (team: TeamData | undefined) => {
} }
watch( watch(
() => collectionTab.value, () => selectedCollectionTab.value,
(newValue: string) => { (newValue: string) => {
updateCollectionsType(newValue) updateCollectionsType(newValue)
} }

128
packages/hoppscotch-app/components/graphql/Sidebar.vue
View File

@@ -11,7 +11,6 @@
@useHistory="handleUseHistory" @useHistory="handleUseHistory"
/> />
</SmartTab> </SmartTab>
<SmartTab <SmartTab
:id="'collections'" :id="'collections'"
icon="folder" icon="folder"
@@ -19,7 +18,6 @@
> >
<CollectionsGraphql /> <CollectionsGraphql />
</SmartTab> </SmartTab>
<SmartTab <SmartTab
:id="'docs'" :id="'docs'"
icon="book-open" icon="book-open"
@@ -64,75 +62,70 @@
</div> </div>
</div> </div>
<SmartTabs <SmartTabs
ref="gqlTabs"
v-model="selectedGqlTab" v-model="selectedGqlTab"
styles="border-t border-b border-dividerLight bg-primary sticky z-10 top-sidebarPrimaryStickyFold" styles="border-t border-b border-dividerLight bg-primary sticky z-10 top-sidebarPrimaryStickyFold"
> >
<div class="gqlTabs"> <SmartTab
<SmartTab v-if="queryFields.length > 0"
v-if="queryFields.length > 0" :id="'queries'"
:id="'queries'" :label="`${t('tab.queries')}`"
:label="`${t('tab.queries')}`" class="divide-y divide-dividerLight"
class="divide-y divide-dividerLight" >
> <GraphqlField
<GraphqlField v-for="(field, index) in filteredQueryFields"
v-for="(field, index) in filteredQueryFields" :key="`field-${index}`"
:key="`field-${index}`" :gql-field="field"
:gql-field="field" :jump-type-callback="handleJumpToType"
:jump-type-callback="handleJumpToType" class="p-4"
class="p-4" />
/> </SmartTab>
</SmartTab> <SmartTab
<SmartTab v-if="mutationFields.length > 0"
v-if="mutationFields.length > 0" :id="'mutations'"
:id="'mutations'" :label="`${t('graphql.mutations')}`"
:label="`${t('graphql.mutations')}`" class="divide-y divide-dividerLight"
class="divide-y divide-dividerLight" >
> <GraphqlField
<GraphqlField v-for="(field, index) in filteredMutationFields"
v-for="(field, index) in filteredMutationFields" :key="`field-${index}`"
:key="`field-${index}`" :gql-field="field"
:gql-field="field" :jump-type-callback="handleJumpToType"
:jump-type-callback="handleJumpToType" class="p-4"
class="p-4" />
/> </SmartTab>
</SmartTab> <SmartTab
<SmartTab v-if="subscriptionFields.length > 0"
v-if="subscriptionFields.length > 0" :id="'subscriptions'"
:id="'subscriptions'" :label="`${t('graphql.subscriptions')}`"
:label="`${t('graphql.subscriptions')}`" class="divide-y divide-dividerLight"
class="divide-y divide-dividerLight" >
> <GraphqlField
<GraphqlField v-for="(field, index) in filteredSubscriptionFields"
v-for="(field, index) in filteredSubscriptionFields" :key="`field-${index}`"
:key="`field-${index}`" :gql-field="field"
:gql-field="field" :jump-type-callback="handleJumpToType"
:jump-type-callback="handleJumpToType" class="p-4"
class="p-4" />
/> </SmartTab>
</SmartTab> <SmartTab
<SmartTab v-if="graphqlTypes.length > 0"
v-if="graphqlTypes.length > 0" :id="'types'"
:id="'types'" :label="`${t('tab.types')}`"
ref="typesTab" class="divide-y divide-dividerLight"
:label="`${t('tab.types')}`" >
class="divide-y divide-dividerLight" <GraphqlType
> v-for="(type, index) in filteredGraphqlTypes"
<GraphqlType :key="`type-${index}`"
v-for="(type, index) in filteredGraphqlTypes" :gql-type="type"
:key="`type-${index}`" :gql-types="graphqlTypes"
:gql-type="type" :is-highlighted="isGqlTypeHighlighted(type)"
:gql-types="graphqlTypes" :highlighted-fields="getGqlTypeHighlightedFields(type)"
:is-highlighted="isGqlTypeHighlighted(type)" :jump-type-callback="handleJumpToType"
:highlighted-fields="getGqlTypeHighlightedFields(type)" />
:jump-type-callback="handleJumpToType" </SmartTab>
/>
</SmartTab>
</div>
</SmartTabs> </SmartTabs>
</div> </div>
</SmartTab> </SmartTab>
<SmartTab :id="'schema'" icon="box" :label="`${t('tab.schema')}`"> <SmartTab :id="'schema'" icon="box" :label="`${t('tab.schema')}`">
<div <div
v-if="schemaString" v-if="schemaString"
@@ -318,9 +311,6 @@ const copySchemaIcon = ref("copy")
const graphqlFieldsFilterText = ref("") const graphqlFieldsFilterText = ref("")
const gqlTabs = ref<any | null>(null)
const typesTab = ref<any | null>(null)
const filteredQueryFields = computed(() => { const filteredQueryFields = computed(() => {
return getFilteredGraphqlFields( return getFilteredGraphqlFields(
graphqlFieldsFilterText.value, graphqlFieldsFilterText.value,
@@ -370,7 +360,7 @@ const getGqlTypeHighlightedFields = (gqlType: GraphQLType) => {
} }
const handleJumpToType = async (type: GraphQLType) => { const handleJumpToType = async (type: GraphQLType) => {
gqlTabs.value.selectTab(typesTab.value) selectedGqlTab.value = "types"
await nextTick() await nextTick()
const rootTypeName = resolveRootType(type).name const rootTypeName = resolveRootType(type).name