refactor: minor input stylings
This commit is contained in:
liyasthomas
@@ -1,132 +1,127 @@
|
||||
<template>
|
||||
<div>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex flex-1">
|
||||
<label for="reqParamList">{{ $t("request_body") }}</label>
|
||||
<div>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
icon="clear_all"
|
||||
@click.native="clearContent('bodyParams', $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul
|
||||
<AppSection label="bodyParameters">
|
||||
<div
|
||||
v-if="bodyParams.length !== 0"
|
||||
class="flex flex-1 items-center justify-between pl-4"
|
||||
>
|
||||
<label for="reqParamList" class="font-semibold text-xs">
|
||||
{{ $t("request_body") }}
|
||||
</label>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
icon="clear_all"
|
||||
@click.native="clearContent('bodyParams', $event)"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-for="(param, index) in bodyParams"
|
||||
:key="index"
|
||||
class="
|
||||
flex
|
||||
border-b border-dashed
|
||||
divide-y
|
||||
md:divide-x
|
||||
divide-x
|
||||
border-divider
|
||||
divide-dashed divide-divider
|
||||
md:divide-y-0
|
||||
"
|
||||
:class="{ 'border-t': index == 0 }"
|
||||
>
|
||||
<li>
|
||||
<input
|
||||
class="input"
|
||||
:placeholder="`key ${index + 1}`"
|
||||
:name="`bparam ${index}`"
|
||||
:value="param.key"
|
||||
autofocus
|
||||
@change="updateBodyParams($event, index, `setKeyBodyParams`)"
|
||||
@keyup.prevent="setRouteQueryState"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
v-if="!requestBodyParamIsFile(index)"
|
||||
class="input"
|
||||
:placeholder="`value ${index + 1}`"
|
||||
:value="param.value"
|
||||
@change="
|
||||
// if input is form data, set value to be an array containing the value
|
||||
// only
|
||||
updateBodyParams($event, index, `setValueBodyParams`)
|
||||
"
|
||||
@keyup.prevent="setRouteQueryState"
|
||||
/>
|
||||
<div v-else class="file-chips-container">
|
||||
<div class="file-chips-wrapper">
|
||||
<SmartDeletableChip
|
||||
v-for="(file, i) in Array.from(bodyParams[index].value)"
|
||||
:key="`body-param-${index}-file-${i}`"
|
||||
@chip-delete="chipDelete(index, i)"
|
||||
>
|
||||
{{ file.name }}
|
||||
</SmartDeletableChip>
|
||||
</div>
|
||||
<input
|
||||
class="
|
||||
px-4
|
||||
py-3
|
||||
text-xs
|
||||
flex flex-1
|
||||
font-semibold
|
||||
bg-primaryLight
|
||||
focus:outline-none
|
||||
"
|
||||
:placeholder="$t('parameter_count', { count: index + 1 })"
|
||||
:name="'param' + index"
|
||||
:value="param.key"
|
||||
autofocus
|
||||
@change="updateBodyParams($event, index, `setKeyBodyParams`)"
|
||||
@keyup.prevent="setRouteQueryState"
|
||||
/>
|
||||
<input
|
||||
v-if="!requestBodyParamIsFile(index)"
|
||||
class="
|
||||
px-4
|
||||
py-3
|
||||
text-xs
|
||||
flex flex-1
|
||||
font-semibold
|
||||
bg-primaryLight
|
||||
focus:outline-none
|
||||
"
|
||||
:placeholder="$t('value_count', { count: index + 1 })"
|
||||
:name="'value' + index"
|
||||
:value="param.value"
|
||||
@change="
|
||||
// if input is form data, set value to be an array containing the value
|
||||
// only
|
||||
updateBodyParams($event, index, `setValueBodyParams`)
|
||||
"
|
||||
@keyup.prevent="setRouteQueryState"
|
||||
/>
|
||||
<div v-else class="file-chips-container">
|
||||
<div class="file-chips-wrapper">
|
||||
<SmartDeletableChip
|
||||
v-for="(file, i) in Array.from(bodyParams[index].value)"
|
||||
:key="`body-param-${index}-file-${i}`"
|
||||
@chip-delete="chipDelete(index, i)"
|
||||
>
|
||||
{{ file.name }}
|
||||
</SmartDeletableChip>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
<div>
|
||||
<li>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="
|
||||
param.hasOwnProperty('active')
|
||||
? param.active
|
||||
? $t('turn_off')
|
||||
: $t('turn_on')
|
||||
: $t('turn_off')
|
||||
"
|
||||
:icon="
|
||||
param.hasOwnProperty('active')
|
||||
? param.active
|
||||
? 'check_box'
|
||||
: 'check_box_outline_blank'
|
||||
: 'check_box'
|
||||
"
|
||||
@click.native="toggleActive(index, param)"
|
||||
/>
|
||||
</li>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="
|
||||
param.hasOwnProperty('active')
|
||||
? param.active
|
||||
? $t('turn_off')
|
||||
: $t('turn_on')
|
||||
: $t('turn_off')
|
||||
"
|
||||
:icon="
|
||||
param.hasOwnProperty('active')
|
||||
? param.active
|
||||
? 'check_box'
|
||||
: 'check_box_outline_blank'
|
||||
: 'check_box'
|
||||
"
|
||||
@click.native="toggleActive(index, param)"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="contentType === 'multipart/form-data'">
|
||||
<li>
|
||||
<label for="attachment" class="p-0">
|
||||
<ButtonSecondary
|
||||
class="w-full"
|
||||
icon="attach_file"
|
||||
@click.native="$refs.attachment[index].click()"
|
||||
/>
|
||||
</label>
|
||||
<input
|
||||
ref="attachment"
|
||||
class="input"
|
||||
name="attachment"
|
||||
type="file"
|
||||
multiple
|
||||
@change="setRequestAttachment($event, index)"
|
||||
<label for="attachment" class="p-0">
|
||||
<ButtonSecondary
|
||||
class="w-full"
|
||||
icon="attach_file"
|
||||
@click.native="$refs.attachment[index].click()"
|
||||
/>
|
||||
</li>
|
||||
</label>
|
||||
<input
|
||||
ref="attachment"
|
||||
class="input"
|
||||
name="attachment"
|
||||
type="file"
|
||||
multiple
|
||||
@change="setRequestAttachment($event, index)"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<li>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
icon="delete"
|
||||
@click.native="removeRequestBodyParam(index)"
|
||||
/>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<ButtonSecondary
|
||||
name="addrequest"
|
||||
icon="add"
|
||||
:label="$t('add_new')"
|
||||
@click.native="addRequestBodyParam"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
icon="delete"
|
||||
@click.native="removeRequestBodyParam(index)"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AppSection>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -139,6 +134,23 @@ export default {
|
||||
return this.$store.state.request.contentType
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
bodyParams: {
|
||||
handler(newValue) {
|
||||
if (
|
||||
newValue[newValue.length - 1]?.key !== "" ||
|
||||
newValue[newValue.length - 1]?.value !== ""
|
||||
)
|
||||
this.addRequestBodyParam()
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (!this.bodyParams?.length) {
|
||||
this.addRequestBodyParam()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clearContent(bodyParams, $event) {
|
||||
this.$emit("clear-content", bodyParams, $event)
|
||||
|
||||
@@ -1,111 +1,100 @@
|
||||
<template>
|
||||
<AppSection label="headers">
|
||||
<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="clearContent('headers', $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul
|
||||
<div
|
||||
v-if="headers.length !== 0"
|
||||
class="flex flex-1 items-center justify-between pl-4"
|
||||
>
|
||||
<label for="headerList" class="font-semibold text-xs">
|
||||
{{ $t("header_list") }}
|
||||
</label>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
icon="clear_all"
|
||||
@click.native="clearContent('headers', $event)"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-for="(header, index) in headers"
|
||||
:key="`${header.value}_${index}`"
|
||||
class="
|
||||
flex
|
||||
border-b border-dashed
|
||||
divide-y
|
||||
md:divide-x
|
||||
divide-x
|
||||
border-divider
|
||||
divide-dashed divide-divider
|
||||
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('setKeyHeader', {
|
||||
index,
|
||||
value: $event,
|
||||
})
|
||||
"
|
||||
@keyup.prevent="setRouteQueryState"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
class="input"
|
||||
:placeholder="$t('value_count', { count: index + 1 })"
|
||||
:name="'value' + index"
|
||||
:value="header.value"
|
||||
@change="
|
||||
$store.commit('setValueHeader', {
|
||||
index,
|
||||
value: $event.target.value,
|
||||
})
|
||||
"
|
||||
@keyup.prevent="setRouteQueryState"
|
||||
/>
|
||||
</li>
|
||||
<SmartAutoComplete
|
||||
:placeholder="$t('header_count', { count: index + 1 })"
|
||||
:source="commonHeaders"
|
||||
:spellcheck="false"
|
||||
:value="header.key"
|
||||
autofocus
|
||||
@input="
|
||||
$store.commit('setKeyHeader', {
|
||||
index,
|
||||
value: $event,
|
||||
})
|
||||
"
|
||||
@keyup.prevent="setRouteQueryState"
|
||||
/>
|
||||
<input
|
||||
class="
|
||||
px-4
|
||||
py-3
|
||||
text-xs
|
||||
flex flex-1
|
||||
font-semibold
|
||||
bg-primaryLight
|
||||
focus:outline-none
|
||||
"
|
||||
:placeholder="$t('value_count', { count: index + 1 })"
|
||||
:name="'value' + index"
|
||||
:value="header.value"
|
||||
@change="
|
||||
$store.commit('setValueHeader', {
|
||||
index,
|
||||
value: $event.target.value,
|
||||
})
|
||||
"
|
||||
@keyup.prevent="setRouteQueryState"
|
||||
/>
|
||||
<div>
|
||||
<li>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="
|
||||
header.hasOwnProperty('active')
|
||||
? header.active
|
||||
? $t('turn_off')
|
||||
: $t('turn_on')
|
||||
: $t('turn_off')
|
||||
"
|
||||
:icon="
|
||||
param.hasOwnProperty('active')
|
||||
? param.active
|
||||
? 'check_box'
|
||||
: 'check_box_outline_blank'
|
||||
: 'check_box'
|
||||
"
|
||||
@click.native="
|
||||
$store.commit('setActiveHeader', {
|
||||
index,
|
||||
value: header.hasOwnProperty('active') ? !header.active : false,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</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"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="
|
||||
header.hasOwnProperty('active')
|
||||
? header.active
|
||||
? $t('turn_off')
|
||||
: $t('turn_on')
|
||||
: $t('turn_off')
|
||||
"
|
||||
:icon="
|
||||
header.hasOwnProperty('active')
|
||||
? header.active
|
||||
? 'check_box'
|
||||
: 'check_box_outline_blank'
|
||||
: 'check_box'
|
||||
"
|
||||
@click.native="
|
||||
$store.commit('setActiveHeader', {
|
||||
index,
|
||||
value: header.hasOwnProperty('active') ? !header.active : false,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
icon="delete"
|
||||
@click.native="removeRequestHeader(index)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</AppSection>
|
||||
</template>
|
||||
|
||||
@@ -121,6 +110,23 @@ export default {
|
||||
commonHeaders,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
headers: {
|
||||
handler(newValue) {
|
||||
if (
|
||||
newValue[newValue.length - 1]?.key !== "" ||
|
||||
newValue[newValue.length - 1]?.value !== ""
|
||||
)
|
||||
this.addRequestHeader()
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (!this.params?.length) {
|
||||
this.addRequestHeader()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clearContent(headers, $event) {
|
||||
this.$emit("clear-content", headers, $event)
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
</label>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
:title="$t('clear_all')"
|
||||
icon="clear_all"
|
||||
@click.native="clearContent('parameters', $event)"
|
||||
/>
|
||||
@@ -20,11 +20,9 @@
|
||||
class="
|
||||
flex
|
||||
border-b border-dashed
|
||||
divide-y
|
||||
md:divide-x
|
||||
divide-x
|
||||
border-divider
|
||||
divide-dashed divide-divider
|
||||
md:divide-y-0
|
||||
"
|
||||
:class="{ 'border-t': index == 0 }"
|
||||
>
|
||||
@@ -80,7 +78,6 @@
|
||||
py-3
|
||||
mr-8
|
||||
focus:outline-none
|
||||
border-b border-dividerLight
|
||||
font-medium
|
||||
bg-primaryLight
|
||||
"
|
||||
@@ -135,14 +132,6 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex sticky bottom-0 bg-primary z-10 flex-1">
|
||||
<ButtonSecondary
|
||||
icon="add"
|
||||
class="flex-1"
|
||||
:label="$t('add_new')"
|
||||
@click.native="addRequestParam"
|
||||
/>
|
||||
</div>
|
||||
</AppSection>
|
||||
</template>
|
||||
|
||||
@@ -151,6 +140,23 @@ export default {
|
||||
props: {
|
||||
params: { type: Array, default: () => [] },
|
||||
},
|
||||
watch: {
|
||||
params: {
|
||||
handler(newValue) {
|
||||
if (
|
||||
newValue[newValue.length - 1]?.key !== "" ||
|
||||
newValue[newValue.length - 1]?.value !== ""
|
||||
)
|
||||
this.addRequestParam()
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (!this.params?.length) {
|
||||
this.addRequestParam()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clearContent(parameters, $event) {
|
||||
this.$emit("clear-content", parameters, $event)
|
||||
|
||||
@@ -1,28 +1,28 @@
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex items-center justify-between">
|
||||
<label>{{ $t("response") }}</label>
|
||||
<label v-if="active"
|
||||
><i class="animate-spin material-icons">refresh</i></label
|
||||
>
|
||||
<label v-else :class="statusCategory ? statusCategory.className : ''">
|
||||
<i class="material-icons">fiber_manual_record</i>
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex flex-col lg:flex-row">
|
||||
<label class="flex-1">
|
||||
{{ $t("status") + `: \xA0 ` }}
|
||||
<span :class="statusCategory ? statusCategory.className : ''">
|
||||
{{ response.status || $t("waiting_send_req") }}
|
||||
</span>
|
||||
</label>
|
||||
<label>
|
||||
{{ $t("duration") + `: \xA0 ${response.duration} ms` }}
|
||||
</label>
|
||||
<label>
|
||||
{{ $t("size") + `: \xA0 ${response.size} B` }}
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="
|
||||
flex
|
||||
sticky
|
||||
top-0
|
||||
z-10
|
||||
bg-primary
|
||||
items-center
|
||||
p-4
|
||||
font-mono font-semibold
|
||||
space-x-4
|
||||
"
|
||||
:class="statusCategory ? statusCategory.className : ''"
|
||||
>
|
||||
<i v-if="active" class="animate-spin material-icons">refresh</i>
|
||||
<span v-else>
|
||||
{{ response.status }}
|
||||
</span>
|
||||
<span v-if="response.duration" class="text-xs">
|
||||
{{ `${response.duration} ms` }}
|
||||
</span>
|
||||
<span v-if="response.size" class="text-xs">
|
||||
{{ `${response.size} B` }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user