feat: init new response state system
This commit is contained in:
liyasthomas
@@ -1,22 +1,27 @@
|
||||
<template>
|
||||
<AppSection label="headers">
|
||||
<div
|
||||
v-if="headers.length !== 0"
|
||||
class="flex flex-1 items-center justify-between pl-4"
|
||||
>
|
||||
<div 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>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
icon="clear_all"
|
||||
@click.native="clearContent"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('add_new')"
|
||||
icon="add"
|
||||
@click.native="addHeader"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="(header, index) in headers"
|
||||
:key="`${header.value}_${index}`"
|
||||
v-for="(header, index) in headers$"
|
||||
:key="index"
|
||||
class="
|
||||
flex
|
||||
border-b border-dashed
|
||||
@@ -32,13 +37,13 @@
|
||||
:spellcheck="false"
|
||||
:value="header.key"
|
||||
autofocus
|
||||
@input="
|
||||
$store.commit('setKeyHeader', {
|
||||
index,
|
||||
value: $event,
|
||||
@change="
|
||||
updateHeader(index, {
|
||||
key: $event.target.value,
|
||||
value: header.value,
|
||||
active: header.active,
|
||||
})
|
||||
"
|
||||
@keyup.prevent="setRouteQueryState"
|
||||
/>
|
||||
<input
|
||||
class="
|
||||
@@ -54,12 +59,12 @@
|
||||
:name="'value' + index"
|
||||
:value="header.value"
|
||||
@change="
|
||||
$store.commit('setValueHeader', {
|
||||
index,
|
||||
updateHeader(index, {
|
||||
key: header.key,
|
||||
value: $event.target.value,
|
||||
active: header.active,
|
||||
})
|
||||
"
|
||||
@keyup.prevent="setRouteQueryState"
|
||||
/>
|
||||
<div>
|
||||
<ButtonSecondary
|
||||
@@ -79,9 +84,10 @@
|
||||
: 'check_box'
|
||||
"
|
||||
@click.native="
|
||||
$store.commit('setActiveHeader', {
|
||||
index,
|
||||
value: header.hasOwnProperty('active') ? !header.active : false,
|
||||
updateHeader(index, {
|
||||
key: header.key,
|
||||
value: header.value,
|
||||
active: header.hasOwnProperty('active') ? !header.active : false,
|
||||
})
|
||||
"
|
||||
/>
|
||||
@@ -91,7 +97,7 @@
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
icon="delete"
|
||||
@click.native="removeRequestHeader(index)"
|
||||
@click.native="deleteHeader(index)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -99,46 +105,57 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
restHeaders$,
|
||||
addRESTHeader,
|
||||
updateRESTHeader,
|
||||
deleteRESTHeader,
|
||||
deleteAllRESTHeaders,
|
||||
} from "~/newstore/RESTSession"
|
||||
|
||||
import { commonHeaders } from "~/helpers/headers"
|
||||
|
||||
export default {
|
||||
props: {
|
||||
headers: { type: Array, default: () => [] },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
commonHeaders,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
headers: {
|
||||
handler(newValue) {
|
||||
if (
|
||||
newValue[newValue.length - 1]?.key !== "" ||
|
||||
newValue[newValue.length - 1]?.value !== ""
|
||||
)
|
||||
this.addRequestHeader()
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
subscriptions() {
|
||||
return {
|
||||
headers$: restHeaders$,
|
||||
}
|
||||
},
|
||||
// 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()
|
||||
if (!this.headers$?.length) {
|
||||
this.addHeader()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clearContent(headers, $event) {
|
||||
this.$emit("clear-content", headers, $event)
|
||||
addHeader() {
|
||||
addRESTHeader({ key: "", value: "", active: true })
|
||||
},
|
||||
setRouteQueryState() {
|
||||
this.$emit("set-route-query-state")
|
||||
updateHeader(index, item) {
|
||||
console.log(index, item)
|
||||
updateRESTHeader(index, item)
|
||||
},
|
||||
removeRequestHeader(index) {
|
||||
this.$emit("remove-request-header", index)
|
||||
deleteHeader(index) {
|
||||
deleteRESTHeader(index)
|
||||
},
|
||||
addRequestHeader() {
|
||||
this.$emit("add-request-header")
|
||||
clearContent() {
|
||||
deleteAllRESTHeaders()
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@@ -154,11 +154,9 @@ export default {
|
||||
addRESTParam({ key: "", value: "", active: true })
|
||||
},
|
||||
updateParam(index, item) {
|
||||
console.log(index, item)
|
||||
updateRESTParam(index, item)
|
||||
},
|
||||
deleteParam(index) {
|
||||
console.log(index)
|
||||
deleteRESTParam(index)
|
||||
},
|
||||
clearContent() {
|
||||
|
||||
314
components/http/Request.vue
Normal file
314
components/http/Request.vue
Normal file
@@ -0,0 +1,314 @@
|
||||
<template>
|
||||
<div class="sticky top-0 z-10 bg-primary flex p-4">
|
||||
<div class="relative inline-flex">
|
||||
<span class="select-wrapper">
|
||||
<tippy
|
||||
ref="options"
|
||||
interactive
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
arrow
|
||||
>
|
||||
<template #trigger>
|
||||
<input
|
||||
id="method"
|
||||
class="
|
||||
flex
|
||||
rounded-l-lg
|
||||
bg-primaryLight
|
||||
font-mono
|
||||
w-32
|
||||
px-4
|
||||
py-2
|
||||
truncate
|
||||
text-secondaryDark
|
||||
font-semibold
|
||||
border border-divider
|
||||
transition
|
||||
focus:outline-none focus:border-accent
|
||||
cursor-pointer
|
||||
"
|
||||
:value="newMethod$"
|
||||
autofocus
|
||||
/>
|
||||
</template>
|
||||
<SmartItem
|
||||
v-for="(methodMenuItem, index) in methodMenuItems"
|
||||
:key="`method-${index}`"
|
||||
:label="methodMenuItem"
|
||||
class="font-mono"
|
||||
@click.native="
|
||||
updateMethod(methodMenuItem)
|
||||
$refs.options.tippy().hide()
|
||||
"
|
||||
/>
|
||||
</tippy>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex-1 inline-flex">
|
||||
<input
|
||||
id="url"
|
||||
v-model="newEndpoint$"
|
||||
class="
|
||||
w-full
|
||||
font-mono font-semibold
|
||||
truncate
|
||||
text-secondaryDark
|
||||
px-4
|
||||
py-2
|
||||
border border-divider
|
||||
bg-primaryLight
|
||||
transition
|
||||
focus:outline-none focus:border-accent
|
||||
"
|
||||
name="url"
|
||||
type="text"
|
||||
spellcheck="false"
|
||||
:placeholder="$t('url')"
|
||||
@keyup.enter="newSendRequest()"
|
||||
/>
|
||||
<!-- <SmartUrlField v-else v-model="uri" /> -->
|
||||
</div>
|
||||
<div class="flex">
|
||||
<span
|
||||
id="send"
|
||||
class="
|
||||
px-4
|
||||
py-2
|
||||
border border-accent
|
||||
font-mono
|
||||
flex
|
||||
items-center
|
||||
truncate
|
||||
font-semibold
|
||||
bg-accent
|
||||
text-white
|
||||
cursor-pointer
|
||||
"
|
||||
@click="newSendRequest"
|
||||
>
|
||||
{{ $t("send") }}
|
||||
</span>
|
||||
<!-- <span
|
||||
v-else
|
||||
id="cancel"
|
||||
class="
|
||||
px-4
|
||||
py-2
|
||||
border border-accent
|
||||
font-mono
|
||||
flex
|
||||
items-center
|
||||
truncate
|
||||
font-semibold
|
||||
bg-accent
|
||||
text-white
|
||||
cursor-pointer
|
||||
"
|
||||
@click="cancelRequest"
|
||||
>
|
||||
{{ $t("cancel") }}
|
||||
</span> -->
|
||||
<tippy
|
||||
ref="sendOptions"
|
||||
interactive
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
arrow
|
||||
>
|
||||
<template #trigger>
|
||||
<span
|
||||
class="
|
||||
px-1
|
||||
py-2
|
||||
border border-accent
|
||||
font-mono
|
||||
flex
|
||||
items-center
|
||||
justify-center
|
||||
truncate
|
||||
font-semibold
|
||||
bg-accent
|
||||
text-white
|
||||
rounded-r-lg
|
||||
"
|
||||
>
|
||||
<i class="material-icons">keyboard_arrow_down</i>
|
||||
</span>
|
||||
</template>
|
||||
<SmartItem
|
||||
:label="$t('import_curl')"
|
||||
icon="import_export"
|
||||
@click.native="
|
||||
showCurlImportModal = !showCurlImportModal
|
||||
$refs.sendOptions.tippy().hide()
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
:label="$t('show_code')"
|
||||
icon="code"
|
||||
@click.native="
|
||||
showCodegenModal = !showCodegenModal
|
||||
$refs.sendOptions.tippy().hide()
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
ref="clearAll"
|
||||
:label="$t('clear_all')"
|
||||
icon="clear_all"
|
||||
@click.native="
|
||||
clearContent('', $event)
|
||||
$refs.sendOptions.tippy().hide()
|
||||
"
|
||||
/>
|
||||
</tippy>
|
||||
<span
|
||||
class="
|
||||
ml-4
|
||||
px-4
|
||||
py-2
|
||||
border border-divider
|
||||
font-mono
|
||||
flex
|
||||
items-center
|
||||
justify-center
|
||||
truncate
|
||||
font-semibold
|
||||
rounded-l-lg
|
||||
cursor-pointer
|
||||
"
|
||||
@click="newSendRequest"
|
||||
>
|
||||
Save
|
||||
</span>
|
||||
<tippy
|
||||
ref="saveOptions"
|
||||
interactive
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
arrow
|
||||
>
|
||||
<template #trigger>
|
||||
<span
|
||||
class="
|
||||
px-1
|
||||
py-2
|
||||
border border-divider
|
||||
font-mono
|
||||
flex
|
||||
items-center
|
||||
justify-center
|
||||
truncate
|
||||
font-semibold
|
||||
rounded-r-lg
|
||||
"
|
||||
>
|
||||
<i class="material-icons">keyboard_arrow_down</i>
|
||||
</span>
|
||||
</template>
|
||||
<SmartItem :description="$t('token_req_name')" />
|
||||
<input
|
||||
id="request-name"
|
||||
v-model="name"
|
||||
name="request-name"
|
||||
type="text"
|
||||
class="input text-sm"
|
||||
/>
|
||||
<SmartItem
|
||||
ref="copyRequest"
|
||||
:label="$t('copy_request_link')"
|
||||
:icon="navigatorShare ? 'share' : 'content_copy'"
|
||||
@click.native="
|
||||
copyRequest()
|
||||
$refs.saveOptions.tippy().hide()
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
ref="saveRequest"
|
||||
:label="$t('save_to_collections')"
|
||||
icon="create_new_folder"
|
||||
@click.native="
|
||||
saveRequest()
|
||||
$refs.saveOptions.tippy().hide()
|
||||
"
|
||||
/>
|
||||
</tippy>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
updateRESTResponse,
|
||||
restRequest$,
|
||||
restEndpoint$,
|
||||
setRESTEndpoint,
|
||||
restMethod$,
|
||||
updateRESTMethod,
|
||||
} from "~/newstore/RESTSession"
|
||||
import { createRESTNetworkRequestStream } from "~/helpers/network"
|
||||
import { currentEnvironment$ } from "~/newstore/environments"
|
||||
import { getEffectiveRESTRequestStream } from "~/helpers/utils/EffectiveURL"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
newMethod$: "",
|
||||
methodMenuItems: [
|
||||
"GET",
|
||||
"HEAD",
|
||||
"POST",
|
||||
"PUT",
|
||||
"DELETE",
|
||||
"CONNECT",
|
||||
"OPTIONS",
|
||||
"TRACE",
|
||||
"PATCH",
|
||||
"CUSTOM",
|
||||
],
|
||||
name: "",
|
||||
newEndpoint$: "",
|
||||
showCurlImportModal: false,
|
||||
showCodegenModal: false,
|
||||
navigatorShare: navigator.share,
|
||||
effectiveStream$: null,
|
||||
}
|
||||
},
|
||||
subscriptions() {
|
||||
return {
|
||||
newMethod$: restMethod$,
|
||||
newEndpoint$: restEndpoint$,
|
||||
effectiveStream$: getEffectiveRESTRequestStream(
|
||||
restRequest$,
|
||||
currentEnvironment$
|
||||
),
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
newEndpoint$(newVal) {
|
||||
setRESTEndpoint(newVal)
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
updateMethod(method) {
|
||||
updateRESTMethod(method)
|
||||
},
|
||||
newSendRequest() {
|
||||
this.$subscribeTo(
|
||||
createRESTNetworkRequestStream(
|
||||
this.effectiveStream$,
|
||||
currentEnvironment$
|
||||
),
|
||||
(responseState) => {
|
||||
console.log(responseState)
|
||||
updateRESTResponse(responseState)
|
||||
}
|
||||
)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -1,22 +1,22 @@
|
||||
<template>
|
||||
<AppSection label="response">
|
||||
<HttpResponseMeta :response="response" :active="active" />
|
||||
<div v-if="response.body && response.body !== $t('loading')">
|
||||
<LensesResponseBodyRenderer :response="response" />
|
||||
</div>
|
||||
<HttpResponseMeta v-if="!loading" :response="response" />
|
||||
<LensesResponseBodyRenderer v-if="!loading" :response="response" />
|
||||
</AppSection>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { restResponse$ } from "~/newstore/RESTSession"
|
||||
|
||||
export default {
|
||||
props: {
|
||||
response: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
subscriptions() {
|
||||
return {
|
||||
response: restResponse$,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
loading() {
|
||||
return this.response === null || this.response.type === "loading"
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@@ -11,20 +11,21 @@
|
||||
font-mono font-semibold
|
||||
space-x-8
|
||||
"
|
||||
:class="statusCategory ? statusCategory.className : ''"
|
||||
>
|
||||
<i v-if="active" class="animate-spin material-icons">refresh</i>
|
||||
<i v-if="response.type === 'loading'" class="animate-spin material-icons"
|
||||
>refresh</i
|
||||
>
|
||||
<span v-else>
|
||||
<span class="text-secondaryDark"> Status: </span>
|
||||
{{ response.status || $t("waiting_send_req") }}
|
||||
{{ response.statusCode || $t("waiting_send_req") }}
|
||||
</span>
|
||||
<span v-if="response.duration" class="text-xs">
|
||||
<span class="text-xs">
|
||||
<span class="text-secondaryDark"> Time: </span>
|
||||
{{ `${response.duration} ms` }}
|
||||
{{ `${response.meta.responseDuration} ms` }}
|
||||
</span>
|
||||
<span v-if="response.size" class="text-xs">
|
||||
<span class="text-xs">
|
||||
<span class="text-secondaryDark"> Size: </span>
|
||||
{{ `${response.size} B` }}
|
||||
{{ `${response.meta.responseSize} B` }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
@@ -38,14 +39,10 @@ export default {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
statusCategory() {
|
||||
return findStatusGroup(this.response.status)
|
||||
return findStatusGroup(this.response.statusCode)
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user