System Initiative

<template> <Modal ref="modalRef" title="Export Workspace" size="lg" @closeComplete="closeHandler" > <Stack> <template v-if="moduleStore.exportingWorkspaceOperationRunning"> <p class="flex gap-1 items-center"> <Icon name="loader" /> Exporting Workspace </p> <p> This operation is being executed in the backend <br /> feel free to close this modal </p> <VButton icon="check" @click="close">Close this window</VButton> </template> <template v-else-if="moduleStore.exportingWorkspaceOperationId"> <template v-if="moduleStore.exportingWorkspaceOperationError"> <p class="flex gap-1 items-center"> <Icon name="x" class="text-destructive-500 dark:text-destructive-600" /> Export Failed! </p> <p> {{ moduleStore.exportingWorkspaceOperationError }} </p> </template> <template v-else> <p>Export succeeded!</p> <p> You can now import this workspace by going to <br /> workspace settings (gear in top right) > "Import Workspace" </p> </template> <VButton icon="refresh" @click="moduleStore.resetExportWorkspaceStatus"> Export Again </VButton> </template> <template v-else> <p> You are about to export this workspace to the cloud. You will then be able to import it on this or another running instance of SI. </p> <p>Click the button below to continue:</p> <ErrorMessage :requestStatus="exportReqStatus" /> <VButton icon="cloud-upload" :requestStatus="exportReqStatus" loadingText="Exporting your workspace..." @click="continueHandler" > Export this workspace </VButton> </template> </Stack> </Modal> </template> <script setup lang="ts"> import { ErrorMessage, Icon, Modal, Stack, useModal, VButton, } from "@si/vue-lib/design-system"; import { ref } from "vue"; import { useModuleStore } from "@/store/module.store"; const moduleStore = useModuleStore(); const exportReqStatus = moduleStore.getRequestStatus("EXPORT_WORKSPACE"); const modalRef = ref<InstanceType<typeof Modal>>(); const { open: openModal, close } = useModal(modalRef); function open() { openModal(); } function continueHandler() { moduleStore.EXPORT_WORKSPACE(); } function closeHandler() { moduleStore.clearRequestStatus("EXPORT_WORKSPACE"); } defineExpose({ open, close }); </script>