<template> <div class="w-full md:max-w-md"> <div class="flex flex-col items-center"> <p class="text-xl font-medium">Backup {{ data }} laden</p> </div> <br /> <form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreateBackup"> <div class="flex flex-row items-center gap-2"> <input type="checkbox" id="partial" v-model="partial" /> <label for="partial">Backup vollständig laden</label> </div> <div v-if="!partial"> <label for="sections">Module zur Wiederherstellung auswählen:</label> <select id="sections" multiple> <option v-for="section in backupSections" :value="section">{{ section }}</option> </select> </div> <br /> <p class="flex"> <InformationCircleIcon class="min-h-5 h-5 min-w-5 w-5" />Je nach Auswahl, werden die entsprechenden Bestandsdaten ersetzt. Dadurch können Daten, die seit diesem Backup erstellt wurden, verloren gehen. </p> <div class="flex flex-row gap-2"> <button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'"> Backup laden </button> <Spinner v-if="status == 'loading'" class="my-auto" /> <SuccessCheckmark v-else-if="status?.status == 'success'" /> <FailureXMark v-else-if="status?.status == 'failed'" /> </div> </form> <div class="flex flex-row justify-end"> <div class="flex flex-row gap-4 py-2"> <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'"> abbrechen </button> </div> </div> </div> </template> <script setup lang="ts"> import { defineComponent } from "vue"; import { mapState, mapActions } from "pinia"; import { useModalStore } from "@/stores/modal"; import Spinner from "@/components/Spinner.vue"; import SuccessCheckmark from "@/components/SuccessCheckmark.vue"; import FailureXMark from "@/components/FailureXMark.vue"; import { useBackupStore } from "@/stores/admin/user/backup"; import type { BackupRestoreViewModel } from "../../../../viewmodels/admin/user/backup.models"; import { InformationCircleIcon } from "@heroicons/vue/24/outline"; import { backupSections, type BackupSection } from "../../../../types/backupTypes"; </script> <script lang="ts"> export default defineComponent({ props: { data: { type: String, default: "" }, }, data() { return { status: null as null | "loading" | { status: "success" | "failed"; reason?: string }, timeout: undefined as any, partial: true, }; }, beforeUnmount() { try { clearTimeout(this.timeout); } catch (error) {} }, methods: { ...mapActions(useModalStore, ["closeModal"]), ...mapActions(useBackupStore, ["restoreBackup"]), triggerCreateBackup(e: any) { let formData = e.target.elements; let restoreBackup: BackupRestoreViewModel = { filename: this.data, partial: !formData.partial.checked, include: Array.from(formData?.sections?.selectedOptions ?? []).map( (t) => (t as HTMLOptionElement).value ) as Array<BackupSection>, }; this.status = "loading"; this.restoreBackup(restoreBackup) .then(() => { this.status = { status: "success" }; this.timeout = setTimeout(() => { this.closeModal(); }, 1500); }) .catch(() => { this.status = { status: "failed" }; }); }, }, }); </script>