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

#310)
dyno-nuggets · May 8, 2023 · bab5619 · bab5619
1 parent e239b79
commit bab5619
Show file tree

Hide file tree

Showing 6 changed files with 145 additions and 28 deletions.
diff --git a/.run/Angular CLI Server.run.xml b/.run/Angular CLI Server.run.xml
@@ -0,0 +1,12 @@
+<component name="ProjectRunConfigurationManager">
+  <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>
+      <script value="start" />
+    </scripts>
+    <node-interpreter value="project" />
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>
diff --git a/.run/RefonteImplicactionApplication.run.xml b/.run/RefonteImplicactionApplication.run.xml
@@ -0,0 +1,16 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="RefonteImplicactionApplication" type="SpringBootApplicationConfigurationType" factoryName="Spring Boot" nameIsGenerated="true">
+    <option name="ACTIVE_PROFILES" value="local" />
+    <module name="backend-implicaction" />
+    <option name="SPRING_BOOT_MAIN_CLASS" value="com.dynonuggets.refonteimplicaction.RefonteImplicactionApplication" />
+    <extension name="coverage">
+      <pattern>
+        <option name="PATTERN" value="com.dynonuggets.refonteimplicaction.*" />
+        <option name="ENABLED" value="true" />
+      </pattern>
+    </extension>
+    <method v="2">
+      <option name="Make" enabled="true" />
+    </method>
+  </configuration>
+</component>
diff --git a/frontend-implicaction/src/app/admin/pages/admin-page/admin-page.component.ts b/frontend-implicaction/src/app/admin/pages/admin-page/admin-page.component.ts
@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
-import {Univers} from "../../../shared/enums/univers";
-import {MenuItem} from "primeng/api";
+import {Univers} from '../../../shared/enums/univers';
+import {MenuItem} from 'primeng/api';
 
 @Component({
   templateUrl: './admin-page.component.html',
@@ -21,22 +21,34 @@ export class AdminPageComponent {
       routerLinkActiveOptions: {exact: true}
     },
     {
-      label: 'Offres',
-      routerLink: `/${Univers.ADMIN.url}/jobs`,
+      label: 'Emploi',
       icon: 'fas fa-briefcase',
-      routerLinkActiveOptions: {exact: true}
-    },
-    {
-      label: 'Entreprises',
-      routerLink: `/${Univers.ADMIN.url}/companies`,
-      icon: 'fas fa-building',
-      routerLinkActiveOptions: {exact: true}
+      routerLinkActiveOptions: {queryParams: 'subset', exact: false},
+      items: [
+        {
+          label: 'Offres',
+          routerLink: `/${Univers.ADMIN.url}/jobs`,
+          routerLinkActiveOptions: {queryParams: 'subset'}
+        },
+        {
+          label: 'Entreprises',
+          routerLink: `/${Univers.ADMIN.url}/companies`,
+          routerLinkActiveOptions: {exact: true}
+        }
+      ]
     },
     {
       label: 'Forum',
-      routerLink: `/${Univers.ADMIN.url}/forum`,
       icon: 'fas fa-comments',
-      routerLinkActiveOptions: {exact: true}
+      routerLinkActiveOptions: {queryParams: 'subset', exact: false},
+      items: [
+        {
+          label: 'Catégories',
+          routerLink: `/${Univers.ADMIN.url}/forum`,
+          queryParams: {target: 'categories'},
+          routerLinkActiveOptions: {exact: true},
+        }
+      ]
     },
   ];
 }
diff --git a/frontend-implicaction/src/app/shared/components/sidemenu/sidemenu.component.html b/frontend-implicaction/src/app/shared/components/sidemenu/sidemenu.component.html
@@ -1,18 +1,59 @@
 <ul class="list-group list-group-flush py-2">
   <ng-container *ngFor="let menuItem of menuItems">
-    <li class="list-group-item">
-      <a
-        [routerLinkActive]="'active'"
-        [routerLink]="menuItem.routerLink"
-        [queryParams]="menuItem.queryParams"
-        [routerLinkActiveOptions]="menuItem.routerLinkActiveOptions"
-      >
+    <li class="list-group-item nav-item">
+      <ng-container *ngIf="!menuItem.items; else templateCollapsable">
+        <a
+          role="button"
+          class="nav-link"
+          [routerLink]="menuItem.routerLink"
+          [queryParams]="menuItem.queryParams"
+          [routerLinkActive]="'active'"
+          [routerLinkActiveOptions]="menuItem.routerLinkActiveOptions"
+        >
         <span>
           <i *ngIf="menuItem.icon" [class]="menuItem.icon"></i> {{menuItem.label}}
         </span>
 
-        <span *ngIf="menuItem.badge" class="badge bg-primary rounded-pill me-3">{{menuItem.badge}}</span>
-      </a>
+          <span *ngIf="menuItem.badge" class="badge bg-primary rounded-pill me-3">{{menuItem.badge}}</span>
+        </a>
+      </ng-container>
+
+      <ng-template #templateCollapsable>
+        <a
+          role="button"
+          class="nav-link cursor-pointer"
+          (click)="toggleCollapse(menuItem)"
+          [ngClass]="{'collapsed': !menuItem.expanded, 'expanded active': menuItem.expanded}"
+        >
+        <span>
+          <i *ngIf="menuItem.icon" [class]="menuItem.icon"></i> {{menuItem.label}}
+        </span>
+        </a>
+
+        <ul class="ps-5" [ngClass]="{'collapse': !menuItem.expanded}">
+          <ng-container *ngFor="let item of menuItem.items">
+            <li [ngClass]="{'active': child.isActive}">
+              <a
+                #child="routerLinkActive"
+                role="button"
+                class="nav-link"
+                [routerLink]="item.routerLink"
+                [queryParams]="item.queryParams"
+                [routerLinkActive]="'active'"
+                [routerLinkActiveOptions]="menuItem.routerLinkActiveOptions"
+                (isActiveChange)="onChildActiveChange(item, menuItem, $event)"
+              >
+                <span>
+                  <i *ngIf="item.icon" [class]="item.icon"></i> {{item.label}}
+                </span>
+
+                <span *ngIf="item.badge" class="badge bg-primary rounded-pill me-3">{{item.badge}}</span>
+              </a>
+            </li>
+          </ng-container>
+        </ul>
+      </ng-template>
+
     </li>
   </ng-container>
 </ul>
diff --git a/frontend-implicaction/src/app/shared/components/sidemenu/sidemenu.component.scss b/frontend-implicaction/src/app/shared/components/sidemenu/sidemenu.component.scss
@@ -17,15 +17,32 @@
       background-color: $secondary;
     }
 
-    &:after {
-      position: absolute;
-      right: 10px;
-      font-family: FontAwesome;
-      content: "\f054";
+    &.collapsed, &.expanded {
+      &:after {
+        position: absolute;
+        right: 10px;
+        font-family: FontAwesome;
+      }
+    }
+
+    &.collapsed:after {
+      content: '\f107'
+    }
+
+    &.expanded:after {
+      content: '\f106'
     }
 
     .badge {
       font-size: 0.9rem;
     }
   }
+
+  li {
+    &.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
@@ -1,5 +1,5 @@
 import {Component, Input} from '@angular/core';
-import {MenuItem} from "primeng/api";
+import {MenuItem} from 'primeng/api';
 
 @Component({
   selector: 'app-sidemenu',
@@ -10,4 +10,23 @@ export class SidemenuComponent {
 
   @Input() menuItems: MenuItem[];
 
+  /**
+   * 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(item => item !== menuItem && item.expanded)
+      .forEach(item => {
+        item.expanded = false;
+      });
+
+    menuItem.expanded = !menuItem.expanded;
+  }
 }