add the menuBuilder.addChildItemIfAllowed

add the menuBuilder.addChildItemIfAllowed and make it mandatory for internal links

composables/layout/useMenu.ts

@@ -23,6 +23,7 @@ export const useMenu = () => {
   const organizationProfile = useOrganizationProfileStore()
   const accessProfile = useAccessProfileStore()
   const layoutState = useLayoutStore()
+  const router = useRouter()
 
   /**
    * Construct all Menus
@@ -36,6 +37,7 @@ export const useMenu = () => {
       ability,
       organizationProfile,
       accessProfile as AccessProfile,
+      router,
       layoutState,
     )
   }

lang/fr.json

@@ -544,7 +544,7 @@
   "my_documents": "Mes documents",
   "my_profile": "Mon profil",
   "adherent_list": "Liste des adhérents avec leurs coordonnées",
-  "my_subscription": "Mon abonnement",
+  "subscription_page": "Mon abonnement",
   "my_bills": "Mes factures",
   "print_my_licence": "Imprimer ma licence CMF",
   "logout": "Se déconnecter",

middleware/routing.global.ts

@@ -2,7 +2,7 @@ import { useAbility } from '@casl/vue'
 
 export default defineNuxtRouteMiddleware((to, _) => {
   const ability = useAbility()
-  console.log(to)
+
   const candidates = to.matched.map((route) => route.name)
 
   const pages = ability.rules

services/layout/menuBuilder/abstractMenuBuilder.ts

@@ -1,5 +1,6 @@
 import type { RuntimeConfig } from '@nuxt/schema'
 import type { AnyAbility } from '@casl/ability'
+import type { Router } from 'vue-router'
 import type {
   IconItem,
   MenuBuilder,
@@ -21,6 +22,7 @@ abstract class AbstractMenuBuilder implements MenuBuilder {
   protected ability: AnyAbility
   protected organizationProfile: organizationState
   protected accessProfile: AccessProfile
+  protected router: Router
 
   /**
    * Nom court désignant le menu que construit ce builder
@@ -32,11 +34,13 @@ abstract class AbstractMenuBuilder implements MenuBuilder {
     ability: AnyAbility,
     organizationProfile: organizationState,
     accessProfile: AccessProfile,
+    router: Router,
   ) {
     this.runtimeConfig = runtimeConfig
     this.ability = ability
     this.organizationProfile = organizationProfile
     this.accessProfile = accessProfile
+    this.router = router
   }
 
   /**
@@ -101,6 +105,12 @@ abstract class AbstractMenuBuilder implements MenuBuilder {
       case MENU_LINK_TYPE.EXTERNAL:
         url = UrlUtils.prependHttps(to)
         break
+      case MENU_LINK_TYPE.INTERNAL:
+        console.warn(
+          "'createItem()' should not be used for internal links, use 'addChildItemIfAllowed()'",
+        )
+        url = to
+        break
       default:
         url = to
     }
@@ -119,5 +129,23 @@ abstract class AbstractMenuBuilder implements MenuBuilder {
     )
     return builder.build()
   }
+
+  protected addChildItemIfAllowed(
+    children: MenuItems,
+    pageName: string,
+    icon?: IconItem,
+  ) {
+    if (this.ability.can('display', pageName)) {
+      const to = this.router.resolve({ name: pageName }).href
+
+      children.push({
+        icon,
+        label: pageName,
+        to,
+        type: MENU_LINK_TYPE.INTERNAL,
+        active: false,
+      })
+    }
+  }
 }
 export default AbstractMenuBuilder

services/layout/menuBuilder/accountMenuBuilder.ts

@@ -136,11 +136,7 @@ export default class AccountMenuBuilder extends AbstractMenuBuilder {
       )
     }
 
-    if (this.ability.can('display', 'subscription_page')) {
-      children.push(
-        this.createItem('my_subscription', undefined, `/subscription`),
-      )
-    }
+    this.addChildItemIfAllowed(children, 'subscription_page')
 
     if (this.ability.can('display', 'my_bills_page')) {
       children.push(

services/layout/menuComposer.ts

@@ -1,5 +1,6 @@
 import type { RuntimeConfig } from '@nuxt/schema'
 import type { AnyAbility } from '@casl/ability'
+import type { Router } from 'vue-router'
 import MainMenuBuilder from '~/services/layout/menuBuilder/mainMenuBuilder'
 import type {
   AccessProfile,
@@ -36,6 +37,7 @@ export default class MenuComposer {
    * @param ability
    * @param organizationProfile
    * @param accessProfile
+   * @param router
    * @param layoutState
    */
   public static build(
@@ -43,6 +45,7 @@ export default class MenuComposer {
     ability: AnyAbility,
     organizationProfile: organizationState,
     accessProfile: AccessProfile,
+    router: Router,
     layoutState: LayoutState,
   ) {
     for (const builderClass of MenuComposer.builders) {
@@ -52,6 +55,7 @@ export default class MenuComposer {
         ability,
         organizationProfile,
         accessProfile,
+        router,
       )
       const menuName = builder.getMenuName()
       const menu = builder.build()