ff-admin/src/views/admin/management/backup/GeneratedBackup.vue

<template>
  <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', 'management', 'backup')" primary class="w-fit!" @click="openCreateModal">
        Backup erstellen
      </button>
    </div>
  </div>
</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/management/backup";
import BackupListItem from "@/components/admin/management/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/management/backup/CreateBackupModal.vue")))
      );
    },
    openUploadModal() {
      this.openModal(
        markRaw(defineAsyncComponent(() => import("@/components/admin/management/backup/UploadBackupModal.vue")))
      );
    },
  },
});
</script>