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

Initial environment state system refactor

Browse Source
This commit is contained in:
Andrew Bastin
2021-06-04 22:41:07 -04:00
parent c3f713c0bd
commit 5bfeb541fc
11 changed files with 430 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components/app/Header.vue
View File

@@ -328,5 +328,4 @@ $responsiveWidth: 768px;
animation: slideIn 0.2s forwards ease-in-out;
}
</style>

40
components/environments/Add.vue
View File

@@ -36,48 +36,26 @@
</SmartModal>
</template>
<script>
import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
<script lang="ts">
import Vue from "vue"
import { createEnvironment } from "~/newstore/environments"
export default {
export default Vue.extend({
props: {
show: Boolean,
},
data() {
return {
name: null,
}
},
subscriptions() {
return {
SYNC_ENVIRONMENTS: getSettingSubject("syncEnvironments"),
name: null as string | null,
}
},
methods: {
syncEnvironments() {
if (fb.currentUser !== null && this.SYNC_ENVIRONMENTS) {
fb.writeEnvironments(
JSON.parse(JSON.stringify(this.$store.state.postwoman.environments))
)
}
},
addNewEnvironment() {
if (!this.$data.name) {
this.$toast.info(this.$t("invalid_environment_name"))
if (!this.name) {
this.$toast.info(this.$t("invalid_environment_name").toString())
return
}
const newEnvironment = [
{
name: this.$data.name,
variables: [],
},
]
this.$store.commit("postwoman/importAddEnvironments", {
environments: newEnvironment,
confirmation: "Environment added",
})
this.syncEnvironments()
createEnvironment(this.name)
this.hideModal()
},
hideModal() {
@@ -85,5 +63,5 @@ export default {
this.$emit("hide-modal")
},
},
}
})
</script>

131
components/environments/Edit.vue
View File

@@ -32,7 +32,7 @@
</div>
</div>
<ul
v-for="(variable, index) in editingEnvCopy.variables"
v-for="(variable, index) in vars"
:key="index"
class="
border-b border-dashed
@@ -46,33 +46,16 @@
>
<li>
<input
v-model="variable.key"
:placeholder="$t('variable_count', { count: index + 1 })"
:name="'param' + index"
:value="variable.key"
autofocus
@change="
$store.commit('postwoman/setVariableKey', {
index,
value: $event.target.value,
})
"
/>
</li>
<li>
<input
v-model="variable.value"
:placeholder="$t('value_count', { count: index + 1 })"
:name="'value' + index"
:value="
typeof variable.value === 'string'
? variable.value
: JSON.stringify(variable.value)
"
@change="
$store.commit('postwoman/setVariableValue', {
index,
value: $event.target.value,
})
"
/>
</li>
<div>
@@ -113,60 +96,44 @@
</SmartModal>
</template>
<script>
import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
<script lang="ts">
import Vue, { PropType } from "vue"
import clone from "lodash/clone"
import type { Environment } from "~/newstore/environments"
import { updateEnvironment } from "~/newstore/environments"
export default {
export default Vue.extend({
props: {
show: Boolean,
editingEnvironment: { type: Object, default: () => {} },
editingEnvironment: {
type: Object as PropType<Environment | null>,
default: null,
},
editingEnvironmentIndex: { type: Number, default: null },
},
data() {
return {
name: null,
name: null as string | null,
vars: [] as { key: string; value: string }[],
doneButton: '<i class="material-icons">done</i>',
}
},
subscriptions() {
return {
SYNC_ENVIRONMENTS: getSettingSubject("syncEnvironments"),
}
},
computed: {
editingEnvCopy() {
return this.$store.state.postwoman.editingEnvironment
},
variableString() {
const result = this.editingEnvCopy.variables
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
)
this.name = this.editingEnvironment?.name ?? null
this.vars = clone(this.editingEnvironment?.variables ?? [])
},
show() {
this.name = this.editingEnvironment?.name ?? null
this.vars = clone(this.editingEnvironment?.variables ?? [])
},
},
methods: {
syncEnvironments() {
if (fb.currentUser !== null && this.SYNC_ENVIRONMENTS) {
fb.writeEnvironments(
JSON.parse(JSON.stringify(this.$store.state.postwoman.environments))
)
}
},
clearContent({ target }) {
this.$store.commit("postwoman/removeVariables", [])
clearContent({ target }: { target: HTMLElement }) {
this.vars = []
target.innerHTML = this.doneButton
this.$toast.info(this.$t("cleared"), {
this.$toast.info(this.$t("cleared").toString(), {
icon: "clear_all",
})
setTimeout(
@@ -175,44 +142,26 @@ export default {
)
},
addEnvironmentVariable() {
const value = { key: "", value: "" }
this.$store.commit("postwoman/addVariable", value)
this.syncEnvironments()
},
removeEnvironmentVariable(index) {
const variableIndex = index
const oldVariables = this.editingEnvCopy.variables.slice()
const newVariables = this.editingEnvCopy.variables.filter(
(_, index) => variableIndex !== index
)
this.$store.commit("postwoman/removeVariable", newVariables)
this.$toast.error(this.$t("deleted"), {
icon: "delete",
action: {
text: this.$t("undo"),
onClick: (_, toastObject) => {
this.$store.commit("postwoman/removeVariable", oldVariables)
toastObject.remove()
},
},
this.vars.push({
key: "",
value: "",
})
this.syncEnvironments()
},
removeEnvironmentVariable(index: number) {
this.vars.splice(index, 1)
},
saveEnvironment() {
if (!this.$data.name) {
this.$toast.info(this.$t("invalid_environment_name"))
if (!this.name) {
this.$toast.info(this.$t("invalid_environment_name").toString())
return
}
const environmentUpdated = {
...this.editingEnvCopy,
name: this.$data.name,
const environmentUpdated: Environment = {
name: this.name,
variables: this.vars,
}
this.$store.commit("postwoman/saveEnvironment", {
environment: environmentUpdated,
environmentIndex: this.$props.editingEnvironmentIndex,
})
this.syncEnvironments()
updateEnvironment(this.editingEnvironmentIndex, environmentUpdated)
this.hideModal()
},
hideModal() {
@@ -220,5 +169,5 @@ export default {
this.$emit("hide-modal")
},
},
}
})
</script>

27
components/environments/Environment.vue
View File

@@ -40,11 +40,11 @@
</div>
</template>
<script>
import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
<script lang="ts">
import Vue from "vue"
import { deleteEnvironment } from "~/newstore/environments"
export default {
export default Vue.extend({
props: {
environment: { type: Object, default: () => {} },
environmentIndex: { type: Number, default: null },
@@ -54,26 +54,13 @@ export default {
confirmRemove: false,
}
},
subscriptions() {
return {
SYNC_ENVIRONMENTS: getSettingSubject("syncEnvironments"),
}
},
methods: {
syncEnvironments() {
if (fb.currentUser !== null && this.SYNC_ENVIRONMENTS) {
fb.writeEnvironments(
JSON.parse(JSON.stringify(this.$store.state.postwoman.environments))
)
}
},
removeEnvironment() {
this.$store.commit("postwoman/removeEnvironment", this.environmentIndex)
this.$toast.error(this.$t("deleted"), {
deleteEnvironment(this.environmentIndex)
this.$toast.error(this.$t("deleted").toString(), {
icon: "delete",
})
this.syncEnvironments()
},
},
}
})
</script>

56
components/environments/index.vue
View File

@@ -75,8 +75,11 @@
</template>
<script>
import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
import {
environments$,
setCurrentEnvironment,
selectedEnvIndex$,
} from "~/newstore/environments"
export default {
data() {
@@ -87,52 +90,17 @@ export default {
editingEnvironment: undefined,
editingEnvironmentIndex: undefined,
selectedEnvironmentIndex: -1,
defaultEnvironment: {
name: "My Environment Variables",
variables: [],
},
}
},
subscriptions() {
return {
SYNC_ENVIRONMENTS: getSettingSubject("syncEnvironments"),
environments: environments$,
selectedEnvironmentIndex: selectedEnvIndex$,
}
},
computed: {
environments() {
return fb.currentUser !== null
? fb.currentEnvironments
: this.$store.state.postwoman.environments
},
},
watch: {
selectedEnvironmentIndex(val) {
if (val === -1)
this.$emit("use-environment", {
environment: this.defaultEnvironment,
environments: this.environments,
})
else
this.$emit("use-environment", {
environment: this.environments[val],
environments: this.environments,
})
},
environments: {
handler({ length }) {
if (length === 0) {
this.selectedEnvironmentIndex = -1
this.$emit("use-environment", {
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
},
setCurrentEnvironment(val)
},
},
mounted() {
@@ -166,19 +134,11 @@ export default {
this.$data.editingEnvironment = environment
this.$data.editingEnvironmentIndex = environmentIndex
this.displayModalEdit(true)
this.syncEnvironments()
},
resetSelectedData() {
this.$data.editingEnvironment = undefined
this.$data.editingEnvironmentIndex = undefined
},
syncEnvironments() {
if (fb.currentUser !== null && this.SYNC_ENVIRONMENTS) {
fb.writeEnvironments(
JSON.parse(JSON.stringify(this.$store.state.postwoman.environments))
)
}
},
},
}
</script>

8
components/smart/AccentModePicker.vue
View File

@@ -1,9 +1,6 @@
<template>
<div class="flex flex-col">
<label
>{{ $t("color") }}:
{{ capitalized(active) }}</label
>
<label>{{ $t("color") }}: {{ capitalized(active) }}</label>
<div>
<!-- text-blue-400 -->
<!-- text-green-400 -->
@@ -61,7 +58,6 @@ export default {
},
watch: {
active(color) {
localStorage.setItem("THEME_COLOR", color)
},
},
@@ -72,7 +68,7 @@ export default {
this.active = color
},
capitalized(color) {
return `${color.charAt(0).toUpperCase()}${color.slice(1)}`
return `${color.charAt(0).toUpperCase()}${color.slice(1)}`
},
},
}