refactor: lint

This commit is contained in:
liyasthomas
2021-05-18 21:39:55 +05:30
parent cc27c552af
commit 40ddfa8def
32 changed files with 712 additions and 377 deletions

View File

@@ -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 = `&emsp;${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 = `&emsp;${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>

View File

@@ -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>