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

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

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