Actions for RAW responses
This commit is contained in:
Liyas Thomas
@@ -1,24 +1,63 @@
|
||||
<template>
|
||||
<ul>
|
||||
<li id="response-details-wrapper">
|
||||
<Editor
|
||||
:value="responseBodyText"
|
||||
:lang="'plain_text'"
|
||||
:options="{
|
||||
maxLines: 16,
|
||||
minLines: '16',
|
||||
fontSize: '16px',
|
||||
autoScrollEditorIntoView: true,
|
||||
readOnly: true,
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
/>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<label for="body">{{ $t("response") }}</label>
|
||||
<div>
|
||||
<button
|
||||
class="icon"
|
||||
@click="ToggleExpandResponse"
|
||||
ref="ToggleExpandResponse"
|
||||
v-if="response.body"
|
||||
v-tooltip="{
|
||||
content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
|
||||
}"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
|
||||
</i>
|
||||
</button>
|
||||
<button
|
||||
class="icon"
|
||||
@click="downloadResponse"
|
||||
ref="downloadResponse"
|
||||
v-if="response.body && canDownloadResponse"
|
||||
v-tooltip="$t('download_file')"
|
||||
>
|
||||
<i class="material-icons">save_alt</i>
|
||||
</button>
|
||||
<button
|
||||
class="icon"
|
||||
@click="copyResponse"
|
||||
ref="copyResponse"
|
||||
v-if="response.body"
|
||||
v-tooltip="$t('copy_response')"
|
||||
>
|
||||
<i class="material-icons">content_copy</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="response-details-wrapper">
|
||||
<Editor
|
||||
:value="responseBodyText"
|
||||
:lang="'plain_text'"
|
||||
:options="{
|
||||
maxLines: responseBodyMaxLines,
|
||||
minLines: '16',
|
||||
fontSize: '16px',
|
||||
autoScrollEditorIntoView: true,
|
||||
readOnly: true,
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<script>
|
||||
import AceEditor from "../../ui/ace-editor"
|
||||
import { isJSONContentType } from "~/helpers/utils/contenttypes"
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@@ -27,10 +66,69 @@ export default {
|
||||
props: {
|
||||
response: {},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
expandResponse: false,
|
||||
responseBodyMaxLines: 16,
|
||||
doneButton: '<i class="material-icons">done</i>',
|
||||
downloadButton: '<i class="material-icons">save_alt</i>',
|
||||
copyButton: '<i class="material-icons">content_copy</i>',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
responseBodyText() {
|
||||
return new TextDecoder("utf-8").decode(new Uint8Array(this.response.body))
|
||||
},
|
||||
responseType() {
|
||||
return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
ToggleExpandResponse() {
|
||||
this.expandResponse = !this.expandResponse
|
||||
this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
|
||||
},
|
||||
downloadResponse() {
|
||||
const dataToWrite = this.responseBodyText
|
||||
const file = new Blob([dataToWrite], { type: this.responseType })
|
||||
const a = document.createElement("a")
|
||||
const url = URL.createObjectURL(file)
|
||||
a.href = url
|
||||
a.download = `response on ${Date()}`.replace(/\./g, "[dot]")
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
this.$refs.downloadResponse.innerHTML = this.doneButton
|
||||
this.$toast.success(this.$t("download_started"), {
|
||||
icon: "done",
|
||||
})
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(a)
|
||||
window.URL.revokeObjectURL(url)
|
||||
this.$refs.downloadResponse.innerHTML = this.downloadButton
|
||||
}, 1000)
|
||||
},
|
||||
canDownloadResponse() {
|
||||
return (
|
||||
this.response &&
|
||||
this.response.headers &&
|
||||
this.response.headers["content-type"] &&
|
||||
isJSONContentType(this.response.headers["content-type"])
|
||||
)
|
||||
},
|
||||
copyResponse() {
|
||||
this.$refs.copyResponse.innerHTML = this.doneButton
|
||||
this.$toast.success(this.$t("copied_to_clipboard"), {
|
||||
icon: "done",
|
||||
})
|
||||
const aux = document.createElement("textarea")
|
||||
const copy = this.responseBodyText
|
||||
aux.innerText = copy
|
||||
document.body.appendChild(aux)
|
||||
aux.select()
|
||||
document.execCommand("copy")
|
||||
document.body.removeChild(aux)
|
||||
setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1453,7 +1453,7 @@ export default {
|
||||
validContentTypes: knownContentTypes,
|
||||
previewEnabled: false,
|
||||
paramsWatchEnabled: true,
|
||||
expandResponse: false,
|
||||
// expandResponse: false,
|
||||
showTokenList: false,
|
||||
showTokenRequest: false,
|
||||
showTokenRequestList: false,
|
||||
@@ -1463,7 +1463,7 @@ export default {
|
||||
urlExcludes: {},
|
||||
responseBodyText: "",
|
||||
responseBodyType: "text",
|
||||
responseBodyMaxLines: 16,
|
||||
// responseBodyMaxLines: 16,
|
||||
activeSidebar: true,
|
||||
fb,
|
||||
customMethod: false,
|
||||
@@ -1615,14 +1615,14 @@ export default {
|
||||
isJSONContentType(this.contentType)
|
||||
)
|
||||
},
|
||||
canDownloadResponse() {
|
||||
return (
|
||||
this.response &&
|
||||
this.response.headers &&
|
||||
this.response.headers["content-type"] &&
|
||||
isJSONContentType(this.response.headers["content-type"])
|
||||
)
|
||||
},
|
||||
// canDownloadResponse() {
|
||||
// return (
|
||||
// this.response &&
|
||||
// this.response.headers &&
|
||||
// this.response.headers["content-type"] &&
|
||||
// isJSONContentType(this.response.headers["content-type"])
|
||||
// )
|
||||
// },
|
||||
uri: {
|
||||
get() {
|
||||
return this.$store.state.request.uri ? this.$store.state.request.uri : this.url + this.path
|
||||
@@ -2479,45 +2479,45 @@ export default {
|
||||
document.execCommand("copy")
|
||||
setTimeout(() => (this.$refs.copyRequestCode.innerHTML = this.copyButton), 1000)
|
||||
},
|
||||
ToggleExpandResponse() {
|
||||
this.expandResponse = !this.expandResponse
|
||||
this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
|
||||
},
|
||||
copyResponse() {
|
||||
this.$refs.copyResponse.innerHTML = this.doneButton
|
||||
this.$toast.success(this.$t("copied_to_clipboard"), {
|
||||
icon: "done",
|
||||
})
|
||||
const aux = document.createElement("textarea")
|
||||
const copy = isJSONContentType(this.responseType)
|
||||
? JSON.stringify(this.response.body, null, 2)
|
||||
: this.response.body
|
||||
aux.innerText = copy
|
||||
document.body.appendChild(aux)
|
||||
aux.select()
|
||||
document.execCommand("copy")
|
||||
document.body.removeChild(aux)
|
||||
setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
|
||||
},
|
||||
downloadResponse() {
|
||||
const dataToWrite = JSON.stringify(this.response.body, null, 2)
|
||||
const file = new Blob([dataToWrite], { type: this.responseType })
|
||||
const a = document.createElement("a")
|
||||
const url = URL.createObjectURL(file)
|
||||
a.href = url
|
||||
a.download = `${this.url + this.path} [${this.method}] on ${Date()}`.replace(/\./g, "[dot]")
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
this.$refs.downloadResponse.innerHTML = this.doneButton
|
||||
this.$toast.success(this.$t("download_started"), {
|
||||
icon: "done",
|
||||
})
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(a)
|
||||
window.URL.revokeObjectURL(url)
|
||||
this.$refs.downloadResponse.innerHTML = this.downloadButton
|
||||
}, 1000)
|
||||
},
|
||||
// ToggleExpandResponse() {
|
||||
// this.expandResponse = !this.expandResponse
|
||||
// this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
|
||||
// },
|
||||
// copyResponse() {
|
||||
// this.$refs.copyResponse.innerHTML = this.doneButton
|
||||
// this.$toast.success(this.$t("copied_to_clipboard"), {
|
||||
// icon: "done",
|
||||
// })
|
||||
// const aux = document.createElement("textarea")
|
||||
// const copy = isJSONContentType(this.responseType)
|
||||
// ? JSON.stringify(this.response.body, null, 2)
|
||||
// : this.response.body
|
||||
// aux.innerText = copy
|
||||
// document.body.appendChild(aux)
|
||||
// aux.select()
|
||||
// document.execCommand("copy")
|
||||
// document.body.removeChild(aux)
|
||||
// setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
|
||||
// },
|
||||
// downloadResponse() {
|
||||
// const dataToWrite = JSON.stringify(this.response.body, null, 2)
|
||||
// const file = new Blob([dataToWrite], { type: this.responseType })
|
||||
// const a = document.createElement("a")
|
||||
// const url = URL.createObjectURL(file)
|
||||
// a.href = url
|
||||
// a.download = `${this.url + this.path} [${this.method}] on ${Date()}`.replace(/\./g, "[dot]")
|
||||
// document.body.appendChild(a)
|
||||
// a.click()
|
||||
// this.$refs.downloadResponse.innerHTML = this.doneButton
|
||||
// this.$toast.success(this.$t("download_started"), {
|
||||
// icon: "done",
|
||||
// })
|
||||
// setTimeout(() => {
|
||||
// document.body.removeChild(a)
|
||||
// window.URL.revokeObjectURL(url)
|
||||
// this.$refs.downloadResponse.innerHTML = this.downloadButton
|
||||
// }, 1000)
|
||||
// },
|
||||
togglePreview() {
|
||||
this.previewEnabled = !this.previewEnabled
|
||||
if (this.previewEnabled) {
|
||||
|
||||
Reference in New Issue
Block a user