feat(filename): added filename in download functional (#4329)
Co-authored-by: Dmitry Mukovkin <d.mukovkin@cft.ru> Co-authored-by: nivedin <nivedinp@gmail.com>
This commit is contained in:
@@ -383,6 +383,13 @@
|
||||
"title": "Export",
|
||||
"success": "Successfully exported"
|
||||
},
|
||||
"filename": {
|
||||
"cookie_key_value_pairs": "Cookie",
|
||||
"codegen": "{request_name} - code",
|
||||
"graphql_response": "GraphQL-Response",
|
||||
"lens": "{request_name} - response",
|
||||
"realtime_response": "Realtime-Response"
|
||||
},
|
||||
"filter": {
|
||||
"all": "All",
|
||||
"none": "None",
|
||||
|
||||
@@ -187,8 +187,9 @@ function saveCookieChange() {
|
||||
|
||||
const { copyIcon, copyResponse } = useCopyResponse(rawCookieString)
|
||||
const { downloadIcon, downloadResponse } = useDownloadResponse(
|
||||
"",
|
||||
rawCookieString
|
||||
"text/plain",
|
||||
rawCookieString,
|
||||
t("filename.cookie_key_value_pairs")
|
||||
)
|
||||
|
||||
function clearContent() {
|
||||
|
||||
@@ -157,7 +157,8 @@ useCodemirror(
|
||||
const { copyIcon, copyResponse } = useCopyResponse(responseString)
|
||||
const { downloadIcon, downloadResponse } = useDownloadResponse(
|
||||
"application/json",
|
||||
responseString
|
||||
responseString,
|
||||
t("filename.graphql_response")
|
||||
)
|
||||
|
||||
defineActionHandler(
|
||||
|
||||
@@ -259,5 +259,11 @@ const filteredCodegenDefinitions = computed(() => {
|
||||
})
|
||||
|
||||
const { copyIcon, copyResponse } = useCopyResponse(requestCode)
|
||||
const { downloadIcon, downloadResponse } = useDownloadResponse("", requestCode)
|
||||
const { downloadIcon, downloadResponse } = useDownloadResponse(
|
||||
"",
|
||||
requestCode,
|
||||
t("filename.codegen", {
|
||||
request_name: request.value.name,
|
||||
})
|
||||
)
|
||||
</script>
|
||||
|
||||
@@ -26,12 +26,6 @@
|
||||
:icon="IconWrapText"
|
||||
@click.prevent="toggleNestedSetting('WRAP_LINES', 'importCurl')"
|
||||
/>
|
||||
<HoppButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip', allowHTML: true }"
|
||||
:title="t('action.download_file')"
|
||||
:icon="downloadIcon"
|
||||
@click="downloadResponse"
|
||||
/>
|
||||
<HoppButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip', allowHTML: true }"
|
||||
:title="t('action.copy')"
|
||||
@@ -84,10 +78,7 @@ import { useCodemirror } from "@composables/codemirror"
|
||||
import { useI18n } from "@composables/i18n"
|
||||
import { useToast } from "@composables/toast"
|
||||
import { parseCurlToHoppRESTReq } from "~/helpers/curl"
|
||||
import {
|
||||
useCopyResponse,
|
||||
useDownloadResponse,
|
||||
} from "~/composables/lens-actions"
|
||||
import { useCopyResponse } from "~/composables/lens-actions"
|
||||
|
||||
import IconWrapText from "~icons/lucide/wrap-text"
|
||||
import IconClipboard from "~icons/lucide/clipboard"
|
||||
@@ -183,7 +174,6 @@ const handlePaste = async () => {
|
||||
}
|
||||
|
||||
const { copyIcon, copyResponse } = useCopyResponse(curl)
|
||||
const { downloadIcon, downloadResponse } = useDownloadResponse("", curl)
|
||||
|
||||
const clearContent = () => {
|
||||
curl.value = ""
|
||||
|
||||
@@ -72,7 +72,10 @@ const responseType = computed(() =>
|
||||
|
||||
const { downloadIcon, downloadResponse } = useDownloadResponse(
|
||||
responseType.value,
|
||||
computed(() => props.response.body)
|
||||
computed(() => props.response.body),
|
||||
t("filename.lens", {
|
||||
request_name: props.response.req.name,
|
||||
})
|
||||
)
|
||||
|
||||
defineActionHandler("response.file.download", () => downloadResponse())
|
||||
|
||||
@@ -93,7 +93,10 @@ const WRAP_LINES = useNestedSetting("WRAP_LINES", "httpResponseBody")
|
||||
const { responseBodyText } = useResponseBody(props.response)
|
||||
const { downloadIcon, downloadResponse } = useDownloadResponse(
|
||||
"text/html",
|
||||
responseBodyText
|
||||
responseBodyText,
|
||||
t("filename.lens", {
|
||||
request_name: props.response.req.name,
|
||||
})
|
||||
)
|
||||
const defaultPreview =
|
||||
persistenceService.getLocalConfig("lens_html_preview") === "true"
|
||||
|
||||
@@ -67,7 +67,10 @@ const responseType = computed(() =>
|
||||
|
||||
const { downloadIcon, downloadResponse } = useDownloadResponse(
|
||||
responseType.value,
|
||||
computed(() => props.response.body)
|
||||
computed(() => props.response.body),
|
||||
t("filename.lens", {
|
||||
request_name: props.response.req.name,
|
||||
})
|
||||
)
|
||||
|
||||
watch(props.response, () => {
|
||||
|
||||
@@ -354,7 +354,10 @@ const filterResponseError = computed(() =>
|
||||
const { copyIcon, copyResponse } = useCopyResponse(jsonBodyText)
|
||||
const { downloadIcon, downloadResponse } = useDownloadResponse(
|
||||
"application/json",
|
||||
jsonBodyText
|
||||
jsonBodyText,
|
||||
t("filename.lens", {
|
||||
request_name: props.response.req.name,
|
||||
})
|
||||
)
|
||||
|
||||
// Template refs
|
||||
|
||||
@@ -53,7 +53,10 @@ const pdfsrc = computed(() =>
|
||||
|
||||
const { downloadIcon, downloadResponse } = useDownloadResponse(
|
||||
"application/pdf",
|
||||
computed(() => props.response.body)
|
||||
computed(() => props.response.body),
|
||||
t("filename.lens", {
|
||||
request_name: props.response.req.name,
|
||||
})
|
||||
)
|
||||
|
||||
defineActionHandler("response.file.download", () => downloadResponse())
|
||||
|
||||
@@ -95,7 +95,10 @@ const responseType = computed(() =>
|
||||
|
||||
const { downloadIcon, downloadResponse } = useDownloadResponse(
|
||||
responseType.value,
|
||||
rawResponseBody
|
||||
rawResponseBody,
|
||||
t("filename.lens", {
|
||||
request_name: props.response.req.name,
|
||||
})
|
||||
)
|
||||
|
||||
const { copyIcon, copyResponse } = useCopyResponse(responseBodyText)
|
||||
|
||||
@@ -72,7 +72,10 @@ const responseType = computed(() =>
|
||||
|
||||
const { downloadIcon, downloadResponse } = useDownloadResponse(
|
||||
responseType.value,
|
||||
computed(() => props.response.body)
|
||||
computed(() => props.response.body),
|
||||
t("filename.lens", {
|
||||
request_name: props.response.req.name,
|
||||
})
|
||||
)
|
||||
|
||||
defineActionHandler("response.file.download", () => downloadResponse())
|
||||
|
||||
@@ -89,7 +89,10 @@ const responseType = computed(() =>
|
||||
|
||||
const { downloadIcon, downloadResponse } = useDownloadResponse(
|
||||
responseType.value,
|
||||
responseBodyText
|
||||
responseBodyText,
|
||||
t("filename.lens", {
|
||||
request_name: props.response.req.name,
|
||||
})
|
||||
)
|
||||
|
||||
const { copyIcon, copyResponse } = useCopyResponse(responseBodyText)
|
||||
|
||||
@@ -326,7 +326,8 @@ const { copyIcon, copyResponse } = useCopyResponse(logPayload)
|
||||
|
||||
const { downloadIcon, downloadResponse } = useDownloadResponse(
|
||||
"application/json",
|
||||
logPayload
|
||||
logPayload,
|
||||
t("filename.realtime_response")
|
||||
)
|
||||
|
||||
const copyQueryIcon = refAutoReset<typeof IconCopy | typeof IconCheck>(
|
||||
|
||||
@@ -1,9 +1,6 @@
|
||||
import { HoppRESTResponse } from "@helpers/types/HoppRESTResponse"
|
||||
import { copyToClipboard } from "@helpers/utils/clipboard"
|
||||
import { refAutoReset } from "@vueuse/core"
|
||||
import { pipe } from "fp-ts/function"
|
||||
import * as RNEA from "fp-ts/ReadonlyNonEmptyArray"
|
||||
import * as S from "fp-ts/string"
|
||||
import { computed, ComputedRef, onMounted, ref, Ref } from "vue"
|
||||
|
||||
import jsonToLanguage from "~/helpers/utils/json-to-language"
|
||||
@@ -58,7 +55,8 @@ export type downloadResponseReturnType = (() => void) | Ref<any>
|
||||
|
||||
export function useDownloadResponse(
|
||||
contentType: string,
|
||||
responseBody: Ref<string | ArrayBuffer>
|
||||
responseBody: Ref<string | ArrayBuffer>,
|
||||
filename: string
|
||||
) {
|
||||
const downloadIcon = refAutoReset(IconDownload, 1000)
|
||||
|
||||
@@ -68,24 +66,6 @@ export function useDownloadResponse(
|
||||
const downloadResponse = async () => {
|
||||
const dataToWrite = responseBody.value
|
||||
|
||||
// Guess extension and filename
|
||||
const file = new Blob([dataToWrite], { type: contentType })
|
||||
const url = URL.createObjectURL(file)
|
||||
|
||||
const filename = pipe(
|
||||
url,
|
||||
S.split("/"),
|
||||
RNEA.last,
|
||||
S.split("#"),
|
||||
RNEA.head,
|
||||
S.split("?"),
|
||||
RNEA.head
|
||||
)
|
||||
|
||||
URL.revokeObjectURL(url)
|
||||
|
||||
console.log(filename)
|
||||
|
||||
// TODO: Look at the mime type and determine extension ?
|
||||
const result = await platform.io.saveFileWithDialog({
|
||||
data: dataToWrite,
|
||||
|
||||
Reference in New Issue
Block a user