backup read, upload and restore

src/views/admin/user/backup/Backup.vue

@@ -0,0 +1,60 @@
+<template>
+  <MainTemplate>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Backups</h1>
+      </div>
+    </template>
+    <template #diffMain>
+      <div class="flex flex-col gap-4 h-full pl-7">
+        <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">
+          <BackupListItem v-for="backup in backups" :key="backup" :backup="backup" />
+        </div>
+        <div class="flex flex-row gap-4">
+          <button v-if="can('create', 'user', 'backup')" primary class="!w-fit" @click="openCreateModal">
+            Backup erstellen
+          </button>
+          <button v-if="can('create', 'user', 'backup')" primary class="!w-fit" @click="openUploadModal">
+            Backup hochladen
+          </button>
+        </div>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent, defineComponent, markRaw } from "vue";
+import { mapState, mapActions } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { useBackupStore } from "@/stores/admin/user/backup";
+import BackupListItem from "@/components/admin/user/backup/BackupListItem.vue";
+import { useModalStore } from "@/stores/modal";
+import { useAbilityStore } from "@/stores/ability";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  computed: {
+    ...mapState(useBackupStore, ["backups"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchBackups();
+  },
+  methods: {
+    ...mapActions(useBackupStore, ["fetchBackups"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    openCreateModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/user/backup/CreateBackupModal.vue")))
+      );
+    },
+    openUploadModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/user/backup/UploadBackupModal.vue")))
+      );
+    },
+  },
+});
+</script>