chore: split app to commons and web (squash commit)

2022-12-02 02:57:46 -05:00
parent fb827e3586
commit 3d004f2322
535 changed files with 1487 additions and 501 deletions
--- a/packages/hoppscotch-common/src/components/environments/my/index.vue
+++ b/packages/hoppscotch-common/src/components/environments/my/index.vue
@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <div
+      class="sticky z-10 flex justify-between flex-1 flex-shrink-0 overflow-x-auto border-b top-upperPrimaryStickyFold border-dividerLight bg-primary"
+    >
+      <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
+      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
+        outline
+        class="mb-4"
+        @click="displayModalAdd(true)"
+      />
+    </div>
+    <EnvironmentsMyDetails
+      :show="showModalDetails"
+      :action="action"
+      :editing-environment-index="editingEnvironmentIndex"
+      :editing-variable-name="editingVariableName"
+      @hide-modal="displayModalEdit(false)"
+    />
+    <EnvironmentsImportExport
+      :show="showModalImportExport"
+      environment-type="MY_ENV"
+      @hide-modal="displayModalImportExport(false)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import { environments$ } 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"
+import { Environment } from "@hoppscotch/data"
+import { defineActionHandler } from "~/helpers/actions"
+
+const t = useI18n()
+const colorMode = useColorMode()
+
+const environments = useReadonlyStream(environments$, [])
+
+const showModalImportExport = ref(false)
+const showModalDetails = ref(false)
+const action = ref<"new" | "edit">("edit")
+const editingEnvironmentIndex = ref<number | null>(null)
+const editingVariableName = ref("")
+
+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) => {
+  editingEnvironmentIndex.value = environmentIndex
+  action.value = "edit"
+  displayModalEdit(true)
+}
+const resetSelectedData = () => {
+  editingEnvironmentIndex.value = null
+}
+
+defineActionHandler(
+  "modals.my.environment.edit",
+  ({ envName, variableName }) => {
+    editingVariableName.value = variableName
+    const envIndex: number = environments.value.findIndex(
+      (environment: Environment) => {
+        return environment.name === envName
+      }
+    )
+    if (envName !== "Global") editEnvironment(envIndex)
+  }
+)
+</script>