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

Début création d'un composant réutilisable qui affichera la liste des collaborateurs

Browse Source
develop
Yanaël GRETTE 4 years ago
parent 6049ad5431
commit de1cc0fe11
4 changed files with 396 additions and 0 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. 7
      src/app/shared/mat-tables/collaborateurs-table/collaborateurs.table.css
  2. 81
      src/app/shared/mat-tables/collaborateurs-table/collaborateurs.table.html
  3. 301
      src/app/shared/mat-tables/collaborateurs-table/collaborateurs.table.ts
  4. 7
      src/app/shared/utils/cles.ts

7
src/app/shared/mat-tables/collaborateurs-table/collaborateurs.table.css
Unescape View File

@ -0,0 +1,7 @@
.collaborateurAjoute {
background-color: dodgerblue;
}
.dejaCollaborateurEP {
}

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

@ -0,0 +1,81 @@
<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-->
<ng-container *ngIf="recherParBU">
<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>
</ng-container>
<!-- 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>
<mat-cell *matCellDef="let row" (click)="emitEvent(row,'collaborateur')">{{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" *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>
</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>

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

@ -0,0 +1,301 @@
import { Component, Input, Output, EventEmitter, OnInit } 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, collaborateurTypeRecheche } from "@shared/utils/cles";
@Component({
selector: "collaborateurs-table",
templateUrl: "./collaborateurs.table.html",
styleUrls: ["./collaborateurs.table.css"]
})
export class CollaborateursTableComponent implements OnInit {
/**
* Ordre de tri à envoyer au serveur (true : croissant, false : décroissantà).
*/
asc : boolean = true;
/**
* 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;
/**
* Observable pour faire des requêtes sur le service collaborateur.
*/
private collaborateursDisponiblesSubscription : Subscription;
/**
* 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"];
/**
* 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é
*/
bus: Array<BusinessUnitDTO> = [];
/**
* 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;
/**
* Indiquer si il s'agit d'une recherche collaborateur, d'un recherche référentEP ou d'une recherche collaborateurEP d'un référent
*/
@Input() typeRecherche: string;
/**
* 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;
/**
* Indique si la recherche pas BU est activée ou non
*/
@Input() rechercherParBU: boolean;
/**
* Liste des rôles des collaborateurs a affichés
*/
@Input() roles: string[];
/**
* Liste des colonnes du tableau à afficher.
*/
@Input() displayedColumns : string[]; //["businessunit", "collaborateur", "datearrivee", "referent"]
/**
* Liste des collaborateursEP actuels du référent
*/
@Input() collaborateursEP: CollaborateurDTO[];
/**
* Liste des collaborateurs ajoutés dont le référent sera mis à jour
*/
@Input() collaborateursAjouts: CollaborateurDTO[];
/**
* Evenement emis lorsqu'une action doit être effectuée
*/
@Output() eventEmitter: EventEmitter<any> = new EventEmitter<any>();
private collaborateurConnecte : CollaborateurDTO;
constructor(private service: CollaborateursService) {}
emitEvent(referent: CollaborateurDTO, type: string) {
const event = {
type : type,
collaborateur: referent
};
this.eventEmitter.emit(event);
}
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() {
switch(this.typeRecherche) {
case collaborateurTypeRecheche.collaborateurs:
case collaborateurTypeRecheche.referents:
this.updateCollaborateursOuReferents();
break;
case collaborateurTypeRecheche.collaborateursEP:
this.updateCollaborateursEP();
break;
}
}
updateCollaborateursOuReferents() {
//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)
);
}
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);},
err => console.log(err)
);
this.collaborateursDisponiblesCountSubscription = this.service.getCollaborateursByReferentCount(this.collaborateurConnecte.id, this.asc, this.numPage, this.parPage, this.search, this.tri).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;
break;
case "desc":
this.asc = false;
break;
}
this.updateDataSource();
}
/**
* 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 {
this.collaborateurConnecte = JSON.parse(sessionStorage.getItem(cles.sessionKeyConnectee));
this.bus = this.collaborateurConnecte.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();
}
}
}

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

@ -1,3 +1,10 @@
export const cles = {
sessionKeyConnectee : "collaborateurConnecte",
}
export const collaborateurTypeRecheche = {
collaborateurs: "collaborateurs",
referents: "referents",
collaborateursEP: "collaborateursEP"
}
Write Preview
Loading…
Cancel
Save