Merge pull request 'feature/#31-backup-&-import' (#56) from feature/#31-backup-&-import into develop

Reviewed-on: #56

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

@@ -157,7 +157,7 @@ export default defineComponent({
       let formData = e.target.elements;
       let updateMember: UpdateMemberViewModel = {
         id: this.member.id,
-        salutationId: formData.salutation.value,
+        salutationId: formData["salutation[id]"].value,
         firstname: formData.firstname.value,
         lastname: formData.lastname.value,
         nameaffix: formData.nameaffix.value,

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/club/newsletter/NewsletterRecipients.vue

@@ -154,7 +154,7 @@ export default defineComponent({
     ...mapActions(useNewsletterRecipientsStore, ["fetchNewsletterRecipients"]),
     ...mapActions(useQueryStoreStore, ["fetchQueries"]),
     ...mapActions(useQueryBuilderStore, ["sendQuery"]),
-    removeSelected(id: number) {
+    removeSelected(id: string) {
       let index = this.recipients.findIndex((s) => s == id);
       if (index != -1) {
         this.recipients.splice(index, 1);

src/views/admin/club/protocol/ProtocolPresence.vue

@@ -10,7 +10,7 @@
       :model-value="presence.map((p) => p.memberId)"
       :disabled="!can('create', 'club', 'protocol')"
       @add:difference="
-        (id: number) =>
+        (id: string) =>
           presence.push({ memberId: id, absent: false, excused: true, protocolId: parseInt(protocolId ?? '') })
       "
       @add:member="(s) => members.push(s)"
@@ -78,7 +78,7 @@ export default defineComponent({
     ...mapWritableState(useProtocolPresenceStore, ["presence", "loading"]),
     ...mapState(useAbilityStore, ["can"]),
     getMember() {
-      return (memberId: number) => {
+      return (memberId: string) => {
         return this.members.find((m) => memberId == m.id);
       };
     },
@@ -86,7 +86,7 @@ export default defineComponent({
   mounted() {},
   methods: {
     ...mapActions(useProtocolPresenceStore, ["fetchProtocolPresence"]),
-    removeSelected(id: number) {
+    removeSelected(id: string) {
       let index = this.presence.findIndex((s) => s.memberId == id);
       if (index != -1) {
         this.presence.splice(index, 1);

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

@@ -0,0 +1,78 @@
+<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-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>
+  </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({
+  data() {
+    return {
+      tabs: [
+        { route: "admin-user-backup-generated", title: "Erstellt" },
+        { route: "admin-user-backup-uploaded", title: "Uploads" },
+      ],
+    };
+  },
+  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/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>

src/views/admin/user/user/UserEdit.vue

@@ -95,7 +95,7 @@ export default defineComponent({
       this.user = cloneDeep(this.origin);
     },
     fetchItem() {
-      this.fetchUserById(parseInt(this.id ?? ""))
+      this.fetchUserById(this.id ?? "")
         .then((result) => {
           this.user = result.data;
           this.origin = cloneDeep(result.data);

src/views/admin/user/user/UserEditPermission.vue

@@ -57,7 +57,7 @@ export default defineComponent({
   methods: {
     ...mapActions(useUserStore, ["fetchUserById", "updateActiveUserPermissions"]),
     fetchItem() {
-      this.fetchUserById(parseInt(this.id ?? ""))
+      this.fetchUserById(this.id ?? "")
         .then((result) => {
           this.user = result.data;
           this.loading = "fetched";

src/views/admin/user/user/UserEditRoles.vue

@@ -111,7 +111,7 @@ export default defineComponent({
       this.assigned = this.origin?.roles.map((r) => r.id) ?? [];
     },
     fetchItem() {
-      this.fetchUserById(parseInt(this.id ?? ""))
+      this.fetchUserById(this.id ?? "")
         .then((result) => {
           this.origin = cloneDeep(result.data);
           this.assigned = this.origin?.roles.map((r) => r.id) ?? [];

src/views/docs/DocPage.vue

@@ -11,53 +11,53 @@
           <component v-if="markdownComponent" :is="markdownComponent" />
           <p v-else>Diese Seite existiert nicht.</p>
         </div>
-      </div>      
+      </div>
     </template>
   </MainTemplate>
 </template>
 
 <script setup lang="ts">
-import { defineAsyncComponent, defineComponent, markRaw} from "vue";
+import { defineAsyncComponent, defineComponent, markRaw } from "vue";
 import MainTemplate from "@/templates/Main.vue";
-import 'highlight.js/styles/atom-one-dark.css';
+import "highlight.js/styles/atom-one-dark.css";
 </script>
 
 <script lang="ts">
 export default defineComponent({
   props: {
-    page: String
+    page: String,
   },
-  watch:{
+  watch: {
     page() {
-      this.loadPage()
-    }
+      this.loadPage();
+    },
   },
   data() {
     return {
-      markdownComponent: null,
+      markdownComponent: null as any,
     };
   },
   async mounted() {
-    this.loadPage()
+    this.loadPage();
   },
-  methods:{
-    loadPage(){
-      this.markdownComponent = null
+  methods: {
+    loadPage() {
+      this.markdownComponent = null;
       this.markdownComponent = markRaw(defineAsyncComponent(() => import(`$/${this.page?.toLowerCase()}.md`)));
-    }
-  }
+    },
+  },
 });
 </script>
 
 <style>
 .markdown-container {
-  font-family: 'Open Sans', sans-serif;
+  font-family: "Open Sans", sans-serif;
   color: #555;
   background-color: #f8f8f8;
   border: 2px solid gray;
   padding: 20px;
   border-radius: 5px;
-  height: 100%
+  height: 100%;
 }
 
 .markdown-container h1 {
@@ -84,4 +84,4 @@ export default defineComponent({
   list-style-type: disc;
   margin-left: 20px;
 }
-</style>
+</style>