Ajout d'un module pour gérer les mat-table réutilisables avec mise à jour de code de la liste des référents

src/app/app.module.ts

@@ -15,7 +15,6 @@ import { ApiModule } from '@shared/api-swagger'
 
 import { HomeModule } from './home';
 import { CollaborateursModule } from './collaborateurs';
-
 import { ReferentsModule } from './referents';
 import { FormationsModule } from './formations';
 import { DemandesFormationModule } from './demandes-formation';
@@ -24,7 +23,7 @@ import { EpSaisieModule } from "./ep-saisie";
 import { EpModule } from "./ep"
 import { AuthModule } from '@shared/auth/auth.module';
 
-
+import { MatTablesModule } from "@shared/mat-tables/mat-tables.module";
 
 @NgModule({
   declarations: [
@@ -37,7 +36,7 @@ import { AuthModule } from '@shared/auth/auth.module';
     HomeModule, CollaborateursModule,
     ReferentsModule, FormationsModule,
     DemandesFormationModule, DemandesDelegationModule,
-    EpSaisieModule, EpModule
+    EpSaisieModule, EpModule, MatTablesModule
     
   ],
   providers: [],

src/app/collaborateurs/collaborateurs.component.ts

@@ -1,9 +1,8 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component } from '@angular/core';
 
 
 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.
@@ -16,7 +15,6 @@ import { Router } from '@angular/router';
 })
 export class CollaborateursComponent {
 
-  //@ViewChild(CollaborateursTableComponent) collaborateursTableComponent; 
   /**
    * Type de la recherche à indiquer au composant fils qui affiche la liste des collaborateurs
    */

src/app/collaborateurs/collaborateurs.module.ts

@@ -4,7 +4,6 @@ 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";
@@ -14,6 +13,7 @@ import { EvaluationComponent } from "./formations-collaborateur/details-evaluati
 import { EditEvaluationComponent } from "./formations-collaborateur/edit-evaluation/edit-evaluation.component";
 import { FormationsCollaboateurComponent } from "./formations-collaborateur/formations-collaborateur.component";
 
+import { MatTablesModule } from "@shared/mat-tables/mat-tables.module";
 import { CollaborateursRoutingModule } from "./collaborateurs.routing.module";
 
 /**
@@ -23,7 +23,7 @@ import { CollaborateursRoutingModule } from "./collaborateurs.routing.module";
   declarations: [
     CollaborateursComponent, DetailsCollaborateurComponent,
     DetailsCollaborateurComponent, EvaluationComponent, EditEvaluationComponent,
-    FormationsCollaboateurComponent, CollaborateursTableComponent
+    FormationsCollaboateurComponent
   ],
   exports: [
     CollaborateursComponent
@@ -35,6 +35,7 @@ import { CollaborateursRoutingModule } from "./collaborateurs.routing.module";
     ReactiveFormsModule,
     MaterialModule,
     NavMenuModule,
+    MatTablesModule,
     CollaborateursRoutingModule,
     RouterModule
   ],

src/app/referents/referents.component.html

@@ -1,51 +1,4 @@
 <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" (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>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;" [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>
+<collaborateurs-table [typeRecherche]="typeRecherche" [rechercherParBU]="rechercherParBU" [roles]="roles" [displayedColumns]="displayedColumns" [rechercherParDate]="rechercherParDate" (eventEmitter)="event($event)" ></collaborateurs-table>

src/app/referents/referents.component.ts

@@ -1,15 +1,7 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-
-import { Subscription } from 'rxjs';
-
-import {MatTableDataSource} from '@angular/material/table';
-
-import { CollaborateursService } from "@shared/api-swagger/api/api";
-
-import { BusinessUnitDTO, CollaborateurDTO } from "@shared/api-swagger/model/models";
-
-import { cles } from "@shared/utils/cles";
+import { Component } from '@angular/core';
 
+import { collaborateurTypeRecherche } from "@shared/utils/cles";
+import { Router } from '@angular/router';
 
 /**
     */
@@ -17,196 +9,41 @@ import { cles } from "@shared/utils/cles";
   selector: 'app-referents',
   templateUrl: './referents.component.html'
 })
-export class ReferentsComponent implements OnInit {
+export class ReferentsComponent {
 
-  /**
-    * Ordre de tri à envoyer au serveur (true : croissant, false : décroissantà).
-  */
-  asc = true;
-  /**
-    * Numéro de la page à afficher dans le tableau.
-    */
-  numPage = 1;
-  /**
-    * Nombre d'élément du tableau à affiche en une page.
-    */
-  parPage = 15;
-  /**
-    * Rôle des collaborateurs à récupérer via le service collaborateur, ici nous ne voulons que les collaborateurs (pour le moment...).
-    */
 
-    /**
-      * Observable pour faire des requêtes sur le service référent.
-      */
-  private referentsDisponiblesSubscription : Subscription;
+  constructor(private router: Router) {}
+
+
+  event(event : any) {
+    this.router.navigate(["/referents", event.collaborateur.id]);
+  }
 
   /**
-    * Observable pour faire des requêtes sur le service référent.
-    */
-  private referentsDisponiblesCountSubscription : Subscription;
+   * Type de la recherche à indiquer au composant fils qui affiche la liste des collaborateurs
+   */
+  typeRecherche: string = collaborateurTypeRecherche.referents;
 
   /**
     * Liste des colonnes du tableau à afficher.
     */
   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
-    */
-  dataSource : MatTableDataSource<CollaborateurDTO>;
   /**
     * Liste des rôles pour préciser que l'on souhaite récupérer les commerciaux
     */
   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 = "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> = [];
-
-  /**
-   * Liste des id des business units des collaborateurs à afficher
+   * Indique si la recherche pas BU est activée ou non
    */
-  private busIds: Array<number> = [];
+  rechercherParBU: boolean = true;
 
   /**
-   * Nombre total d'élément du tableau
+   * Indique si la recherhe
    */
-  taille: number;
-
+  rechercherParDate: boolean = false;
 
-  /**
-    * 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) {}
   
-  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() {
-    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.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(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;
-    }
-  }
-
-  /**
-   * 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();
-  }
-
-  /**
-    * 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.referentsDisponiblesSubscription != undefined) {
-      this.referentsDisponiblesSubscription.unsubscribe();
-    }
-  }
 }

src/app/referents/referents.module.ts

@@ -5,13 +5,15 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MaterialModule } from "@shared/angular-material/angular-material.module";
 
 import {NavMenuModule} from '@shared/nav-menu/nav-menu.module';
+import { MatTablesModule } from "@shared/mat-tables/mat-tables.module";
 
 import { ReferentsComponent } from './referents.component';
 import { DetailsReferentComponent } from './details-referent/details-referent.component';
 import { ReferentsRoutingModule } from './referents.routing.module';
 
 @NgModule({
-  declarations: [ DetailsReferentComponent, ReferentsComponent
+  declarations: [ DetailsReferentComponent,
+    ReferentsComponent
   ],
   exports: [ ReferentsComponent
   ],
@@ -22,7 +24,8 @@ import { ReferentsRoutingModule } from './referents.routing.module';
     FormsModule,
     RouterModule,
     ReactiveFormsModule,
-    ReferentsRoutingModule
+    ReferentsRoutingModule,
+    MatTablesModule
   ],
 })
 export class ReferentsModule {}

src/app/shared/mat-tables/collaborateurs-table/collaborateurs.table.html

@@ -20,26 +20,28 @@
       <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>
+    </ul>
   </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>
+  <ng-container *ngIf="rechercherParDate">
+    <!-- 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>
+  </ng-container>
 
 
   <!-- Affichage de la liste des collaborateurs -->
@@ -64,8 +66,8 @@
     <ng-container matColumnDef="referent">
       <mat-header-cell *matHeaderCellDef >Référent</mat-header-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 *ngIf="row.referent" (click)="emitEvent(row.referent,'referent')">{{ row.referent.prenom }} {{ row.referent.nom }}</mat-cell>
+        <mat-cell *ngIf="!row.referent">Aucun référent</mat-cell>
       </mat-cell>
     </ng-container>
 

src/app/shared/mat-tables/collaborateurs-table/collaborateurs.table.ts

@@ -108,6 +108,10 @@ export class CollaborateursTableComponent implements OnInit {
      */
     @Input() rechercherParBU: boolean = false;
 
+    /**
+     * 
+     */
+    @Input() rechercherParDate: boolean = true;
     /**
      * Liste des rôles des collaborateurs a affichés
      */
@@ -137,11 +141,11 @@ export class CollaborateursTableComponent implements OnInit {
 
     constructor(private service: CollaborateursService) {}
 
-    emitEvent(referent: CollaborateurDTO, type: string) {
+    emitEvent(collaborateur: CollaborateurDTO, type: string) {
         const event = {
             type : type,
-            collaborateur: referent
-        };
+            collaborateur: collaborateur
+        }
         this.eventEmitter.emit(event);
     }
 

src/app/shared/mat-tables/mat-tables.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { MaterialModule } from "../angular-material/angular-material.module";
+import { CollaborateursTableComponent } from "@shared/mat-tables/collaborateurs-table/collaborateurs.table";
+
+/**
+  * Module des nav utilisés pour chaque role
+  */
+@NgModule({
+  declarations: [ 
+    CollaborateursTableComponent 
+  ],
+  imports: [
+    MaterialModule,
+    CommonModule,
+    FormsModule
+  ],
+  exports: [CollaborateursTableComponent]
+})
+export class MatTablesModule {}