110 lines
3.2 KiB
Vue
110 lines
3.2 KiB
Vue
<template>
|
|
<div class="flex flex-col flex-1">
|
|
<div
|
|
class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
|
|
>
|
|
<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="wrap-text"
|
|
@click.native.prevent="linewrapEnabled = !linewrapEnabled"
|
|
/>
|
|
<ButtonSecondary
|
|
v-if="response.body"
|
|
ref="downloadResponse"
|
|
v-tippy="{ theme: 'tooltip' }"
|
|
:title="t('action.download_file')"
|
|
:svg="downloadIcon"
|
|
@click.native="downloadResponse"
|
|
/>
|
|
<ButtonSecondary
|
|
v-if="response.body"
|
|
ref="copyResponse"
|
|
v-tippy="{ theme: 'tooltip' }"
|
|
:title="t('action.copy')"
|
|
:svg="copyIcon"
|
|
@click.native="copyResponse"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div ref="rawResponse" class="flex flex-col flex-1"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, reactive } from "@nuxtjs/composition-api"
|
|
import { flow, pipe } from "fp-ts/function"
|
|
import * as S from "fp-ts/string"
|
|
import * as RNEA from "fp-ts/ReadonlyNonEmptyArray"
|
|
import * as A from "fp-ts/Array"
|
|
import * as O from "fp-ts/Option"
|
|
import { useCodemirror } from "~/helpers/editor/codemirror"
|
|
import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
|
|
import { useI18n } from "~/helpers/utils/composables"
|
|
import useResponseBody from "~/helpers/lenses/composables/useResponseBody"
|
|
import useDownloadResponse from "~/helpers/lenses/composables/useDownloadResponse"
|
|
import useCopyResponse from "~/helpers/lenses/composables/useCopyResponse"
|
|
import { objFieldMatches } from "~/helpers/functional/object"
|
|
|
|
const t = useI18n()
|
|
|
|
const props = defineProps<{
|
|
response: HoppRESTResponse
|
|
}>()
|
|
|
|
const { responseBodyText } = useResponseBody(props.response)
|
|
|
|
const rawResponseBody = computed(() =>
|
|
props.response.type === "fail" || props.response.type === "success"
|
|
? props.response.body
|
|
: new ArrayBuffer(0)
|
|
)
|
|
|
|
const responseType = computed(() =>
|
|
pipe(
|
|
props.response,
|
|
O.fromPredicate(objFieldMatches("type", ["fail", "success"] as const)),
|
|
O.chain(
|
|
// Try getting content-type
|
|
flow(
|
|
(res) => res.headers,
|
|
A.findFirst((h) => h.key.toLowerCase() === "content-type"),
|
|
O.map(flow((h) => h.value, S.split(";"), RNEA.head, S.toLowerCase))
|
|
)
|
|
),
|
|
O.getOrElse(() => "text/plain")
|
|
)
|
|
)
|
|
|
|
const { downloadIcon, downloadResponse } = useDownloadResponse(
|
|
responseType.value,
|
|
rawResponseBody
|
|
)
|
|
|
|
const { copyIcon, copyResponse } = useCopyResponse(responseBodyText)
|
|
|
|
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,
|
|
environmentHighlights: true,
|
|
})
|
|
)
|
|
</script>
|