Export/Import database in settings

src/router/index.ts

@@ -286,6 +286,20 @@ const router = createRouter({
                 },
               ],
             },
+            {
+              path: "database",
+              name: "admin-settings-database",
+              component: () => import("@/views/RouterView.vue"),
+              meta: { type: "read", section: "settings", module: "database" },
+              beforeEnter: [abilityAndNavUpdate],
+              children: [
+                {
+                  path: "",
+                  name: "admin-settings-database-status",
+                  component: () => import("@/views/admin/settings/Database.vue"),
+                },
+              ],
+            },
           ],
         },
         {

src/stores/admin/database.ts

@@ -0,0 +1,42 @@
+import { defineStore } from "pinia";
+import { http } from "@/serverCom";
+import type { AxiosResponse } from "axios";
+
+export const useDatabaseStore = defineStore("database", {
+  state: () => {
+    return {
+      data: {} as any,
+      status: "idle" as "idle" | "working" | "success" | "failed",
+      failureReason: '' as string,
+      ex: {} as Error,
+    };
+  },
+  actions: {
+    async import() {
+      this.status = "working";
+      http
+        .post("/admin/database")
+        .then((result) => {
+          this.data = result.data;
+          this.status = "success";
+        })
+        .catch((err) => {
+          this.status = "failed";
+        });
+    },
+    async export(secret: string) {
+      try {
+        this.status = "working";
+        const postData = {secret: secret};
+        const response: AxiosResponse = await http.post("/admin/database", postData);
+        this.data = response.data;
+        this.status = "success";
+      } catch (ex) {
+        this.status = "failed";
+        this.failureReason = (ex as Error).message;
+        this.ex = (ex as Error);
+        throw ex;
+      }
+    },
+  },
+});

src/stores/admin/navigation.ts

@@ -108,6 +108,9 @@ export const useNavigationStore = defineStore("navigation", {
             ...(abilityStore.can("read", "settings", "membership_status")
               ? [{ key: "membership_status", title: "Mitgliedsstatus" }]
               : []),
+            ...(abilityStore.can("read", "settings", "database")
+              ? [{ key: "database", title: "Datenbank" }]
+              : []),
           ],
         },
         user: {

src/types/permissionTypes.ts

@@ -11,7 +11,8 @@ export type PermissionModule =
   | "communication"
   | "membership_status"
   | "user"
-  | "role";
+  | "role"
+  | "database";
 
 export type PermissionType = "read" | "create" | "update" | "delete";
 
@@ -47,10 +48,11 @@ export const permissionModules: Array<PermissionModule> = [
   "membership_status",
   "user",
   "role",
+  "database",
 ];
 export const permissionTypes: Array<PermissionType> = ["read", "create", "update", "delete"];
 export const sectionsAndModules: SectionsAndModulesObject = {
   club: ["member", "calendar", "newsletter", "protocoll"],
-  settings: ["qualification", "award", "executive_position", "communication", "membership_status"],
+  settings: ["qualification", "award", "executive_position", "communication", "membership_status", "database"],
   user: ["user", "role"],
 };

src/views/admin/settings/Database.vue

@@ -0,0 +1,70 @@
+<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">Datenbank</h1>
+      </div>
+    </template>
+    <template #main>
+      <Spinner v-if="status == 'working'" class="mx-auto" />
+      <p v-else-if="status == 'failed'">Fehler</p>
+      <form class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto">
+        <div>
+          <label for="encKey">Encryption Key</label>
+          <input type="password" id="encKey" required v-model="secret" />
+        </div>
+        <div class="flex flex-row justify-end gap-2">
+          <button :disabled="disabled" primary class="!w-fit" @click="exportDatabase">Datenbank exportieren</button>
+<!--          <button :disabled="status == 'working' || encryptionKey == ''" class="!w-fit" @click="importDatabase">Datenbank importieren</button>-->
+          <Spinner v-if="status == 'working'" class="my-auto" />
+          <SuccessCheckmark v-else-if="status == 'success'" />
+          <FailureXMark v-else-if="status == 'failed'" />
+        </div>
+      </form>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import MainTemplate from "@/templates/Main.vue";
+import { defineComponent, defineAsyncComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useDatabaseStore } from "@/stores/admin/database";
+import FailureXMark from "@/components/FailureXMark.vue";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+</script>
+
+<script lang="ts">
+
+export default defineComponent({
+  data() {
+    return {
+      secret: '' as string,
+    };
+  },
+  computed: {
+    ...mapState(useDatabaseStore, ["data", "status", "failureReason"]),
+    disabled() : boolean {
+      return this.status === 'working' || this.secret === '';
+    }
+  },
+  mounted() {
+    this.secret = '' as string;
+  },
+  methods: {
+    ...mapActions(useDatabaseStore, ["export"]),
+    async exportDatabase() {
+      try {
+        const data = await this.export(this.secret);
+      }
+      catch(ex) {
+        console.log(ex);
+      }
+    },
+    importDatabase() {
+
+    }
+  },
+});
+</script>