refactor: merge branch 'main' into refactor/monorepo
This commit is contained in:
Andrew Bastin
@@ -17,6 +17,14 @@
|
||||
{{ $t("response.body") }}
|
||||
</label>
|
||||
<div class="flex">
|
||||
<ButtonSecondary
|
||||
v-if="response.body"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('state.linewrap')"
|
||||
:class="{ '!text-accent': linewrapEnabled }"
|
||||
svg="corner-down-left"
|
||||
@click.native.prevent="linewrapEnabled = !linewrapEnabled"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-if="response.body"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
@@ -44,110 +52,131 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<SmartAceEditor
|
||||
:value="responseBodyText"
|
||||
:lang="'html'"
|
||||
:options="{
|
||||
maxLines: Infinity,
|
||||
minLines: 16,
|
||||
autoScrollEditorIntoView: true,
|
||||
readOnly: true,
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
styles="border-b border-dividerLight"
|
||||
/>
|
||||
<iframe
|
||||
ref="previewFrame"
|
||||
:class="{ hidden: !previewEnabled }"
|
||||
class="covers-response"
|
||||
src="about:blank"
|
||||
></iframe>
|
||||
</div>
|
||||
<div v-show="!previewEnabled" ref="htmlResponse"></div>
|
||||
<iframe
|
||||
v-show="previewEnabled"
|
||||
ref="previewFrame"
|
||||
class="covers-response"
|
||||
src="about:blank"
|
||||
></iframe>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from "@nuxtjs/composition-api"
|
||||
import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, useContext, reactive } from "@nuxtjs/composition-api"
|
||||
import { useCodemirror } from "~/helpers/editor/codemirror"
|
||||
import { copyToClipboard } from "~/helpers/utils/clipboard"
|
||||
import "codemirror/mode/xml/xml"
|
||||
import "codemirror/mode/javascript/javascript"
|
||||
import "codemirror/mode/css/css"
|
||||
import "codemirror/mode/htmlmixed/htmlmixed"
|
||||
import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
|
||||
|
||||
export default defineComponent({
|
||||
mixins: [TextContentRendererMixin],
|
||||
props: {
|
||||
response: { type: Object, default: () => {} },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
downloadIcon: "download",
|
||||
copyIcon: "copy",
|
||||
previewEnabled: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
downloadResponse() {
|
||||
const dataToWrite = this.responseBodyText
|
||||
const file = new Blob([dataToWrite], { type: "text/html" })
|
||||
const a = document.createElement("a")
|
||||
const url = URL.createObjectURL(file)
|
||||
a.href = url
|
||||
// TODO get uri from meta
|
||||
a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
this.downloadIcon = "check"
|
||||
this.$toast.success(this.$t("state.download_started"), {
|
||||
icon: "downloading",
|
||||
})
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(a)
|
||||
URL.revokeObjectURL(url)
|
||||
this.downloadIcon = "download"
|
||||
}, 1000)
|
||||
},
|
||||
copyResponse() {
|
||||
copyToClipboard(this.responseBodyText)
|
||||
this.copyIcon = "check"
|
||||
this.$toast.success(this.$t("state.copied_to_clipboard"), {
|
||||
icon: "content_paste",
|
||||
})
|
||||
setTimeout(() => (this.copyIcon = "copy"), 1000)
|
||||
},
|
||||
togglePreview() {
|
||||
this.previewEnabled = !this.previewEnabled
|
||||
if (this.previewEnabled) {
|
||||
if (
|
||||
this.$refs.previewFrame.getAttribute("data-previewing-url") ===
|
||||
this.url
|
||||
)
|
||||
return
|
||||
// Use DOMParser to parse document HTML.
|
||||
const previewDocument = new DOMParser().parseFromString(
|
||||
this.responseBodyText,
|
||||
"text/html"
|
||||
)
|
||||
// Inject <base href="..."> tag to head, to fix relative CSS/HTML paths.
|
||||
previewDocument.head.innerHTML =
|
||||
`<base href="${this.url}">` + previewDocument.head.innerHTML
|
||||
// Finally, set the iframe source to the resulting HTML.
|
||||
this.$refs.previewFrame.srcdoc =
|
||||
previewDocument.documentElement.outerHTML
|
||||
this.$refs.previewFrame.setAttribute("data-previewing-url", this.url)
|
||||
}
|
||||
},
|
||||
},
|
||||
const props = defineProps<{
|
||||
response: HoppRESTResponse
|
||||
}>()
|
||||
|
||||
const {
|
||||
$toast,
|
||||
app: { i18n },
|
||||
} = useContext()
|
||||
const t = i18n.t.bind(i18n)
|
||||
|
||||
const responseBodyText = computed(() => {
|
||||
if (
|
||||
props.response.type === "loading" ||
|
||||
props.response.type === "network_fail"
|
||||
)
|
||||
return ""
|
||||
if (typeof props.response.body === "string") return props.response.body
|
||||
else {
|
||||
const res = new TextDecoder("utf-8").decode(props.response.body)
|
||||
// HACK: Temporary trailing null character issue from the extension fix
|
||||
return res.replace(/\0+$/, "")
|
||||
}
|
||||
})
|
||||
|
||||
const downloadIcon = ref("download")
|
||||
const copyIcon = ref("copy")
|
||||
const previewEnabled = ref(false)
|
||||
const previewFrame = ref<any | null>(null)
|
||||
const url = ref("")
|
||||
|
||||
const htmlResponse = ref<any | null>(null)
|
||||
const linewrapEnabled = ref(true)
|
||||
|
||||
useCodemirror(
|
||||
htmlResponse,
|
||||
responseBodyText,
|
||||
reactive({
|
||||
extendedEditorConfig: {
|
||||
mode: "htmlmixed",
|
||||
readOnly: true,
|
||||
lineWrapping: linewrapEnabled,
|
||||
},
|
||||
linter: null,
|
||||
completer: null,
|
||||
})
|
||||
)
|
||||
|
||||
const downloadResponse = () => {
|
||||
const dataToWrite = responseBodyText.value
|
||||
const file = new Blob([dataToWrite], { type: "text/html" })
|
||||
const a = document.createElement("a")
|
||||
const url = URL.createObjectURL(file)
|
||||
a.href = url
|
||||
// TODO get uri from meta
|
||||
a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
downloadIcon.value = "check"
|
||||
$toast.success(t("state.download_started").toString(), {
|
||||
icon: "downloading",
|
||||
})
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(a)
|
||||
URL.revokeObjectURL(url)
|
||||
downloadIcon.value = "download"
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
const copyResponse = () => {
|
||||
copyToClipboard(responseBodyText.value)
|
||||
copyIcon.value = "check"
|
||||
$toast.success(t("state.copied_to_clipboard").toString(), {
|
||||
icon: "content_paste",
|
||||
})
|
||||
setTimeout(() => (copyIcon.value = "copy"), 1000)
|
||||
}
|
||||
|
||||
const togglePreview = () => {
|
||||
previewEnabled.value = !previewEnabled.value
|
||||
if (previewEnabled.value) {
|
||||
if (previewFrame.value.getAttribute("data-previewing-url") === url.value)
|
||||
return
|
||||
// Use DOMParser to parse document HTML.
|
||||
const previewDocument = new DOMParser().parseFromString(
|
||||
responseBodyText.value,
|
||||
"text/html"
|
||||
)
|
||||
// Inject <base href="..."> tag to head, to fix relative CSS/HTML paths.
|
||||
previewDocument.head.innerHTML =
|
||||
`<base href="${url.value}">` + previewDocument.head.innerHTML
|
||||
// Finally, set the iframe source to the resulting HTML.
|
||||
previewFrame.value.srcdoc = previewDocument.documentElement.outerHTML
|
||||
previewFrame.value.setAttribute("data-previewing-url", url.value)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.covers-response {
|
||||
@apply absolute;
|
||||
@apply inset-0;
|
||||
@apply bg-white;
|
||||
@apply min-h-64;
|
||||
@apply h-full;
|
||||
@apply w-full;
|
||||
@apply border;
|
||||
@apply border-dividerLight;
|
||||
@apply z-5;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -27,12 +27,10 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex relative">
|
||||
<img
|
||||
class="border-b border-dividerLight flex max-w-full flex-1"
|
||||
:src="imageSource"
|
||||
/>
|
||||
</div>
|
||||
<img
|
||||
class="border-b border-dividerLight flex max-w-full flex-1"
|
||||
:src="imageSource"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -13,10 +13,18 @@
|
||||
justify-between
|
||||
"
|
||||
>
|
||||
<label class="font-semibold text-secondaryLight">
|
||||
{{ $t("response.body") }}
|
||||
</label>
|
||||
<label class="font-semibold text-secondaryLight">{{
|
||||
$t("response.body")
|
||||
}}</label>
|
||||
<div class="flex">
|
||||
<ButtonSecondary
|
||||
v-if="response.body"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('state.linewrap')"
|
||||
:class="{ '!text-accent': linewrapEnabled }"
|
||||
svg="corner-down-left"
|
||||
@click.native.prevent="linewrapEnabled = !linewrapEnabled"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-if="response.body"
|
||||
ref="downloadResponse"
|
||||
@@ -35,89 +43,237 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<SmartAceEditor
|
||||
:value="jsonBodyText"
|
||||
:lang="'json'"
|
||||
:provide-outline="true"
|
||||
:options="{
|
||||
maxLines: Infinity,
|
||||
minLines: 16,
|
||||
autoScrollEditorIntoView: true,
|
||||
readOnly: true,
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
styles="border-b border-dividerLight"
|
||||
/>
|
||||
<div ref="jsonResponse"></div>
|
||||
<div
|
||||
v-if="outlinePath"
|
||||
class="
|
||||
bg-primaryLight
|
||||
border-t border-dividerLight
|
||||
flex flex-nowrap flex-1
|
||||
px-2
|
||||
bottom-0
|
||||
z-10
|
||||
sticky
|
||||
overflow-auto
|
||||
hide-scrollbar
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in outlinePath"
|
||||
:key="`item-${index}`"
|
||||
class="flex items-center"
|
||||
>
|
||||
<tippy
|
||||
ref="outlineOptions"
|
||||
interactive
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
arrow
|
||||
>
|
||||
<template #trigger>
|
||||
<div v-if="item.kind === 'RootObject'" class="outline">{}</div>
|
||||
<div v-if="item.kind === 'RootArray'" class="outline">[]</div>
|
||||
<div v-if="item.kind === 'ArrayMember'" class="outline">
|
||||
{{ item.index.toString() }}
|
||||
</div>
|
||||
<div v-if="item.kind === 'ObjectMember'" class="outline">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</template>
|
||||
<div
|
||||
v-if="item.kind === 'ArrayMember' || item.kind === 'ObjectMember'"
|
||||
>
|
||||
<div v-if="item.kind === 'ArrayMember'" class="flex flex-col">
|
||||
<SmartItem
|
||||
v-for="(arrayMember, astIndex) in item.astParent.values"
|
||||
:key="`ast-${astIndex}`"
|
||||
:label="astIndex.toString()"
|
||||
@click.native="
|
||||
() => {
|
||||
jumpCursor(arrayMember)
|
||||
outlineOptions[index].tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="item.kind === 'ObjectMember'" class="flex flex-col">
|
||||
<SmartItem
|
||||
v-for="(objectMember, astIndex) in item.astParent.members"
|
||||
:key="`ast-${astIndex}`"
|
||||
:label="objectMember.key.value"
|
||||
@click.native="
|
||||
() => {
|
||||
jumpCursor(objectMember)
|
||||
outlineOptions[index].tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="item.kind === 'RootObject'" class="flex flex-col">
|
||||
<SmartItem
|
||||
label="{}"
|
||||
@click.native="
|
||||
() => {
|
||||
jumpCursor(item.astValue)
|
||||
outlineOptions[index].tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="item.kind === 'RootArray'" class="flex flex-col">
|
||||
<SmartItem
|
||||
label="[]"
|
||||
@click.native="
|
||||
() => {
|
||||
jumpCursor(item.astValue)
|
||||
outlineOptions[index].tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</tippy>
|
||||
<i
|
||||
v-if="index + 1 !== outlinePath.length"
|
||||
class="text-secondaryLight opacity-50 material-icons"
|
||||
>chevron_right</i
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from "@nuxtjs/composition-api"
|
||||
import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, useContext, reactive } from "@nuxtjs/composition-api"
|
||||
import { useCodemirror } from "~/helpers/editor/codemirror"
|
||||
import { copyToClipboard } from "~/helpers/utils/clipboard"
|
||||
import "codemirror/mode/javascript/javascript"
|
||||
import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
|
||||
import jsonParse, { JSONObjectMember, JSONValue } from "~/helpers/jsonParse"
|
||||
import { getJSONOutlineAtPos } from "~/helpers/newOutline"
|
||||
import {
|
||||
convertIndexToLineCh,
|
||||
convertLineChToIndex,
|
||||
} from "~/helpers/editor/utils"
|
||||
|
||||
export default defineComponent({
|
||||
mixins: [TextContentRendererMixin],
|
||||
props: {
|
||||
response: { type: Object, default: () => {} },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
downloadIcon: "download",
|
||||
copyIcon: "copy",
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
jsonBodyText() {
|
||||
try {
|
||||
return JSON.stringify(JSON.parse(this.responseBodyText), null, 2)
|
||||
} catch (e) {
|
||||
// Most probs invalid JSON was returned, so drop prettification (should we warn ?)
|
||||
return this.responseBodyText
|
||||
}
|
||||
},
|
||||
responseType() {
|
||||
return (
|
||||
this.response.headers.find(
|
||||
(h) => h.key.toLowerCase() === "content-type"
|
||||
).value || ""
|
||||
)
|
||||
.split(";")[0]
|
||||
.toLowerCase()
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
downloadResponse() {
|
||||
const dataToWrite = this.responseBodyText
|
||||
const file = new Blob([dataToWrite], { type: "application/json" })
|
||||
const a = document.createElement("a")
|
||||
const url = URL.createObjectURL(file)
|
||||
a.href = url
|
||||
// TODO get uri from meta
|
||||
a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
this.downloadIcon = "check"
|
||||
this.$toast.success(this.$t("state.download_started"), {
|
||||
icon: "downloading",
|
||||
})
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(a)
|
||||
URL.revokeObjectURL(url)
|
||||
this.downloadIcon = "download"
|
||||
}, 1000)
|
||||
},
|
||||
copyResponse() {
|
||||
copyToClipboard(this.responseBodyText)
|
||||
this.copyIcon = "check"
|
||||
this.$toast.success(this.$t("state.copied_to_clipboard"), {
|
||||
icon: "content_paste",
|
||||
})
|
||||
setTimeout(() => (this.copyIcon = "copy"), 1000)
|
||||
},
|
||||
},
|
||||
const props = defineProps<{
|
||||
response: HoppRESTResponse
|
||||
}>()
|
||||
|
||||
const {
|
||||
$toast,
|
||||
app: { i18n },
|
||||
} = useContext()
|
||||
const t = i18n.t.bind(i18n)
|
||||
|
||||
const responseBodyText = computed(() => {
|
||||
if (
|
||||
props.response.type === "loading" ||
|
||||
props.response.type === "network_fail"
|
||||
)
|
||||
return ""
|
||||
if (typeof props.response.body === "string") return props.response.body
|
||||
else {
|
||||
const res = new TextDecoder("utf-8").decode(props.response.body)
|
||||
// HACK: Temporary trailing null character issue from the extension fix
|
||||
return res.replace(/\0+$/, "")
|
||||
}
|
||||
})
|
||||
|
||||
const downloadIcon = ref("download")
|
||||
const copyIcon = ref("copy")
|
||||
|
||||
const jsonBodyText = computed(() => {
|
||||
try {
|
||||
return JSON.stringify(JSON.parse(responseBodyText.value), null, 2)
|
||||
} catch (e) {
|
||||
// Most probs invalid JSON was returned, so drop prettification (should we warn ?)
|
||||
return responseBodyText.value
|
||||
}
|
||||
})
|
||||
|
||||
const ast = computed(() => {
|
||||
try {
|
||||
return jsonParse(jsonBodyText.value)
|
||||
} catch (_: any) {
|
||||
return null
|
||||
}
|
||||
})
|
||||
|
||||
const outlineOptions = ref<any | null>(null)
|
||||
const jsonResponse = ref<any | null>(null)
|
||||
const linewrapEnabled = ref(true)
|
||||
|
||||
const { cursor } = useCodemirror(
|
||||
jsonResponse,
|
||||
jsonBodyText,
|
||||
reactive({
|
||||
extendedEditorConfig: {
|
||||
mode: "application/ld+json",
|
||||
readOnly: true,
|
||||
lineWrapping: linewrapEnabled,
|
||||
},
|
||||
linter: null,
|
||||
completer: null,
|
||||
})
|
||||
)
|
||||
|
||||
const jumpCursor = (ast: JSONValue | JSONObjectMember) => {
|
||||
const pos = convertIndexToLineCh(jsonBodyText.value, ast.start)
|
||||
pos.line--
|
||||
cursor.value = pos
|
||||
}
|
||||
|
||||
const downloadResponse = () => {
|
||||
const dataToWrite = responseBodyText.value
|
||||
const file = new Blob([dataToWrite], { type: "application/json" })
|
||||
const a = document.createElement("a")
|
||||
const url = URL.createObjectURL(file)
|
||||
a.href = url
|
||||
// TODO get uri from meta
|
||||
a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
downloadIcon.value = "check"
|
||||
$toast.success(t("state.download_started").toString(), {
|
||||
icon: "downloading",
|
||||
})
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(a)
|
||||
URL.revokeObjectURL(url)
|
||||
downloadIcon.value = "download"
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
const outlinePath = computed(() => {
|
||||
if (ast.value) {
|
||||
return getJSONOutlineAtPos(
|
||||
ast.value,
|
||||
convertLineChToIndex(jsonBodyText.value, cursor.value)
|
||||
)
|
||||
} else return null
|
||||
})
|
||||
|
||||
const copyResponse = () => {
|
||||
copyToClipboard(responseBodyText.value)
|
||||
copyIcon.value = "check"
|
||||
$toast.success(t("state.copied_to_clipboard").toString(), {
|
||||
icon: "content_paste",
|
||||
})
|
||||
setTimeout(() => (copyIcon.value = "copy"), 1000)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.outline {
|
||||
@apply cursor-pointer;
|
||||
@apply flex-grow-0 flex-shrink-0;
|
||||
@apply text-secondaryLight;
|
||||
@apply inline-flex;
|
||||
@apply items-center;
|
||||
@apply px-2;
|
||||
@apply py-1;
|
||||
@apply transition;
|
||||
@apply hover:text-secondary;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -17,6 +17,14 @@
|
||||
{{ $t("response.body") }}
|
||||
</label>
|
||||
<div class="flex">
|
||||
<ButtonSecondary
|
||||
v-if="response.body"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('state.linewrap')"
|
||||
:class="{ '!text-accent': linewrapEnabled }"
|
||||
svg="corner-down-left"
|
||||
@click.native.prevent="linewrapEnabled = !linewrapEnabled"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-if="response.body"
|
||||
ref="downloadResponse"
|
||||
@@ -35,80 +43,96 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<SmartAceEditor
|
||||
:value="responseBodyText"
|
||||
:lang="'plain_text'"
|
||||
:options="{
|
||||
maxLines: Infinity,
|
||||
minLines: 16,
|
||||
autoScrollEditorIntoView: true,
|
||||
readOnly: true,
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
styles="border-b border-dividerLight"
|
||||
/>
|
||||
</div>
|
||||
<div ref="rawResponse"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from "@nuxtjs/composition-api"
|
||||
import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
|
||||
<script setup lang="ts">
|
||||
import { ref, useContext, computed, reactive } from "@nuxtjs/composition-api"
|
||||
import { useCodemirror } from "~/helpers/editor/codemirror"
|
||||
import { copyToClipboard } from "~/helpers/utils/clipboard"
|
||||
import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
|
||||
|
||||
export default defineComponent({
|
||||
mixins: [TextContentRendererMixin],
|
||||
props: {
|
||||
response: { type: Object, default: () => {} },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
downloadIcon: "download",
|
||||
copyIcon: "copy",
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
responseType() {
|
||||
return (
|
||||
this.response.headers.find(
|
||||
(h) => h.key.toLowerCase() === "content-type"
|
||||
).value || ""
|
||||
)
|
||||
.split(";")[0]
|
||||
.toLowerCase()
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
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
|
||||
// TODO get uri from meta
|
||||
a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
this.downloadIcon = "check"
|
||||
this.$toast.success(this.$t("state.download_started"), {
|
||||
icon: "downloading",
|
||||
})
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(a)
|
||||
URL.revokeObjectURL(url)
|
||||
this.downloadIcon = "download"
|
||||
}, 1000)
|
||||
},
|
||||
copyResponse() {
|
||||
copyToClipboard(this.responseBodyText)
|
||||
this.copyIcon = "check"
|
||||
this.$toast.success(this.$t("state.copied_to_clipboard"), {
|
||||
icon: "content_paste",
|
||||
})
|
||||
setTimeout(() => (this.copyIcon = "copy"), 1000)
|
||||
},
|
||||
},
|
||||
const props = defineProps<{
|
||||
response: HoppRESTResponse
|
||||
}>()
|
||||
|
||||
const {
|
||||
$toast,
|
||||
app: { i18n },
|
||||
} = useContext()
|
||||
const t = i18n.t.bind(i18n)
|
||||
|
||||
const responseBodyText = computed(() => {
|
||||
if (
|
||||
props.response.type === "loading" ||
|
||||
props.response.type === "network_fail"
|
||||
)
|
||||
return ""
|
||||
if (typeof props.response.body === "string") return props.response.body
|
||||
else {
|
||||
const res = new TextDecoder("utf-8").decode(props.response.body)
|
||||
// HACK: Temporary trailing null character issue from the extension fix
|
||||
return res.replace(/\0+$/, "")
|
||||
}
|
||||
})
|
||||
|
||||
const downloadIcon = ref("download")
|
||||
const copyIcon = ref("copy")
|
||||
|
||||
const responseType = computed(() => {
|
||||
return (
|
||||
props.response.headers.find((h) => h.key.toLowerCase() === "content-type")
|
||||
.value || ""
|
||||
)
|
||||
.split(";")[0]
|
||||
.toLowerCase()
|
||||
})
|
||||
|
||||
const rawResponse = ref<any | null>(null)
|
||||
const linewrapEnabled = ref(true)
|
||||
|
||||
useCodemirror(
|
||||
rawResponse,
|
||||
responseBodyText,
|
||||
reactive({
|
||||
extendedEditorConfig: {
|
||||
mode: "text/plain",
|
||||
readOnly: true,
|
||||
lineWrapping: linewrapEnabled,
|
||||
},
|
||||
linter: null,
|
||||
completer: null,
|
||||
})
|
||||
)
|
||||
|
||||
const downloadResponse = () => {
|
||||
const dataToWrite = responseBodyText.value
|
||||
const file = new Blob([dataToWrite], { type: responseType.value })
|
||||
const a = document.createElement("a")
|
||||
const url = URL.createObjectURL(file)
|
||||
a.href = url
|
||||
// TODO get uri from meta
|
||||
a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
downloadIcon.value = "check"
|
||||
$toast.success(t("state.download_started").toString(), {
|
||||
icon: "downloading",
|
||||
})
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(a)
|
||||
URL.revokeObjectURL(url)
|
||||
downloadIcon.value = "download"
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
const copyResponse = () => {
|
||||
copyToClipboard(responseBodyText.value)
|
||||
copyIcon.value = "check"
|
||||
$toast.success(t("state.copied_to_clipboard").toString(), {
|
||||
icon: "content_paste",
|
||||
})
|
||||
setTimeout(() => (copyIcon.value = "copy"), 1000)
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -17,6 +17,14 @@
|
||||
{{ $t("response.body") }}
|
||||
</label>
|
||||
<div class="flex">
|
||||
<ButtonSecondary
|
||||
v-if="response.body"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('state.linewrap')"
|
||||
:class="{ '!text-accent': linewrapEnabled }"
|
||||
svg="corner-down-left"
|
||||
@click.native.prevent="linewrapEnabled = !linewrapEnabled"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-if="response.body"
|
||||
ref="downloadResponse"
|
||||
@@ -35,80 +43,97 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<SmartAceEditor
|
||||
:value="responseBodyText"
|
||||
:lang="'xml'"
|
||||
:options="{
|
||||
maxLines: Infinity,
|
||||
minLines: 16,
|
||||
autoScrollEditorIntoView: true,
|
||||
readOnly: true,
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
styles="border-b border-dividerLight"
|
||||
/>
|
||||
</div>
|
||||
<div ref="xmlResponse"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from "@nuxtjs/composition-api"
|
||||
import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, useContext, reactive } from "@nuxtjs/composition-api"
|
||||
import { useCodemirror } from "~/helpers/editor/codemirror"
|
||||
import { copyToClipboard } from "~/helpers/utils/clipboard"
|
||||
import "codemirror/mode/xml/xml"
|
||||
import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
|
||||
|
||||
export default defineComponent({
|
||||
mixins: [TextContentRendererMixin],
|
||||
props: {
|
||||
response: { type: Object, default: () => {} },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
copyIcon: "copy",
|
||||
downloadIcon: "download",
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
responseType() {
|
||||
return (
|
||||
this.response.headers.find(
|
||||
(h) => h.key.toLowerCase() === "content-type"
|
||||
).value || ""
|
||||
)
|
||||
.split(";")[0]
|
||||
.toLowerCase()
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
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
|
||||
// TODO get uri from meta
|
||||
a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
this.downloadIcon = "check"
|
||||
this.$toast.success(this.$t("state.download_started"), {
|
||||
icon: "downloading",
|
||||
})
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(a)
|
||||
URL.revokeObjectURL(url)
|
||||
this.downloadIcon = "download"
|
||||
}, 1000)
|
||||
},
|
||||
copyResponse() {
|
||||
copyToClipboard(this.responseBodyText)
|
||||
this.copyIcon = "check"
|
||||
this.$toast.success(this.$t("state.copied_to_clipboard"), {
|
||||
icon: "content_paste",
|
||||
})
|
||||
setTimeout(() => (this.copyIcon = "copy"), 1000)
|
||||
},
|
||||
},
|
||||
const props = defineProps<{
|
||||
response: HoppRESTResponse
|
||||
}>()
|
||||
|
||||
const {
|
||||
$toast,
|
||||
app: { i18n },
|
||||
} = useContext()
|
||||
const t = i18n.t.bind(i18n)
|
||||
|
||||
const responseBodyText = computed(() => {
|
||||
if (
|
||||
props.response.type === "loading" ||
|
||||
props.response.type === "network_fail"
|
||||
)
|
||||
return ""
|
||||
if (typeof props.response.body === "string") return props.response.body
|
||||
else {
|
||||
const res = new TextDecoder("utf-8").decode(props.response.body)
|
||||
// HACK: Temporary trailing null character issue from the extension fix
|
||||
return res.replace(/\0+$/, "")
|
||||
}
|
||||
})
|
||||
|
||||
const downloadIcon = ref("download")
|
||||
const copyIcon = ref("copy")
|
||||
|
||||
const responseType = computed(() => {
|
||||
return (
|
||||
props.response.headers.find((h) => h.key.toLowerCase() === "content-type")
|
||||
.value || ""
|
||||
)
|
||||
.split(";")[0]
|
||||
.toLowerCase()
|
||||
})
|
||||
|
||||
const xmlResponse = ref<any | null>(null)
|
||||
const linewrapEnabled = ref(true)
|
||||
|
||||
useCodemirror(
|
||||
xmlResponse,
|
||||
responseBodyText,
|
||||
reactive({
|
||||
extendedEditorConfig: {
|
||||
mode: "application/xml",
|
||||
readOnly: true,
|
||||
lineWrapping: linewrapEnabled,
|
||||
},
|
||||
linter: null,
|
||||
completer: null,
|
||||
})
|
||||
)
|
||||
|
||||
const downloadResponse = () => {
|
||||
const dataToWrite = responseBodyText.value
|
||||
const file = new Blob([dataToWrite], { type: responseType.value })
|
||||
const a = document.createElement("a")
|
||||
const url = URL.createObjectURL(file)
|
||||
a.href = url
|
||||
// TODO get uri from meta
|
||||
a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
downloadIcon.value = "check"
|
||||
$toast.success(t("state.download_started").toString(), {
|
||||
icon: "downloading",
|
||||
})
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(a)
|
||||
URL.revokeObjectURL(url)
|
||||
downloadIcon.value = "download"
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
const copyResponse = () => {
|
||||
copyToClipboard(responseBodyText.value)
|
||||
copyIcon.value = "check"
|
||||
$toast.success(t("state.copied_to_clipboard").toString(), {
|
||||
icon: "content_paste",
|
||||
})
|
||||
setTimeout(() => (copyIcon.value = "copy"), 1000)
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user