hoppscotch/packages/hoppscotch-app/components/environments/index.vue

<template>
  <div>
    <div class="sticky top-0 z-10 flex flex-col rounded-t bg-primary">
      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
        <template #trigger>
          <span
            v-tippy="{ theme: 'tooltip' }"
            :title="`${t('environment.select')}`"
            class="flex-1 bg-transparent border-b border-dividerLight select-wrapper"
          >
            <ButtonSecondary
              v-if="selectedEnvironmentIndex !== -1"
              :label="environments[selectedEnvironmentIndex].name"
              class="flex-1 !justify-start pr-8 rounded-none"
            />
            <ButtonSecondary
              v-else
              :label="`${t('environment.select')}`"
              class="flex-1 !justify-start pr-8 rounded-none"
            />
          </span>
        </template>
        <div class="flex flex-col" role="menu">
          <SmartItem
            :label="`${t('environment.no_environment')}`"
            :info-icon="selectedEnvironmentIndex === -1 ? 'done' : ''"
            :active-info-icon="selectedEnvironmentIndex === -1"
            @click.native="
              () => {
                selectedEnvironmentIndex = -1
                options.tippy().hide()
              }
            "
          />
          <hr v-if="environments.length > 0" />
          <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
                options.tippy().hide()
              }
            "
          />
        </div>
      </tippy>
      <div class="flex justify-between flex-1 border-b border-dividerLight">
        <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>
    <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 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.native="displayModalAdd(true)"
      />
    </div>
    <EnvironmentsDetails
      :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 "@nuxtjs/composition-api"
import {
  useReadonlyStream,
  useStream,
  useI18n,
} from "~/helpers/utils/composables"
import {
  environments$,
  setCurrentEnvironment,
  selectedEnvIndex$,
  globalEnv$,
} from "~/newstore/environments"

const t = useI18n()

const options = ref<any | null>(null)

const globalEnv = useReadonlyStream(globalEnv$, [])

const globalEnvironment = computed(() => ({
  name: "Global",
  variables: globalEnv.value,
}))

const environments = useReadonlyStream(environments$, [])

const selectedEnvironmentIndex = useStream(
  selectedEnvIndex$,
  -1,
  setCurrentEnvironment
)

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>