a568610c28
Co-authored-by: amk-dev <akash.k.mohan98@gmail.com> Co-authored-by: liyasthomas <liyascthomas@gmail.com> Co-authored-by: islamzeki <islamzeki@users.noreply.github.com> Co-authored-by: Jesvin Jose <aitchnyu@users.noreply.github.com> Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
122 lines
3.6 KiB
Vue
122 lines
3.6 KiB
Vue
<template>
|
|
<div>
|
|
<div class="flex justify-between flex-1 border-b border-dividerLight">
|
|
<ButtonSecondary
|
|
:icon="IconPlus"
|
|
:label="`${t('action.new')}`"
|
|
class="!rounded-none"
|
|
@click="displayModalAdd(true)"
|
|
/>
|
|
<div class="flex">
|
|
<ButtonSecondary
|
|
v-tippy="{ theme: 'tooltip' }"
|
|
to="https://docs.hoppscotch.io/features/environments"
|
|
blank
|
|
:title="t('app.wiki')"
|
|
:icon="IconHelpCircle"
|
|
/>
|
|
<ButtonSecondary
|
|
v-tippy="{ theme: 'tooltip' }"
|
|
:icon="IconArchive"
|
|
:title="t('modal.import_export')"
|
|
@click="displayModalImportExport(true)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<EnvironmentsMyEnvironment
|
|
environment-index="Global"
|
|
:environment="globalEnvironment"
|
|
class="border-b border-dashed border-dividerLight"
|
|
@edit-environment="editEnvironment('Global')"
|
|
/>
|
|
<EnvironmentsMyEnvironment
|
|
v-for="(environment, index) in environments"
|
|
:key="`environment-${index}`"
|
|
:environment-index="index"
|
|
:environment="environment"
|
|
@edit-environment="editEnvironment(index)"
|
|
/>
|
|
|
|
<div
|
|
v-if="environments.length === 0"
|
|
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
|
|
>
|
|
<img
|
|
:src="`/images/states/${colorMode.value}/blockchain.svg`"
|
|
loading="lazy"
|
|
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
|
|
:alt="`${t('empty.environments')}`"
|
|
/>
|
|
<span class="pb-4 text-center">
|
|
{{ t("empty.environments") }}
|
|
</span>
|
|
<ButtonSecondary
|
|
:label="`${t('add.new')}`"
|
|
filled
|
|
class="mb-4"
|
|
@click="displayModalAdd(true)"
|
|
/>
|
|
</div>
|
|
<EnvironmentsMyDetails
|
|
:show="showModalDetails"
|
|
:action="action"
|
|
:editing-environment-index="editingEnvironmentIndex"
|
|
@hide-modal="displayModalEdit(false)"
|
|
/>
|
|
<EnvironmentsImportExport
|
|
:show="showModalImportExport"
|
|
@hide-modal="displayModalImportExport(false)"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref } from "vue"
|
|
import { environments$, globalEnv$ } from "~/newstore/environments"
|
|
import { useColorMode } from "~/composables/theming"
|
|
import { useReadonlyStream } from "@composables/stream"
|
|
import { useI18n } from "~/composables/i18n"
|
|
import IconArchive from "~icons/lucide/archive"
|
|
import IconPlus from "~icons/lucide/plus"
|
|
import IconHelpCircle from "~icons/lucide/help-circle"
|
|
|
|
const t = useI18n()
|
|
const colorMode = useColorMode()
|
|
|
|
const globalEnv = useReadonlyStream(globalEnv$, [])
|
|
|
|
const globalEnvironment = computed(() => ({
|
|
name: "Global",
|
|
variables: globalEnv.value,
|
|
}))
|
|
|
|
const environments = useReadonlyStream(environments$, [])
|
|
|
|
const showModalImportExport = ref(false)
|
|
const showModalDetails = ref(false)
|
|
const action = ref<"new" | "edit">("edit")
|
|
const editingEnvironmentIndex = ref<number | "Global" | null>(null)
|
|
|
|
const displayModalAdd = (shouldDisplay: boolean) => {
|
|
action.value = "new"
|
|
showModalDetails.value = shouldDisplay
|
|
}
|
|
const displayModalEdit = (shouldDisplay: boolean) => {
|
|
action.value = "edit"
|
|
showModalDetails.value = shouldDisplay
|
|
|
|
if (!shouldDisplay) resetSelectedData()
|
|
}
|
|
const displayModalImportExport = (shouldDisplay: boolean) => {
|
|
showModalImportExport.value = shouldDisplay
|
|
}
|
|
const editEnvironment = (environmentIndex: number | "Global") => {
|
|
editingEnvironmentIndex.value = environmentIndex
|
|
action.value = "edit"
|
|
displayModalEdit(true)
|
|
}
|
|
const resetSelectedData = () => {
|
|
editingEnvironmentIndex.value = null
|
|
}
|
|
</script>
|