display user permissions

src/components/admin/Permission.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="flex flex-col gap-2 max-w-2xl mx-auto w-full select-none">
+  <div
+    class="flex flex-col gap-2 max-w-2xl mx-auto w-full select-none"
+    :class="disableEdit ? ' pointer-events-none opacity-60 bg-gray-100/50' : ''"
+  >
     <div class="flex flex-row gap-2 h-fit w-full border border-gray-300 rounded-md p-2">
       <input type="checkbox" name="admin" id="admin" class="cursor-pointer" :checked="isAdmin" @change="toggleAdmin" />
       <label for="admin" class="cursor-pointer">Administratorrecht</label>
@@ -8,7 +11,7 @@
       v-for="section in sections"
       :key="section"
       class="flex flex-col gap-2 h-fit w-full border border-primary rounded-md"
-      :class="isAdmin ? ' pointer-events-none opacity-60 bg-gray-100' : ''"
+      :class="isAdmin && !disableEdit ? ' pointer-events-none opacity-60 bg-gray-100' : ''"
     >
       <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
         <p>Abschnitt: {{ section }}</p>
@@ -65,7 +68,7 @@
         </div>
       </div>
     </div>
-    <div class="flex flex-row gap-2 self-end pt-4">
+    <div v-if="!disableEdit" class="flex flex-row gap-2 self-end pt-4">
       <button primary-outline class="!w-fit" @click="reset" :disabled="canSaveOrReset">verwerfen</button>
       <button primary class="!w-fit" @click="submit" :disabled="status == 'loading' || canSaveOrReset">
         speichern
@@ -109,6 +112,10 @@ export default defineComponent({
       type: [Object, String, null] as PropType<null | "loading" | { status: "success" | "failed"; message?: string }>,
       default: null,
     },
+    disableEdit: {
+      type: Boolean,
+      default: false,
+    },
   },
   watch: {
     permissions() {

src/router/index.ts

@@ -471,6 +471,11 @@ const router = createRouter({
           name: "account-logindata",
           component: () => import("@/views/account/LoginData.vue"),
         },
+        {
+          path: "permission",
+          name: "account-permission",
+          component: () => import("@/views/account/Permission.vue"),
+        },
         {
           path: ":pathMatch(.*)*",
           name: "account-404",

src/views/account/Permission.vue

@@ -0,0 +1,31 @@
+<template>
+  <MainTemplate :useStagedOverviewLink="false">
+    <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">Meine Berechtigungen</h1>
+      </div>
+    </template>
+    <template #main>
+      <Permission :permissions="permissions" :disableEdit="true" />
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, markRaw, defineAsyncComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import Permission from "@/components/admin/Permission.vue";
+import { useAbilityStore } from "@/stores/ability";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["permissions"]),
+  },
+});
+</script>

src/views/account/View.vue

@@ -1,8 +1,8 @@
 <template>
   <SidebarLayout>
     <template #sidebar>
-      <SidebarTemplate mainTitle="Mein Account" topTitle="Mitgliederverwaltung" :showTopList="true">
+      <SidebarTemplate mainTitle="Mein Account" topTitle="Mitgliederverwaltung" :showTopList="isOwner">
-        <template #topList>
+        <template v-if="isOwner" #topList>
           <RoutingLink title="Administration" :link="{ name: 'account' }" :active="activeRouteName == 'account'" />
         </template>
         <template #list>
@@ -12,6 +12,11 @@
             :link="{ name: 'account-logindata' }"
             :active="activeRouteName == 'account-logindata'"
           />
+          <RoutingLink
+            title="Meine Berechtigungen"
+            :link="{ name: 'account-permission' }"
+            :active="activeRouteName == 'account-permission'"
+          />
         </template>
       </SidebarTemplate>
     </template>
@@ -28,11 +33,13 @@ import SidebarLayout from "@/layouts/Sidebar.vue";
 import SidebarTemplate from "@/templates/Sidebar.vue";
 import RoutingLink from "@/components/admin/RoutingLink.vue";
 import { RouterView } from "vue-router";
+import { useAbilityStore } from "@/stores/ability";
 </script>
 
 <script lang="ts">
 export default defineComponent({
   computed: {
+    ...mapState(useAbilityStore, ["isOwner"]),
     activeRouteName() {
       return this.$route.name;
     },