refactor: monorepo+pnpm (removed husky)
This commit is contained in:
Andrew Bastin
65
packages/hoppscotch-app/components/environments/Add.vue
Normal file
65
packages/hoppscotch-app/components/environments/Add.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<SmartModal v-if="show" :title="$t('environment.new')" @close="hideModal">
|
||||
<template #body>
|
||||
<div class="flex flex-col px-2">
|
||||
<input
|
||||
id="selectLabelEnvAdd"
|
||||
v-model="name"
|
||||
v-focus
|
||||
class="input floating-input"
|
||||
placeholder=" "
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
@keyup.enter="addNewEnvironment"
|
||||
/>
|
||||
<label for="selectLabelEnvAdd">
|
||||
{{ $t("action.label") }}
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<span>
|
||||
<ButtonPrimary
|
||||
:label="$t('action.save')"
|
||||
@click.native="addNewEnvironment"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
:label="$t('action.cancel')"
|
||||
@click.native="hideModal"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "@nuxtjs/composition-api"
|
||||
import { createEnvironment } from "~/newstore/environments"
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
show: Boolean,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
name: null as string | null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addNewEnvironment() {
|
||||
if (!this.name) {
|
||||
this.$toast.error(this.$t("environment.invalid_name").toString(), {
|
||||
icon: "error_outline",
|
||||
})
|
||||
return
|
||||
}
|
||||
createEnvironment(this.name)
|
||||
this.hideModal()
|
||||
},
|
||||
hideModal() {
|
||||
this.name = null
|
||||
this.$emit("hide-modal")
|
||||
},
|
||||
},
|
||||
})
|
||||
</script>
|
||||
201
packages/hoppscotch-app/components/environments/Edit.vue
Normal file
201
packages/hoppscotch-app/components/environments/Edit.vue
Normal file
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<SmartModal v-if="show" :title="$t('environment.edit')" @close="hideModal">
|
||||
<template #body>
|
||||
<div class="flex flex-col px-2">
|
||||
<div class="flex relative">
|
||||
<input
|
||||
id="selectLabelEnvEdit"
|
||||
v-model="name"
|
||||
v-focus
|
||||
class="input floating-input"
|
||||
placeholder=" "
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
:disabled="editingEnvironmentIndex === 'Global'"
|
||||
@keyup.enter="saveEnvironment"
|
||||
/>
|
||||
<label for="selectLabelEnvEdit">
|
||||
{{ $t("action.label") }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex flex-1 justify-between items-center">
|
||||
<label for="variableList" class="p-4">
|
||||
{{ $t("environment.variable_list") }}
|
||||
</label>
|
||||
<div class="flex">
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('action.clear_all')"
|
||||
:svg="clearIcon"
|
||||
class="rounded"
|
||||
@click.native="clearContent()"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
svg="plus"
|
||||
:title="$t('add.new')"
|
||||
class="rounded"
|
||||
@click.native="addEnvironmentVariable"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divide-y divide-dividerLight border-divider border rounded">
|
||||
<div
|
||||
v-for="(variable, index) in vars"
|
||||
:key="`variable-${index}`"
|
||||
class="divide-x divide-dividerLight flex"
|
||||
>
|
||||
<input
|
||||
v-model="variable.key"
|
||||
class="bg-transparent flex flex-1 py-2 px-4"
|
||||
:placeholder="$t('count.variable', { count: index + 1 })"
|
||||
:name="'param' + index"
|
||||
/>
|
||||
<input
|
||||
v-model="variable.value"
|
||||
class="bg-transparent flex flex-1 py-2 px-4"
|
||||
:placeholder="$t('count.value', { count: index + 1 })"
|
||||
:name="'value' + index"
|
||||
/>
|
||||
<div class="flex">
|
||||
<ButtonSecondary
|
||||
id="variable"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('action.remove')"
|
||||
svg="trash"
|
||||
color="red"
|
||||
@click.native="removeEnvironmentVariable(index)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="vars.length === 0"
|
||||
class="
|
||||
flex flex-col
|
||||
text-secondaryLight
|
||||
p-4
|
||||
items-center
|
||||
justify-center
|
||||
"
|
||||
>
|
||||
<SmartIcon class="opacity-75 pb-2" name="layers" />
|
||||
<span class="text-center pb-4">
|
||||
{{ $t("empty.environments") }}
|
||||
</span>
|
||||
<ButtonSecondary
|
||||
:label="$t('add.new')"
|
||||
filled
|
||||
@click.native="addEnvironmentVariable"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<span>
|
||||
<ButtonPrimary
|
||||
:label="$t('action.save')"
|
||||
@click.native="saveEnvironment"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
:label="$t('action.cancel')"
|
||||
@click.native="hideModal"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import clone from "lodash/clone"
|
||||
import { computed, defineComponent, PropType } from "@nuxtjs/composition-api"
|
||||
import {
|
||||
Environment,
|
||||
getEnviroment,
|
||||
getGlobalVariables,
|
||||
setGlobalEnvVariables,
|
||||
updateEnvironment,
|
||||
} from "~/newstore/environments"
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
show: Boolean,
|
||||
editingEnvironmentIndex: {
|
||||
type: [Number, String] as PropType<number | "Global" | null>,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const workingEnv = computed(() => {
|
||||
if (props.editingEnvironmentIndex === null) return null
|
||||
|
||||
if (props.editingEnvironmentIndex === "Global") {
|
||||
return {
|
||||
name: "Global",
|
||||
variables: getGlobalVariables(),
|
||||
} as Environment
|
||||
} else {
|
||||
return getEnviroment(props.editingEnvironmentIndex)
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
workingEnv,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
name: null as string | null,
|
||||
vars: [] as { key: string; value: string }[],
|
||||
clearIcon: "trash-2",
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show() {
|
||||
this.name = this.workingEnv?.name ?? null
|
||||
this.vars = clone(this.workingEnv?.variables ?? [])
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
clearContent() {
|
||||
this.vars = []
|
||||
this.clearIcon = "check"
|
||||
this.$toast.success(this.$t("state.cleared").toString(), {
|
||||
icon: "clear_all",
|
||||
})
|
||||
setTimeout(() => (this.clearIcon = "trash-2"), 1000)
|
||||
},
|
||||
addEnvironmentVariable() {
|
||||
this.vars.push({
|
||||
key: "",
|
||||
value: "",
|
||||
})
|
||||
},
|
||||
removeEnvironmentVariable(index: number) {
|
||||
this.vars.splice(index, 1)
|
||||
},
|
||||
saveEnvironment() {
|
||||
if (!this.name) {
|
||||
this.$toast.error(this.$t("environment.invalid_name").toString(), {
|
||||
icon: "error_outline",
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
const environmentUpdated: Environment = {
|
||||
name: this.name,
|
||||
variables: this.vars,
|
||||
}
|
||||
|
||||
if (this.editingEnvironmentIndex === "Global")
|
||||
setGlobalEnvVariables(environmentUpdated.variables)
|
||||
else updateEnvironment(this.editingEnvironmentIndex!, environmentUpdated)
|
||||
this.hideModal()
|
||||
},
|
||||
hideModal() {
|
||||
this.name = null
|
||||
this.$emit("hide-modal")
|
||||
},
|
||||
},
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div class="flex items-center group">
|
||||
<span
|
||||
class="cursor-pointer flex px-4 justify-center items-center"
|
||||
@click="$emit('edit-environment')"
|
||||
>
|
||||
<SmartIcon class="svg-icons" name="layers" />
|
||||
</span>
|
||||
<span
|
||||
class="
|
||||
cursor-pointer
|
||||
flex flex-1
|
||||
min-w-0
|
||||
py-2
|
||||
pr-2
|
||||
transition
|
||||
group-hover:text-secondaryDark
|
||||
"
|
||||
@click="$emit('edit-environment')"
|
||||
>
|
||||
<span class="truncate">
|
||||
{{ environment.name }}
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
<tippy ref="options" interactive trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('action.more')"
|
||||
svg="more-vertical"
|
||||
/>
|
||||
</template>
|
||||
<SmartItem
|
||||
svg="edit"
|
||||
:label="$t('action.edit')"
|
||||
@click.native="
|
||||
$emit('edit-environment')
|
||||
$refs.options.tippy().hide()
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
v-if="!(environmentIndex === 'Global')"
|
||||
svg="trash-2"
|
||||
color="red"
|
||||
:label="$t('action.delete')"
|
||||
@click.native="
|
||||
confirmRemove = true
|
||||
$refs.options.tippy().hide()
|
||||
"
|
||||
/>
|
||||
</tippy>
|
||||
</span>
|
||||
<SmartConfirmModal
|
||||
:show="confirmRemove"
|
||||
:title="$t('confirm.remove_environment')"
|
||||
@hide-modal="confirmRemove = false"
|
||||
@resolve="removeEnvironment"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from "@nuxtjs/composition-api"
|
||||
import { deleteEnvironment } from "~/newstore/environments"
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
environment: { type: Object, default: () => {} },
|
||||
environmentIndex: {
|
||||
type: [Number, String] as PropType<number | "Global">,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
confirmRemove: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
removeEnvironment() {
|
||||
if (this.environmentIndex !== "Global")
|
||||
deleteEnvironment(this.environmentIndex)
|
||||
this.$toast.success(this.$t("state.deleted").toString(), {
|
||||
icon: "delete",
|
||||
})
|
||||
},
|
||||
},
|
||||
})
|
||||
</script>
|
||||
247
packages/hoppscotch-app/components/environments/ImportExport.vue
Normal file
247
packages/hoppscotch-app/components/environments/ImportExport.vue
Normal file
@@ -0,0 +1,247 @@
|
||||
<template>
|
||||
<SmartModal
|
||||
v-if="show"
|
||||
:title="`${$t('modal.import_export')} ${$t('environment.title')}`"
|
||||
@close="hideModal"
|
||||
>
|
||||
<template #actions>
|
||||
<span>
|
||||
<tippy ref="options" interactive trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('action.more')"
|
||||
class="rounded"
|
||||
svg="more-vertical"
|
||||
/>
|
||||
</template>
|
||||
<SmartItem
|
||||
icon="assignment_returned"
|
||||
:label="$t('import.from_gist')"
|
||||
@click.native="
|
||||
readEnvironmentGist
|
||||
$refs.options.tippy().hide()
|
||||
"
|
||||
/>
|
||||
<span
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="
|
||||
!currentUser
|
||||
? $t('export.require_github')
|
||||
: currentUser.provider !== 'github.com'
|
||||
? $t('export.require_github')
|
||||
: null
|
||||
"
|
||||
>
|
||||
<SmartItem
|
||||
:disabled="
|
||||
!currentUser
|
||||
? true
|
||||
: currentUser.provider !== 'github.com'
|
||||
? true
|
||||
: false
|
||||
"
|
||||
icon="assignment_turned_in"
|
||||
:label="$t('export.create_secret_gist')"
|
||||
@click.native="
|
||||
createEnvironmentGist
|
||||
$refs.options.tippy().hide()
|
||||
"
|
||||
/>
|
||||
</span>
|
||||
</tippy>
|
||||
</span>
|
||||
</template>
|
||||
<template #body>
|
||||
<div class="flex flex-col space-y-2">
|
||||
<SmartItem
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('action.replace_current')"
|
||||
svg="file"
|
||||
:label="$t('action.replace_json')"
|
||||
@click.native="openDialogChooseFileToReplaceWith"
|
||||
/>
|
||||
<input
|
||||
ref="inputChooseFileToReplaceWith"
|
||||
class="input"
|
||||
type="file"
|
||||
accept="application/json"
|
||||
@change="replaceWithJSON"
|
||||
/>
|
||||
<SmartItem
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('action.preserve_current')"
|
||||
svg="folder-plus"
|
||||
:label="$t('import.json')"
|
||||
@click.native="openDialogChooseFileToImportFrom"
|
||||
/>
|
||||
<input
|
||||
ref="inputChooseFileToImportFrom"
|
||||
class="input"
|
||||
type="file"
|
||||
accept="application/json"
|
||||
@change="importFromJSON"
|
||||
/>
|
||||
<SmartItem
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('action.download_file')"
|
||||
svg="download"
|
||||
:label="$t('export.as_json')"
|
||||
@click.native="exportJSON"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</SmartModal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from "@nuxtjs/composition-api"
|
||||
import { currentUser$ } from "~/helpers/fb/auth"
|
||||
import { useReadonlyStream } from "~/helpers/utils/composables"
|
||||
import {
|
||||
environments$,
|
||||
replaceEnvironments,
|
||||
appendEnvironments,
|
||||
} from "~/newstore/environments"
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
show: Boolean,
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
environments: useReadonlyStream(environments$, []),
|
||||
currentUser: useReadonlyStream(currentUser$, null),
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
environmentJson() {
|
||||
return JSON.stringify(this.environments, null, 2)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async createEnvironmentGist() {
|
||||
await this.$axios
|
||||
.$post(
|
||||
"https://api.github.com/gists",
|
||||
{
|
||||
files: {
|
||||
"hoppscotch-environments.json": {
|
||||
content: this.environmentJson,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
Authorization: `token ${this.currentUser.accessToken}`,
|
||||
Accept: "application/vnd.github.v3+json",
|
||||
},
|
||||
}
|
||||
)
|
||||
.then((res) => {
|
||||
this.$toast.success(this.$t("export.gist_created"), {
|
||||
icon: "done",
|
||||
})
|
||||
window.open(res.html_url)
|
||||
})
|
||||
.catch((e) => {
|
||||
this.$toast.error(this.$t("error.something_went_wrong"), {
|
||||
icon: "error_outline",
|
||||
})
|
||||
console.error(e)
|
||||
})
|
||||
},
|
||||
async readEnvironmentGist() {
|
||||
const gist = prompt(this.$t("import.gist_url"))
|
||||
if (!gist) return
|
||||
await this.$axios
|
||||
.$get(`https://api.github.com/gists/${gist.split("/").pop()}`, {
|
||||
headers: {
|
||||
Accept: "application/vnd.github.v3+json",
|
||||
},
|
||||
})
|
||||
.then(({ files }) => {
|
||||
const environments = JSON.parse(Object.values(files)[0].content)
|
||||
replaceEnvironments(environments)
|
||||
this.fileImported()
|
||||
})
|
||||
.catch((e) => {
|
||||
this.failedImport()
|
||||
console.error(e)
|
||||
})
|
||||
},
|
||||
hideModal() {
|
||||
this.$emit("hide-modal")
|
||||
},
|
||||
openDialogChooseFileToReplaceWith() {
|
||||
this.$refs.inputChooseFileToReplaceWith.click()
|
||||
},
|
||||
openDialogChooseFileToImportFrom() {
|
||||
this.$refs.inputChooseFileToImportFrom.click()
|
||||
},
|
||||
replaceWithJSON() {
|
||||
const reader = new FileReader()
|
||||
reader.onload = ({ target }) => {
|
||||
const content = target.result
|
||||
const environments = JSON.parse(content)
|
||||
replaceEnvironments(environments)
|
||||
}
|
||||
reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0])
|
||||
this.fileImported()
|
||||
this.$refs.inputChooseFileToReplaceWith.value = ""
|
||||
},
|
||||
importFromJSON() {
|
||||
const reader = new FileReader()
|
||||
reader.onload = ({ target }) => {
|
||||
const content = target.result
|
||||
const importFileObj = JSON.parse(content)
|
||||
if (
|
||||
importFileObj._postman_variable_scope === "environment" ||
|
||||
importFileObj._postman_variable_scope === "globals"
|
||||
) {
|
||||
this.importFromPostman(importFileObj)
|
||||
} else {
|
||||
this.importFromHoppscotch(importFileObj)
|
||||
}
|
||||
}
|
||||
reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0])
|
||||
this.$refs.inputChooseFileToImportFrom.value = ""
|
||||
},
|
||||
importFromHoppscotch(environments) {
|
||||
appendEnvironments(environments)
|
||||
this.fileImported()
|
||||
},
|
||||
importFromPostman({ name, values }) {
|
||||
const environment = { name, variables: [] }
|
||||
values.forEach(({ key, value }) =>
|
||||
environment.variables.push({ key, value })
|
||||
)
|
||||
const environments = [environment]
|
||||
this.importFromHoppscotch(environments)
|
||||
},
|
||||
exportJSON() {
|
||||
const dataToWrite = this.environmentJson
|
||||
const file = new Blob([dataToWrite], { type: "application/json" })
|
||||
const a = document.createElement("a")
|
||||
const url = URL.createObjectURL(file)
|
||||
a.href = url
|
||||
// TODO get uri from meta
|
||||
a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
this.$toast.success(this.$t("state.download_started"), {
|
||||
icon: "downloading",
|
||||
})
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(a)
|
||||
URL.revokeObjectURL(url)
|
||||
}, 1000)
|
||||
},
|
||||
fileImported() {
|
||||
this.$toast.success(this.$t("state.file_imported"), {
|
||||
icon: "folder_shared",
|
||||
})
|
||||
},
|
||||
},
|
||||
})
|
||||
</script>
|
||||
184
packages/hoppscotch-app/components/environments/index.vue
Normal file
184
packages/hoppscotch-app/components/environments/index.vue
Normal file
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<AppSection :label="$t('environment.title')">
|
||||
<div
|
||||
class="
|
||||
bg-primary
|
||||
rounded-t
|
||||
flex flex-col
|
||||
top-sidebarPrimaryStickyFold
|
||||
z-10
|
||||
sticky
|
||||
"
|
||||
>
|
||||
<tippy ref="options" interactive trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<span
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('environment.select')"
|
||||
class="
|
||||
bg-transparent
|
||||
border-b border-dividerLight
|
||||
flex-1
|
||||
select-wrapper
|
||||
"
|
||||
>
|
||||
<ButtonSecondary
|
||||
v-if="selectedEnvironmentIndex !== -1"
|
||||
:label="environments[selectedEnvironmentIndex].name"
|
||||
class="rounded-none flex-1 pr-8"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-else
|
||||
:label="$t('environment.no_environment')"
|
||||
class="rounded-none flex-1 pr-8"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
<SmartItem
|
||||
:label="$t('environment.no_environment')"
|
||||
:info-icon="selectedEnvironmentIndex === -1 ? 'done' : ''"
|
||||
:active-info-icon="selectedEnvironmentIndex === -1"
|
||||
@click.native="
|
||||
selectedEnvironmentIndex = -1
|
||||
$refs.options.tippy().hide()
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
v-for="(gen, index) in environments"
|
||||
:key="`gen-${index}`"
|
||||
:label="gen.name"
|
||||
:info-icon="index === selectedEnvironmentIndex ? 'done' : ''"
|
||||
:active-info-icon="index === selectedEnvironmentIndex"
|
||||
@click.native="
|
||||
selectedEnvironmentIndex = index
|
||||
$refs.options.tippy().hide()
|
||||
"
|
||||
/>
|
||||
</tippy>
|
||||
<div class="border-b border-dividerLight flex flex-1 justify-between">
|
||||
<ButtonSecondary
|
||||
svg="plus"
|
||||
:label="$t('action.new')"
|
||||
class="!rounded-none"
|
||||
@click.native="displayModalAdd(true)"
|
||||
/>
|
||||
<div class="flex">
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
to="https://docs.hoppscotch.io/features/environments"
|
||||
blank
|
||||
:title="$t('app.wiki')"
|
||||
svg="help-circle"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
svg="archive"
|
||||
:title="$t('modal.import_export')"
|
||||
@click.native="displayModalImportExport(true)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<EnvironmentsAdd
|
||||
:show="showModalAdd"
|
||||
@hide-modal="displayModalAdd(false)"
|
||||
/>
|
||||
<EnvironmentsEdit
|
||||
:show="showModalEdit"
|
||||
:editing-environment-index="editingEnvironmentIndex"
|
||||
@hide-modal="displayModalEdit(false)"
|
||||
/>
|
||||
<EnvironmentsImportExport
|
||||
:show="showModalImportExport"
|
||||
@hide-modal="displayModalImportExport(false)"
|
||||
/>
|
||||
<div class="flex flex-col">
|
||||
<EnvironmentsEnvironment
|
||||
environment-index="Global"
|
||||
:environment="globalEnvironment"
|
||||
class="border-b border-dashed border-dividerLight"
|
||||
@edit-environment="editEnvironment('Global')"
|
||||
/>
|
||||
<EnvironmentsEnvironment
|
||||
v-for="(environment, index) in environments"
|
||||
:key="`environment-${index}`"
|
||||
:environment-index="index"
|
||||
:environment="environment"
|
||||
@edit-environment="editEnvironment(index)"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="environments.length === 0"
|
||||
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
|
||||
>
|
||||
<span class="text-center pb-4">
|
||||
{{ $t("empty.environments") }}
|
||||
</span>
|
||||
<ButtonSecondary
|
||||
:label="$t('add.new')"
|
||||
filled
|
||||
@click.native="displayModalAdd(true)"
|
||||
/>
|
||||
</div>
|
||||
</AppSection>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent } from "@nuxtjs/composition-api"
|
||||
import { useReadonlyStream, useStream } from "~/helpers/utils/composables"
|
||||
import {
|
||||
environments$,
|
||||
setCurrentEnvironment,
|
||||
selectedEnvIndex$,
|
||||
globalEnv$,
|
||||
} from "~/newstore/environments"
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const globalEnv = useReadonlyStream(globalEnv$, [])
|
||||
|
||||
const globalEnvironment = computed(() => ({
|
||||
name: "Global",
|
||||
variables: globalEnv.value,
|
||||
}))
|
||||
|
||||
return {
|
||||
environments: useReadonlyStream(environments$, []),
|
||||
globalEnvironment,
|
||||
selectedEnvironmentIndex: useStream(
|
||||
selectedEnvIndex$,
|
||||
-1,
|
||||
setCurrentEnvironment
|
||||
),
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showModalImportExport: false,
|
||||
showModalAdd: false,
|
||||
showModalEdit: false,
|
||||
editingEnvironmentIndex: undefined as number | "Global" | undefined,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
displayModalAdd(shouldDisplay: boolean) {
|
||||
this.showModalAdd = shouldDisplay
|
||||
},
|
||||
displayModalEdit(shouldDisplay: boolean) {
|
||||
this.showModalEdit = shouldDisplay
|
||||
|
||||
if (!shouldDisplay) this.resetSelectedData()
|
||||
},
|
||||
displayModalImportExport(shouldDisplay: boolean) {
|
||||
this.showModalImportExport = shouldDisplay
|
||||
},
|
||||
editEnvironment(environmentIndex: number | "Global") {
|
||||
this.$data.editingEnvironmentIndex = environmentIndex
|
||||
this.displayModalEdit(true)
|
||||
},
|
||||
resetSelectedData() {
|
||||
this.$data.editingEnvironmentIndex = undefined
|
||||
},
|
||||
},
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user