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>-->
-  <!--<app-nav-menu></app-nav-menu>-->
+<div class="container">
-  <div class="container">
+  <router-outlet></router-outlet>
-    <router-outlet></router-outlet>
+</div>
  </div>
 </body>
--- 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>
+<app-nav-menu></app-nav-menu>
-<h1> Bonjour {{ keycloakService.getKeycloakInstance().profile.firstName }} {{ keycloakService.getKeycloakInstance().profile.lastName }}</h1>
+<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
		`@ -0,0 +1,2 @@`
							`<button mat-button>Liste des EP</button>`
							`<button mat-button>Liste des Formations</button>`