RawLensRenderer.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. <template>
  2. <div>
  3. <div
  4. class="bg-primary border-b border-dividerLight flex flex-1 top-lowerSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
  5. >
  6. <label class="font-semibold text-secondaryLight">
  7. {{ t("response.body") }}
  8. </label>
  9. <div class="flex">
  10. <ButtonSecondary
  11. v-if="response.body"
  12. v-tippy="{ theme: 'tooltip' }"
  13. :title="t('state.linewrap')"
  14. :class="{ '!text-accent': linewrapEnabled }"
  15. svg="wrap-text"
  16. @click.native.prevent="linewrapEnabled = !linewrapEnabled"
  17. />
  18. <ButtonSecondary
  19. v-if="response.body"
  20. ref="downloadResponse"
  21. v-tippy="{ theme: 'tooltip' }"
  22. :title="t('action.download_file')"
  23. :svg="downloadIcon"
  24. @click.native="downloadResponse"
  25. />
  26. <ButtonSecondary
  27. v-if="response.body"
  28. ref="copyResponse"
  29. v-tippy="{ theme: 'tooltip' }"
  30. :title="t('action.copy')"
  31. :svg="copyIcon"
  32. @click.native="copyResponse"
  33. />
  34. </div>
  35. </div>
  36. <div ref="rawResponse"></div>
  37. </div>
  38. </template>
  39. <script setup lang="ts">
  40. import { ref, computed, reactive } from "@nuxtjs/composition-api"
  41. import { useCodemirror } from "~/helpers/editor/codemirror"
  42. import { copyToClipboard } from "~/helpers/utils/clipboard"
  43. import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
  44. import { useI18n, useToast } from "~/helpers/utils/composables"
  45. const t = useI18n()
  46. const props = defineProps<{
  47. response: HoppRESTResponse
  48. }>()
  49. const toast = useToast()
  50. const responseBodyText = computed(() => {
  51. if (
  52. props.response.type === "loading" ||
  53. props.response.type === "network_fail"
  54. )
  55. return ""
  56. if (typeof props.response.body === "string") return props.response.body
  57. else {
  58. const res = new TextDecoder("utf-8").decode(props.response.body)
  59. // HACK: Temporary trailing null character issue from the extension fix
  60. return res.replace(/\0+$/, "")
  61. }
  62. })
  63. const downloadIcon = ref("download")
  64. const copyIcon = ref("copy")
  65. const responseType = computed(() => {
  66. return (
  67. props.response.headers.find((h) => h.key.toLowerCase() === "content-type")
  68. .value || ""
  69. )
  70. .split(";")[0]
  71. .toLowerCase()
  72. })
  73. const rawResponse = ref<any | null>(null)
  74. const linewrapEnabled = ref(true)
  75. useCodemirror(
  76. rawResponse,
  77. responseBodyText,
  78. reactive({
  79. extendedEditorConfig: {
  80. mode: "text/plain",
  81. readOnly: true,
  82. lineWrapping: linewrapEnabled,
  83. },
  84. linter: null,
  85. completer: null,
  86. })
  87. )
  88. const downloadResponse = () => {
  89. const dataToWrite = responseBodyText.value
  90. const file = new Blob([dataToWrite], { type: responseType.value })
  91. const a = document.createElement("a")
  92. const url = URL.createObjectURL(file)
  93. a.href = url
  94. // TODO get uri from meta
  95. a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
  96. document.body.appendChild(a)
  97. a.click()
  98. downloadIcon.value = "check"
  99. toast.success(`${t("state.download_started")}`)
  100. setTimeout(() => {
  101. document.body.removeChild(a)
  102. URL.revokeObjectURL(url)
  103. downloadIcon.value = "download"
  104. }, 1000)
  105. }
  106. const copyResponse = () => {
  107. copyToClipboard(responseBodyText.value)
  108. copyIcon.value = "check"
  109. toast.success(`${t("state.copied_to_clipboard")}`)
  110. setTimeout(() => (copyIcon.value = "copy"), 1000)
  111. }
  112. </script>