ygrette
/
Digitalisation_EPA_Client
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Utilisation du composant pour faire afficher la liste des collaborateurs

Browse Source
develop
Yanaël GRETTE 4 years ago
parent de1cc0fe11
commit b62273401a
6 changed files with 50 additions and 315 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 83
      src/app/collaborateurs/collaborateurs.component.html
  2. 232
      src/app/collaborateurs/collaborateurs.component.ts
  3. 4
      src/app/collaborateurs/collaborateurs.module.ts
  4. 10
      src/app/shared/mat-tables/collaborateurs-table/collaborateurs.table.html
  5. 30
      src/app/shared/mat-tables/collaborateurs-table/collaborateurs.table.ts
  6. 2
      src/app/shared/utils/cles.ts

83
src/app/collaborateurs/collaborateurs.component.html
Unescape View File

@ -1,86 +1,5 @@
<app-nav-menu></app-nav-menu>
<h1> Liste des collaborateurs </h1>
<ng-container *ngIf="chargement">
<mat-spinner></mat-spinner>
</ng-container>
<ng-container *ngIf="!chargement">
<!-- Barre de recherche -->
<mat-form-field>
<mat-label>Rechercher un collaborateur</mat-label>
<input matInput type="text" [(ngModel)]="search" (keyup)="setSearch()">
<mat-button *ngIf="search" matSuffix mat-icon-button aria-label="Clear" (click)="resetSearch()">
<mat-icon>close</mat-icon>
</mat-button>
</mat-form-field>
<!--Checkboxes des BU-->
<ul>
<li *ngFor="let bu of bus">
<mat-checkbox (change)="updateCheckbox($event.checked,bu)" [checked]="true"> {{bu.nom}}</mat-checkbox>
</li>
</ul>
<!-- Datepicker début -->
<mat-form-field >
<mat-label>Date de début</mat-label>
<input [(ngModel)]="dateDebut" matInput [matDatepicker]="dateDebutPicker" [max]="dateFin" disabled (dateChange)="updateDataSource()">
<mat-icon *ngIf="this.dateDebut != undefined" matDatepickerToggleIcon (click)="updateDateToUndefined(1)">clear</mat-icon>
<mat-datepicker-toggle matSuffix [for]="dateDebutPicker"></mat-datepicker-toggle>
<mat-datepicker touchUi #dateDebutPicker disabled="false"></mat-datepicker>
</mat-form-field>
<!-- Datepicker fin -->
<mat-form-field >
<mat-label>Date de fin</mat-label>
<input [(ngModel)]="dateFin" matInput [matDatepicker]="dateFinPicker" [min]="dateDebut" disabled (dateChange)="updateDataSource()">
<mat-icon *ngIf="this.dateFin != undefined" matDatepickerToggleIcon (click)="updateDateToUndefined(2)">clear</mat-icon>
<mat-datepicker-toggle matSuffix [for]="dateFinPicker"></mat-datepicker-toggle>
<mat-datepicker touchUi #dateFinPicker disabled="false"></mat-datepicker>
</mat-form-field>
<!-- Affichage de la liste des collaborateurs -->
<mat-table matSort [dataSource]="dataSource" (matSortChange)="triTableau($event)" matSortActive="{{this.tri}}" matSortDirection="asc" >
<ng-container matColumnDef="businessunit">
<mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Agence</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.businessUnit.nom }}</mat-cell>
</ng-container>
<ng-container matColumnDef="collaborateur">
<mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Collabotareur</mat-header-cell>
<!--Créer un lien vers les détails du collaborateur-->
<mat-cell *matCellDef="let row" [routerLink]="['/collaborateurs', row.id]">{{row.nom}} {{row.prenom}}</mat-cell>
</ng-container>
<ng-container matColumnDef="datearrivee">
<mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Date embauche</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.dateArrivee | date:'dd/MM/yyyy'}}</mat-cell>
</ng-container>
<ng-container matColumnDef="referent">
<mat-header-cell *matHeaderCellDef >Référent</mat-header-cell>
<mat-cell *matCellDef="let row">
<p *ngIf="row.referent" [routerLink]="['/referents', row.referent.id]">{{ row.referent.prenom }} {{ row.referent.nom }}</p>
<p *ngIf="!row.referent"> Aucun référent</p>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-paginator #paginator
[length] = "taille"
[pageIndex]="numPage-1"
[pageSize]="parPage"
[pageSizeOptions]="pageOption"
(page)="updatePageInfo($event)"
>
</mat-paginator>
</ng-container>
<collaborateurs-table [typeRecherche]="typeRecherche" [rechercherParBU]="rechercherParBU" [roles]="roles" [displayedColumns]="displayedColumns" (eventEmitter)="event($event)" ></collaborateurs-table>

232
src/app/collaborateurs/collaborateurs.component.ts
Unescape View File

@ -1,14 +1,9 @@
import { Component, OnInit } from '@angular/core';
import { Component, ViewChild } from '@angular/core';
import { Subscription } from 'rxjs';
import {MatTableDataSource} from '@angular/material/table';
import { BusinessUnitDTO, CollaborateurDTO } from '@shared/api-swagger/model/models'
import { CollaborateursService } from "@shared/api-swagger/api/api";
import { cles } from "@shared/utils/cles";
import { collaborateurTypeRecherche } from "@shared/utils/cles";
import { Router } from '@angular/router';
//import { CollaborateursTableComponent } from "@shared/mat-tables/collaborateurs-table/collaborateurs.table"
/**
* Composant qui sert à l'affichage de la liste des collaborateurs en fonction de l'agence de son utilitateur.
@ -19,227 +14,40 @@ import { cles } from "@shared/utils/cles";
selector: 'app-collaborateurs',
templateUrl: './collaborateurs.component.html'
})
export class CollaborateursComponent implements OnInit {
export class CollaborateursComponent {
//@ViewChild(CollaborateursTableComponent) collaborateursTableComponent;
/**
* Ordre de tri à envoyer au serveur (true : croissant, false : décroissantà).
*/
asc : boolean = true;
* Type de la recherche à indiquer au composant fils qui affiche la liste des collaborateurs
*/
typeRecherche: string = collaborateurTypeRecherche.collaborateurs;
/**
* Numéro de la page à afficher dans le tableau.
*/
numPage: number = 1;
/**
* Nombre d'élément du tableau à affiche en une page.
*/
parPage: number = 15;
/**
* Rôle des collaborateurs à récupérer via le service collaborateur, ici nous ne voulons que les collaborateurs (pour le moment...).
*/
private roles : string[] = ["Collaborateur"];
/**
* Observable pour faire des requêtes sur le service collaborateur.
*/
private collaborateursDisponiblesSubscription : Subscription;
roles: string[] = ["Collaborateur"];
/**
* Observable pour faire des requêtes sur le service collaborateur.
*/
private collaborateursDisponiblesCountSubscription : Subscription;
/**
* Liste des colonnes du tableau à afficher.
*/
displayedColumns : string[] = ["businessunit", "collaborateur", "datearrivee", "referent"];
displayedColumns: string[] = ["businessunit", "collaborateur", "datearrivee", "referent"];
/**
* C'est dans cet objet que seront stockés les collaborateurs à afficher dans le Mat Table côté template.
*/
dataSource : MatTableDataSource<CollaborateurDTO>;
/**
* contenu de la recherche pour trouver un collaborateur.
*/
search: string = "";
/**
* Permet de savoir sur quelle attribut d'un CollaborateurDTO doit être trié le tableau.
*/
tri: string = "collaborateur";
/**
* Liste des business units du collaborateur connecté
* Indique si la recherche pas BU est activée ou non
*/
bus: Array<BusinessUnitDTO> = [];
rechercherParBU: boolean = true;
/**
* Liste des id des business units des collaborateurs à afficher
*/
private busIds: Array<number> = [];
/**
* Nombre total d'élément du tableau
*/
taille: number;
/**
* Options pour choisir le nombre de page à affiche
*/
pageOption = [ 5, 15, 20, 30, 50];
/**
* Spécifie si la liste des collaborateurs est en cours de chargement dans le tableau.
*/
chargement: boolean = true;
/**
* Date à partir de laquelle les collaborateurs doivent être récupérés en fonction de leur date d'arrivée
*/
dateDebut: Date = undefined;
/**
* Date jusqu'à laquelle les collaborateurs doivent être récupérés en fonction de leur date d'arrivée
*/
dateFin: Date = undefined;
constructor(private service: CollaborateursService) {}
ngOnInit() {
this.setBUsId();
}
/**
* Mettre à jour les informations à afficher dans la tableau.
* Devra se faire à l'ouverture de la page, au changement de page ou du nombre d'éléments à afficher, au moment d'un tri ou encore lors de l'utilisation de la barre de recherche.
*/
updateDataSource() {
constructor(private router: Router) {}
//ne rien afficher si aucune business unit n'est cochée
if(this.busIds.length == 0) {
this.taille = 0;
this.dataSource = new MatTableDataSource(undefined);
return;
}
this.collaborateursDisponiblesSubscription = this.service.getCollaborateurs(this.roles, this.busIds, this.asc, this.numPage, this.parPage, this.search, this.tri, this.dateDebut, this.dateFin).subscribe(
collaborateurs => { console.log(collaborateurs); this.dataSource = new MatTableDataSource(collaborateurs);},
err => console.log(err)
);
this.collaborateursDisponiblesCountSubscription = this.service.getCollaborateursCount(this.roles, this.busIds,this.asc, this.numPage, this.parPage, this.search, this.tri, this.dateDebut, this.dateFin).subscribe(
count => { console.log(count); this.taille=count;},
err => console.log(err)
);
}
/**
* Mettre à undefined la date de début ou la date de fin
* @param val Valeur pour inidiquer quel variable doit être mis à undefined
*/
updateDateToUndefined(val : number) {
if(val == 1)
this.dateDebut = undefined;
if(val == 2)
this.dateFin = undefined;
this.updateDataSource();
}
/**
* Mettre à jour le nomre d'élément à afficher par page et le numéro de la page
* @param event évènement de la pagination
*/
updatePageInfo(event){
this.parPage = event.pageSize;
this.numPage = event.pageIndex+1;
this.updateDataSource();
}
/**
* Remettre au début la liste lors d'une recherche via la barre de recherche
*/
setSearch() {
this.numPage = 1;
this.updateDataSource();
}
/**
* Vider la barre de recherche et remettre le tableau à la première page
*/
resetSearch() {
this.search = "";
this.setSearch();
}
/**
* Trier le tableau en fonction de l'évènement de la colonne
* @param e évènement du tri
*/
triTableau(e) {
this.tri = e.active;
switch(e.direction) {
case "asc":
this.asc = true;
event(event : any) {
switch(event.type) {
case "collaborateur":
this.router.navigate(["/collaborateurs", event.collaborateur.id]);
break;
case "desc":
this.asc = false;
case "referent":
this.router.navigate(["/referents", event.collaborateur.id]);
break;
}
this.updateDataSource();
}
/**
* Fonction qui calculait le nombre d'année qu'un collaborateur a passé chez Apside (calculer entre la date d'aujourd'hui et la date d'arrivée du collaborateur).
*/
setAnciennete(firstDate, secondDate) {
return Math.abs(firstDate-secondDate);
}
/**
* création de la liste des business unit du collaborateur connecté pour afficher les checkboxes
*/
setBUsId() {
if(sessionStorage.getItem(cles.sessionKeyConnectee) == undefined){
setTimeout( () => this.setBUsId(), 1000);
}
else {
const connecte = JSON.parse(sessionStorage.getItem(cles.sessionKeyConnectee));
this.bus = connecte.businessUnit.agence.bu;
for(let bu of this.bus) {
this.busIds.push(bu.id);
}
this.updateDataSource();
this.chargement = false;
}
}
/**
* Mettre à jour la liste des
* @param event case cochée ou décochée
* @param bu business unit concerné par la checkbox cochée ou décochée
*/
updateCheckbox(event, bu) {
// si la checkbox a été cochée
if(event) {
this.busIds.push(bu.id)
}
else{
this.busIds = this.busIds.filter( (id) => id != bu.id);
}
this.numPage = 1;
this.updateDataSource();
}
/**
* Une fois la page fermée, il est nécessaire de se désabonner des Oberservable afin d'éviter les fuites mémoires.
*/
ngOnDestroy() {
if(this.collaborateursDisponiblesSubscription != undefined) {
this.collaborateursDisponiblesSubscription.unsubscribe();
}
if(this.collaborateursDisponiblesCountSubscription != undefined) {
this.collaborateursDisponiblesCountSubscription.unsubscribe();
}
}
}

4
src/app/collaborateurs/collaborateurs.module.ts
Unescape View File

@ -4,7 +4,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { MaterialModule } from "@shared/angular-material/angular-material.module";
import { CollaborateursTableComponent } from "@shared/mat-tables/collaborateurs-table/collaborateurs.table";
import {NavMenuModule} from '@shared/nav-menu/nav-menu.module';
import { CollaborateursComponent } from "./collaborateurs.component";
@ -23,7 +23,7 @@ import { CollaborateursRoutingModule } from "./collaborateurs.routing.module";
declarations: [
CollaborateursComponent, DetailsCollaborateurComponent,
DetailsCollaborateurComponent, EvaluationComponent, EditEvaluationComponent,
FormationsCollaboateurComponent
FormationsCollaboateurComponent, CollaborateursTableComponent
],
exports: [
CollaborateursComponent

10
src/app/shared/mat-tables/collaborateurs-table/collaborateurs.table.html
Unescape View File

@ -15,7 +15,7 @@
</mat-form-field>
<!--Checkboxes des BU-->
<ng-container *ngIf="recherParBU">
<ng-container *ngIf="rechercherParBU">
<ul>
<li *ngFor="let bu of bus">
<mat-checkbox (change)="updateCheckbox($event.checked,bu)" [checked]="true"> {{bu.nom}}</mat-checkbox>
@ -43,6 +43,7 @@
<!-- Affichage de la liste des collaborateurs -->
<mat-table matSort [dataSource]="dataSource" (matSortChange)="triTableau($event)" matSortActive="{{this.tri}}" matSortDirection="asc" >
<ng-container matColumnDef="businessunit">
@ -62,8 +63,10 @@
<ng-container matColumnDef="referent">
<mat-header-cell *matHeaderCellDef >Référent</mat-header-cell>
<mat-cell *matCellDef="let row" *ngIf="row.referent" (click)="emitEvent(row,'referent')">{{ row.referent.prenom }} {{ row.referent.nom }}</mat-cell>
<mat-cell *matCellDef="let row" *ngIf="!row.referent">Aucun référent</mat-cell>
<mat-cell *matCellDef="let row" >
<ng-container *ngIf="row.referent" (click)="emitEvent(row,'referent')">{{ row.referent.prenom }} {{ row.referent.nom }}</ng-container>
<ng-container *ngIf="!row.referent">Aucun référent</ng-container>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
@ -78,4 +81,5 @@
(page)="updatePageInfo($event)"
>
</mat-paginator>
</ng-container>

30
src/app/shared/mat-tables/collaborateurs-table/collaborateurs.table.ts
Unescape View File

@ -6,7 +6,7 @@ import {MatTableDataSource} from '@angular/material/table';
import { BusinessUnitDTO, CollaborateurDTO } from '@shared/api-swagger/model/models'
import { CollaborateursService } from "@shared/api-swagger/api/api";
import { cles, collaborateurTypeRecheche } from "@shared/utils/cles";
import { cles, collaborateurTypeRecherche } from "@shared/utils/cles";
@Component({
@ -101,17 +101,17 @@ export class CollaborateursTableComponent implements OnInit {
/**
* Indique si il s'agit d'une simple recherche pour afficher des informations ou d'une recherche pour ajouter un référent à un ou plusieurs collaborateurs
*/
@Input() changementReferentEP: boolean;
@Input() changementReferentEP: boolean = false;
/**
* Indique si la recherche pas BU est activée ou non
*/
@Input() rechercherParBU: boolean;
@Input() rechercherParBU: boolean = false;
/**
* Liste des rôles des collaborateurs a affichés
*/
@Input() roles: string[];
@Input() roles: string[] = [];
/**
* Liste des colonnes du tableau à afficher.
@ -121,12 +121,12 @@ export class CollaborateursTableComponent implements OnInit {
/**
* Liste des collaborateursEP actuels du référent
*/
@Input() collaborateursEP: CollaborateurDTO[];
@Input() collaborateursEP: CollaborateurDTO[] = [];
/**
* Liste des collaborateurs ajoutés dont le référent sera mis à jour
*/
@Input() collaborateursAjouts: CollaborateurDTO[];
@Input() collaborateursAjouts: CollaborateurDTO[] =[];
/**
* Evenement emis lorsqu'une action doit être effectuée
@ -146,8 +146,8 @@ export class CollaborateursTableComponent implements OnInit {
}
ngOnInit() {
this.setBUsId();
}
this.setBUsId();
}
/**
* Mettre à jour les informations à afficher dans la tableau.
@ -155,16 +155,19 @@ export class CollaborateursTableComponent implements OnInit {
*/
updateDataSource() {
switch(this.typeRecherche) {
case collaborateurTypeRecheche.collaborateurs:
case collaborateurTypeRecheche.referents:
case collaborateurTypeRecherche.collaborateurs:
case collaborateurTypeRecherche.referents:
this.updateCollaborateursOuReferents();
break;
case collaborateurTypeRecheche.collaborateursEP:
case collaborateurTypeRecherche.collaborateursEP:
this.updateCollaborateursEP();
break;
}
}
/**
* Afficher les informations collaborateurs ou référents
*/
updateCollaborateursOuReferents() {
//ne rien afficher si aucune business unit n'est cochée
if(this.busIds.length == 0) {
@ -182,8 +185,9 @@ export class CollaborateursTableComponent implements OnInit {
);
}
/**
* Afficher les informations des collaborateursEP d'un référent
*/
updateCollaborateursEP() {
this.collaborateursDisponiblesSubscription = this.service.getCollaborateursByReferent(this.collaborateurConnecte.id, this.asc, this.numPage, this.parPage, this.search, this.tri).subscribe(
collaborateurs => { console.log(collaborateurs); this.dataSource = new MatTableDataSource(collaborateurs);},

2
src/app/shared/utils/cles.ts
Unescape View File

@ -3,7 +3,7 @@ export const cles = {
}
export const collaborateurTypeRecheche = {
export const collaborateurTypeRecherche = {
collaborateurs: "collaborateurs",
referents: "referents",
collaborateursEP: "collaborateursEP"

Write Preview
Loading…
Cancel
Save