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

refactor: lint

Browse Source
This commit is contained in:
liyasthomas
2021-05-17 19:17:57 +05:30
parent e424d06026
commit d9ddc184cb
21 changed files with 455 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
components/lenses/HeadersRenderer.vue
View File

@@ -1,7 +1,12 @@
<template>
<div>
<p v-for="(value, key) in headers" :key="key">
<input :value="`${key} → ${value}`" :name="key" class="bg-transparent" readonly />
<input
:value="`${key} → ${value}`"
:name="key"
class="bg-transparent"
readonly
/>
</p>
</div>
</template>
@@ -9,7 +14,7 @@
<script>
export default {
props: {
headers: {},
headers: { type: Object, default: () => {} },
},
}
</script>

4
components/lenses/ResponseBodyRenderer.vue
View File

@@ -2,8 +2,8 @@
<SmartTabs styles="m-4">
<SmartTab
v-for="(lens, index) in validLenses"
:key="lens.lensName"
:id="lens.lensName"
:key="lens.lensName"
:label="lens.lensName"
:selected="index === 0"
>
@@ -28,7 +28,7 @@ export default {
...getLensRenderers(),
},
props: {
response: {},
response: { type: Object, default: () => {} },
},
computed: {
validLenses() {

54
components/lenses/renderers/HTMLLensRenderer.vue
View File

@@ -4,13 +4,15 @@
<label for="body">{{ $t("response_body") }}</label>
<div>
<button
v-if="response.body"
ref="ToggleExpandResponse"
v-tooltip="{
content: !expandResponse
? $t('expand_response')
: $t('collapse_response'),
}"
class="icon"
@click="ToggleExpandResponse"
ref="ToggleExpandResponse"
v-if="response.body"
v-tooltip="{
content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
}"
>
<i class="material-icons">
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
@@ -18,31 +20,31 @@
</button>
<button
v-if="response.body"
class="icon"
@click.prevent="togglePreview"
v-tooltip="{
content: previewEnabled ? $t('hide_preview') : $t('preview_html'),
}"
class="icon"
@click.prevent="togglePreview"
>
<i class="material-icons">
{{ !previewEnabled ? "visibility" : "visibility_off" }}
</i>
</button>
<button
v-if="response.body"
ref="downloadResponse"
v-tooltip="$t('download_file')"
class="icon"
@click="downloadResponse"
ref="downloadResponse"
v-if="response.body"
v-tooltip="$t('download_file')"
>
<i class="material-icons">save_alt</i>
</button>
<button
v-if="response.body"
ref="copyResponse"
v-tooltip="$t('copy_response')"
class="icon"
@click="copyResponse"
ref="copyResponse"
v-if="response.body"
v-tooltip="$t('copy_response')"
>
<i class="material-icons">content_copy</i>
</button>
@@ -64,9 +66,9 @@
styles="rounded-b-lg"
/>
<iframe
ref="previewFrame"
:class="{ hidden: !previewEnabled }"
class="covers-response"
ref="previewFrame"
src="about:blank"
></iframe>
</div>
@@ -79,7 +81,7 @@ import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
export default {
mixins: [TextContentRendererMixin],
props: {
response: {},
response: { type: Object, default: () => {} },
},
data() {
return {
@@ -94,7 +96,8 @@ export default {
methods: {
ToggleExpandResponse() {
this.expandResponse = !this.expandResponse
this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
this.responseBodyMaxLines =
this.responseBodyMaxLines === Infinity ? 16 : Infinity
},
downloadResponse() {
const dataToWrite = this.responseBodyText
@@ -128,19 +131,30 @@ export default {
aux.select()
document.execCommand("copy")
document.body.removeChild(aux)
setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
setTimeout(
() => (this.$refs.copyResponse.innerHTML = this.copyButton),
1000
)
},
togglePreview() {
this.previewEnabled = !this.previewEnabled
if (this.previewEnabled) {
if (this.$refs.previewFrame.getAttribute("data-previewing-url") === this.url) return
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")
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.srcdoc =
previewDocument.documentElement.outerHTML
this.$refs.previewFrame.setAttribute("data-previewing-url", this.url)
}
},

14
components/lenses/renderers/ImageLensRenderer.vue
View File

@@ -4,11 +4,11 @@
<label for="body">{{ $t("response_body") }}</label>
<div>
<button
v-if="response.body"
ref="downloadResponse"
v-tooltip="$t('download_file')"
class="icon"
@click="downloadResponse"
ref="downloadResponse"
v-if="response.body"
v-tooltip="$t('download_file')"
>
<i class="material-icons">save_alt</i>
</button>
@@ -23,7 +23,7 @@
<script>
export default {
props: {
response: {},
response: { type: Object, default: () => {} },
},
data() {
return {
@@ -34,13 +34,15 @@ export default {
},
computed: {
responseType() {
return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
return (this.response.headers["content-type"] || "")
.split(";")[0]
.toLowerCase()
},
},
watch: {
response: {
immediate: true,
handler(newValue) {
handler() {
this.imageSource = ""
const buf = this.response.body

48
components/lenses/renderers/JSONLensRenderer.vue
View File

@@ -4,46 +4,45 @@
<label for="body">{{ $t("response_body") }}</label>
<div>
<button
v-if="response.body"
ref="ToggleExpandResponse"
v-tooltip="{
content: !expandResponse
? $t('expand_response')
: $t('collapse_response'),
}"
class="icon"
@click="ToggleExpandResponse"
ref="ToggleExpandResponse"
v-if="response.body"
v-tooltip="{
content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
}"
>
<i class="material-icons">
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
</i>
</button>
<button
v-if="response.body && canDownloadResponse"
ref="downloadResponse"
v-tooltip="$t('download_file')"
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
v-if="response.body"
ref="copyResponse"
v-tooltip="$t('copy_response')"
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 class="valid-warning" v-if="jsonInvalid">
<p class="info"><i class="material-icons">error_outline</i> Invalid JSON</p>
</div>
<div id="response-details-wrapper">
<SmartAceEditor
:value="jsonBodyText"
:lang="'json'"
:provideJSONOutline="true"
:provide-j-s-o-n-outline="true"
:options="{
maxLines: responseBodyMaxLines,
minLines: '16',
@@ -60,18 +59,17 @@
</template>
<script>
import { isJSONContentType } from "~/helpers/utils/contenttypes"
import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
import { isJSONContentType } from "~/helpers/utils/contenttypes"
export default {
mixins: [TextContentRendererMixin],
props: {
response: {},
response: { type: Object, default: () => {} },
},
data() {
return {
expandResponse: false,
jsonInvalid: false,
responseBodyMaxLines: 16,
doneButton: '<i class="material-icons">done</i>',
downloadButton: '<i class="material-icons">save_alt</i>',
@@ -81,16 +79,16 @@ export default {
computed: {
jsonBodyText() {
try {
this.jsonInvalid = false
return JSON.stringify(JSON.parse(this.responseBodyText), null, 2)
} catch (e) {
// Most probs invalid JSON was returned, so drop prettification (should we warn ?)
this.jsonInvalid = true
return this.responseBodyText
}
},
responseType() {
return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
return (this.response.headers["content-type"] || "")
.split(";")[0]
.toLowerCase()
},
canDownloadResponse() {
return (
@@ -104,7 +102,8 @@ export default {
methods: {
ToggleExpandResponse() {
this.expandResponse = !this.expandResponse
this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
this.responseBodyMaxLines =
this.responseBodyMaxLines === Infinity ? 16 : Infinity
},
downloadResponse() {
const dataToWrite = this.responseBodyText
@@ -138,7 +137,10 @@ export default {
aux.select()
document.execCommand("copy")
document.body.removeChild(aux)
setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
setTimeout(
() => (this.$refs.copyResponse.innerHTML = this.copyButton),
1000
)
},
},
}

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

@@ -4,33 +4,35 @@
<label for="body">{{ $t("response_body") }}</label>
<div>
<button
v-if="response.body"
ref="ToggleExpandResponse"
v-tooltip="{
content: !expandResponse
? $t('expand_response')
: $t('collapse_response'),
}"
class="icon"
@click="ToggleExpandResponse"
ref="ToggleExpandResponse"
v-if="response.body"
v-tooltip="{
content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
}"
>
<i class="material-icons">
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
</i>
</button>
<button
v-if="response.body && canDownloadResponse"
ref="downloadResponse"
v-tooltip="$t('download_file')"
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
v-if="response.body"
ref="copyResponse"
v-tooltip="$t('copy_response')"
class="icon"
@click="copyResponse"
ref="copyResponse"
v-if="response.body"
v-tooltip="$t('copy_response')"
>
<i class="material-icons">content_copy</i>
</button>
@@ -56,13 +58,13 @@
</template>
<script>
import { isJSONContentType } from "~/helpers/utils/contenttypes"
import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
import { isJSONContentType } from "~/helpers/utils/contenttypes"
export default {
mixins: [TextContentRendererMixin],
props: {
response: {},
response: { type: Object, default: () => {} },
},
data() {
return {
@@ -75,7 +77,9 @@ export default {
},
computed: {
responseType() {
return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
return (this.response.headers["content-type"] || "")
.split(";")[0]
.toLowerCase()
},
canDownloadResponse() {
return (
@@ -89,7 +93,8 @@ export default {
methods: {
ToggleExpandResponse() {
this.expandResponse = !this.expandResponse
this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
this.responseBodyMaxLines =
this.responseBodyMaxLines === Infinity ? 16 : Infinity
},
downloadResponse() {
const dataToWrite = this.responseBodyText
@@ -123,7 +128,10 @@ export default {
aux.select()
document.execCommand("copy")
document.body.removeChild(aux)
setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
setTimeout(
() => (this.$refs.copyResponse.innerHTML = this.copyButton),
1000
)
},
},
}

38
components/lenses/renderers/XMLLensRenderer.vue
View File

@@ -4,33 +4,35 @@
<label for="body">{{ $t("response_body") }}</label>
<div>
<button
v-if="response.body"
ref="ToggleExpandResponse"
v-tooltip="{
content: !expandResponse
? $t('expand_response')
: $t('collapse_response'),
}"
class="icon"
@click="ToggleExpandResponse"
ref="ToggleExpandResponse"
v-if="response.body"
v-tooltip="{
content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
}"
>
<i class="material-icons">
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
</i>
</button>
<button
v-if="response.body"
ref="downloadResponse"
v-tooltip="$t('download_file')"
class="icon"
@click="downloadResponse"
ref="downloadResponse"
v-if="response.body"
v-tooltip="$t('download_file')"
>
<i class="material-icons">save_alt</i>
</button>
<button
v-if="response.body"
ref="copyResponse"
v-tooltip="$t('copy_response')"
class="icon"
@click="copyResponse"
ref="copyResponse"
v-if="response.body"
v-tooltip="$t('copy_response')"
>
<i class="material-icons">content_copy</i>
</button>
@@ -61,7 +63,7 @@ import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
export default {
mixins: [TextContentRendererMixin],
props: {
response: {},
response: { type: Object, default: () => {} },
},
data() {
return {
@@ -74,13 +76,16 @@ export default {
},
computed: {
responseType() {
return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
return (this.response.headers["content-type"] || "")
.split(";")[0]
.toLowerCase()
},
},
methods: {
ToggleExpandResponse() {
this.expandResponse = !this.expandResponse
this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
this.responseBodyMaxLines =
this.responseBodyMaxLines === Infinity ? 16 : Infinity
},
downloadResponse() {
const dataToWrite = this.responseBodyText
@@ -114,7 +119,10 @@ export default {
aux.select()
document.execCommand("copy")
document.body.removeChild(aux)
setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
setTimeout(
() => (this.$refs.copyResponse.innerHTML = this.copyButton),
1000
)
},
},
}