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-18 11:56:59 +05:30
parent 79a0002594
commit 7f248da0b3
18 changed files with 588 additions and 432 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/environments/Add.vue
View File

@@ -13,9 +13,9 @@
<div slot="body" class="flex flex-col">
<label for="selectLabel">{{ $t("label") }}</label>
<input
type="text"
id="selectLabel"
v-model="name"
type="text"
:placeholder="$t('my_new_environment')"
@keyup.enter="addNewEnvironment"
/>
@@ -57,7 +57,9 @@ export default {
methods: {
syncEnvironments() {
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))
)
}
},
addNewEnvironment() {
@@ -65,7 +67,7 @@ export default {
this.$toast.info(this.$t("invalid_environment_name"))
return
}
let newEnvironment = [
const newEnvironment = [
{
name: this.$data.name,
variables: [],

62
components/environments/Edit.vue
View File

@@ -13,22 +13,26 @@
<div slot="body" class="flex flex-col">
<label for="selectLabel">{{ $t("label") }}</label>
<input
type="text"
id="selectLabel"
v-model="name"
type="text"
:placeholder="editingEnvironment.name"
@keyup.enter="saveEnvironment"
/>
<div class="row-wrapper">
<label for="variableList">{{ $t("env_variable_list") }}</label>
<div>
<button class="icon" @click="clearContent($event)" v-tooltip.bottom="$t('clear')">
<button
v-tooltip.bottom="$t('clear')"
class="icon"
@click="clearContent($event)"
>
<i class="material-icons">clear_all</i>
</button>
</div>
</div>
<ul
v-for="(variable, index) in this.editingEnvCopy.variables"
v-for="(variable, index) in editingEnvCopy.variables"
:key="index"
class="
border-b border-dashed
@@ -45,13 +49,13 @@
:placeholder="$t('variable_count', { count: index + 1 })"
:name="'param' + index"
:value="variable.key"
autofocus
@change="
$store.commit('postwoman/setVariableKey', {
index,
value: $event.target.value,
})
"
autofocus
/>
</li>
<li>
@@ -59,7 +63,9 @@
:placeholder="$t('value_count', { count: index + 1 })"
:name="'value' + index"
:value="
typeof variable.value === 'string' ? variable.value : JSON.stringify(variable.value)
typeof variable.value === 'string'
? variable.value
: JSON.stringify(variable.value)
"
@change="
$store.commit('postwoman/setVariableValue', {
@@ -72,10 +78,10 @@
<div>
<li>
<button
id="variable"
v-tooltip.bottom="$t('delete')"
class="icon"
@click="removeEnvironmentVariable(index)"
v-tooltip.bottom="$t('delete')"
id="variable"
>
<i class="material-icons">delete</i>
</button>
@@ -114,8 +120,8 @@ import { getSettingSubject } from "~/newstore/settings"
export default {
props: {
show: Boolean,
editingEnvironment: Object,
editingEnvironmentIndex: Number,
editingEnvironment: { type: Object, default: () => {} },
editingEnvironmentIndex: { type: Number, default: null },
},
data() {
return {
@@ -128,15 +134,6 @@ export default {
SYNC_ENVIRONMENTS: getSettingSubject("syncEnvironments"),
}
},
watch: {
editingEnvironment(update) {
this.name =
this.$props.editingEnvironment && this.$props.editingEnvironment.name
? this.$props.editingEnvironment.name
: undefined
this.$store.commit("postwoman/setEditingEnvironment", this.$props.editingEnvironment)
},
},
computed: {
editingEnvCopy() {
return this.$store.state.postwoman.editingEnvironment
@@ -146,10 +143,24 @@ export default {
return result === "" ? "" : JSON.stringify(result)
},
},
watch: {
editingEnvironment() {
this.name =
this.$props.editingEnvironment && this.$props.editingEnvironment.name
? this.$props.editingEnvironment.name
: undefined
this.$store.commit(
"postwoman/setEditingEnvironment",
this.$props.editingEnvironment
)
},
},
methods: {
syncEnvironments() {
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))
)
}
},
clearContent({ target }) {
@@ -158,18 +169,21 @@ export default {
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
)
},
addEnvironmentVariable() {
let value = { key: "", value: "" }
const value = { key: "", value: "" }
this.$store.commit("postwoman/addVariable", value)
this.syncEnvironments()
},
removeEnvironmentVariable(index) {
let variableIndex = index
const variableIndex = index
const oldVariables = this.editingEnvCopy.variables.slice()
const newVariables = this.editingEnvCopy.variables.filter(
(variable, index) => variableIndex !== index
(_, index) => variableIndex !== index
)
this.$store.commit("postwoman/removeVariable", newVariables)
@@ -177,7 +191,7 @@ export default {
icon: "delete",
action: {
text: this.$t("undo"),
onClick: (e, toastObject) => {
onClick: (_, toastObject) => {
this.$store.commit("postwoman/removeVariable", oldVariables)
toastObject.remove()
},

18
components/environments/Environment.vue
View File

@@ -8,18 +8,22 @@
</button>
</div>
<v-popover>
<button class="tooltip-target icon" v-tooltip.left="$t('more')">
<button v-tooltip.left="$t('more')" class="tooltip-target icon">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div>
<button class="icon" @click="$emit('edit-environment')" v-close-popover>
<button
v-close-popover
class="icon"
@click="$emit('edit-environment')"
>
<i class="material-icons">create</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button class="icon" @click="confirmRemove = true" v-close-popover>
<button v-close-popover class="icon" @click="confirmRemove = true">
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
@@ -42,8 +46,8 @@ import { getSettingSubject } from "~/newstore/settings"
export default {
props: {
environment: Object,
environmentIndex: Number,
environment: { type: Object, default: () => {} },
environmentIndex: { type: Number, default: null },
},
data() {
return {
@@ -58,7 +62,9 @@ export default {
methods: {
syncEnvironments() {
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))
)
}
},
removeEnvironment() {

105
components/environments/ImportExport.vue
View File

@@ -2,15 +2,21 @@
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="title">{{ $t("import_export") }} {{ $t("environments") }}</h3>
<h3 class="title">
{{ $t("import_export") }} {{ $t("environments") }}
</h3>
<div>
<v-popover>
<button class="tooltip-target icon" v-tooltip.left="$t('more')">
<button v-tooltip.left="$t('more')" class="tooltip-target icon">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div>
<button class="icon" @click="readEnvironmentGist" v-close-popover>
<button
v-close-popover
class="icon"
@click="readEnvironmentGist"
>
<i class="material-icons">assignment_returned</i>
<span>{{ $t("import_from_gist") }}</span>
</button>
@@ -25,12 +31,16 @@
}"
>
<button
v-close-popover
:disabled="
!fb.currentUser ? true : fb.currentUser.provider !== 'github.com' ? true : false
!fb.currentUser
? true
: fb.currentUser.provider !== 'github.com'
? true
: false
"
class="icon"
@click="createEnvironmentGist"
v-close-popover
>
<i class="material-icons">assignment_turned_in</i>
<span>{{ $t("create_secret_gist") }}</span>
@@ -48,42 +58,48 @@
<div class="flex flex-col items-start p-2">
<span
v-tooltip="{
content: !fb.currentUser ? $t('login_first') : $t('replace_current'),
content: !fb.currentUser
? $t('login_first')
: $t('replace_current'),
}"
>
<button :disabled="!fb.currentUser" class="icon" @click="syncEnvironments">
<button
:disabled="!fb.currentUser"
class="icon"
@click="syncEnvironments"
>
<i class="material-icons">folder_shared</i>
<span>{{ $t("import_from_sync") }}</span>
</button>
</span>
<button
v-tooltip="$t('replace_current')"
class="icon"
@click="openDialogChooseFileToReplaceWith"
v-tooltip="$t('replace_current')"
>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("replace_json") }}</span>
<input
type="file"
@change="replaceWithJSON"
style="display: none"
ref="inputChooseFileToReplaceWith"
type="file"
style="display: none"
accept="application/json"
@change="replaceWithJSON"
/>
</button>
<button
v-tooltip="$t('preserve_current')"
class="icon"
@click="openDialogChooseFileToImportFrom"
v-tooltip="$t('preserve_current')"
>
<i class="material-icons">folder_special</i>
<span>{{ $t("import_json") }}</span>
<input
type="file"
@change="importFromJSON"
style="display: none"
ref="inputChooseFileToImportFrom"
type="file"
style="display: none"
accept="application/json"
@change="importFromJSON"
/>
</button>
</div>
@@ -102,7 +118,11 @@
<button class="icon" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon primary" @click="exportJSON" v-tooltip="$t('download_file')">
<button
v-tooltip="$t('download_file')"
class="icon primary"
@click="exportJSON"
>
{{ $t("export") }}
</button>
</span>
@@ -116,6 +136,9 @@ import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
export default {
props: {
show: Boolean,
},
data() {
return {
fb,
@@ -127,9 +150,6 @@ export default {
SYNC_ENVIRONMENTS: getSettingSubject("syncEnvironments"),
}
},
props: {
show: Boolean,
},
computed: {
environmentJson() {
return JSON.stringify(this.$store.state.postwoman.environments, null, 2)
@@ -154,11 +174,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"), {
@@ -168,7 +188,7 @@ export default {
})
},
async readEnvironmentGist() {
let gist = prompt(this.$t("enter_gist_url"))
const gist = prompt(this.$t("enter_gist_url"))
if (!gist) return
await this.$axios
.$get(`https://api.github.com/gists/${gist.split("/").pop()}`, {
@@ -177,7 +197,7 @@ export default {
},
})
.then(({ files }) => {
let environments = JSON.parse(Object.values(files)[0].content)
const environments = JSON.parse(Object.values(files)[0].content)
this.$store.commit("postwoman/replaceEnvironments", environments)
this.fileImported()
this.syncToFBEnvironments()
@@ -197,10 +217,10 @@ export default {
this.$refs.inputChooseFileToImportFrom.click()
},
replaceWithJSON() {
let reader = new FileReader()
const reader = new FileReader()
reader.onload = ({ target }) => {
let content = target.result
let environments = JSON.parse(content)
const content = target.result
const environments = JSON.parse(content)
this.$store.commit("postwoman/replaceEnvironments", environments)
}
reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0])
@@ -209,13 +229,13 @@ export default {
this.$refs.inputChooseFileToReplaceWith.value = ""
},
importFromJSON() {
let reader = new FileReader()
const reader = new FileReader()
reader.onload = ({ target }) => {
let content = target.result
let importFileObj = JSON.parse(content)
const content = target.result
const importFileObj = JSON.parse(content)
if (
importFileObj["_postman_variable_scope"] === "environment" ||
importFileObj["_postman_variable_scope"] === "globals"
importFileObj._postman_variable_scope === "environment" ||
importFileObj._postman_variable_scope === "globals"
) {
this.importFromPostman(importFileObj)
} else {
@@ -227,25 +247,27 @@ export default {
this.$refs.inputChooseFileToImportFrom.value = ""
},
importFromPostwoman(environments) {
let confirmation = this.$t("file_imported")
const confirmation = this.$t("file_imported")
this.$store.commit("postwoman/importAddEnvironments", {
environments,
confirmation,
})
},
importFromPostman({ name, values }) {
let environment = { name, variables: [] }
values.forEach(({ key, value }) => environment.variables.push({ key, value }))
let environments = [environment]
const environment = { name, variables: [] }
values.forEach(({ key, value }) =>
environment.variables.push({ key, value })
)
const environments = [environment]
this.importFromPostwoman(environments)
},
exportJSON() {
let text = this.environmentJson
text = text.replace(/\n/g, "\r\n")
let blob = new Blob([text], {
const blob = new Blob([text], {
type: "text/json",
})
let anchor = document.createElement("a")
const anchor = document.createElement("a")
anchor.download = "hoppscotch-environment.json"
anchor.href = window.URL.createObjectURL(blob)
anchor.target = "_blank"
@@ -258,12 +280,17 @@ export default {
})
},
syncEnvironments() {
this.$store.commit("postwoman/replaceEnvironments", fb.currentEnvironments)
this.$store.commit(
"postwoman/replaceEnvironments",
fb.currentEnvironments
)
this.fileImported()
},
syncToFBEnvironments() {
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))
)
}
},
fileImported() {

75
components/environments/index.vue
View File

@@ -1,5 +1,10 @@
<template>
<AppSection icon="history" :label="$t('environments')" ref="environments" no-legend>
<AppSection
ref="environments"
icon="history"
:label="$t('environments')"
no-legend
>
<div class="show-on-large-screen">
<span class="select-wrapper">
<select
@@ -11,17 +16,24 @@
<option v-if="environments.length === 0" value="0">
{{ $t("create_new_environment") }}
</option>
<option v-for="(environment, index) in environments" :value="index" :key="index">
<option
v-for="(environment, index) in environments"
:key="index"
:value="index"
>
{{ environment.name }}
</option>
</select>
</span>
</div>
<EnvironmentsAdd :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
<EnvironmentsAdd
:show="showModalAdd"
@hide-modal="displayModalAdd(false)"
/>
<EnvironmentsEdit
:show="showModalEdit"
:editingEnvironment="editingEnvironment"
:editingEnvironmentIndex="editingEnvironmentIndex"
:editing-environment="editingEnvironment"
:editing-environment-index="editingEnvironmentIndex"
@hide-modal="displayModalEdit(false)"
/>
<EnvironmentsImportExport
@@ -42,13 +54,17 @@
</div>
</div>
<p v-if="environments.length === 0" class="info">
<i class="material-icons">help_outline</i> {{ $t("create_new_environment") }}
<i class="material-icons">help_outline</i>
{{ $t("create_new_environment") }}
</p>
<div class="virtual-list">
<ul class="flex-col">
<li v-for="(environment, index) in environments" :key="environment.name">
<li
v-for="(environment, index) in environments"
:key="environment.name"
>
<EnvironmentsEnvironment
:environmentIndex="index"
:environment-index="index"
:environment="environment"
@edit-environment="editEnvironment(environment, index)"
/>
@@ -58,12 +74,6 @@
</AppSection>
</template>
<style scoped lang="scss">
.virtual-list {
max-height: calc(100vh - 270px);
}
</style>
<script>
import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
@@ -116,26 +126,30 @@ export default {
environment: this.defaultEnvironment,
environments: this.environments,
})
} else {
if (this.environments[this.selectedEnvironmentIndex])
this.$emit("use-environment", {
environment: this.environments[this.selectedEnvironmentIndex],
environments: this.environments,
})
else this.selectedEnvironmentIndex = -1
}
} else if (this.environments[this.selectedEnvironmentIndex])
this.$emit("use-environment", {
environment: this.environments[this.selectedEnvironmentIndex],
environments: this.environments,
})
else this.selectedEnvironmentIndex = -1
},
},
},
async mounted() {
mounted() {
this._keyListener = function (e) {
if (e.key === "Escape") {
e.preventDefault()
this.showModalImportExport = this.showModalAdd = this.showModalEdit = false
this.showModalImportExport =
this.showModalAdd =
this.showModalEdit =
false
}
}
document.addEventListener("keydown", this._keyListener.bind(this))
},
beforeDestroy() {
document.removeEventListener("keydown", this._keyListener)
},
methods: {
displayModalAdd(shouldDisplay) {
this.showModalAdd = shouldDisplay
@@ -160,12 +174,17 @@ export default {
},
syncEnvironments() {
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))
)
}
},
},
beforeDestroy() {
document.removeEventListener("keydown", this._keyListener)
},
}
</script>
<style scoped lang="scss">
.virtual-list {
max-height: calc(100vh - 270px);
}
</style>