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

feat: better route determination - fixed #1732

Browse Source
This commit is contained in:
liyasthomas
2021-06-21 15:33:51 +05:30
parent 5bb9b1b675
commit 6ddff58ba5
17 changed files with 127 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
components/app/Sidenav.vue
View File

@@ -9,7 +9,7 @@
<nuxt-link
v-tooltip.right="$t('home')"
:to="localePath('index')"
:class="linkActive('/')"
:class="linkActive('index')"
:aria-label="$t('home')"
>
<AppLogo alt class="material-icons" style="height: 24px" />
@@ -17,14 +17,14 @@
<nuxt-link
v-tooltip.right="$t('realtime')"
:to="localePath('realtime')"
:class="linkActive('/realtime')"
:class="linkActive('realtime')"
>
<i class="material-icons">language</i>
</nuxt-link>
<nuxt-link
v-tooltip.right="$t('graphql')"
:to="localePath('graphql')"
:class="linkActive('/graphql')"
:class="linkActive('graphql')"
:aria-label="$t('graphql')"
>
<svg
@@ -51,7 +51,7 @@
<nuxt-link
v-tooltip.right="$t('documentation')"
:to="localePath('doc')"
:class="linkActive('/doc')"
:class="linkActive('doc')"
:aria-label="$t('documentation')"
>
<i class="material-icons">topic</i>
@@ -59,65 +59,24 @@
<nuxt-link
v-tooltip.right="$t('settings')"
:to="localePath('settings')"
:class="linkActive('/settings')"
:class="linkActive('settings')"
:aria-label="$t('settings')"
>
<i class="material-icons">settings</i>
</nuxt-link>
</nav>
<nav v-if="$route.path == '/'" class="secondary-nav">
<a v-tooltip.right="$t('request')" href="#request">
<i class="material-icons">cloud_upload</i>
</a>
<a v-tooltip.right="$t('options')" href="#options">
<i class="material-icons">toc</i>
</a>
<a v-tooltip.right="$t('response')" href="#response">
<i class="material-icons">cloud_download</i>
</a>
</nav>
<nav v-else-if="$route.path.includes('/realtime')" class="secondary-nav">
<a v-tooltip.right="$t('request')" href="#request">
<i class="material-icons">cloud_upload</i>
</a>
<a v-tooltip.right="$t('communication')" href="#response">
<i class="material-icons">cloud_download</i>
</a>
</nav>
<nav v-else-if="$route.path.includes('/graphql')" class="secondary-nav">
<a v-tooltip.right="$t('endpoint')" href="#endpoint">
<i class="material-icons">cloud</i>
</a>
<a v-tooltip.right="$t('schema')" href="#schema">
<i class="material-icons">assignment_returned</i>
</a>
<a v-tooltip.right="$t('query')" href="#query">
<i class="material-icons">cloud_upload</i>
</a>
<a v-tooltip.right="$t('response')" href="#response">
<i class="material-icons">cloud_download</i>
</a>
</nav>
<nav v-else-if="$route.path.includes('/doc')" class="secondary-nav">
<a v-tooltip.right="$t('import')" href="#import">
<i class="material-icons">folder</i>
</a>
<a v-tooltip.right="$t('documentation')" href="#documentation">
<i class="material-icons">insert_drive_file</i>
</a>
</nav>
<nav v-else-if="$route.path.includes('/settings')" class="secondary-nav">
<a v-tooltip.right="$t('account')" href="#account">
<i class="material-icons">person</i>
</a>
<a v-tooltip.right="$t('theme')" href="#theme">
<i class="material-icons">brush</i>
</a>
<a v-tooltip.right="$t('extensions')" href="#extensions">
<i class="material-icons">extension</i>
</a>
<a v-tooltip.right="$t('proxy')" href="#proxy">
<i class="material-icons">public</i>
<nav
v-for="(link, index) in currentNavigation"
:key="`link-${index}`"
class="secondary-nav"
>
<a
v-for="(item, itemIndex) in link.secondary"
:key="`item-${itemIndex}`"
v-tooltip.right="$t(item.tooltip)"
:href="item.target"
>
<i class="material-icons">{{ item.icon }}</i>
</a>
</nav>
</aside>
@@ -126,6 +85,79 @@
<script>
export default {
data() {
return {
navigation: [
{
primary: "index",
secondary: [
{ tooltip: "request", target: "#request", icon: "cloud_upload" },
{ tooltip: "options", target: "#options", icon: "toc" },
{
tooltip: "response",
target: "#response",
icon: "cloud_download",
},
],
},
{
primary: "realtime",
secondary: [
{ tooltip: "request", target: "#request", icon: "cloud_upload" },
{
tooltip: "communication",
target: "#response",
icon: "cloud_download",
},
],
},
{
primary: "graphql",
secondary: [
{ tooltip: "endpoint", target: "#endpoint", icon: "cloud" },
{
tooltip: "schema",
target: "#schema",
icon: "assignment_returned",
},
{ tooltip: "query", target: "#query", icon: "cloud_upload" },
{
tooltip: "response",
target: "#response",
icon: "cloud_download",
},
],
},
{
primary: "doc",
secondary: [
{ tooltip: "import", target: "#import", icon: "folder" },
{
tooltip: "documentation",
target: "#documentation",
icon: "insert_drive_file",
},
],
},
{
primary: "settings",
secondary: [
{ tooltip: "account", target: "#account", icon: "person" },
{ tooltip: "theme", target: "#theme", icon: "brush" },
{ tooltip: "extensions", target: "#extensions", icon: "extension" },
{ tooltip: "proxy", target: "#proxy", icon: "public" },
],
},
],
}
},
computed: {
currentNavigation() {
return this.navigation.filter((item) =>
this.$route.name.includes(item.primary)
)
},
},
mounted() {
window.addEventListener("scroll", () => {
const mainNavLinks = document.querySelectorAll("nav.secondary-nav a")
@@ -147,8 +179,8 @@ export default {
methods: {
linkActive(path) {
return {
"nuxt-link-exact-active": this.$route.path === path,
"nuxt-link-active": this.$route.path === path,
"nuxt-link-exact-active": this.$route.name.includes(path),
"nuxt-link-active": this.$route.name.includes(path),
}
},
},

2
components/collections/graphql/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<AppSection ref="collections" :label="$t('collections')">
<AppSection label="collections">
<div class="show-on-large-screen">
<input
v-if="showCollActions"

2
components/collections/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<AppSection ref="collections" :label="$t('collections')">
<AppSection label="collections">
<div class="show-on-large-screen">
<input
v-if="!saveRequest"

2
components/environments/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<AppSection ref="environments" :label="$t('environments')">
<AppSection label="environments">
<div class="show-on-large-screen">
<span class="select-wrapper">
<select

2
components/history/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<AppSection ref="history" :label="$t('history')">
<AppSection label="history">
<div class="show-on-large-screen">
<input
v-model="filterText"

2
components/http/Headers.vue
View File

@@ -1,5 +1,5 @@
<template>
<AppSection ref="headers" label="Headers">
<AppSection label="headers">
<ul v-if="headers.length !== 0">
<li>
<div class="row-wrapper">

2
components/http/Parameters.vue
View File

@@ -1,5 +1,5 @@
<template>
<AppSection ref="parameters" label="Parameters">
<AppSection label="parameters">
<ul v-if="params.length !== 0">
<li>
<div class="row-wrapper">

2
components/http/Response.vue
View File

@@ -1,5 +1,5 @@
<template>
<AppSection id="response" ref="response" :label="$t('response')">
<AppSection label="response">
<HttpResponseMeta :response="response" :active="active" />
<div v-if="response.body && response.body !== $t('loading')">
<LensesResponseBodyRenderer :response="response" />

4
components/realtime/Mqtt.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<AppSection :label="$t('request')">
<AppSection label="request">
<ul>
<li>
<label for="mqtt-url">{{ $t("url") }}</label>
@@ -34,7 +34,7 @@
</ul>
</AppSection>
<AppSection :label="$t('communication')">
<AppSection label="response">
<ul>
<li>
<RealtimeLog :title="$t('log')" :log="log" />

4
components/realtime/Socketio.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<AppSection ref="request" :label="$t('request')">
<AppSection label="request">
<ul>
<li>
<label for="socketio-url">{{ $t("url") }}</label>
@@ -43,7 +43,7 @@
</ul>
</AppSection>
<AppSection id="response" ref="response" :label="$t('communication')">
<AppSection label="response">
<ul>
<li>
<RealtimeLog :title="$t('log')" :log="communication.log" />

4
components/realtime/Sse.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<AppSection ref="request" :label="$t('request')">
<AppSection label="request">
<ul>
<li>
<label for="server">{{ $t("server") }}</label>
@@ -36,7 +36,7 @@
</ul>
</AppSection>
<AppSection id="response" ref="response" :label="$t('communication')">
<AppSection label="response">
<ul>
<li>
<RealtimeLog :title="$t('events')" :log="events.log" />

4
components/realtime/Websocket.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<AppSection ref="request" :label="$t('request')">
<AppSection label="request">
<ul>
<li>
<label for="websocket-url">{{ $t("url") }}</label>
@@ -112,7 +112,7 @@
</ul>
</AppSection>
<AppSection id="response" ref="response" :label="$t('communication')">
<AppSection label="response">
<ul>
<li>
<RealtimeLog :title="$t('log')" :log="communication.log" />

2
components/teams/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<AppSection ref="teams" :label="$t('teams')">
<AppSection label="teams">
<div class="flex flex-col">
<label>{{ $t("teams") }}</label>
<div v-if="currentUser"></div>

4
pages/doc.vue
View File

@@ -2,7 +2,7 @@
<div class="page">
<div class="content">
<div class="page-columns inner-left">
<AppSection ref="import" :label="$t('import')">
<AppSection label="import">
<div class="flex flex-col">
<label>{{ $t("collection") }}</label>
<p class="info">
@@ -55,7 +55,7 @@
</div>
</AppSection>
<AppSection ref="documentation" :label="$t('documentation')">
<AppSection label="documentation">
<div class="flex flex-col">
<label>{{ $t("documentation") }}</label>
<p v-if="items.length === 0" class="info">

14
pages/graphql.vue
View File

@@ -2,7 +2,7 @@
<div class="page">
<div class="content">
<div class="page-columns inner-left">
<AppSection ref="endpoint" :label="$t('endpoint')">
<AppSection label="endpoint">
<ul>
<li>
<label for="url">{{ $t("url") }}</label>
@@ -37,7 +37,7 @@
</ul>
</AppSection>
<AppSection ref="headers" :label="$t('headers')">
<AppSection label="headers">
<div class="flex flex-col">
<label>{{ $t("headers") }}</label>
<ul v-if="headers.length !== 0">
@@ -150,7 +150,7 @@
</div>
</AppSection>
<AppSection ref="schema" :label="$t('schema')">
<AppSection label="schema">
<div class="row-wrapper">
<label>{{ $t("schema") }}</label>
<div v-if="schema">
@@ -212,7 +212,7 @@
/>
</AppSection>
<AppSection ref="query" :label="$t('query')">
<AppSection label="query">
<div class="row-wrapper gqlRunQuery">
<label for="gqlQuery">{{ $t("query") }}</label>
<div>
@@ -266,7 +266,7 @@
/>
</AppSection>
<AppSection ref="variables" :label="$t('variables')">
<AppSection label="variables">
<div class="flex flex-col">
<label>{{ $t("variables") }}</label>
<SmartAceEditor
@@ -285,7 +285,7 @@
</div>
</AppSection>
<AppSection ref="response" :label="$t('response')">
<AppSection label="response">
<div class="flex flex-col">
<label>{{ $t("response") }}</label>
<div class="row-wrapper">
@@ -347,7 +347,7 @@
>
<SmartTabs>
<SmartTab :id="'docs'" :label="`Docs`" :selected="true">
<AppSection ref="docs" :label="$t('docs')">
<AppSection label="docs">
<section class="flex-col">
<input
v-model="graphqlFieldsFilterText"

22
pages/index.vue
View File

@@ -3,7 +3,7 @@
<div class="page">
<div class="content">
<div class="page-columns inner-left">
<AppSection :label="$t('request')" ref="request">
<AppSection label="request">
<ul>
<li class="shrink">
<label for="method">{{ $t("method") }}</label>
@@ -253,7 +253,7 @@
</SmartTab>
<SmartTab :id="'authentication'" :label="$t('authentication')">
<AppSection :label="$t('authentication')" ref="authentication">
<AppSection label="authentication">
<ul>
<li>
<div class="row-wrapper">
@@ -352,11 +352,7 @@
</div>
</AppSection>
<AppSection
v-if="showTokenRequest"
label="Access Token Request"
ref="accessTokenRequest"
>
<AppSection v-if="showTokenRequest" label="accessTokenRequest">
<ul>
<li>
<div class="row-wrapper">
@@ -478,11 +474,7 @@
:id="'pre_request_script'"
:label="$t('pre_request_script')"
>
<AppSection
v-if="showPreRequestScript"
:label="$t('pre_request_script')"
ref="preRequest"
>
<AppSection v-if="showPreRequestScript" label="preRequest">
<ul>
<li>
<div class="row-wrapper">
@@ -518,11 +510,7 @@
</SmartTab>
<SmartTab :id="'tests'" :label="$t('tests')">
<AppSection
v-if="testsEnabled"
:label="$t('tests')"
ref="postRequestTests"
>
<AppSection v-if="testsEnabled" label="postRequestTests">
<ul>
<li>
<div class="row-wrapper">

10
pages/settings.vue
View File

@@ -4,7 +4,7 @@
<Teams />
</div>
<AppSection ref="account" :label="$t('account')">
<AppSection label="account">
<div class="flex flex-col">
<label>{{ $t("account") }}</label>
<div v-if="currentUser">
@@ -67,7 +67,7 @@
</div>
</AppSection>
<AppSection ref="theme" :label="$t('theme')">
<AppSection label="theme">
<div class="flex flex-col">
<label>{{ $t("theme") }}</label>
<SmartColorModePicker />
@@ -84,7 +84,7 @@
</div>
</AppSection>
<AppSection ref="extensions" :label="$t('extensions')">
<AppSection label="extensions">
<div class="flex flex-col">
<label>{{ $t("extensions") }}</label>
<div class="row-wrapper">
@@ -106,7 +106,7 @@
</div>
</AppSection>
<AppSection ref="proxy" :label="$t('proxy')">
<AppSection label="proxy">
<div class="flex flex-col">
<label>{{ $t("proxy") }}</label>
<div class="row-wrapper">
@@ -177,7 +177,7 @@
-->
</AppSection>
<AppSection ref="experiments" :label="$t('experiments')">
<AppSection label="experiments">
<div class="flex flex-col">
<label>{{ $t("experiments") }}</label>
<p class="info">