btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

Actions for RAW responses

Browse Source
This commit is contained in:
Liyas Thomas
2020-06-22 11:22:01 +05:30
parent 0acb5c643c
commit b44ba30873
2 changed files with 161 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
components/lenses/renderers/RawLensRenderer.vue
View File

@@ -1,24 +1,63 @@
<template> <template>
<ul> <ul>
<li id="response-details-wrapper"> <li>
<Editor <div class="flex-wrap">
:value="responseBodyText" <label for="body">{{ $t("response") }}</label>
:lang="'plain_text'" <div>
:options="{ <button
maxLines: 16, class="icon"
minLines: '16', @click="ToggleExpandResponse"
fontSize: '16px', ref="ToggleExpandResponse"
autoScrollEditorIntoView: true, v-if="response.body"
readOnly: true, v-tooltip="{
showPrintMargin: false, content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
useWorker: false, }"
}" >
/> <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> </li>
</ul> </ul>
</template> </template>
<script> <script>
import AceEditor from "../../ui/ace-editor" import AceEditor from "../../ui/ace-editor"
import { isJSONContentType } from "~/helpers/utils/contenttypes"
export default { export default {
components: { components: {
@@ -27,10 +66,69 @@ export default {
props: { props: {
response: {}, 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: { computed: {
responseBodyText() { responseBodyText() {
return new TextDecoder("utf-8").decode(new Uint8Array(this.response.body)) 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> </script>

98
pages/index.vue
View File

@@ -1453,7 +1453,7 @@ export default {
validContentTypes: knownContentTypes, validContentTypes: knownContentTypes,
previewEnabled: false, previewEnabled: false,
paramsWatchEnabled: true, paramsWatchEnabled: true,
expandResponse: false, // expandResponse: false,
showTokenList: false, showTokenList: false,
showTokenRequest: false, showTokenRequest: false,
showTokenRequestList: false, showTokenRequestList: false,
@@ -1463,7 +1463,7 @@ export default {
urlExcludes: {}, urlExcludes: {},
responseBodyText: "", responseBodyText: "",
responseBodyType: "text", responseBodyType: "text",
responseBodyMaxLines: 16, // responseBodyMaxLines: 16,
activeSidebar: true, activeSidebar: true,
fb, fb,
customMethod: false, customMethod: false,
@@ -1615,14 +1615,14 @@ export default {
isJSONContentType(this.contentType) isJSONContentType(this.contentType)
) )
}, },
canDownloadResponse() { // canDownloadResponse() {
return ( // return (
this.response && // this.response &&
this.response.headers && // this.response.headers &&
this.response.headers["content-type"] && // this.response.headers["content-type"] &&
isJSONContentType(this.response.headers["content-type"]) // isJSONContentType(this.response.headers["content-type"])
) // )
}, // },
uri: { uri: {
get() { get() {
return this.$store.state.request.uri ? this.$store.state.request.uri : this.url + this.path return this.$store.state.request.uri ? this.$store.state.request.uri : this.url + this.path
@@ -2479,45 +2479,45 @@ export default {
document.execCommand("copy") document.execCommand("copy")
setTimeout(() => (this.$refs.copyRequestCode.innerHTML = this.copyButton), 1000) setTimeout(() => (this.$refs.copyRequestCode.innerHTML = this.copyButton), 1000)
}, },
ToggleExpandResponse() { // ToggleExpandResponse() {
this.expandResponse = !this.expandResponse // this.expandResponse = !this.expandResponse
this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity // this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
}, // },
copyResponse() { // copyResponse() {
this.$refs.copyResponse.innerHTML = this.doneButton // this.$refs.copyResponse.innerHTML = this.doneButton
this.$toast.success(this.$t("copied_to_clipboard"), { // this.$toast.success(this.$t("copied_to_clipboard"), {
icon: "done", // icon: "done",
}) // })
const aux = document.createElement("textarea") // const aux = document.createElement("textarea")
const copy = isJSONContentType(this.responseType) // const copy = isJSONContentType(this.responseType)
? JSON.stringify(this.response.body, null, 2) // ? JSON.stringify(this.response.body, null, 2)
: this.response.body // : this.response.body
aux.innerText = copy // aux.innerText = copy
document.body.appendChild(aux) // document.body.appendChild(aux)
aux.select() // aux.select()
document.execCommand("copy") // document.execCommand("copy")
document.body.removeChild(aux) // document.body.removeChild(aux)
setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000) // setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
}, // },
downloadResponse() { // downloadResponse() {
const dataToWrite = JSON.stringify(this.response.body, null, 2) // const dataToWrite = JSON.stringify(this.response.body, null, 2)
const file = new Blob([dataToWrite], { type: this.responseType }) // const file = new Blob([dataToWrite], { type: this.responseType })
const a = document.createElement("a") // const a = document.createElement("a")
const url = URL.createObjectURL(file) // const url = URL.createObjectURL(file)
a.href = url // a.href = url
a.download = `${this.url + this.path} [${this.method}] on ${Date()}`.replace(/\./g, "[dot]") // a.download = `${this.url + this.path} [${this.method}] on ${Date()}`.replace(/\./g, "[dot]")
document.body.appendChild(a) // document.body.appendChild(a)
a.click() // a.click()
this.$refs.downloadResponse.innerHTML = this.doneButton // this.$refs.downloadResponse.innerHTML = this.doneButton
this.$toast.success(this.$t("download_started"), { // this.$toast.success(this.$t("download_started"), {
icon: "done", // icon: "done",
}) // })
setTimeout(() => { // setTimeout(() => {
document.body.removeChild(a) // document.body.removeChild(a)
window.URL.revokeObjectURL(url) // window.URL.revokeObjectURL(url)
this.$refs.downloadResponse.innerHTML = this.downloadButton // this.$refs.downloadResponse.innerHTML = this.downloadButton
}, 1000) // }, 1000)
}, // },
togglePreview() { togglePreview() {
this.previewEnabled = !this.previewEnabled this.previewEnabled = !this.previewEnabled
if (this.previewEnabled) { if (this.previewEnabled) {