feat: init split layouts
This commit is contained in:
Liyas Thomas
GitHub
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<!-- eslint-disable -->
|
||||
<div>
|
||||
<Splitpanes vertical class="hoppscotch-theme">
|
||||
<Pane min-size="60" class="bg-violet-100">
|
||||
<Splitpanes horizontal class="hoppscotch-theme">
|
||||
<Pane class="bg-indigo-100">
|
||||
<Splitpanes vertical :dbl-click-splitter="false">
|
||||
<Pane class="overflow-auto">
|
||||
<Splitpanes horizontal :dbl-click-splitter="false">
|
||||
<Pane class="overflow-auto">
|
||||
<AppSection ref="request" label="request">
|
||||
<ul>
|
||||
<li class="shrink">
|
||||
@@ -142,7 +142,7 @@
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="row-wrapper">
|
||||
<div class="flex flex-1">
|
||||
<span>
|
||||
<SmartToggle
|
||||
v-if="canListParameters"
|
||||
@@ -175,7 +175,7 @@
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="flex flex-1">
|
||||
<span>
|
||||
<ButtonSecondary
|
||||
@click.native="showCurlImportModal = !showCurlImportModal"
|
||||
@@ -262,7 +262,7 @@
|
||||
<AppSection label="authentication">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="row-wrapper">
|
||||
<div class="flex flex-1">
|
||||
<label for="auth">{{ $t("authentication") }}</label>
|
||||
<div>
|
||||
<ButtonSecondary
|
||||
@@ -317,7 +317,7 @@
|
||||
</ul>
|
||||
<ul v-if="auth === 'Bearer Token' || auth === 'OAuth 2.0'">
|
||||
<li>
|
||||
<div class="row-wrapper">
|
||||
<div class="flex flex-1">
|
||||
<input
|
||||
class="input"
|
||||
placeholder="Token"
|
||||
@@ -343,7 +343,7 @@
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="row-wrapper">
|
||||
<div class="flex flex-1">
|
||||
<SmartToggle
|
||||
:on="!URL_EXCLUDES.auth"
|
||||
@change="setExclude('auth', !$event)"
|
||||
@@ -359,7 +359,7 @@
|
||||
>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="row-wrapper">
|
||||
<div class="flex flex-1">
|
||||
<label for="token-name">{{ $t("token_name") }}</label>
|
||||
<div>
|
||||
<ButtonSecondary
|
||||
@@ -487,7 +487,7 @@
|
||||
<AppSection v-if="showPreRequestScript" label="preRequest">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="row-wrapper">
|
||||
<div class="flex flex-1">
|
||||
<label>{{ $t("javascript_code") }}</label>
|
||||
<div>
|
||||
<ButtonSecondary
|
||||
@@ -521,7 +521,7 @@
|
||||
<AppSection v-if="testsEnabled" label="postRequestTests">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="row-wrapper">
|
||||
<div class="flex flex-1">
|
||||
<label>{{ $t("javascript_code") }}</label>
|
||||
<div>
|
||||
<ButtonSecondary
|
||||
@@ -547,7 +547,7 @@
|
||||
completeMode="test"
|
||||
/>
|
||||
<div v-if="testReports.length !== 0">
|
||||
<div class="row-wrapper">
|
||||
<div class="flex flex-1">
|
||||
<label>Test Reports</label>
|
||||
<div>
|
||||
<ButtonSecondary
|
||||
@@ -570,7 +570,7 @@
|
||||
</div>
|
||||
<p
|
||||
v-else-if="testReport.result"
|
||||
class="row-wrapper info"
|
||||
class="flex flex-1 info"
|
||||
>
|
||||
<span :class="testReport.styles.class">
|
||||
<i class="material-icons">
|
||||
@@ -595,7 +595,7 @@
|
||||
</SmartTabs>
|
||||
</section>
|
||||
</Pane>
|
||||
<Pane class="bg-purple-100">
|
||||
<Pane class="overflow-auto">
|
||||
<HttpResponse
|
||||
:response="response"
|
||||
:active="runningRequest"
|
||||
@@ -604,27 +604,25 @@
|
||||
</Pane>
|
||||
</Splitpanes>
|
||||
</Pane>
|
||||
<Pane max-size="40" class="bg-pink-100">
|
||||
<aside class="lg:max-w-md">
|
||||
<section>
|
||||
<SmartTabs>
|
||||
<SmartTab :id="'history'" :label="$t('history')" :selected="true">
|
||||
<History
|
||||
:page="'rest'"
|
||||
@useHistory="handleUseHistory"
|
||||
ref="historyComponent"
|
||||
/>
|
||||
</SmartTab>
|
||||
<Pane max-size="35" min-size="20" class="overflow-auto">
|
||||
<aside class="h-full bg-yellow-200">
|
||||
<SmartTabs>
|
||||
<SmartTab :id="'history'" :label="$t('history')" :selected="true">
|
||||
<History
|
||||
:page="'rest'"
|
||||
@useHistory="handleUseHistory"
|
||||
ref="historyComponent"
|
||||
/>
|
||||
</SmartTab>
|
||||
|
||||
<SmartTab :id="'collections'" :label="$t('collections')">
|
||||
<Collections />
|
||||
</SmartTab>
|
||||
<SmartTab :id="'collections'" :label="$t('collections')">
|
||||
<Collections />
|
||||
</SmartTab>
|
||||
|
||||
<SmartTab :id="'env'" :label="$t('environments')">
|
||||
<Environments />
|
||||
</SmartTab>
|
||||
</SmartTabs>
|
||||
</section>
|
||||
<SmartTab :id="'env'" :label="$t('environments')">
|
||||
<Environments />
|
||||
</SmartTab>
|
||||
</SmartTabs>
|
||||
</aside>
|
||||
</Pane>
|
||||
</Splitpanes>
|
||||
@@ -673,7 +671,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
<div class="row-wrapper">
|
||||
<div class="flex flex-1">
|
||||
<label for="token-req-list">{{ $t("token_req_list") }}</label>
|
||||
<div>
|
||||
<ButtonSecondary
|
||||
|
||||
214
pages/doc.vue
214
pages/doc.vue
@@ -1,116 +1,123 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="content">
|
||||
<div class="">
|
||||
<AppSection label="import">
|
||||
<div class="flex flex-col">
|
||||
<label>{{ $t("collection") }}</label>
|
||||
<p>
|
||||
{{ $t("generate_docs_message") }}
|
||||
</p>
|
||||
<div class="row-wrapper">
|
||||
<label for="collectionUpload">
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="JSON"
|
||||
icon="folder"
|
||||
:label="$t('import_collections')"
|
||||
@click.native="$refs.collectionUpload.click()"
|
||||
<div>
|
||||
<Splitpanes vertical :dbl-click-splitter="false">
|
||||
<Pane class="overflow-auto">
|
||||
<Splitpanes horizontal :dbl-click-splitter="false">
|
||||
<Pane class="overflow-auto">
|
||||
<AppSection label="import">
|
||||
<div class="flex flex-col">
|
||||
<label>{{ $t("collection") }}</label>
|
||||
<p>
|
||||
{{ $t("generate_docs_message") }}
|
||||
</p>
|
||||
<div class="flex flex-1">
|
||||
<label for="collectionUpload">
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="JSON"
|
||||
icon="folder"
|
||||
:label="$t('import_collections')"
|
||||
@click.native="$refs.collectionUpload.click()"
|
||||
/>
|
||||
</label>
|
||||
<input
|
||||
ref="collectionUpload"
|
||||
class="input"
|
||||
name="collectionUpload"
|
||||
type="file"
|
||||
@change="uploadCollection"
|
||||
/>
|
||||
<div>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
icon="clear_all"
|
||||
@click.native="collectionJSON = '[]'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<SmartAceEditor
|
||||
v-model="collectionJSON"
|
||||
:lang="'json'"
|
||||
:lint="false"
|
||||
:options="{
|
||||
maxLines: '16',
|
||||
minLines: '8',
|
||||
fontSize: '15px',
|
||||
autoScrollEditorIntoView: true,
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
/>
|
||||
</label>
|
||||
<input
|
||||
ref="collectionUpload"
|
||||
class="input"
|
||||
name="collectionUpload"
|
||||
type="file"
|
||||
@change="uploadCollection"
|
||||
/>
|
||||
<div>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
icon="clear_all"
|
||||
@click.native="collectionJSON = '[]'"
|
||||
icon="topic"
|
||||
:label="$t('generate_docs')"
|
||||
@click.native="getDoc"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<SmartAceEditor
|
||||
v-model="collectionJSON"
|
||||
:lang="'json'"
|
||||
:lint="false"
|
||||
:options="{
|
||||
maxLines: '16',
|
||||
minLines: '8',
|
||||
fontSize: '15px',
|
||||
autoScrollEditorIntoView: true,
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
icon="topic"
|
||||
:label="$t('generate_docs')"
|
||||
@click.native="getDoc"
|
||||
/>
|
||||
</div>
|
||||
</AppSection>
|
||||
|
||||
<AppSection label="documentation">
|
||||
<div class="flex flex-col">
|
||||
<label>{{ $t("documentation") }}</label>
|
||||
<p v-if="items.length === 0">
|
||||
{{ $t("generate_docs_first") }}
|
||||
</p>
|
||||
<div v-else class="row-wrapper">
|
||||
<div
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="
|
||||
!currentUser
|
||||
? $t('login_with_github_to') + $t('create_secret_gist')
|
||||
: currentUser.provider !== 'github.com'
|
||||
? $t('login_with_github_to') + $t('create_secret_gist')
|
||||
: null
|
||||
"
|
||||
>
|
||||
<ButtonSecondary
|
||||
:disabled="
|
||||
!currentUser
|
||||
? true
|
||||
: currentUser.provider !== 'github.com'
|
||||
? true
|
||||
: false
|
||||
"
|
||||
icon="assignment"
|
||||
label="$t('create_secret_gist')"
|
||||
@click.native="createDocsGist"
|
||||
/>
|
||||
</AppSection>
|
||||
</Pane>
|
||||
<Pane class="overflow-auto">
|
||||
<AppSection label="documentation">
|
||||
<div class="flex flex-col">
|
||||
<label>{{ $t("documentation") }}</label>
|
||||
<p v-if="items.length === 0">
|
||||
{{ $t("generate_docs_first") }}
|
||||
</p>
|
||||
<div v-else class="flex flex-1">
|
||||
<div
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="
|
||||
!currentUser
|
||||
? $t('login_with_github_to') + $t('create_secret_gist')
|
||||
: currentUser.provider !== 'github.com'
|
||||
? $t('login_with_github_to') + $t('create_secret_gist')
|
||||
: null
|
||||
"
|
||||
>
|
||||
<ButtonSecondary
|
||||
:disabled="
|
||||
!currentUser
|
||||
? true
|
||||
: currentUser.provider !== 'github.com'
|
||||
? true
|
||||
: false
|
||||
"
|
||||
icon="assignment"
|
||||
label="$t('create_secret_gist')"
|
||||
@click.native="createDocsGist"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
v-for="(collection, index) in items"
|
||||
:key="`collection-${index}`"
|
||||
>
|
||||
<DocsCollection :collection="collection" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
v-for="(collection, index) in items"
|
||||
:key="`collection-${index}`"
|
||||
>
|
||||
<DocsCollection :collection="collection" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</AppSection>
|
||||
</div>
|
||||
|
||||
<aside class="lg:max-w-md">
|
||||
<Collections
|
||||
:selected="selected"
|
||||
:doc="true"
|
||||
@use-collection="useSelectedCollection($event)"
|
||||
@remove-collection="removeSelectedCollection($event)"
|
||||
/>
|
||||
</aside>
|
||||
</div>
|
||||
</AppSection>
|
||||
</Pane>
|
||||
</Splitpanes>
|
||||
</Pane>
|
||||
<Pane max-size="35" min-size="20" class="overflow-auto">
|
||||
<aside class="lg:max-w-md">
|
||||
<Collections
|
||||
:selected="selected"
|
||||
:doc="true"
|
||||
@use-collection="useSelectedCollection($event)"
|
||||
@remove-collection="removeSelectedCollection($event)"
|
||||
/>
|
||||
</aside>
|
||||
</Pane>
|
||||
</Splitpanes>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Splitpanes, Pane } from "splitpanes"
|
||||
import Mustache from "mustache"
|
||||
import { currentUser$ } from "~/helpers/fb/auth"
|
||||
import DocsTemplate from "~/assets/md/docs.md"
|
||||
@@ -118,6 +125,7 @@ import folderContents from "~/assets/md/folderContents.md"
|
||||
import folderBody from "~/assets/md/folderBody.md"
|
||||
|
||||
export default {
|
||||
components: { Splitpanes, Pane },
|
||||
data() {
|
||||
return {
|
||||
collectionJSON: "[]",
|
||||
|
||||
@@ -1,443 +1,448 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="content">
|
||||
<div class="">
|
||||
<AppSection label="endpoint">
|
||||
<ul>
|
||||
<li>
|
||||
<label for="url">{{ $t("url") }}</label>
|
||||
<input
|
||||
id="url"
|
||||
v-model="url"
|
||||
type="url"
|
||||
spellcheck="false"
|
||||
class="input md:rounded-bl-lg"
|
||||
:placeholder="$t('url')"
|
||||
@keyup.enter="onPollSchemaClick()"
|
||||
<div>
|
||||
<Splitpanes vertical :dbl-click-splitter="false">
|
||||
<Pane class="overflow-auto">
|
||||
<Splitpanes horizontal :dbl-click-splitter="false">
|
||||
<Pane class="overflow-auto">
|
||||
<AppSection label="endpoint">
|
||||
<ul>
|
||||
<li>
|
||||
<label for="url">{{ $t("url") }}</label>
|
||||
<input
|
||||
id="url"
|
||||
v-model="url"
|
||||
type="url"
|
||||
spellcheck="false"
|
||||
class="input md:rounded-bl-lg"
|
||||
:placeholder="$t('url')"
|
||||
@keyup.enter="onPollSchemaClick()"
|
||||
/>
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<ButtonSecondary
|
||||
id="get"
|
||||
name="get"
|
||||
:icon="!isPollingSchema ? 'sync' : 'sync_disabled'"
|
||||
:label="
|
||||
!isPollingSchema ? $t('connect') : $t('disconnect')
|
||||
"
|
||||
@click.native="onPollSchemaClick"
|
||||
/>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
</AppSection>
|
||||
<AppSection label="headers">
|
||||
<div class="flex flex-col">
|
||||
<label>{{ $t("headers") }}</label>
|
||||
<ul v-if="headers.length !== 0">
|
||||
<li>
|
||||
<div class="flex flex-1">
|
||||
<label for="headerList">{{ $t("header_list") }}</label>
|
||||
<div>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
icon="clear_all"
|
||||
@click.native="headers = []"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul
|
||||
v-for="(header, index) in headers"
|
||||
:key="`${header.value}_${index}`"
|
||||
class="
|
||||
divide-y divide-dashed divide-divider
|
||||
border-b border-dashed border-divider
|
||||
md:divide-x md:divide-y-0
|
||||
"
|
||||
:class="{ 'border-t': index == 0 }"
|
||||
>
|
||||
<li>
|
||||
<SmartAutoComplete
|
||||
:placeholder="$t('header_count', { count: index + 1 })"
|
||||
:source="commonHeaders"
|
||||
:spellcheck="false"
|
||||
:value="header.key"
|
||||
autofocus
|
||||
@input="
|
||||
$store.commit('setGQLHeaderKey', {
|
||||
index,
|
||||
value: $event,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
class="input"
|
||||
:placeholder="$t('value_count', { count: index + 1 })"
|
||||
:name="`value ${index}`"
|
||||
:value="header.value"
|
||||
autofocus
|
||||
@change="
|
||||
$store.commit('setGQLHeaderValue', {
|
||||
index,
|
||||
value: $event.target.value,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="
|
||||
header.hasOwnProperty('active')
|
||||
? header.active
|
||||
? $t('turn_off')
|
||||
: $t('turn_on')
|
||||
: $t('turn_off')
|
||||
"
|
||||
@click.native="
|
||||
$store.commit('setActiveGQLHeader', {
|
||||
index,
|
||||
value: header.hasOwnProperty('active')
|
||||
? !header.active
|
||||
: false,
|
||||
})
|
||||
"
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{
|
||||
header.hasOwnProperty("active")
|
||||
? header.active
|
||||
? "check_box"
|
||||
: "check_box_outline_blank"
|
||||
: "check_box"
|
||||
}}
|
||||
</i>
|
||||
</li>
|
||||
</div>
|
||||
<div>
|
||||
<li>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
icon="delete"
|
||||
@click.native="removeRequestHeader(index)"
|
||||
/>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<ButtonSecondary
|
||||
icon="add"
|
||||
:label="$t('add_new')"
|
||||
@click.native="addRequestHeader"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</AppSection>
|
||||
<AppSection label="query">
|
||||
<div class="flex flex-1 gqlRunQuery">
|
||||
<label for="gqlQuery">{{ $t("query") }}</label>
|
||||
<div>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="
|
||||
`${$t('run_query')} (${getSpecialKey()}-Enter)`
|
||||
"
|
||||
class="button"
|
||||
icon="play_arrow"
|
||||
@click.native="runQuery()"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
ref="copyQueryButton"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('copy_query')"
|
||||
:icon="copyQueryIcon"
|
||||
@click.native="copyQuery"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="`${$t('prettify_query')} (${getSpecialKey()}-P)`"
|
||||
:icon="prettifyIcon"
|
||||
@click.native="doPrettifyQuery"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
ref="saveRequest"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('save_to_collections')"
|
||||
icon="create_new_folder"
|
||||
@click.native="saveRequest"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<GraphqlQueryEditor
|
||||
ref="queryEditor"
|
||||
v-model="gqlQueryString"
|
||||
styles="rounded-b-lg"
|
||||
:on-run-g-q-l-query="runQuery"
|
||||
:options="{
|
||||
maxLines: responseBodyMaxLines,
|
||||
minLines: 10,
|
||||
fontSize: '15px',
|
||||
autoScrollEditorIntoView: true,
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
@update-query="updateQuery"
|
||||
/>
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<ButtonSecondary
|
||||
id="get"
|
||||
name="get"
|
||||
:icon="!isPollingSchema ? 'sync' : 'sync_disabled'"
|
||||
:label="!isPollingSchema ? $t('connect') : $t('disconnect')"
|
||||
@click.native="onPollSchemaClick"
|
||||
</AppSection>
|
||||
<AppSection label="variables">
|
||||
<div class="flex flex-col">
|
||||
<label>{{ $t("variables") }}</label>
|
||||
<SmartAceEditor
|
||||
v-model="variableString"
|
||||
:lang="'json'"
|
||||
:options="{
|
||||
maxLines: 10,
|
||||
minLines: 5,
|
||||
fontSize: '15px',
|
||||
autoScrollEditorIntoView: true,
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
styles="rounded-b-lg"
|
||||
/>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
</AppSection>
|
||||
|
||||
<AppSection label="headers">
|
||||
<div class="flex flex-col">
|
||||
<label>{{ $t("headers") }}</label>
|
||||
<ul v-if="headers.length !== 0">
|
||||
<li>
|
||||
<div class="row-wrapper">
|
||||
<label for="headerList">{{ $t("header_list") }}</label>
|
||||
</div>
|
||||
</AppSection>
|
||||
</Pane>
|
||||
<Pane class="overflow-auto">
|
||||
<AppSection ref="schema" label="schema">
|
||||
<div class="flex flex-1">
|
||||
<label>{{ $t("schema") }}</label>
|
||||
<div v-if="schema">
|
||||
<ButtonSecondary
|
||||
ref="ToggleExpandResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="
|
||||
!expandResponse
|
||||
? $t('expand_response')
|
||||
: $t('collapse_response')
|
||||
"
|
||||
:icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
|
||||
@click.native="ToggleExpandResponse"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
ref="downloadSchema"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('download_file')"
|
||||
:icon="downloadSchemaIcon"
|
||||
@click.native="downloadSchema"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
ref="copySchemaCode"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('copy_schema')"
|
||||
:icon="copySchemaIcon"
|
||||
@click.native="copySchema"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<SmartAceEditor
|
||||
v-if="schema"
|
||||
:value="schema"
|
||||
:lang="'graphqlschema'"
|
||||
:options="{
|
||||
maxLines: responseBodyMaxLines,
|
||||
minLines: 16,
|
||||
fontSize: '15px',
|
||||
autoScrollEditorIntoView: true,
|
||||
readOnly: true,
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
styles="rounded-b-lg"
|
||||
/>
|
||||
<input
|
||||
v-else
|
||||
ref="status"
|
||||
class="input rounded-b-lg missing-data-response"
|
||||
:value="$t('waiting_receive_schema')"
|
||||
name="status"
|
||||
readonly
|
||||
type="text"
|
||||
/>
|
||||
</AppSection>
|
||||
<AppSection ref="response" label="response">
|
||||
<div class="flex flex-col">
|
||||
<label>{{ $t("response") }}</label>
|
||||
<div class="flex flex-1">
|
||||
<label for="responseField">{{ $t("response_body") }}</label>
|
||||
<div>
|
||||
<ButtonSecondary
|
||||
v-if="response"
|
||||
ref="downloadResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
icon="clear_all"
|
||||
@click.native="headers = []"
|
||||
:title="$t('download_file')"
|
||||
:icon="downloadResponseIcon"
|
||||
@click.native="downloadResponse"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-if="response"
|
||||
ref="copyResponseButton"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('copy_response')"
|
||||
:icon="copyResponseIcon"
|
||||
@click.native="copyResponse"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul
|
||||
v-for="(header, index) in headers"
|
||||
:key="`${header.value}_${index}`"
|
||||
class="
|
||||
divide-y divide-dashed divide-divider
|
||||
border-b border-dashed border-divider
|
||||
md:divide-x md:divide-y-0
|
||||
"
|
||||
:class="{ 'border-t': index == 0 }"
|
||||
>
|
||||
<li>
|
||||
<SmartAutoComplete
|
||||
:placeholder="$t('header_count', { count: index + 1 })"
|
||||
:source="commonHeaders"
|
||||
:spellcheck="false"
|
||||
:value="header.key"
|
||||
autofocus
|
||||
@input="
|
||||
$store.commit('setGQLHeaderKey', {
|
||||
index,
|
||||
value: $event,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
class="input"
|
||||
:placeholder="$t('value_count', { count: index + 1 })"
|
||||
:name="`value ${index}`"
|
||||
:value="header.value"
|
||||
autofocus
|
||||
@change="
|
||||
$store.commit('setGQLHeaderValue', {
|
||||
index,
|
||||
value: $event.target.value,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="
|
||||
header.hasOwnProperty('active')
|
||||
? header.active
|
||||
? $t('turn_off')
|
||||
: $t('turn_on')
|
||||
: $t('turn_off')
|
||||
"
|
||||
@click.native="
|
||||
$store.commit('setActiveGQLHeader', {
|
||||
index,
|
||||
value: header.hasOwnProperty('active')
|
||||
? !header.active
|
||||
: false,
|
||||
})
|
||||
"
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{
|
||||
header.hasOwnProperty("active")
|
||||
? header.active
|
||||
? "check_box"
|
||||
: "check_box_outline_blank"
|
||||
: "check_box"
|
||||
}}
|
||||
</i>
|
||||
</li>
|
||||
</div>
|
||||
<div>
|
||||
<li>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
icon="delete"
|
||||
@click.native="removeRequestHeader(index)"
|
||||
/>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<ButtonSecondary
|
||||
icon="add"
|
||||
:label="$t('add_new')"
|
||||
@click.native="addRequestHeader"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</AppSection>
|
||||
|
||||
<AppSection ref="schema" label="schema">
|
||||
<div class="row-wrapper">
|
||||
<label>{{ $t("schema") }}</label>
|
||||
<div v-if="schema">
|
||||
<ButtonSecondary
|
||||
ref="ToggleExpandResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="
|
||||
!expandResponse
|
||||
? $t('expand_response')
|
||||
: $t('collapse_response')
|
||||
"
|
||||
:icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
|
||||
@click.native="ToggleExpandResponse"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
ref="downloadSchema"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('download_file')"
|
||||
:icon="downloadSchemaIcon"
|
||||
@click.native="downloadSchema"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
ref="copySchemaCode"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('copy_schema')"
|
||||
:icon="copySchemaIcon"
|
||||
@click.native="copySchema"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<SmartAceEditor
|
||||
v-if="schema"
|
||||
:value="schema"
|
||||
:lang="'graphqlschema'"
|
||||
:options="{
|
||||
maxLines: responseBodyMaxLines,
|
||||
minLines: 16,
|
||||
fontSize: '15px',
|
||||
autoScrollEditorIntoView: true,
|
||||
readOnly: true,
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
styles="rounded-b-lg"
|
||||
/>
|
||||
<input
|
||||
v-else
|
||||
ref="status"
|
||||
class="input rounded-b-lg missing-data-response"
|
||||
:value="$t('waiting_receive_schema')"
|
||||
name="status"
|
||||
readonly
|
||||
type="text"
|
||||
/>
|
||||
</AppSection>
|
||||
|
||||
<AppSection label="query">
|
||||
<div class="row-wrapper gqlRunQuery">
|
||||
<label for="gqlQuery">{{ $t("query") }}</label>
|
||||
<div>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="
|
||||
`${$t('run_query')} (${getSpecialKey()}-Enter)`
|
||||
"
|
||||
class="button"
|
||||
icon="play_arrow"
|
||||
@click.native="runQuery()"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
ref="copyQueryButton"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('copy_query')"
|
||||
:icon="copyQueryIcon"
|
||||
@click.native="copyQuery"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="`${$t('prettify_query')} (${getSpecialKey()}-P)`"
|
||||
:icon="prettifyIcon"
|
||||
@click.native="doPrettifyQuery"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
ref="saveRequest"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('save_to_collections')"
|
||||
icon="create_new_folder"
|
||||
@click.native="saveRequest"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<GraphqlQueryEditor
|
||||
ref="queryEditor"
|
||||
v-model="gqlQueryString"
|
||||
styles="rounded-b-lg"
|
||||
:on-run-g-q-l-query="runQuery"
|
||||
:options="{
|
||||
maxLines: responseBodyMaxLines,
|
||||
minLines: 10,
|
||||
fontSize: '15px',
|
||||
autoScrollEditorIntoView: true,
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
@update-query="updateQuery"
|
||||
/>
|
||||
</AppSection>
|
||||
|
||||
<AppSection label="variables">
|
||||
<div class="flex flex-col">
|
||||
<label>{{ $t("variables") }}</label>
|
||||
<SmartAceEditor
|
||||
v-model="variableString"
|
||||
:lang="'json'"
|
||||
:options="{
|
||||
maxLines: 10,
|
||||
minLines: 5,
|
||||
fontSize: '15px',
|
||||
autoScrollEditorIntoView: true,
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
styles="rounded-b-lg"
|
||||
/>
|
||||
</div>
|
||||
</AppSection>
|
||||
|
||||
<AppSection ref="response" label="response">
|
||||
<div class="flex flex-col">
|
||||
<label>{{ $t("response") }}</label>
|
||||
<div class="row-wrapper">
|
||||
<label for="responseField">{{ $t("response_body") }}</label>
|
||||
<div>
|
||||
<ButtonSecondary
|
||||
<SmartAceEditor
|
||||
v-if="response"
|
||||
ref="downloadResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('download_file')"
|
||||
:icon="downloadResponseIcon"
|
||||
@click.native="downloadResponse"
|
||||
:value="response"
|
||||
:lang="'json'"
|
||||
:lint="false"
|
||||
:options="{
|
||||
maxLines: responseBodyMaxLines,
|
||||
minLines: 10,
|
||||
fontSize: '15px',
|
||||
autoScrollEditorIntoView: true,
|
||||
readOnly: true,
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
styles="rounded-b-lg"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-if="response"
|
||||
ref="copyResponseButton"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('copy_response')"
|
||||
:icon="copyResponseIcon"
|
||||
@click.native="copyResponse"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<SmartAceEditor
|
||||
v-if="response"
|
||||
:value="response"
|
||||
:lang="'json'"
|
||||
:lint="false"
|
||||
:options="{
|
||||
maxLines: responseBodyMaxLines,
|
||||
minLines: 10,
|
||||
fontSize: '15px',
|
||||
autoScrollEditorIntoView: true,
|
||||
readOnly: true,
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
styles="rounded-b-lg"
|
||||
/>
|
||||
<input
|
||||
v-else
|
||||
ref="status"
|
||||
class="input rounded-b-lg missing-data-response"
|
||||
:value="$t('waiting_receive_response')"
|
||||
name="status"
|
||||
readonly
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</AppSection>
|
||||
</div>
|
||||
|
||||
<aside class="lg:max-w-md">
|
||||
<SmartTabs>
|
||||
<SmartTab :id="'docs'" :label="`Docs`" :selected="true">
|
||||
<AppSection label="docs">
|
||||
<section class="flex-col">
|
||||
<input
|
||||
v-model="graphqlFieldsFilterText"
|
||||
v-else
|
||||
ref="status"
|
||||
class="input rounded-b-lg missing-data-response"
|
||||
:value="$t('waiting_receive_response')"
|
||||
name="status"
|
||||
readonly
|
||||
type="text"
|
||||
:placeholder="$t('search')"
|
||||
class="input rounded-t-lg"
|
||||
/>
|
||||
<SmartTabs ref="gqlTabs" styles="m-4">
|
||||
<div class="gqlTabs">
|
||||
<SmartTab
|
||||
v-if="queryFields.length > 0"
|
||||
:id="'queries'"
|
||||
:label="$t('queries')"
|
||||
:selected="true"
|
||||
>
|
||||
<div
|
||||
v-for="field in filteredQueryFields"
|
||||
:key="field.name"
|
||||
>
|
||||
<GraphqlField
|
||||
:gql-field="field"
|
||||
:jump-type-callback="handleJumpToType"
|
||||
/>
|
||||
</div>
|
||||
</SmartTab>
|
||||
|
||||
<SmartTab
|
||||
v-if="mutationFields.length > 0"
|
||||
:id="'mutations'"
|
||||
:label="$t('mutations')"
|
||||
>
|
||||
<div
|
||||
v-for="field in filteredMutationFields"
|
||||
:key="field.name"
|
||||
>
|
||||
<GraphqlField
|
||||
:gql-field="field"
|
||||
:jump-type-callback="handleJumpToType"
|
||||
/>
|
||||
</div>
|
||||
</SmartTab>
|
||||
|
||||
<SmartTab
|
||||
v-if="subscriptionFields.length > 0"
|
||||
:id="'subscriptions'"
|
||||
:label="$t('subscriptions')"
|
||||
>
|
||||
<div
|
||||
v-for="field in filteredSubscriptionFields"
|
||||
:key="field.name"
|
||||
>
|
||||
<GraphqlField
|
||||
:gql-field="field"
|
||||
:jump-type-callback="handleJumpToType"
|
||||
/>
|
||||
</div>
|
||||
</SmartTab>
|
||||
|
||||
<SmartTab
|
||||
v-if="graphqlTypes.length > 0"
|
||||
:id="'types'"
|
||||
ref="typesTab"
|
||||
:label="$t('types')"
|
||||
>
|
||||
<div
|
||||
v-for="type in filteredGraphqlTypes"
|
||||
:key="type.name"
|
||||
>
|
||||
<GraphqlType
|
||||
:gql-type="type"
|
||||
:gql-types="graphqlTypes"
|
||||
:is-highlighted="
|
||||
isGqlTypeHighlighted({ gqlType: type })
|
||||
"
|
||||
:highlighted-fields="
|
||||
getGqlTypeHighlightedFields({ gqlType: type })
|
||||
"
|
||||
:jump-type-callback="handleJumpToType"
|
||||
/>
|
||||
</div>
|
||||
</SmartTab>
|
||||
</div>
|
||||
</SmartTabs>
|
||||
</section>
|
||||
<p
|
||||
v-if="
|
||||
queryFields.length === 0 &&
|
||||
mutationFields.length === 0 &&
|
||||
subscriptionFields.length === 0 &&
|
||||
graphqlTypes.length === 0
|
||||
"
|
||||
>
|
||||
{{ $t("send_request_first") }}
|
||||
</p>
|
||||
</div>
|
||||
</AppSection>
|
||||
</SmartTab>
|
||||
</Pane>
|
||||
</Splitpanes>
|
||||
</Pane>
|
||||
<Pane max-size="35" min-size="20" class="overflow-auto">
|
||||
<aside class="lg:max-w-md">
|
||||
<SmartTabs>
|
||||
<SmartTab :id="'docs'" :label="`Docs`" :selected="true">
|
||||
<AppSection label="docs">
|
||||
<section class="flex-col">
|
||||
<input
|
||||
v-model="graphqlFieldsFilterText"
|
||||
type="text"
|
||||
:placeholder="$t('search')"
|
||||
class="input rounded-t-lg"
|
||||
/>
|
||||
<SmartTabs ref="gqlTabs" styles="m-4">
|
||||
<div class="gqlTabs">
|
||||
<SmartTab
|
||||
v-if="queryFields.length > 0"
|
||||
:id="'queries'"
|
||||
:label="$t('queries')"
|
||||
:selected="true"
|
||||
>
|
||||
<div
|
||||
v-for="field in filteredQueryFields"
|
||||
:key="field.name"
|
||||
>
|
||||
<GraphqlField
|
||||
:gql-field="field"
|
||||
:jump-type-callback="handleJumpToType"
|
||||
/>
|
||||
</div>
|
||||
</SmartTab>
|
||||
|
||||
<SmartTab :id="'history'" :label="$t('history')">
|
||||
<History
|
||||
ref="graphqlHistoryComponent"
|
||||
:page="'graphql'"
|
||||
@useHistory="handleUseHistory"
|
||||
/>
|
||||
</SmartTab>
|
||||
<SmartTab
|
||||
v-if="mutationFields.length > 0"
|
||||
:id="'mutations'"
|
||||
:label="$t('mutations')"
|
||||
>
|
||||
<div
|
||||
v-for="field in filteredMutationFields"
|
||||
:key="field.name"
|
||||
>
|
||||
<GraphqlField
|
||||
:gql-field="field"
|
||||
:jump-type-callback="handleJumpToType"
|
||||
/>
|
||||
</div>
|
||||
</SmartTab>
|
||||
|
||||
<SmartTab
|
||||
v-if="subscriptionFields.length > 0"
|
||||
:id="'subscriptions'"
|
||||
:label="$t('subscriptions')"
|
||||
>
|
||||
<div
|
||||
v-for="field in filteredSubscriptionFields"
|
||||
:key="field.name"
|
||||
>
|
||||
<GraphqlField
|
||||
:gql-field="field"
|
||||
:jump-type-callback="handleJumpToType"
|
||||
/>
|
||||
</div>
|
||||
</SmartTab>
|
||||
|
||||
<SmartTab
|
||||
v-if="graphqlTypes.length > 0"
|
||||
:id="'types'"
|
||||
ref="typesTab"
|
||||
:label="$t('types')"
|
||||
>
|
||||
<div
|
||||
v-for="type in filteredGraphqlTypes"
|
||||
:key="type.name"
|
||||
>
|
||||
<GraphqlType
|
||||
:gql-type="type"
|
||||
:gql-types="graphqlTypes"
|
||||
:is-highlighted="
|
||||
isGqlTypeHighlighted({ gqlType: type })
|
||||
"
|
||||
:highlighted-fields="
|
||||
getGqlTypeHighlightedFields({ gqlType: type })
|
||||
"
|
||||
:jump-type-callback="handleJumpToType"
|
||||
/>
|
||||
</div>
|
||||
</SmartTab>
|
||||
</div>
|
||||
</SmartTabs>
|
||||
</section>
|
||||
<p
|
||||
v-if="
|
||||
queryFields.length === 0 &&
|
||||
mutationFields.length === 0 &&
|
||||
subscriptionFields.length === 0 &&
|
||||
graphqlTypes.length === 0
|
||||
"
|
||||
>
|
||||
{{ $t("send_request_first") }}
|
||||
</p>
|
||||
</AppSection>
|
||||
</SmartTab>
|
||||
|
||||
<SmartTab :id="'history'" :label="$t('history')">
|
||||
<History
|
||||
ref="graphqlHistoryComponent"
|
||||
:page="'graphql'"
|
||||
@useHistory="handleUseHistory"
|
||||
/>
|
||||
</SmartTab>
|
||||
|
||||
<SmartTab :id="'collections'" :label="$t('collections')">
|
||||
<CollectionsGraphql />
|
||||
</SmartTab>
|
||||
</SmartTabs>
|
||||
</aside>
|
||||
</Pane>
|
||||
</Splitpanes>
|
||||
|
||||
<SmartTab :id="'collections'" :label="$t('collections')">
|
||||
<CollectionsGraphql />
|
||||
</SmartTab>
|
||||
</SmartTabs>
|
||||
</aside>
|
||||
</div>
|
||||
<CollectionsSaveRequest
|
||||
mode="graphql"
|
||||
:show="showSaveRequestModal"
|
||||
@@ -448,6 +453,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Splitpanes, Pane } from "splitpanes"
|
||||
import * as gql from "graphql"
|
||||
import { commonHeaders } from "~/helpers/headers"
|
||||
import { getPlatformSpecialKey } from "~/helpers/platformutils"
|
||||
@@ -456,10 +462,10 @@ import { getSettingSubject } from "~/newstore/settings"
|
||||
import { addGraphqlHistoryEntry } from "~/newstore/history"
|
||||
|
||||
export default {
|
||||
components: { Splitpanes, Pane },
|
||||
beforeRouteLeave(_to, _from, next) {
|
||||
this.isPollingSchema = false
|
||||
if (this.timeoutSubscription) clearTimeout(this.timeoutSubscription)
|
||||
|
||||
next()
|
||||
},
|
||||
data() {
|
||||
@@ -1122,8 +1128,6 @@ export default {
|
||||
.gqlTabs {
|
||||
@apply relative;
|
||||
@apply overflow-auto;
|
||||
|
||||
max-height: calc(100vh - 192px);
|
||||
}
|
||||
|
||||
.gqlRunQuery {
|
||||
|
||||
@@ -1,24 +1,19 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<section id="options">
|
||||
<SmartTabs>
|
||||
<SmartTab :id="'websocket'" :label="$t('websocket')" :selected="true">
|
||||
<RealtimeWebsocket />
|
||||
</SmartTab>
|
||||
|
||||
<SmartTab :id="'sse'" :label="$t('sse')">
|
||||
<RealtimeSse />
|
||||
</SmartTab>
|
||||
|
||||
<SmartTab :id="'socketio'" :label="$t('socketio')">
|
||||
<RealtimeSocketio />
|
||||
</SmartTab>
|
||||
|
||||
<SmartTab :id="'mqtt'" :label="$t('mqtt')">
|
||||
<RealtimeMqtt />
|
||||
</SmartTab>
|
||||
</SmartTabs>
|
||||
</section>
|
||||
<div>
|
||||
<SmartTabs>
|
||||
<SmartTab :id="'websocket'" :label="$t('websocket')" :selected="true">
|
||||
<RealtimeWebsocket />
|
||||
</SmartTab>
|
||||
<SmartTab :id="'sse'" :label="$t('sse')">
|
||||
<RealtimeSse />
|
||||
</SmartTab>
|
||||
<SmartTab :id="'socketio'" :label="$t('socketio')">
|
||||
<RealtimeSocketio />
|
||||
</SmartTab>
|
||||
<SmartTab :id="'mqtt'" :label="$t('mqtt')">
|
||||
<RealtimeMqtt />
|
||||
</SmartTab>
|
||||
</SmartTabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div>
|
||||
<div class="space-y-8">
|
||||
<div class="md:grid md:grid-cols-3 md:gap-4">
|
||||
<div class="md:col-span-1 p-8">
|
||||
|
||||
Reference in New Issue
Block a user