Mise à jour de l'affichage de la liste des référents avec un fonctionnement similaire que celui de la page de la liste des collaborateurs

src/app/collaborateurs/collaborateurs.component.html

@@ -17,7 +17,6 @@
     </mat-button>
   </mat-form-field>
 
-  <!-- Datepicker début -->
   
   
   <!--Checkboxes des BU-->
@@ -27,6 +26,7 @@
     </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()">
@@ -80,7 +80,7 @@
                 [pageIndex]="numPage-1"
                 [pageSize]="parPage"
                 [pageSizeOptions]="pageOption"
-                (page)="pageEvent = updatePageInfo($event)"
+                (page)="updatePageInfo($event)"
                 >
   </mat-paginator>
 </ng-container>

src/app/collaborateurs/collaborateurs.component.ts

@@ -1,12 +1,9 @@
-import { Component, OnInit, OnDestroy, ViewChild, ViewChildren } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
-import { MatDatepickerInputEvent } from '@angular/material/datepicker';
 
-import { Observable, Subscription } from 'rxjs';
+import { Subscription } from 'rxjs';
 
 import {MatTableDataSource} from '@angular/material/table';
-import {MatPaginator, PageEvent} from '@angular/material/paginator';
-import {MatSort} from '@angular/material/sort';
 
 import { BusinessUnitDTO, CollaborateurDTO } from '@shared/api-swagger/model/models'
 import { CollaborateursService } from "@shared/api-swagger/api/api";
@@ -39,15 +36,17 @@ 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[] = [];
+  private roles : string[] = ["Collaborateur"];
   /**
     * 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.
     */
@@ -89,9 +88,6 @@ export class CollaborateursComponent implements OnInit {
    */
   pageOption = [ 5, 15, 20, 30, 50];
 
-  pageEvent: PageEvent;
-
-
   /**
     * Spécifie si la liste des collaborateurs est en cours de chargement dans le tableau.
     */
@@ -151,11 +147,10 @@ export class CollaborateursComponent implements OnInit {
    * 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) : PageEvent{
+  updatePageInfo(event){
     this.parPage = event.pageSize;
     this.numPage = event.pageIndex+1;
     this.updateDataSource();
-    return event;
   }
 
   /**

src/app/referents/referents.component.html

@@ -1,20 +1,51 @@
 <app-nav-menu></app-nav-menu>
 <h1>Liste des référents</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 référent</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 référents -->
-<mat-table matSort [dataSource]="dataSource">
-  <ng-container matColumnDef="agence">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Agence</mat-header-cell>
+  <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="referent">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Référent</mat-header-cell>
-    <!-- Lien vers les détails du référent-->
-    <mat-cell *matCellDef="let row" [routerLink]="['/referents', row.id]">{{row.prenom}} {{row.nom}}</mat-cell>
+    <ng-container matColumnDef="collaborateur">
+      <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Référent</mat-header-cell>
+      <mat-cell *matCellDef="let row" >{{row.nom}} {{row.prenom}}</mat-cell>
     </ng-container>
     
     
     <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/referents', row.id]"></mat-row>
   </mat-table>
+  
+  <mat-paginator #paginator
+    [length] = "taille"
+    [pageIndex]="numPage-1"
+    [pageSize]="parPage"
+    [pageSizeOptions]="pageOption"
+    (page)="updatePageInfo($event)"
+    >
+  </mat-paginator>
+
+</ng-container>

src/app/referents/referents.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, ViewChild, ViewChildren } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 
 import { Subscription } from 'rxjs';
 
@@ -8,8 +8,8 @@ import {MatSort} from '@angular/material/sort';
 
 import { CollaborateursService } from "@shared/api-swagger/api/api";
 
-import { CollaborateurDTO } from "@shared/api-swagger/model/models";
-
+import { BusinessUnitDTO, CollaborateurDTO } from "@shared/api-swagger/model/models";
+import { CollaborateurConnecte } from "@shared/globales/collaborateur-connecte"
 
 /**
     */
@@ -30,7 +30,7 @@ export class ReferentsComponent implements OnInit {
   /**
     * Nombre d'élément du tableau à affiche en une page.
     */
-  parPage = 5;
+  parPage = 15;
   /**
     * Rôle des collaborateurs à récupérer via le service collaborateur, ici nous ne voulons que les collaborateurs (pour le moment...).
     */
@@ -40,10 +40,15 @@ export class ReferentsComponent implements OnInit {
       */
   private referentsDisponiblesSubscription : Subscription;
 
+  /**
+    * Observable pour faire des requêtes sur le service référent.
+    */
+  private referentsDisponiblesCountSubscription : Subscription;
+
   /**
     * Liste des colonnes du tableau à afficher.
     */
-  displayedColumns : string[] = ["agence", "referent"];
+  displayedColumns : string[] = ["businessunit", "collaborateur"];
 
   /**
     * Objet pour stocker la liste des référents qui seront récupérés par le service référént
@@ -52,34 +57,49 @@ export class ReferentsComponent implements OnInit {
   /**
     * Liste des rôles pour préciser que l'on souhaite récupérer les commerciaux
     */
-  roles : string[] = ["referent"];
+  roles : string[] = ["Manager", "RA", "CP", "TL"];
+  
+  
   /**
     * contenu de la recherche.
     */
   search = "";
+
   /**
     * Permet d'indiquer au serveur sur quel attribut de l'objet CollaborateurDTO on souhaite faire le tri
     */
-  tri = "";
+  tri = "collaborateur";
+
+  /**
+   * Options pour choisir le nombre de page à affiche
+   */
+  pageOption = [ 5, 15, 20, 30, 50];
+
+   /**
+   * Liste des business units du collaborateur connecté
+   */
+  bus: Array<BusinessUnitDTO> = [];
+
   /**
-    * Pagination du tableau.
+   * Liste des id des business units des collaborateurs à afficher
    */
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  private busIds: Array<number> = [];
 
   /**
-    * Tri par les éléments du tableau selon la colonne choisie.
+   * Nombre total d'élément du tableau
    */
-  @ViewChild(MatSort) sort: MatSort;
+  taille: number;
+
 
   /**
     * Spécifie si la liste des référents est en cours de chargement et d'écriture dans le tableau.
     */
   chargement = true;
   
-  constructor(private service: CollaborateursService) {}
+  constructor(private service: CollaborateursService, private collaborateurConnecte: CollaborateurConnecte) {}
 
   ngOnInit() {
-    this.updateDataSource();
+    this.setBUsId();
   }
 
   /**
@@ -87,12 +107,97 @@ export class ReferentsComponent implements OnInit {
     * 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() {
-    this.referentsDisponiblesSubscription = this.service.getCollaborateurs(this.roles,[1],this.asc, this.numPage, this.parPage, this.search, this.tri).subscribe(
+    if(this.busIds.length == 0) {
+      this.taille = 0;
+      this.dataSource = new MatTableDataSource(undefined);
+      return;
+    }
+    this.referentsDisponiblesSubscription = this.service.getCollaborateurs(this.roles, this.busIds,this.asc, this.numPage, this.parPage, this.search, this.tri).subscribe(
       referents =>  this.dataSource = new MatTableDataSource(referents),
       err => console.log(err)
     );
-    //this.dataSource.paginator = this.paginator;
-    //this.dataSource.sort = this.sort;
+    this.referentsDisponiblesCountSubscription = this.service.getCollaborateursCount(this.roles, this.busIds, this.asc, this.numPage, this.parPage, this.search, this.tri).subscribe(
+      count =>  this.taille=count,
+      err => console.log(err)
+    );
+  }
+
+  /**
+   * 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();
+  }
+
+
+  /**
+   * 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();
+  }
+
+  /**
+   * création de la liste des business unit du collaborateur connecté pour afficher les checkboxes
+   */
+  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;
+    }
+  }
+
+  /**
+   * 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();
   }
 
   /**

src/app/referents/referents.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { RouterModule } from '@angular/router';
-
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MaterialModule } from "@shared/angular-material/angular-material.module";
 
 import {NavMenuModule} from '@shared/nav-menu/nav-menu.module';
@@ -19,7 +19,9 @@ import { ReferentsRoutingModule } from './referents.routing.module';
     CommonModule,
     MaterialModule,
     NavMenuModule,
+    FormsModule,
     RouterModule,
+    ReactiveFormsModule,
     ReferentsRoutingModule
   ],
 })