hoppscotch/packages/hoppscotch-common/src/components/importExport/Base.vue

<template>
  <HoppSmartModal
    dialog
    :title="t(modalTitle)"
    styles="sm:max-w-md"
    @close="hideModal"
  >
    <template #actions>
      <HoppButtonSecondary
        v-if="hasPreviousStep"
        v-tippy="{ theme: 'tooltip' }"
        :title="t('action.go_back')"
        :icon="IconArrowLeft"
        @click="goToPreviousStep"
      />
    </template>
    <template #body>
      <component :is="currentStep.component" v-bind="currentStep.props()" />
    </template>
  </HoppSmartModal>
</template>
<script setup lang="ts">
import IconArrowLeft from "~icons/lucide/arrow-left"

import { useI18n } from "~/composables/i18n"
import { PropType, ref } from "vue"

import { useSteps, defineStep } from "~/composables/step-components"
import ImportExportList from "./ImportExportList.vue"

import ImportExportSourcesList from "./ImportExportSourcesList.vue"
import { ImporterOrExporter } from "~/components/importExport/types"

const t = useI18n()

const props = defineProps({
  importerModules: {
    // type: Array as PropType<ReturnType<typeof defineImporter>[]>,
    type: Array as PropType<ImporterOrExporter[]>,
    default: () => [],
    required: true,
  },
  exporterModules: {
    type: Array as PropType<ImporterOrExporter[]>,
    default: () => [],
    required: true,
  },
  modalTitle: {
    type: String,
    required: true,
  },
})

const {
  addStep,
  currentStep,
  goToStep,
  goToNextStep,
  goToPreviousStep,
  hasPreviousStep,
} = useSteps()

const selectedImporterID = ref<string | null>(null)
const selectedSourceID = ref<string | null>(null)

const chooseImporterOrExporter = defineStep(
  "choose_importer_or_exporter",
  ImportExportList,
  () => ({
    importers: props.importerModules.map((importer) => ({
      id: importer.metadata.id,
      name: importer.metadata.name,
      title: importer.metadata.title,
      icon: importer.metadata.icon,
      disabled: importer.metadata.disabled,
    })),
    exporters: props.exporterModules.map((exporter) => ({
      id: exporter.metadata.id,
      name: exporter.metadata.name,
      title: exporter.metadata.title,
      icon: exporter.metadata.icon,
      disabled: exporter.metadata.disabled,
      loading: exporter.metadata.isLoading?.value ?? false,
    })),
    "onImporter-selected": (id: string) => {
      selectedImporterID.value = id

      const selectedImporter = props.importerModules.find(
        (i) => i.metadata.id === id
      )

      if (selectedImporter?.supported_sources) goToNextStep()
      else if (selectedImporter?.component)
        goToStep(selectedImporter.component.id)
    },
    "onExporter-selected": (id: string) => {
      const selectedExporter = props.exporterModules.find(
        (i) => i.metadata.id === id
      )

      if (selectedExporter && selectedExporter.action) {
        selectedExporter.action()
      }
    },
  })
)

const chooseImportSource = defineStep(
  "choose_import_source",
  ImportExportSourcesList,
  () => {
    const currentImporter = props.importerModules.find(
      (i) => i.metadata.id === selectedImporterID.value
    )

    const sources = currentImporter?.supported_sources

    if (!sources)
      return {
        sources: [],
      }

    sources.forEach((source) => {
      addStep(source.step)
    })

    return {
      sources: sources.map((source) => ({
        id: source.id,
        name: source.name,
        icon: source.icon,
      })),
      "onImport-source-selected": (sourceID) => {
        selectedSourceID.value = sourceID

        const sourceStep = sources.find((s) => s.id === sourceID)?.step

        if (sourceStep) {
          goToStep(sourceStep.id)
        }
      },
    }
  }
)

addStep(chooseImporterOrExporter)
addStep(chooseImportSource)

props.importerModules.forEach((importer) => {
  if (importer.component) {
    addStep(importer.component)
  }
})

const emit = defineEmits<{
  (e: "hide-modal"): void
}>()

const hideModal = () => {
  // resetImport()
  emit("hide-modal")
}
</script>