Mise à jour de l'interface de la liste des collaborateurs : ajout des checkboxes des BU et d'une barre de recherche

develop
Yanaël GRETTE 4 years ago
parent 35126aeec8
commit 0a70fb0dbb
  1. 3
      src/app/app.component.ts
  2. 39
      src/app/collaborateurs/collaborateurs.component.html
  3. 66
      src/app/collaborateurs/collaborateurs.component.ts
  4. 1
      src/app/collaborateurs/collaborateurs.module.ts

@ -21,8 +21,7 @@ export class AppComponent implements OnInit {
}
ngOnInit(): void {
let mail = this.authService.mail;
this.subscriber = this.collaborateursService.getCollaborateurByMail(mail).subscribe(
this.subscriber = this.collaborateursService.getCollaborateurByMail(this.authService.mail).subscribe(
collaborateur => this.collaborateurConnecte.collaborateur = collaborateur
);
}

@ -1,8 +1,31 @@
<app-nav-menu></app-nav-menu>
<h1> Liste des collaborateurs </h1>
<!-- Affichage de la liste des collaborateurs -->
<mat-table matSort [dataSource]="dataSource">
<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>
<!-- Affichage de la liste des collaborateurs -->
<mat-table matSort [dataSource]="dataSource">
<ng-container matColumnDef="agence">
<mat-header-cell *matHeaderCellDef mat-sort-header>Agence</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.businessUnit.nom }}</mat-cell>
@ -21,18 +44,22 @@
<ng-container matColumnDef="referent">
<mat-header-cell *matHeaderCellDef mat-sort-header>Référent</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.referent.prenom }} {{ row.referent.nom }}</mat-cell>
<mat-cell *matCellDef="let row">
<p *ngIf="row.referent">{{ 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-table>
<mat-paginator #paginator
<mat-paginator #paginator
[length] = "taille"
[pageIndex]="numPage-1"
[pageSize]="parPage"
[pageSizeOptions]="pageOption"
(page)="pageEvent = updatePageInfo($event)"
>
</mat-paginator>
</mat-paginator>
</ng-container>

@ -8,7 +8,7 @@ import {MatSort} from '@angular/material/sort';
import { CollaborateurDTO } from '@shared/api-swagger/model/models'
import { CollaborateursService } from "@shared/api-swagger/api/api";
import { CollaborateurConnecte } from "@shared/globales/collaborateur-connecte"
/**
* Composant qui sert à l'affichage de la liste des collaborateurs en fonction de l'agence de son utilitateur.
@ -36,11 +36,15 @@ export class CollaborateursComponent implements OnInit {
/**
* Rôle des collaborateurs à récupérer via le service collaborateur, ici nous ne voulons que les collaborateurs (pour le moment...).
*/
roles : string[] = ["collaborateur"];
roles : string[] = [];
/**
* 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.
*/
@ -60,6 +64,10 @@ export class CollaborateursComponent implements OnInit {
*/
tri = "";
bus = [];
busIds: Array<number> = [];
taille = 100;
pageOption = [ 5, 15, 20, 30, 50];
@ -80,11 +88,10 @@ export class CollaborateursComponent implements OnInit {
* Spécifie si la liste des collaborateurs est en cours de chargement dans le tableau.
*/
chargement = true;
constructor(private service: CollaborateursService) {}
constructor(private service: CollaborateursService, private collaborateurConnecte: CollaborateurConnecte) {}
ngOnInit() {
this.updateDataSource();
this.setBUsId();
}
/**
@ -93,23 +100,38 @@ export class CollaborateursComponent implements OnInit {
*/
updateDataSource() {
//récupérer la liste des collaborateur et mettre à jour le tableau
this.collaborateursDisponiblesSubscription = this.service.getCollaborateurs(this.roles,[1],this.asc, this.numPage, this.parPage, this.search, this.tri).subscribe(
this.collaborateursDisponiblesSubscription = this.service.getCollaborateurs(this.roles, this.busIds, 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.getCollaborateursCount(this.roles, this.busIds,this.asc, this.numPage, this.parPage, this.search, this.tri).subscribe(
count => { console.log(count); this.taille=count;},
err => console.log(err)
);
//this.dataSource.paginator = this.paginator;
//this.dataSource.sort = this.sort;
}
updatePageInfo(event) : PageEvent{
console.log("update")
console.log(event);
this.parPage = event.pageSize;
this.numPage = event.pageIndex+1;
this.updateDataSource();
return event;
}
setSearch() {
this.numPage = 1;
this.updateDataSource();
}
resetSearch() {
this.search = "";
this.numPage =1;
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).
*/
@ -117,6 +139,31 @@ export class CollaborateursComponent implements OnInit {
return Math.abs(firstDate-secondDate);
}
setBUsId() {
if(this.collaborateurConnecte.collaborateur == undefined) {
setTimeout( () => this.setBUsId(), 1000);
}
else {
this.bus = this.collaborateurConnecte.collaborateur.businessUnit.agence.bu;
for(let bu of this.bus) {
this.busIds.push(bu.id);
}
this.updateDataSource();
this.chargement = false;
}
}
updateCheckbox(event, bu) {
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.
*/
@ -124,5 +171,8 @@ export class CollaborateursComponent implements OnInit {
if(this.collaborateursDisponiblesSubscription != undefined) {
this.collaborateursDisponiblesSubscription.unsubscribe();
}
if(this.collaborateursDisponiblesCountSubscription != undefined) {
this.collaborateursDisponiblesCountSubscription.unsubscribe();
}
}
}

@ -31,6 +31,7 @@ import { CollaborateursRoutingModule } from "./collaborateurs.routing.module";
imports: [
//FormsModule,
CommonModule,
FormsModule,
MaterialModule,
NavMenuModule,
CollaborateursRoutingModule,

Loading…
Cancel
Save