base structure settings inside Admin UI

src/components/CheckProgressBar.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="w-full flex flex-row items-center">
     <div class="contents" v-for="(i, index) in total" :key="index">
-      <SuccessCheckmark v-if="index <= successfull && index != step" class="h-8!" />
+      <div
+        v-if="index <= successfull && index != step"
+        class="relative flex items-center justify-center h-8 w-8 border-4 border-success rounded-full"
+      >
+        <SuccessCheckmark class="h-8! asolute top-0 m-0!" />
+      </div>
       <div
         v-else-if="index <= step"
         class="flex items-center justify-center h-8 w-8 border-4 border-success rounded-full"

src/router/index.ts

@@ -640,6 +640,13 @@ const router = createRouter({
                 },
               ],
             },
+            {
+              path: "settings",
+              name: "admin-management-setting",
+              component: () => import("@/views/admin/management/setting/Setting.vue"),
+              meta: { type: "read", section: "management", module: "setting" },
+              beforeEnter: [abilityAndNavUpdate],
+            },
             {
               path: "backup",
               name: "admin-management-backup-route",

src/stores/admin/navigation.ts

@@ -137,6 +137,7 @@ export const useNavigationStore = defineStore("navigation", {
             ...(abilityStore.can("read", "management", "user") ? [{ key: "user", title: "Benutzer" }] : []),
             ...(abilityStore.can("read", "management", "role") ? [{ key: "role", title: "Rollen" }] : []),
             ...(abilityStore.can("read", "management", "webapi") ? [{ key: "webapi", title: "Webapi-Token" }] : []),
+            ...(abilityStore.can("read", "management", "setting") ? [{ key: "setting", title: "Einstellungen" }] : []),
             ...(abilityStore.can("read", "management", "backup") ? [{ key: "backup", title: "Backups" }] : []),
             ...(abilityStore.isAdmin() ? [{ key: "version", title: "Version" }] : []),
           ],

src/types/permissionTypes.ts

@@ -21,7 +21,8 @@ export type PermissionModule =
   | "query_store"
   | "template"
   | "template_usage"
-  | "backup";
+  | "backup"
+  | "setting";
 
 export type PermissionType = "read" | "create" | "update" | "delete";
 
@@ -67,6 +68,7 @@ export const permissionModules: Array<PermissionModule> = [
   "template",
   "template_usage",
   "backup",
+  "setting",
 ];
 export const permissionTypes: Array<PermissionType> = ["read", "create", "update", "delete"];
 export const sectionsAndModules: SectionsAndModulesObject = {
@@ -84,5 +86,5 @@ export const sectionsAndModules: SectionsAndModulesObject = {
     "template_usage",
     "newsletter_config",
   ],
-  management: ["user", "role", "webapi", "backup"],
+  management: ["user", "role", "webapi", "backup", "setting"],
 };

src/views/admin/management/setting/Setting.vue

@@ -0,0 +1,31 @@
+<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">Einstellungen</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">Einstellungen</div>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { useAbilityStore } from "@/stores/ability";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {},
+  methods: {},
+});
+</script>