chore(refactor): modern UI
This commit is contained in:
Liyas Thomas
@@ -2,7 +2,7 @@
|
||||
<div class="page">
|
||||
<div class="content">
|
||||
<div class="page-columns inner-left">
|
||||
<pw-section class="blue" :label="$t('endpoint')" ref="endpoint">
|
||||
<pw-section class="blue" :label="$t('endpoint')" ref="endpoint" no-legend>
|
||||
<ul>
|
||||
<li>
|
||||
<label for="url">{{ $t("url") }}</label>
|
||||
@@ -12,12 +12,18 @@
|
||||
v-model="url"
|
||||
spellcheck="false"
|
||||
@keyup.enter="onPollSchemaClick()"
|
||||
class="md:rounded-bl-lg"
|
||||
/>
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<label for="get" class="hide-on-small-screen"> </label>
|
||||
<button id="get" name="get" @click="onPollSchemaClick">
|
||||
<button
|
||||
id="get"
|
||||
name="get"
|
||||
@click="onPollSchemaClick"
|
||||
class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
|
||||
>
|
||||
{{ !isPollingSchema ? $t("connect") : $t("disconnect") }}
|
||||
<span
|
||||
><i class="material-icons">{{
|
||||
@@ -30,73 +36,76 @@
|
||||
</ul>
|
||||
</pw-section>
|
||||
|
||||
<pw-section class="orange" :label="$t('headers')" ref="headers">
|
||||
<ul v-if="headers.length !== 0">
|
||||
<li>
|
||||
<div class="row-wrapper">
|
||||
<label for="headerList">{{ $t("header_list") }}</label>
|
||||
<div>
|
||||
<button class="icon" @click="headers = []" v-tooltip.bottom="$t('clear')">
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul v-for="(header, index) in headers" :key="`${header.value}_${index}`">
|
||||
<li>
|
||||
<autocomplete
|
||||
:placeholder="$t('header_count', { count: index + 1 })"
|
||||
:source="commonHeaders"
|
||||
:spellcheck="false"
|
||||
:value="header.key"
|
||||
@input="
|
||||
$store.commit('setGQLHeaderKey', {
|
||||
index,
|
||||
value: $event,
|
||||
})
|
||||
"
|
||||
autofocus
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
:placeholder="$t('value_count', { count: index + 1 })"
|
||||
:name="'value' + index"
|
||||
:value="header.value"
|
||||
@change="
|
||||
$store.commit('setGQLHeaderValue', {
|
||||
index,
|
||||
value: $event.target.value,
|
||||
})
|
||||
"
|
||||
autofocus
|
||||
/>
|
||||
</li>
|
||||
<div>
|
||||
<pw-section class="orange" :label="$t('headers')" ref="headers" no-legend>
|
||||
<div class="flex flex-col">
|
||||
<label>{{ $t("headers") }}</label>
|
||||
<ul v-if="headers.length !== 0">
|
||||
<li>
|
||||
<button
|
||||
class="icon"
|
||||
@click="removeRequestHeader(index)"
|
||||
v-tooltip.bottom="$t('delete')"
|
||||
id="header"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
<div class="row-wrapper">
|
||||
<label for="headerList">{{ $t("header_list") }}</label>
|
||||
<div>
|
||||
<button class="icon" @click="headers = []" v-tooltip.bottom="$t('clear')">
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul v-for="(header, index) in headers" :key="`${header.value}_${index}`">
|
||||
<li>
|
||||
<autocomplete
|
||||
:placeholder="$t('header_count', { count: index + 1 })"
|
||||
:source="commonHeaders"
|
||||
:spellcheck="false"
|
||||
:value="header.key"
|
||||
@input="
|
||||
$store.commit('setGQLHeaderKey', {
|
||||
index,
|
||||
value: $event,
|
||||
})
|
||||
"
|
||||
autofocus
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
:placeholder="$t('value_count', { count: index + 1 })"
|
||||
:name="'value' + index"
|
||||
:value="header.value"
|
||||
@change="
|
||||
$store.commit('setGQLHeaderValue', {
|
||||
index,
|
||||
value: $event.target.value,
|
||||
})
|
||||
"
|
||||
autofocus
|
||||
/>
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
class="icon"
|
||||
@click="removeRequestHeader(index)"
|
||||
v-tooltip.bottom="$t('delete')"
|
||||
id="header"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon" @click="addRequestHeader">
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</button>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon" @click="addRequestHeader">
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
</pw-section>
|
||||
|
||||
<pw-section class="green" :label="$t('schema')" ref="schema">
|
||||
<pw-section class="green" :label="$t('schema')" ref="schema" no-legend>
|
||||
<div class="row-wrapper">
|
||||
<label>{{ $t("schema") }}</label>
|
||||
<div v-if="schema">
|
||||
@@ -143,10 +152,11 @@
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
styles="rounded-b-lg"
|
||||
/>
|
||||
<input
|
||||
v-else
|
||||
class="missing-data-response"
|
||||
class="rounded-b-lg missing-data-response"
|
||||
:value="$t('waiting_receive_schema')"
|
||||
ref="status"
|
||||
id="status"
|
||||
@@ -156,7 +166,7 @@
|
||||
/>
|
||||
</pw-section>
|
||||
|
||||
<pw-section class="teal" :label="$t('query')" ref="query">
|
||||
<pw-section class="teal" :label="$t('query')" ref="query" no-legend>
|
||||
<div class="row-wrapper gqlRunQuery">
|
||||
<label for="gqlQuery">{{ $t("query") }}</label>
|
||||
<div>
|
||||
@@ -195,80 +205,95 @@
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
styles="rounded-b-lg"
|
||||
/>
|
||||
</pw-section>
|
||||
|
||||
<pw-section class="yellow" label="Variables" ref="variables">
|
||||
<ace-editor
|
||||
v-model="variableString"
|
||||
:lang="'json'"
|
||||
:options="{
|
||||
maxLines: 10,
|
||||
minLines: 5,
|
||||
fontSize: '16px',
|
||||
autoScrollEditorIntoView: true,
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
/>
|
||||
</pw-section>
|
||||
|
||||
<pw-section class="purple" label="Response" ref="response">
|
||||
<div class="row-wrapper">
|
||||
<label for="responseField">{{ $t("response") }}</label>
|
||||
<div>
|
||||
<button
|
||||
class="icon"
|
||||
@click="downloadResponse"
|
||||
ref="downloadResponse"
|
||||
v-if="response"
|
||||
v-tooltip="$t('download_file')"
|
||||
>
|
||||
<i class="material-icons">save_alt</i>
|
||||
</button>
|
||||
<button
|
||||
class="icon"
|
||||
@click="copyResponse"
|
||||
ref="copyResponseButton"
|
||||
v-if="response"
|
||||
v-tooltip="$t('copy_response')"
|
||||
>
|
||||
<i class="material-icons">content_copy</i>
|
||||
</button>
|
||||
</div>
|
||||
<pw-section class="yellow" :label="$t('variables')" ref="variables" no-legend>
|
||||
<div class="flex flex-col">
|
||||
<label>{{ $t("variables") }}</label>
|
||||
<ace-editor
|
||||
v-model="variableString"
|
||||
:lang="'json'"
|
||||
:options="{
|
||||
maxLines: 10,
|
||||
minLines: 5,
|
||||
fontSize: '16px',
|
||||
autoScrollEditorIntoView: true,
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
styles="rounded-b-lg"
|
||||
/>
|
||||
</div>
|
||||
</pw-section>
|
||||
|
||||
<pw-section class="purple" :label="$t('response')" ref="response" no-legend>
|
||||
<div class="flex flex-col">
|
||||
<label>{{ $t("response") }}</label>
|
||||
<div class="row-wrapper">
|
||||
<label for="responseField">{{ $t("response") }}</label>
|
||||
<div>
|
||||
<button
|
||||
class="icon"
|
||||
@click="downloadResponse"
|
||||
ref="downloadResponse"
|
||||
v-if="response"
|
||||
v-tooltip="$t('download_file')"
|
||||
>
|
||||
<i class="material-icons">save_alt</i>
|
||||
</button>
|
||||
<button
|
||||
class="icon"
|
||||
@click="copyResponse"
|
||||
ref="copyResponseButton"
|
||||
v-if="response"
|
||||
v-tooltip="$t('copy_response')"
|
||||
>
|
||||
<i class="material-icons">content_copy</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<ace-editor
|
||||
v-if="response"
|
||||
:value="response"
|
||||
:lang="'json'"
|
||||
:lint="false"
|
||||
:options="{
|
||||
maxLines: responseBodyMaxLines,
|
||||
minLines: 10,
|
||||
fontSize: '16px',
|
||||
autoScrollEditorIntoView: true,
|
||||
readOnly: true,
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
styles="rounded-b-lg"
|
||||
/>
|
||||
<input
|
||||
v-else
|
||||
class="rounded-b-lg missing-data-response"
|
||||
:value="$t('waiting_receive_response')"
|
||||
ref="status"
|
||||
id="status"
|
||||
name="status"
|
||||
readonly
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
<ace-editor
|
||||
v-if="response"
|
||||
:value="response"
|
||||
:lang="'json'"
|
||||
:lint="false"
|
||||
:options="{
|
||||
maxLines: responseBodyMaxLines,
|
||||
minLines: 10,
|
||||
fontSize: '16px',
|
||||
autoScrollEditorIntoView: true,
|
||||
readOnly: true,
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
/>
|
||||
<input
|
||||
v-else
|
||||
class="missing-data-response"
|
||||
:value="$t('waiting_receive_response')"
|
||||
ref="status"
|
||||
id="status"
|
||||
name="status"
|
||||
readonly
|
||||
type="text"
|
||||
/>
|
||||
</pw-section>
|
||||
</div>
|
||||
|
||||
<aside class="sticky-inner inner-right lg:max-w-md">
|
||||
<pw-section class="purple" :label="$t('docs')" ref="docs">
|
||||
<pw-section class="purple" :label="$t('docs')" ref="docs" no-legend>
|
||||
<section class="flex-col">
|
||||
<input type="text" :placeholder="$t('search')" v-model="graphqlFieldsFilterText" />
|
||||
<tabs ref="gqlTabs">
|
||||
<input
|
||||
type="text"
|
||||
:placeholder="$t('search')"
|
||||
v-model="graphqlFieldsFilterText"
|
||||
class="rounded-t-lg"
|
||||
/>
|
||||
<tabs ref="gqlTabs" styles="m-4">
|
||||
<div class="gqlTabs">
|
||||
<tab
|
||||
v-if="queryFields.length > 0"
|
||||
|
||||
Reference in New Issue
Block a user