refactor: lint
This commit is contained in:
102
pages/doc.vue
102
pages/doc.vue
@@ -2,7 +2,7 @@
|
||||
<div class="page">
|
||||
<div class="content">
|
||||
<div class="page-columns inner-left">
|
||||
<AppSection :label="$t('import')" ref="import" no-legend>
|
||||
<AppSection ref="import" :label="$t('import')" no-legend>
|
||||
<div class="flex flex-col">
|
||||
<label>{{ $t("collection") }}</label>
|
||||
<p class="info">
|
||||
@@ -10,7 +10,11 @@
|
||||
</p>
|
||||
<div class="row-wrapper">
|
||||
<label for="collectionUpload">
|
||||
<button class="icon" @click="$refs.collectionUpload.click()" v-tooltip="'JSON'">
|
||||
<button
|
||||
v-tooltip="'JSON'"
|
||||
class="icon"
|
||||
@click="$refs.collectionUpload.click()"
|
||||
>
|
||||
<i class="material-icons">folder</i>
|
||||
<span>{{ $t("import_collections") }}</span>
|
||||
</button>
|
||||
@@ -22,7 +26,11 @@
|
||||
@change="uploadCollection"
|
||||
/>
|
||||
<div>
|
||||
<button class="icon" @click="collectionJSON = '[]'" v-tooltip.bottom="$t('clear')">
|
||||
<button
|
||||
v-tooltip.bottom="$t('clear')"
|
||||
class="icon"
|
||||
@click="collectionJSON = '[]'"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
</div>
|
||||
@@ -47,10 +55,10 @@
|
||||
</div>
|
||||
</AppSection>
|
||||
|
||||
<AppSection :label="$t('documentation')" ref="documentation" no-legend>
|
||||
<AppSection ref="documentation" :label="$t('documentation')" no-legend>
|
||||
<div class="flex flex-col">
|
||||
<label>{{ $t("documentation") }}</label>
|
||||
<p v-if="this.items.length === 0" class="info">
|
||||
<p v-if="items.length === 0" class="info">
|
||||
{{ $t("generate_docs_first") }}
|
||||
</p>
|
||||
<div v-else class="row-wrapper">
|
||||
@@ -65,7 +73,11 @@
|
||||
>
|
||||
<button
|
||||
:disabled="
|
||||
!fb.currentUser ? true : fb.currentUser.provider !== 'github.com' ? true : false
|
||||
!fb.currentUser
|
||||
? true
|
||||
: fb.currentUser.provider !== 'github.com'
|
||||
? true
|
||||
: false
|
||||
"
|
||||
class="icon"
|
||||
@click="createDocsGist"
|
||||
@@ -76,7 +88,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span v-for="(collection, index) in this.items" :key="`collection-${index}`">
|
||||
<span
|
||||
v-for="(collection, index) in items"
|
||||
:key="`collection-${index}`"
|
||||
>
|
||||
<DocsCollection :collection="collection" />
|
||||
</span>
|
||||
</div>
|
||||
@@ -87,9 +102,9 @@
|
||||
<aside class="sticky-inner inner-right lg:max-w-md">
|
||||
<Collections
|
||||
:selected="selected"
|
||||
:doc="true"
|
||||
@use-collection="useSelectedCollection($event)"
|
||||
@remove-collection="removeSelectedCollection($event)"
|
||||
:doc="true"
|
||||
/>
|
||||
</aside>
|
||||
</div>
|
||||
@@ -97,8 +112,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fb } from "~/helpers/fb"
|
||||
import Mustache from "mustache"
|
||||
import { fb } from "~/helpers/fb"
|
||||
import DocsTemplate from "~/assets/md/docs.md"
|
||||
import folderContents from "~/assets/md/folderContents.md"
|
||||
import folderBody from "~/assets/md/folderBody.md"
|
||||
@@ -113,6 +128,11 @@ export default {
|
||||
selected: [],
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: `Documentation • Hoppscotch`,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async createDocsGist() {
|
||||
await this.$axios
|
||||
@@ -132,11 +152,11 @@ export default {
|
||||
},
|
||||
}
|
||||
)
|
||||
.then(({ html_url }) => {
|
||||
.then((res) => {
|
||||
this.$toast.success(this.$t("gist_created"), {
|
||||
icon: "done",
|
||||
})
|
||||
window.open(html_url)
|
||||
window.open(res.html_url)
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$toast.error(this.$t("something_went_wrong"), {
|
||||
@@ -147,9 +167,9 @@ export default {
|
||||
},
|
||||
|
||||
uploadCollection() {
|
||||
let file = this.$refs.collectionUpload.files[0]
|
||||
const file = this.$refs.collectionUpload.files[0]
|
||||
if (file !== undefined && file !== null) {
|
||||
let reader = new FileReader()
|
||||
const reader = new FileReader()
|
||||
reader.onload = ({ target }) => {
|
||||
this.collectionJSON = target.result
|
||||
}
|
||||
@@ -165,16 +185,22 @@ export default {
|
||||
this.$refs.collectionUpload.value = ""
|
||||
},
|
||||
|
||||
assignIDs(items, pref, nesting_level) {
|
||||
for (var i = 0; i < items.length; ++i) {
|
||||
assignIDs(items, pref, nestingLevel) {
|
||||
for (let i = 0; i < items.length; ++i) {
|
||||
items[i].id = ` ${pref}${i + 1}.`
|
||||
items[i].ref = `${items[i].name.split(" ").join("-")}`
|
||||
items[i].nesting_level = nesting_level
|
||||
items[i].folders = this.assignIDs(items[i].folders, items[i].id, nesting_level + "#")
|
||||
for (var j = 0; j < items[i].requests.length; ++j) {
|
||||
items[i].nestingLevel = nestingLevel
|
||||
items[i].folders = this.assignIDs(
|
||||
items[i].folders,
|
||||
items[i].id,
|
||||
nestingLevel + "#"
|
||||
)
|
||||
for (let j = 0; j < items[i].requests.length; ++j) {
|
||||
items[i].requests[j].id = ` ${items[i].id}${i + 1}`
|
||||
items[i].requests[j].ref = `${items[i].requests[j].name.split(" ").join("-")}`
|
||||
items[i].requests[j].nesting_level = nesting_level + "#"
|
||||
items[i].requests[j].ref = `${items[i].requests[j].name
|
||||
.split(" ")
|
||||
.join("-")}`
|
||||
items[i].requests[j].nestingLevel = nestingLevel + "#"
|
||||
}
|
||||
}
|
||||
return items
|
||||
@@ -210,16 +236,19 @@ export default {
|
||||
isPreRequestScript() {
|
||||
return (
|
||||
this.preRequestScript &&
|
||||
this.preRequestScript != `// pw.env.set('variable', 'value');`
|
||||
this.preRequestScript !== `// pw.env.set('variable', 'value');`
|
||||
)
|
||||
},
|
||||
isTestScript() {
|
||||
return this.testScript && this.testScript != `// pw.expect('variable').toBe('value');`
|
||||
return (
|
||||
this.testScript &&
|
||||
this.testScript !== `// pw.expect('variable').toBe('value');`
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
folderContents: folderContents,
|
||||
folderBody: folderBody,
|
||||
folderContents,
|
||||
folderBody,
|
||||
}
|
||||
)
|
||||
this.docsMarkdown = docsMarkdown.replace(/^\s*[\r\n]/gm, "\n\n")
|
||||
@@ -231,24 +260,27 @@ export default {
|
||||
},
|
||||
|
||||
useSelectedCollection(collection) {
|
||||
if (this.selected.find((coll) => coll == collection)) {
|
||||
if (this.selected.find((coll) => coll === collection)) {
|
||||
return
|
||||
}
|
||||
this.selected.push(collection)
|
||||
let importCollection = JSON.stringify(this.selected, null, 2)
|
||||
this.collectionJSON = JSON.stringify(JSON.parse(importCollection), null, 2)
|
||||
const importCollection = JSON.stringify(this.selected, null, 2)
|
||||
this.collectionJSON = JSON.stringify(
|
||||
JSON.parse(importCollection),
|
||||
null,
|
||||
2
|
||||
)
|
||||
},
|
||||
|
||||
removeSelectedCollection(collection) {
|
||||
this.selected = this.selected.filter((coll) => coll != collection)
|
||||
let importCollection = JSON.stringify(this.selected, null, 2)
|
||||
this.collectionJSON = JSON.stringify(JSON.parse(importCollection), null, 2)
|
||||
this.selected = this.selected.filter((coll) => coll !== collection)
|
||||
const importCollection = JSON.stringify(this.selected, null, 2)
|
||||
this.collectionJSON = JSON.stringify(
|
||||
JSON.parse(importCollection),
|
||||
null,
|
||||
2
|
||||
)
|
||||
},
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: `Documentation • Hoppscotch`,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<Teams />
|
||||
</div>
|
||||
|
||||
<AppSection :label="$t('account')" ref="account" no-legend>
|
||||
<AppSection ref="account" :label="$t('account')" no-legend>
|
||||
<div class="flex flex-col">
|
||||
<label>{{ $t("account") }}</label>
|
||||
<div v-if="fb.currentUser">
|
||||
@@ -49,7 +49,10 @@
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<SmartToggle :on="SYNC_HISTORY" @change="toggleSettings('syncHistory', !SYNC_HISTORY)">
|
||||
<SmartToggle
|
||||
:on="SYNC_HISTORY"
|
||||
@change="toggleSettings('syncHistory', !SYNC_HISTORY)"
|
||||
>
|
||||
{{ $t("syncHistory") + " " + $t("sync") }}
|
||||
{{ SYNC_HISTORY ? $t("enabled") : $t("disabled") }}
|
||||
</SmartToggle>
|
||||
@@ -71,13 +74,16 @@
|
||||
</div>
|
||||
</AppSection>
|
||||
|
||||
<AppSection :label="$t('theme')" ref="theme" no-legend>
|
||||
<AppSection ref="theme" :label="$t('theme')" no-legend>
|
||||
<div class="flex flex-col">
|
||||
<label>{{ $t("theme") }}</label>
|
||||
<SmartColorModePicker />
|
||||
<SmartAccentModePicker />
|
||||
<span>
|
||||
<SmartToggle :on="SCROLL_INTO_ENABLED" @change="toggleSetting('SCROLL_INTO_ENABLED')">
|
||||
<SmartToggle
|
||||
:on="SCROLL_INTO_ENABLED"
|
||||
@change="toggleSetting('SCROLL_INTO_ENABLED')"
|
||||
>
|
||||
{{ $t("scrollInto_use_toggle") }}
|
||||
{{ SCROLL_INTO_ENABLED ? $t("enabled") : $t("disabled") }}
|
||||
</SmartToggle>
|
||||
@@ -85,16 +91,21 @@
|
||||
</div>
|
||||
</AppSection>
|
||||
|
||||
<AppSection :label="$t('extensions')" ref="extensions" no-legend>
|
||||
<AppSection ref="extensions" :label="$t('extensions')" no-legend>
|
||||
<div class="flex flex-col">
|
||||
<label>{{ $t("extensions") }}</label>
|
||||
<div class="row-wrapper">
|
||||
<SmartToggle :on="EXTENSIONS_ENABLED" @change="toggleSetting('EXTENSIONS_ENABLED')">
|
||||
<SmartToggle
|
||||
:on="EXTENSIONS_ENABLED"
|
||||
@change="toggleSetting('EXTENSIONS_ENABLED')"
|
||||
>
|
||||
{{ $t("extensions_use_toggle") }}
|
||||
</SmartToggle>
|
||||
</div>
|
||||
<p v-if="extensionVersion != null" class="info">
|
||||
{{ $t("extension_version") }}: v{{ extensionVersion.major }}.{{ extensionVersion.minor }}
|
||||
{{ $t("extension_version") }}: v{{ extensionVersion.major }}.{{
|
||||
extensionVersion.minor
|
||||
}}
|
||||
</p>
|
||||
<p v-else class="info">
|
||||
{{ $t("extension_version") }}: {{ $t("extension_ver_not_reported") }}
|
||||
@@ -102,12 +113,15 @@
|
||||
</div>
|
||||
</AppSection>
|
||||
|
||||
<AppSection :label="$t('proxy')" ref="proxy" no-legend>
|
||||
<AppSection ref="proxy" :label="$t('proxy')" no-legend>
|
||||
<div class="flex flex-col">
|
||||
<label>{{ $t("proxy") }}</label>
|
||||
<div class="row-wrapper">
|
||||
<span>
|
||||
<SmartToggle :on="PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')">
|
||||
<SmartToggle
|
||||
:on="PROXY_ENABLED"
|
||||
@change="toggleSetting('PROXY_ENABLED')"
|
||||
>
|
||||
{{ $t("proxy") }}
|
||||
{{ PROXY_ENABLED ? $t("enabled") : $t("disabled") }}
|
||||
</SmartToggle>
|
||||
@@ -117,21 +131,25 @@
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<button class="icon" v-tooltip="$t('wiki')">
|
||||
<button v-tooltip="$t('wiki')" class="icon">
|
||||
<i class="material-icons">help_outline</i>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<label for="url">{{ $t("url") }}</label>
|
||||
<button class="icon" @click="resetProxy" v-tooltip.bottom="$t('reset_default')">
|
||||
<button
|
||||
v-tooltip.bottom="$t('reset_default')"
|
||||
class="icon"
|
||||
@click="resetProxy"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
id="url"
|
||||
type="url"
|
||||
v-model="PROXY_URL"
|
||||
type="url"
|
||||
:disabled="!PROXY_ENABLED"
|
||||
:placeholder="$t('url')"
|
||||
/>
|
||||
@@ -166,7 +184,7 @@
|
||||
-->
|
||||
</AppSection>
|
||||
|
||||
<AppSection :label="$t('experiments')" ref="experiments" no-legend>
|
||||
<AppSection ref="experiments" :label="$t('experiments')" no-legend>
|
||||
<div class="flex flex-col">
|
||||
<label>{{ $t("experiments") }}</label>
|
||||
<p class="info">
|
||||
@@ -193,8 +211,9 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { fb } from "~/helpers/fb"
|
||||
import Vue from "vue"
|
||||
import { hasExtensionInstalled } from "../helpers/strategies/ExtensionStrategy"
|
||||
import { fb } from "~/helpers/fb"
|
||||
import {
|
||||
getSettingSubject,
|
||||
applySetting,
|
||||
@@ -204,8 +223,6 @@ import {
|
||||
import type { KeysMatching } from "~/types/ts-utils"
|
||||
import { currentUserInfo$ } from "~/helpers/teams/BackendUserInfo"
|
||||
|
||||
import Vue from "vue"
|
||||
|
||||
type SettingsType = typeof defaultSettings
|
||||
|
||||
export default Vue.extend({
|
||||
@@ -239,7 +256,9 @@ export default Vue.extend({
|
||||
|
||||
EXTENSIONS_ENABLED: getSettingSubject("EXTENSIONS_ENABLED"),
|
||||
|
||||
EXPERIMENTAL_URL_BAR_ENABLED: getSettingSubject("EXPERIMENTAL_URL_BAR_ENABLED"),
|
||||
EXPERIMENTAL_URL_BAR_ENABLED: getSettingSubject(
|
||||
"EXPERIMENTAL_URL_BAR_ENABLED"
|
||||
),
|
||||
|
||||
SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
|
||||
SYNC_ENVIRONMENTS: getSettingSubject("syncEnvironments"),
|
||||
@@ -249,6 +268,19 @@ export default Vue.extend({
|
||||
currentUser: currentUserInfo$,
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: `Settings • Hoppscotch`,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
proxySettings(): { url: string; key: string } {
|
||||
return {
|
||||
url: this.PROXY_URL,
|
||||
key: this.PROXY_KEY,
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
proxySettings: {
|
||||
deep: true,
|
||||
@@ -271,7 +303,10 @@ export default Vue.extend({
|
||||
}
|
||||
toggleSetting(key)
|
||||
},
|
||||
toggleSettings<K extends KeysMatching<SettingsType, boolean>>(name: K, value: SettingsType[K]) {
|
||||
toggleSettings<K extends KeysMatching<SettingsType, boolean>>(
|
||||
name: K,
|
||||
value: SettingsType[K]
|
||||
) {
|
||||
this.applySetting(name, value)
|
||||
|
||||
if (name === "syncCollections" && value) {
|
||||
@@ -293,7 +328,10 @@ export default Vue.extend({
|
||||
this.$toast.info(this.$t("cleared"), {
|
||||
icon: "clear_all",
|
||||
})
|
||||
setTimeout(() => (target.innerHTML = '<i class="material-icons">clear_all</i>'), 1000)
|
||||
setTimeout(
|
||||
() => (target.innerHTML = '<i class="material-icons">clear_all</i>'),
|
||||
1000
|
||||
)
|
||||
},
|
||||
syncCollections(): void {
|
||||
if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
|
||||
@@ -304,29 +342,20 @@ export default Vue.extend({
|
||||
)
|
||||
if (this.$store.state.postwoman.collectionsGraphql)
|
||||
fb.writeCollections(
|
||||
JSON.parse(JSON.stringify(this.$store.state.postwoman.collectionsGraphql)),
|
||||
JSON.parse(
|
||||
JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
|
||||
),
|
||||
"collectionsGraphql"
|
||||
)
|
||||
}
|
||||
},
|
||||
syncEnvironments(): void {
|
||||
if (fb.currentUser !== null && this.SYNC_ENVIRONMENTS) {
|
||||
fb.writeEnvironments(JSON.parse(JSON.stringify(this.$store.state.postwoman.environments)))
|
||||
fb.writeEnvironments(
|
||||
JSON.parse(JSON.stringify(this.$store.state.postwoman.environments))
|
||||
)
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
proxySettings(): { url: string; key: string } {
|
||||
return {
|
||||
url: this.PROXY_URL,
|
||||
key: this.PROXY_KEY,
|
||||
}
|
||||
},
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: `Settings • Hoppscotch`,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user