Implémentation du nav-menu, du home et de l'affichage de la liste des formations côté RH

master
Yanaël GRETTE 4 years ago
parent 3da51faa9d
commit ce3b6d78eb
  1. 2
      src/app/collaborateurs/collaborateurs.component.ts
  2. 4
      src/app/collaborateurs/collaborateurs.routing.module.ts
  3. 2
      src/app/collaborateurs/details-collaborateur/details-collaborateur.component.ts
  4. 5
      src/app/demandes-formation/demandes-formation.routing.module.ts
  5. 30
      src/app/formations/formations.component.html
  6. 96
      src/app/formations/formations.component.ts
  7. 2
      src/app/formations/formations.routing.module.ts
  8. 2
      src/app/home/home-assistante/home-assistante.component.ts
  9. 30
      src/app/home/home-rh/home-rh.component.html
  10. 99
      src/app/home/home-rh/home-rh.component.ts
  11. 2
      src/app/referents/details-referent/details-referent.component.ts
  12. 2
      src/app/referents/referents.component.ts
  13. 8
      src/app/shared/api-swagger/api/formations.service.ts
  14. 13
      src/app/shared/api-swagger/model/formationModel.ts
  15. 13
      src/app/shared/nav-menu/nav-menu-rh/nav-menu-rh.component.html
  16. 2
      src/app/shared/nav-menu/nav-menu.component.html

@ -9,7 +9,7 @@ import {MatSort} from '@angular/material/sort';
import { CollaborateursService } from "@shared/api-swagger/api/api"; import { CollaborateursService } from "@shared/api-swagger/api/api";
import { CollaborateurModel } from "@shared/api-swagger/model/models"; import { CollaborateurModel } from "@shared/api-swagger/model/models";
import { DisplayCollaborateur } from "@shared/displayInfo/displayCollaborateur"; import { DisplayCollaborateur } from "@shared/displayInfo/displays";
/** /**
* Composant qui sert à l'affichage de la liste des collaborateurs en fonction de l'agence de son utilitateur. * Composant qui sert à l'affichage de la liste des collaborateurs en fonction de l'agence de son utilitateur.

@ -15,10 +15,10 @@ import { KeycloakGuard } from '@shared/guards/keycloakguard';
const routes: Routes = [ const routes: Routes = [
{ path:'', component: CollaborateursComponent, pathMatch: 'full', canActivate: [KeycloakGuard] }, { path:'', component: CollaborateursComponent, pathMatch: 'full', canActivate: [KeycloakGuard] },
{ path:paths_collaborateurs.get, component: DetailsCollaborateurComponent, canActivate: [KeycloakGuard] },
{ path:paths_collaborateurs.formations, component: FormationsCollaboateurComponent, canActivate: [KeycloakGuard] }, { path:paths_collaborateurs.formations, component: FormationsCollaboateurComponent, canActivate: [KeycloakGuard] },
{ path:paths_collaborateurs.evaluation, component: EvaluationComponent, canActivate: [KeycloakGuard] }, { path:paths_collaborateurs.evaluation, component: EvaluationComponent, canActivate: [KeycloakGuard] },
{ path:paths_collaborateurs.edit, component: EditEvaluationComponent, canActivate: [KeycloakGuard] } { path:paths_collaborateurs.edit, component: EditEvaluationComponent, canActivate: [KeycloakGuard] },
{ path:paths_collaborateurs.get, component: DetailsCollaborateurComponent, canActivate: [KeycloakGuard] }
]; ];

@ -11,7 +11,7 @@ import { CollaborateursService, EpService } from "@shared/api-swagger/api/api";
import { CollaborateurModel } from "@shared/api-swagger/model/collaborateurModel"; import { CollaborateurModel } from "@shared/api-swagger/model/collaborateurModel";
import { EpModel } from "@shared/api-swagger/model/epModel"; import { EpModel } from "@shared/api-swagger/model/epModel";
import { DisplayEP } from "@shared/displayInfo/displayEP"; import { DisplayEP } from "@shared/displayInfo/displays";
/** /**
*/ */

@ -12,8 +12,9 @@ import { paths_demandes_formation } from "@shared/utils/paths";
const routes: Routes = [ const routes: Routes = [
{ path:'', component: DemandesFormationComponent, pathMatch: 'full', canActivate: [KeycloakGuard] }, { path:'', component: DemandesFormationComponent, pathMatch: 'full', canActivate: [KeycloakGuard] },
{ path:paths_demandes_formation.get, component: DemandeFormationComponent, canActivate: [KeycloakGuard] }, { path:paths_demandes_formation.new, component: NewDemandeFormationComponent, canActivate: [KeycloakGuard] },
{ path:paths_demandes_formation.new, component: NewDemandeFormationComponent, canActivate: [KeycloakGuard] } { path:paths_demandes_formation.get, component: DemandeFormationComponent, canActivate: [KeycloakGuard] }
]; ];
@NgModule({ @NgModule({

@ -1,2 +1,32 @@
<app-nav-menu></app-nav-menu> <app-nav-menu></app-nav-menu>
<h1>Liste des formations </h1> <h1>Liste des formations </h1>
<mat-table [dataSource]="this.dataSource">
<ng-container matColumnDef="intitule">
<mat-header-cell *matHeaderCellDef>Intitulé</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.intitule }}</mat-cell>
</ng-container>
<ng-container matColumnDef=participants>
<mat-header-cell *matHeaderCellDef>Nb participants</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.nbParticipants }}</mat-cell>
</ng-container>
<ng-container matColumnDef="date">
<mat-header-cell *matHeaderCellDef>Date prévisionnelle</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.datePrevu }}</mat-cell>
</ng-container>
<!--<ng-container matColumnDef="origine">
<mat-header-cell></mat-header-cell>
<mat-cell *matCellDef="let row"></mat-cell>
</ng-container>-->
<ng-container matColumnDef="statut">
<mat-header-cell *matHeaderCellDef>Statut</mat-header-cell>
<mat-cell *matCellDef="let row">{{ getStatut(row.statut) }}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/formations',row.id]"></mat-row>
</mat-table>

@ -1,4 +1,14 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit, ViewChild } from '@angular/core';
import { Observable, Subscription } from 'rxjs';
import {MatTableDataSource} from '@angular/material/table';
import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import { FormationModel } from "@shared/api-swagger/model/models";
import { DisplayFormation } from "@shared/displayInfo/displays";
import { FormationsService } from "@shared/api-swagger/api/api";
/** /**
*/ */
@ -7,9 +17,91 @@ import { Component, OnInit } from '@angular/core';
templateUrl: './formations.component.html' templateUrl: './formations.component.html'
}) })
export class FormationsComponent implements OnInit { export class FormationsComponent implements OnInit {
formationsDisponibles : DisplayFormation[];
formationsFiltres : DisplayFormation[];
private formationsDisponiblesSubscription : Subscription;
//displayedColumns: string[] = ["intitule", "participants", "date", "origine", "statut"]
displayedColumns: string[] = ["intitule", "participants", "date", "statut"]
constructor() {} /**
* source pour l'affichage des formations dans le tableau qui est affichée.
*/
dataSource : MatTableDataSource<DisplayFormation>;
/**
* contenu de la recherche.
*/
search = "";
/**
* Pagination du tableau.
*/
@ViewChild(MatPaginator) paginator: MatPaginator;
/**
* Tri par les éléments du tableau selon la colonne choisie.
*/
@ViewChild(MatSort) sort: MatSort;
/**
* Spécifie si la liste des EP est en cours de chargement et d'écriture dans le tableau.
*/
chargement = true;
constructor(private service:FormationsService) {
}
ngOnInit() { ngOnInit() {
this.formationsDisponiblesSubscription = this.service.getFormations(undefined, 1).subscribe(
formations => this.initFormations(formations)
);
}
initFormations(formations:FormationModel[]) {
this.formationsDisponibles = [];
console.log(formations);
let formationDisplay : DisplayFormation;
for(let formation of formations) {
formationDisplay = new DisplayFormation();
formationDisplay.id = formation.id;
formationDisplay.intitule = formation.intitule;
formationDisplay.nbParticipants = formation.participantsFormation.length;
formationDisplay.datePrevu = formation.dateDebut;
formationDisplay.origine = formation.origine;
formationDisplay.statut = formation.statut;
this.formationsDisponibles.push(formationDisplay);
}
this.formationsFiltres = this.formationsDisponibles;
this.dataSource = new MatTableDataSource(this.formationsFiltres);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
getStatut(statut:number) {
let value ="";
switch(statut) {
case 0:
value = "Plannifiée";
break;
case 1:
value = "Replannifiée";
break;
case 2:
value = "Réalisée";
break;
case 3:
value = "Annulée";
break;
}
return value;
}
ngOnDestroy() {
if(this.formationsDisponiblesSubscription != undefined) {
this.formationsDisponiblesSubscription.unsubscribe();
}
} }
} }

@ -13,9 +13,9 @@ import { paths_formation } from "@shared/utils/paths";
const routes: Routes = [ const routes: Routes = [
{ path:'', component: FormationsComponent, pathMatch: 'full', canActivate: [KeycloakGuard] }, { path:'', component: FormationsComponent, pathMatch: 'full', canActivate: [KeycloakGuard] },
{ path:paths_formation.get, component: FormationComponent, canActivate: [KeycloakGuard] },
{ path:paths_formation.edit, component: EditFormationComponent, canActivate: [KeycloakGuard] }, { path:paths_formation.edit, component: EditFormationComponent, canActivate: [KeycloakGuard] },
{ path:paths_formation.new, component: NewFormationComponent, canActivate: [KeycloakGuard] }, { path:paths_formation.new, component: NewFormationComponent, canActivate: [KeycloakGuard] },
{ path:paths_formation.get, component: FormationComponent, canActivate: [KeycloakGuard] }
]; ];

@ -9,7 +9,7 @@ import {MatSort} from '@angular/material/sort';
import { CollaborateurModel } from "@shared/api-swagger/model/collaborateurModel"; import { CollaborateurModel } from "@shared/api-swagger/model/collaborateurModel";
import { EpModel } from "@shared/api-swagger/model/epModel"; import { EpModel } from "@shared/api-swagger/model/epModel";
import { DisplayEP } from "@shared/displayInfo/displayEP"; import { DisplayEP } from "@shared/displayInfo/displays";
import { EpService } from "@shared/api-swagger/api/api"; import { EpService } from "@shared/api-swagger/api/api";

@ -1 +1,31 @@
<h1> Page RH </h1> <h1> Page RH </h1>
<mat-table [dataSource]="this.dataSource">
<ng-container matColumnDef="intitule">
<mat-header-cell *matHeaderCellDef>Intitulé</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.intitule }}</mat-cell>
</ng-container>
<ng-container matColumnDef=participants>
<mat-header-cell *matHeaderCellDef>Nb participants</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.nbParticipants }}</mat-cell>
</ng-container>
<ng-container matColumnDef="date">
<mat-header-cell *matHeaderCellDef>Date prévisionnelle</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.datePrevu }}</mat-cell>
</ng-container>
<!--<ng-container matColumnDef="origine">
<mat-header-cell></mat-header-cell>
<mat-cell *matCellDef="let row"></mat-cell>
</ng-container>-->
<ng-container matColumnDef="statut">
<mat-header-cell *matHeaderCellDef>Statut</mat-header-cell>
<mat-cell *matCellDef="let row">{{ getStatut(row.statut) }}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/formations',row.id]"></mat-row>
</mat-table>

@ -1,4 +1,15 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit, ViewChild } from '@angular/core';
import { Observable, Subscription } from 'rxjs';
import {MatTableDataSource} from '@angular/material/table';
import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import { FormationModel } from "@shared/api-swagger/model/models";
import { DisplayFormation } from "@shared/displayInfo/displays";
import { FormationsService } from "@shared/api-swagger/api/api";
/** /**
* Le composant home qui sera affiché pour les RH. * Le composant home qui sera affiché pour les RH.
@ -11,9 +22,93 @@ import { Component, OnInit } from '@angular/core';
templateUrl : 'home-rh.component.html' templateUrl : 'home-rh.component.html'
}) })
export class HomeRHComponent implements OnInit { export class HomeRHComponent implements OnInit {
constructor() {
formationsDisponibles : DisplayFormation[];
formationsFiltres : DisplayFormation[];
private formationsDisponiblesSubscription : Subscription;
//displayedColumns: string[] = ["intitule", "participants", "date", "origine", "statut"]
displayedColumns: string[] = ["intitule", "participants", "date", "statut"]
/**
* source pour l'affichage des formations dans le tableau qui est affichée.
*/
dataSource : MatTableDataSource<DisplayFormation>;
/**
* contenu de la recherche.
*/
search = "";
/**
* Pagination du tableau.
*/
@ViewChild(MatPaginator) paginator: MatPaginator;
/**
* Tri par les éléments du tableau selon la colonne choisie.
*/
@ViewChild(MatSort) sort: MatSort;
/**
* Spécifie si la liste des EP est en cours de chargement et d'écriture dans le tableau.
*/
chargement = true;
constructor(private service:FormationsService) {
} }
ngOnInit() { ngOnInit() {
this.formationsDisponiblesSubscription = this.service.getFormations(undefined, 1).subscribe(
formations => this.initFormations(formations)
);
}
initFormations(formations:FormationModel[]) {
this.formationsDisponibles = [];
console.log(formations);
let formationDisplay : DisplayFormation;
for(let formation of formations) {
formationDisplay = new DisplayFormation();
formationDisplay.id = formation.id;
formationDisplay.intitule = formation.intitule;
formationDisplay.nbParticipants = formation.participantsFormation.length;
formationDisplay.datePrevu = formation.dateDebut;
formationDisplay.origine = formation.origine;
formationDisplay.statut = formation.statut;
this.formationsDisponibles.push(formationDisplay);
}
this.formationsFiltres = this.formationsDisponibles;
this.dataSource = new MatTableDataSource(this.formationsFiltres);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
getStatut(statut:number) {
let value ="";
switch(statut) {
case 0:
value = "Plannifiée";
break;
case 1:
value = "Replannifiée";
break;
case 2:
value = "Réalisée";
break;
case 3:
value = "Annulée";
break;
}
return value;
}
ngOnDestroy() {
if(this.formationsDisponiblesSubscription != undefined) {
this.formationsDisponiblesSubscription.unsubscribe();
}
} }
} }

@ -11,7 +11,7 @@ import { ReferentsService } from "@shared/api-swagger/api/api";
import { CollaborateurModel } from "@shared/api-swagger/model/collaborateurModel"; import { CollaborateurModel } from "@shared/api-swagger/model/collaborateurModel";
import { EpModel } from "@shared/api-swagger/model/epModel"; import { EpModel } from "@shared/api-swagger/model/epModel";
import { DisplayEP } from "@shared/displayInfo/displayEP"; import { DisplayEP } from "@shared/displayInfo/displays";
/** /**
*/ */

@ -9,7 +9,7 @@ import {MatSort} from '@angular/material/sort';
import { ReferentsService } from "@shared/api-swagger/api/api"; import { ReferentsService } from "@shared/api-swagger/api/api";
import { CollaborateurModel } from "@shared/api-swagger/model/collaborateurModel"; import { CollaborateurModel } from "@shared/api-swagger/model/collaborateurModel";
import { DisplayCollaborateur } from "@shared/displayInfo/displayCollaborateur"; import { DisplayCollaborateur } from "@shared/displayInfo/displays";
/** /**

@ -214,10 +214,10 @@ export class FormationsService {
* @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body. * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
* @param reportProgress flag to report request and response progress. * @param reportProgress flag to report request and response progress.
*/ */
public getListeFormations(idBu?: number, idAgence?: number, observe?: 'body', reportProgress?: boolean): Observable<Array<FormationModel>>; public getFormations(idBu?: number, idAgence?: number, observe?: 'body', reportProgress?: boolean): Observable<Array<FormationModel>>;
public getListeFormations(idBu?: number, idAgence?: number, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<Array<FormationModel>>>; public getFormations(idBu?: number, idAgence?: number, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<Array<FormationModel>>>;
public getListeFormations(idBu?: number, idAgence?: number, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<Array<FormationModel>>>; public getFormations(idBu?: number, idAgence?: number, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<Array<FormationModel>>>;
public getListeFormations(idBu?: number, idAgence?: number, observe: any = 'body', reportProgress: boolean = false ): Observable<any> { public getFormations(idBu?: number, idAgence?: number, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {

@ -16,10 +16,11 @@ export interface FormationModel {
intitule: string; intitule: string;
dateDebut: Date; dateDebut: Date;
dateFin: Date; dateFin: Date;
status: FormationModel.StatusEnum; statut: FormationModel.StatusEnum;
lieu: string; lieu: string;
duree: number; duree: number;
jours?: number; jours?: number;
origine: string;
organisme: string; organisme: string;
nomFormateur: string; nomFormateur: string;
participantsFormation?: Array<ParticipationFormationModel>; participantsFormation?: Array<ParticipationFormationModel>;
@ -27,11 +28,11 @@ export interface FormationModel {
typeFormation?: string; typeFormation?: string;
} }
export namespace FormationModel { export namespace FormationModel {
export type StatusEnum = 'Planifiée' | 'Replanifiée' | 'Annulée' | 'Réalisée'; export type StatusEnum = 0 | 1 | 2 | 3;
export const StatusEnum = { export const StatusEnum = {
Planifie: 'Planifiée' as StatusEnum, Planifie: 0 as StatusEnum,
Replanifie: 'Replanifiée' as StatusEnum, Replanifie: 1 as StatusEnum,
Annule: 'Annulée' as StatusEnum, Realise: 2 as StatusEnum,
Ralise: 'Réalisée' as StatusEnum Annule: 3 as StatusEnum
}; };
} }

@ -3,7 +3,7 @@
<mat-icon>more_vert</mat-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
<mat-menu #menuFormation="matMenu"> <mat-menu #menuFormation="matMenu">
<button mat-menu-item>Ajouter une nouvelle formation</button> <button mat-menu-item routerLink="/formations/nouvelleformation">Ajouter une nouvelle formation</button>
<button mat-menu-item routerLink="/formations">Liste des formations</button> <button mat-menu-item routerLink="/formations">Liste des formations</button>
</mat-menu> </mat-menu>
<button mat-button [matMenuTriggerFor]="menuDemande"> <button mat-button [matMenuTriggerFor]="menuDemande">
@ -11,6 +11,15 @@
<mat-icon>more_vert</mat-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
<mat-menu #menuDemande="matMenu"> <mat-menu #menuDemande="matMenu">
<button mat-menu-item>Créer une nouvelle demande de formation</button> <button mat-menu-item routerLink="/demandesformation/nouvelledemandeformation">Créer une nouvelle demande de formation</button>
<button mat-menu-item routerLink="/demandesformation">Liste des demandes</button> <button mat-menu-item routerLink="/demandesformation">Liste des demandes</button>
</mat-menu> </mat-menu>
<button mat-button [matMenuTriggerFor]="menuCollaborateurs">
<span>Collaborateurs</span>
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menuCollaborateurs="matMenu">
<button mat-button routerLink="/collaborateurs">Liste des collaborateurs</button>
<button mat-button>Liste des engagements</button>
</mat-menu>
<button mat-button routerLink="/referents">Liste des référents</button>

@ -16,6 +16,8 @@
<mat-icon>more_vert</mat-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
<mat-menu #menuMore="matMenu"> <mat-menu #menuMore="matMenu">
<button mat-menu-item>A propos</button>
<button mat-menu-item>Manuel utilisation</button>
<button mat-menu-item on-click="logout()">Déconnexion</button> <button mat-menu-item on-click="logout()">Déconnexion</button>
</mat-menu> </mat-menu>
</mat-card> </mat-card>

Loading…
Cancel
Save