refact: modifie le sidemenu pour qu'il puisse inclure des collapsibles

dyno-nuggets · May 8, 2023 · 1664962 · 1664962
1 parent 09a9016
commit 1664962
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 9 deletions.
diff --git a/.run/Frontend Implicaction.run.xml → .run/Angular CLI Server.run.xml b/.run/Frontend Implicaction.run.xml → .run/Angular CLI Server.run.xml
@@ -1,5 +1,5 @@
 <component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="Frontend Implicaction" type="js.build_tools.npm">
+  <configuration default="false" name="Angular CLI Server" type="js.build_tools.npm">
     <package-json value="$PROJECT_DIR$/frontend-implicaction/package.json" />
     <command value="run" />
     <scripts>

diff --git a/frontend-implicaction/src/app/shared/components/sidemenu/sidemenu.component.html b/frontend-implicaction/src/app/shared/components/sidemenu/sidemenu.component.html
@@ -5,9 +5,9 @@
         <a
           role="button"
           class="nav-link"
-          [routerLinkActive]="'active'"
           [routerLink]="menuItem.routerLink"
           [queryParams]="menuItem.queryParams"
+          [routerLinkActive]="'active'"
           [routerLinkActiveOptions]="menuItem.routerLinkActiveOptions"
         >
         <span>
@@ -20,6 +20,7 @@
 
       <ng-template #templateCollapsable>
         <a
+          role="button"
           class="nav-link cursor-pointer"
           (click)="toggleCollapse(menuItem)"
           [ngClass]="{'collapsed': !menuItem.expanded, 'expanded active': menuItem.expanded}"
@@ -31,15 +32,16 @@
 
         <ul class="ps-5" [ngClass]="{'collapse': !menuItem.expanded}">
           <ng-container *ngFor="let item of menuItem.items">
-            <li [ngClass]="{'active': item.expanded}">
+            <li [ngClass]="{'active': child.isActive}">
               <a
+                #child="routerLinkActive"
                 role="button"
                 class="nav-link"
                 [routerLink]="item.routerLink"
                 [queryParams]="item.queryParams"
-                [routerLinkActive]="''"
+                [routerLinkActive]="'active'"
                 [routerLinkActiveOptions]="menuItem.routerLinkActiveOptions"
-                (isActiveChange)="toggleCollapseParent(item, menuItem, $event)"
+                (isActiveChange)="onChildActiveChange(item, menuItem, $event)"
               >
                 <span>
                   <i *ngIf="item.icon" [class]="item.icon"></i> {{item.label}}

diff --git a/frontend-implicaction/src/app/shared/components/sidemenu/sidemenu.component.scss b/frontend-implicaction/src/app/shared/components/sidemenu/sidemenu.component.scss
@@ -39,7 +39,7 @@
   }
 
   li {
-    &.active, &:hover, a:hover {
+    &.active, &:hover, a:hover, a.active {
       font-weight: 600;
       list-style-type: disc !important;
       background-color: transparent !important;

diff --git a/frontend-implicaction/src/app/shared/components/sidemenu/sidemenu.component.ts b/frontend-implicaction/src/app/shared/components/sidemenu/sidemenu.component.ts
@@ -10,13 +10,23 @@ export class SidemenuComponent {
 
   @Input() menuItems: MenuItem[];
 
-  toggleCollapseParent(child: MenuItem, parent: MenuItem, expanded: boolean) {
-    child.expanded = expanded;
+  /**
+   * Pour développer le parent, on regarde s’il possède au moins un enfant 'active' cad si l’attribut
+   * isActive est vrai.
+   */
+  onChildActiveChange(child: MenuItem, parent: MenuItem, isActive: boolean) {
+    child.expanded = isActive;
     parent.expanded = parent.items.some(item => item.expanded);
   }
 
+
   toggleCollapse(menuItem: MenuItem) {
-    this.menuItems.filter(i => i !== menuItem).forEach(i => i.expanded = false);
+    this.menuItems
+      .filter(item => item !== menuItem && item.expanded)
+      .forEach(item => {
+        item.expanded = false;
+      });
+
     menuItem.expanded = !menuItem.expanded;
   }
 }