Utilisation du composant pour faire afficher la liste des collaborateurs

develop
Yanaël GRETTE 4 years ago
parent de1cc0fe11
commit b62273401a
  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

@ -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>

@ -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,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

@ -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>

@ -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);},

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

Loading…
Cancel
Save