fix: navigation with restricted permissions

src/components/Footer.vue

@@ -6,7 +6,7 @@
     <div class="w-full flex flex-row gap-2 h-full align-middle">
       <TopLevelLink
         v-if="routeName == 'admin' || routeName.includes('admin-')"
-        v-for="item in topLevel"
+        v-for="item in topLevelObject"
         :key="item.key"
         :link="item"
         :disableSubLink="true"
@@ -34,7 +34,7 @@ import TopLevelLink from "./admin/TopLevelLink.vue";
 export default defineComponent({
   computed: {
     ...mapState(useAuthStore, ["authCheck"]),
-    ...mapState(useNavigationStore, ["topLevel"]),
+    ...mapState(useNavigationStore, ["topLevelObject"]),
     routeName() {
       return typeof this.$route.name == "string" ? this.$route.name : "";
     },

src/components/Header.vue

@@ -10,7 +10,7 @@
       <div v-if="authCheck" class="hidden md:flex flex-row gap-2 h-full align-middle">
         <TopLevelLink
           v-if="routeName == 'admin' || routeName.includes('admin-')"
-          v-for="item in topLevel"
+          v-for="item in topLevelObject"
           :key="item.key"
           :link="item"
         />
@@ -46,7 +46,7 @@ import { useConfigurationStore } from "@/stores/configuration";
 export default defineComponent({
   computed: {
     ...mapState(useAuthStore, ["authCheck"]),
-    ...mapState(useNavigationStore, ["topLevel"]),
+    ...mapState(useNavigationStore, ["topLevelObject"]),
     ...mapState(useConfigurationStore, ["clubName"]),
     routeName() {
       return typeof this.$route.name == "string" ? this.$route.name : "";

src/router/adminGuard.ts

@@ -19,11 +19,16 @@ export async function abilityAndNavUpdate(to: any, from: any, next: any) {
     navigation.updateNavigation();
     NProgress.done();
     next();
-  } else if ((admin && ability.isAdmin()) || ability.can(type, section, module)) {
+  } else if (module && ((admin && ability.isAdmin()) || ability.can(type, section, module))) {
     NProgress.done();
     navigation.activeNavigation = to.name.split("-")[1];
     navigation.activeLink = to.name.split("-")[2];
     next();
+  } else if (!module && ((admin && ability.isAdmin()) || ability.canSection(type, section))) {
+    NProgress.done();
+    navigation.activeNavigation = to.name.split("-")[1];
+    navigation.activeLink = null;
+    next();
   } else {
     NProgress.done();
     next({ name: "admin-default" });

src/stores/ability.ts

@@ -33,7 +33,8 @@ export const useAbilityStore = defineStore("ability", {
         if (type == "admin") return permissions?.admin ?? permissions?.adminByOwner ?? false;
         if (permissions?.admin || permissions?.adminByOwner) return true;
         if (
-          (permissions[section]?.all == "*" || permissions[section]?.all?.includes(type)) &&
+          permissions[section]?.all == "*" ||
+          permissions[section]?.all?.includes(type) ||
           permissions[section] != undefined
         )
           return true;

src/stores/admin/navigation.ts

@@ -37,6 +37,11 @@ export const useNavigationStore = defineStore("navigation", {
     };
   },
   getters: {
+    topLevelObject: (state) =>
+      state.topLevel.map((tl) => ({
+        ...tl,
+        levelDefault: state.navigation[tl.key].main.filter((m) => !m.key.includes("divider"))[0]?.key ?? "",
+      })),
     activeNavigationObject: (state) => (state.navigation[state.activeNavigation] ?? {}) as navigationSplitModel,
     activeTopLevelObject: (state) =>
       (state.topLevel.find((elem) => elem.key == state.activeNavigation) ?? {}) as topLevelNavigationModel,

src/views/NoPermission.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col items-center">
+  <div class="flex flex-col gap-2 items-center">
     <br />
     <h1 class="w-full p-4 text-center font-bold text-3xl">Kein Zugriff</h1>
     <br />