split uploaded and generated backups

src/views/admin/club/members/MemberOverview.vue

@@ -34,7 +34,7 @@
           >
             <p>
               {{ stat.status }} für gesamt {{ stat.durationInDays }} Tage
-              <span class="whitespace-nowrap"> ~> {{ stat.durationInYears.replace("_", "") }} Jahre</span>
+              <span class="whitespace-nowrap"> ~> {{ stat.exactDuration }}</span>
             </p>
           </div>
         </div>

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

@@ -6,17 +6,27 @@
       </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 class="flex flex-col gap-2 grow px-7 overflow-hidden">
+        <div class="flex flex-col grow gap-2 overflow-hidden">
+          <div class="w-full flex flex-row max-lg:flex-wrap justify-center">
+            <RouterLink
+              v-for="tab in tabs"
+              :key="tab.route"
+              v-slot="{ isActive }"
+              :to="{ name: tab.route }"
+              class="w-1/2 p-0.5 first:pl-0 last:pr-0"
+            >
+              <p
+                :class="[
+                  'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-none',
+                  isActive ? 'bg-red-200 shadow border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
+                ]"
+              >
+                {{ tab.title }}
+              </p>
+            </RouterLink>
+          </div>
+          <RouterView />
         </div>
       </div>
     </template>
@@ -35,6 +45,14 @@ import { useAbilityStore } from "@/stores/ability";
 
 <script lang="ts">
 export default defineComponent({
+  data() {
+    return {
+      tabs: [
+        { route: "admin-user-backup-generated", title: "Erstellt" },
+        { route: "admin-user-backup-uploaded", title: "Uploads" },
+      ],
+    };
+  },
   computed: {
     ...mapState(useBackupStore, ["backups"]),
     ...mapState(useAbilityStore, ["can"]),

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

@@ -0,0 +1,48 @@
+<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', 'user', '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/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>

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

@@ -0,0 +1,48 @@
+<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', 'user', 'backup')" primary class="!w-fit" @click="openUploadModal">
+        Backup hochladen
+      </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/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>