feat(admin): intégration header

Author: hbalty

packages/portail-admins/src/app/app.component.html

@@ -39,80 +39,16 @@
     </li>
   </ul>
 </nav>
-
-<header id="page-header" role="banner">
-  <nav
-    class="navbar bg-white"
-    role="navigation"
-    aria-label="Navigation principale"
-    style="position: sticky; top: 0; z-index: 1000"
-  >
-    <a class="navbar-brand" routerLink="/">
-      <img
-        src="../assets/images/logo-mini.svg"
-        width="30"
-        height="30"
-        class="d-inline-block align-top"
-        alt=""
-      />
-      <span class="nav-brand">Administration de DomiFa</span>
-    </a>
-    <div>
-      <div
-        *ngIf="adminProfile?.role === 'super-admin-domifa'"
-        ngbDropdown
-        class="d-inline-block me-2"
-      >
-        <button
-          type="button"
-          class="btn btn-outline-primary"
-          id="dropdownBasic1"
-          ngbDropdownToggle
-        >
-          Menu
-        </button>
-        <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
-          <a
-            ngbDropdownItem
-            class="btn btn-outline-primary"
-            routerLink="/stats"
-          >
-            <fa-icon [icon]="faChartBar" aria-hidden="true"></fa-icon>
-            Statistiques de la domiciliation
-          </a>
-          <a
-            ngbDropdownItem
-            class="btn btn-outline-primary"
-            routerLink="/structures"
-          >
-            <fa-icon [icon]="faList" aria-hidden="true"></fa-icon>
-            Liste des structures
-          </a>
-          <a
-            ngbDropdownItem
-            class="btn btn-outline-primary"
-            routerLink="/manage-users"
-          >
-            <fa-icon [icon]="faUsers" aria-hidden="true"></fa-icon>
-
-            Utilisateurs de l'administration
-          </a>
-        </div>
-      </div>
-
-      <button
-        type="button"
-        class="btn btn-outline-primary"
-        *ngIf="adminProfile"
-        (click)="logout()"
-      >
-        <fa-icon aria-hidden="true" [icon]="['fas', 'sign-out-alt']"> </fa-icon>
-        Déconnexion
-      </button>
-    </div>
-  </nav>
-</header>
-
+<dsfr-header
+  [logoLabel]="'République<br/>Française'"
+  [operatorImageAlt]="'Espace d\'administration de DomiFa'"
+  [operatorImagePath]="'../assets/images/logo-dsfr.svg'"
+  [ariaLabel]="'Menu principal'"
+  [logoLink]="{ routerLink: '/' }"
+  [headerToolsLinks]="headerToolsLinks"
+  (linkSelect)="logout($event)"
+  [menu]="menuHeaderItems"
+></dsfr-header>
 <main role="main" id="page">
   <router-outlet></router-outlet>
 </main>

packages/portail-admins/src/app/app.component.ts

@@ -8,6 +8,7 @@ import { LIENS_PARTENAIRES } from "./modules/general/components/static-pages/pla
 import { PortailAdminUser } from "@domifa/common";
 import { faChartBar } from "@fortawesome/free-regular-svg-icons";
 import { faList, faUsers } from "@fortawesome/free-solid-svg-icons";
+import { DsfrHeaderMenuItem, DsfrLink } from "@edugouvfr/ngx-dsfr";
 
 @Component({
   selector: "app-root",
@@ -21,7 +22,8 @@ export class AppComponent implements OnInit {
   public faUsers = faUsers;
   public faList = faList;
   public currentUrl = "";
-
+  public headerToolsLinks: DsfrLink[] = [];
+  public menuHeaderItems: DsfrHeaderMenuItem[] = [];
   constructor(
     private readonly router: Router,
     private readonly titleService: Title,
@@ -38,6 +40,36 @@ export class AppComponent implements OnInit {
     this.adminAuthService.currentAdminSubject.subscribe(
       (admin: PortailAdminUser | null) => {
         this.adminProfile = admin;
+        if (admin && admin.role === "super-admin-domifa") {
+          // left logout button
+          this.headerToolsLinks = [
+            {
+              ariaControls: "logoutModal",
+              linkId: "logout",
+              mode: "button",
+              label: "Se déconnecter",
+              icon: "fr-icon-logout-box-r-line",
+            },
+          ];
+          // subheader menun
+          this.menuHeaderItems = [
+            {
+              linkId: "stats",
+              label: "Statistiques de la domiciliation",
+              routerLink: "/stats",
+            },
+            {
+              linkId: "structures",
+              label: "Liste des structures",
+              routerLink: "/structures",
+            },
+            {
+              linkId: "manage-users",
+              label: "Utilisateurs de l'administration",
+              routerLink: "/manage-users",
+            },
+          ];
+        }
       }
     );
 
@@ -72,7 +104,11 @@ export class AppComponent implements OnInit {
       });
   }
 
-  public logout(): void {
-    this.adminAuthService.logoutAndRedirect();
+  public logout(event: DsfrLink): void {
+    if (event.linkId === "logout") {
+      this.headerToolsLinks = [];
+      this.menuHeaderItems = [];
+      this.adminAuthService.logoutAndRedirect();
+    }
   }
 }

packages/portail-admins/src/app/modules/shared/shared.module.ts

@@ -17,7 +17,7 @@ import {
 import { FonctionSelectionComponent } from "./components/fonction-selection/fonction-selection.component";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { FonctionFormatPipe } from "./pipes/fonction-format.pipe";
-import { DsfrAlertModule } from "@edugouvfr/ngx-dsfr";
+import { DsfrAlertModule, DsfrHeaderModule } from "@edugouvfr/ngx-dsfr";
 
 @NgModule({
   declarations: [
@@ -37,6 +37,7 @@ import { DsfrAlertModule } from "@edugouvfr/ngx-dsfr";
     CustomToastrComponent,
     FonctionSelectionComponent,
     FonctionFormatPipe,
+    DsfrHeaderModule,
   ],
   imports: [
     CommonModule,
@@ -45,6 +46,7 @@ import { DsfrAlertModule } from "@edugouvfr/ngx-dsfr";
     ReactiveFormsModule,
     FonctionFormatPipe,
     DsfrAlertModule,
+    DsfrHeaderModule,
   ],
   providers: [AdminStructuresApiClient],
 })