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

src/app/app.component.ts

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

src/app/collaborateurs/collaborateurs.component.html

@@ -1,38 +1,65 @@
 <app-nav-menu></app-nav-menu>
 <h1> Liste des collaborateurs </h1>
 
-<!-- Affichage de la liste des collaborateurs -->
+<ng-container *ngIf="chargement">
-<mat-table matSort [dataSource]="dataSource">
+  <mat-spinner></mat-spinner>
-  <ng-container matColumnDef="agence">
+</ng-container>
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Agence</mat-header-cell>
+
-    <mat-cell *matCellDef="let row">{{ row.businessUnit.nom }}</mat-cell>
+<ng-container *ngIf="!chargement">
-  </ng-container>
+
-
+
-  <ng-container matColumnDef="collaborateur">
+  <!-- Barre de recherche -->
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Collabotareur</mat-header-cell>
+  <mat-form-field>
-    <!--Créer un lien vers les détails du collaborateur-->
+    <mat-label>Rechercher un collaborateur</mat-label>
-    <mat-cell *matCellDef="let row" [routerLink]="['/collaborateurs', row.id]">{{row.prenom}} {{row.nom}}</mat-cell>
+    <input matInput type="text" [(ngModel)]="search" (keyup)="setSearch()">
-  </ng-container>
+    <mat-button *ngIf="search" matSuffix mat-icon-button aria-label="Clear" (click)="resetSearch()">
-
+      <mat-icon>close</mat-icon>
-  <ng-container matColumnDef="dateembauche">
+    </mat-button>
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Date embauche</mat-header-cell>
+  </mat-form-field>
-    <mat-cell *matCellDef="let row">{{row.dateArrivee | date:'dd/MM/yyyy'}}</mat-cell>
+
-  </ng-container>
+  <!--Checkboxes des BU-->
-
+  <ul>
-  <ng-container matColumnDef="referent">
+    <li *ngFor="let bu of bus">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Référent</mat-header-cell>
+      <mat-checkbox (change)="updateCheckbox($event.checked,bu)" [checked]="true"> {{bu.nom}}</mat-checkbox>
-    <mat-cell *matCellDef="let row">{{ row.referent.prenom }} {{ row.referent.nom }}</mat-cell>
+    </li>
-  </ng-container>
+  </ul>
-
+
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <!-- Affichage de la liste des collaborateurs -->
-  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+  <mat-table matSort [dataSource]="dataSource">
-</mat-table>
+    <ng-container matColumnDef="agence">
-
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Agence</mat-header-cell>
-<mat-paginator #paginator
+      <mat-cell *matCellDef="let row">{{ row.businessUnit.nom }}</mat-cell>
-              [length] = "taille"
+    </ng-container>
-              [pageIndex]="numPage-1"
+
-              [pageSize]="parPage"
+    <ng-container matColumnDef="collaborateur">
-              [pageSizeOptions]="pageOption"
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Collabotareur</mat-header-cell>
-              (page)="pageEvent = updatePageInfo($event)"
+      <!--Créer un lien vers les détails du collaborateur-->
-              >
+      <mat-cell *matCellDef="let row" [routerLink]="['/collaborateurs', row.id]">{{row.prenom}} {{row.nom}}</mat-cell>
-</mat-paginator>
+    </ng-container>
+
+    <ng-container matColumnDef="dateembauche">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>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 mat-sort-header>Référent</mat-header-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-paginator #paginator
+                [length] = "taille"
+                [pageIndex]="numPage-1"
+                [pageSize]="parPage"
+                [pageSizeOptions]="pageOption"
+                (page)="pageEvent = updatePageInfo($event)"
+                >
+  </mat-paginator>
+</ng-container>

src/app/collaborateurs/collaborateurs.component.ts

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

src/app/collaborateurs/collaborateurs.module.ts

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