Ajout d'un navbar pour chaque rôle

5 years ago · f7ab45774b
parent ccb676071f
commit f7ab45774b
18 changed files with 142 additions and 16 deletions
--- a/src/app/angular-material/angular-material.module.ts
+++ b/src/app/angular-material/angular-material.module.ts
@ -3,9 +3,15 @@ import { CommonModule } from "@angular/common";

 /*import {
 } from "@angular/material";//*/
-
+import {MatCardModule} from '@angular/material/card';
+import { MatButtonModule } from '@angular/material/button';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatIconModule} from '@angular/material/icon';

@NgModule({
-  imports : []
+  exports : [MatCardModule,
+    MatButtonModule, MatMenuModule,
+    MatIconModule
+  ]
 })
 export class MaterialModule {}
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@ -1,6 +1,4 @@
-<body>
-  <!--<app-nav-menu></app-nav-menu>-->
-  <div class="container">
-    <router-outlet></router-outlet>
-  </div>
-</body>
+<!--<app-nav-menu></app-nav-menu>-->
+<div class="container">
+  <router-outlet></router-outlet>
+</div>
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@ -10,6 +10,9 @@ import { MaterialModule } from "./angular-material/angular-material.module";
 import { HomeComponent, HomeAssistanteComponent, HomeCollaborateurComponent,
   HomeCommercialComponent, HomeRHComponent } from './home';

+import { NavMenuComponent, NavMenuAssistanteComponent,
+   NavMenuCollaborateurComponent, NavMenuCommercialComponent, NavMenuRHComponent } from "./nav-menu";
+
 import { environment } from '../environments/environment';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@ -18,13 +21,15 @@ let keycloakService: KeycloakService = new KeycloakService();
@NgModule({
  declarations: [
    AppComponent, HomeComponent, HomeAssistanteComponent
-    , HomeCollaborateurComponent, HomeCommercialComponent, HomeRHComponent
+    , HomeCollaborateurComponent, HomeCommercialComponent, HomeRHComponent, NavMenuComponent,
+    NavMenuAssistanteComponent, NavMenuCollaborateurComponent, NavMenuCommercialComponent, NavMenuRHComponent
  ],
  imports: [
    BrowserModule,
    KeycloakAngularModule,
    AppRoutingModule,
-    BrowserAnimationsModule
+    BrowserAnimationsModule,
+    MaterialModule
  ],
  providers: [
    {
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@ -1,5 +1,5 @@
-<button on-click="logout()"> logout </button>
-<h1> Bonjour {{ keycloakService.getKeycloakInstance().profile.firstName }} {{ keycloakService.getKeycloakInstance().profile.lastName }}</h1>
+<app-nav-menu></app-nav-menu>
+<h1> Bonjour</h1>
 <home-assistante *ngIf="this.keycloakService.isUserInRole(role.assistante)"></home-assistante>
 <home-collaborateur *ngIf="this.keycloakService.isUserInRole(role.collaborateur)"></home-collaborateur>
 <home-commercial *ngIf="this.keycloakService.isUserInRole(role.commercial)"></home-commercial>
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@ -2,10 +2,12 @@ import { Component, OnInit } from '@angular/core';

 import { KeycloakService } from 'keycloak-angular';

+/*
 import { HomeAssistanteComponent } from './home-assistante/home-assistante.component';
 import { HomeCollaborateurComponent } from './home-collaborateur/home-collaborateur.component';
 import { HomeCommercialComponent } from './home-commercial/home-commercial.component';
 import { HomeRHComponent } from './home-rh/home-rh.component';
+//*/

 import { Role } from '../utils/roles';

@ -22,9 +24,6 @@ export class HomeComponent implements OnInit {
  ngOnInit() {
  }

-  async logout() {
-    console.log("Disconnected button clicked");
-    await this.keycloakService.logout();
-  }
+  

 }
--- a/src/app/nav-menu/index.ts
+++ b/src/app/nav-menu/index.ts
@ -0,0 +1,5 @@
+export * from "./nav-menu.component";
+export * from "./nav-menu-assistante/nav-menu-assistante.component";
+export * from "./nav-menu-collaborateur/nav-menu-collaborateur.component";
+export * from "./nav-menu-commercial/nav-menu-commercial.component";
+export * from "./nav-menu-rh/nav-menu-rh.component";
--- a/src/app/nav-menu/nav-menu-assistante/nav-menu-assistante.component.html
+++ b/src/app/nav-menu/nav-menu-assistante/nav-menu-assistante.component.html
@ -0,0 +1,9 @@
+<button mat-button [matMenuTriggerFor]="menuCollaborateurs">
+  <span>Collaborateurs</span>
+  <mat-icon>more_vert</mat-icon>
+</button>
+<mat-menu #menuCollaborateurs="matMenu">
+  <button mat-menu-item>Liste des collaborateurs</button>
+  <button mat-menu-item>Liste des EPs collaborateurs non signés</button>
+</mat-menu>
+<button mat-button>Liste des référents</button>
--- a/src/app/nav-menu/nav-menu-assistante/nav-menu-assistante.component.ts
+++ b/src/app/nav-menu/nav-menu-assistante/nav-menu-assistante.component.ts
@ -0,0 +1,8 @@
+import { Component } from "@angular/core";
+
+
+@Component({
+  selector : "app-nav-menu-assistante",
+  templateUrl : "./nav-menu-assistante.component.html"
+})
+export class NavMenuAssistanteComponent {}
--- a/src/app/nav-menu/nav-menu-collaborateur/nav-menu-collaborateur.component.html
+++ b/src/app/nav-menu/nav-menu-collaborateur/nav-menu-collaborateur.component.html
@ -0,0 +1,2 @@
+<button mat-button>Liste des EP</button>
+<button mat-button>Liste des Formations</button>
--- a/src/app/nav-menu/nav-menu-collaborateur/nav-menu-collaborateur.component.ts
+++ b/src/app/nav-menu/nav-menu-collaborateur/nav-menu-collaborateur.component.ts
@ -0,0 +1,8 @@
+import { Component } from "@angular/core";
+
+
+@Component({
+  selector : "app-nav-menu-collaborateur",
+  templateUrl : "./nav-menu-collaborateur.component.html"
+})
+export class NavMenuCollaborateurComponent {}
--- a/src/app/nav-menu/nav-menu-commercial/nav-menu-commercial.component.html
+++ b/src/app/nav-menu/nav-menu-commercial/nav-menu-commercial.component.html
@ -0,0 +1,10 @@
+<button mat-button  [matMenuTriggerFor]="menuCollaborateurs">
+  <span>Collaborateurs</span>
+  <mat-icon>more_vert</mat-icon>
+</button>
+<mat-menu #menuCollaborateurs="matMenu">
+  <button mat-menu-item>Liste de tous les  collaborateurs</button>
+  <button mat-menu-item>Liste des collaborateurs suivis</button>
+</mat-menu>
+<button mat-button>Liste des formations</button>
+<button mat-button>EP effectués</button>
--- a/src/app/nav-menu/nav-menu-commercial/nav-menu-commercial.component.ts
+++ b/src/app/nav-menu/nav-menu-commercial/nav-menu-commercial.component.ts
@ -0,0 +1,8 @@
+import { Component } from "@angular/core";
+
+
+@Component({
+  selector : "app-nav-menu-commercial",
+  templateUrl : "./nav-menu-commercial.component.html"
+})
+export class NavMenuCommercialComponent {}
--- a/src/app/nav-menu/nav-menu-rh/nav-menu-rh.component.html
+++ b/src/app/nav-menu/nav-menu-rh/nav-menu-rh.component.html
@ -0,0 +1,16 @@
+<button mat-button [matMenuTriggerFor]="menuFormation">
+  <span>Formation</span>
+  <mat-icon>more_vert</mat-icon>
+</button>
+<mat-menu #menuFormation="matMenu">
+  <button mat-menu-item>Ajouter une nouvelle formation</button>
+  <button mat-menu-item>Liste des formations</button>
+</mat-menu>
+<button mat-button [matMenuTriggerFor]="menuDemande">
+  <span>Demande de formations</span>
+  <mat-icon>more_vert</mat-icon>
+</button>
+<mat-menu #menuDemande="matMenu">
+  <button mat-menu-item>Créer une nouvelle demande de formation</button>
+  <button mat-menu-item>Liste des demandes</button>
+</mat-menu>
--- a/src/app/nav-menu/nav-menu-rh/nav-menu-rh.component.ts
+++ b/src/app/nav-menu/nav-menu-rh/nav-menu-rh.component.ts
@ -0,0 +1,8 @@
+import { Component } from "@angular/core";
+
+
+@Component({
+  selector : "app-nav-menu-rh",
+  templateUrl : "./nav-menu-rh.component.html"
+})
+export class NavMenuRHComponent {}
--- a/src/app/nav-menu/nav-menu.component.html
+++ b/src/app/nav-menu/nav-menu.component.html
@ -0,0 +1,23 @@
+<header>
+  <mat-card>
+    <!--Mettre l'icon APSIDE-->
+    <img src="../../assets/img/logo.png">
+    <!--LIEN VERS HOME-->
+    <button mat-button>Accueil</button>
+    <!--RESTE MENU EN FONCTION DES ROLES-->
+    <app-nav-menu-assistante *ngIf="this.keycloakService.isUserInRole(role.assistante)"></app-nav-menu-assistante>
+    <app-nav-menu-collaborateur *ngIf="this.keycloakService.isUserInRole(role.collaborateur)"></app-nav-menu-collaborateur>
+    <app-nav-menu-commercial *ngIf="this.keycloakService.isUserInRole(role.commercial)"></app-nav-menu-commercial>
+    <app-nav-menu-rh *ngIf="this.keycloakService.isUserInRole(role.rh)"></app-nav-menu-rh>
+    <!--METTRE QUELQUE CHOSE DE SIMILAIRE A SYGES-->
+    <!--<button mat-button on-click="logout()"> logout </button>-->
+    <button mat-button [matMenuTriggerFor]="menuMore">
+      <span>{{ keycloakService.getKeycloakInstance().profile.firstName }} {{ keycloakService.getKeycloakInstance().profile.lastName }}</span>
+      <mat-icon>more_vert</mat-icon>
+    </button>
+    <mat-menu #menuMore="matMenu">
+      <button mat-menu-item on-click="logout()">Déconnexion</button>
+    </mat-menu>
+  </mat-card>
+
+</header>
--- a/src/app/nav-menu/nav-menu.component.ts
+++ b/src/app/nav-menu/nav-menu.component.ts
@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { KeycloakService } from 'keycloak-angular';
+
+import { Role } from '../utils/roles';
+
+@Component({
+  selector: 'app-nav-menu',
+  templateUrl: './nav-menu.component.html',
+})
+export class NavMenuComponent {
+
+  role = Role;
+  constructor(public keycloakService : KeycloakService){}
+
+  isExpanded = false;
+
+  async logout() {
+    await this.keycloakService.logout();
+  }
+
+}
--- a/src/assets/img/logo.png
+++ b/src/assets/img/logo.png
--- a/src/favicon.ico
+++ b/src/favicon.ico