Ajout de deux datepicker pour récupérer les collaborateurs en fonction de leur date d'arrivée dans l'entreprise

src/app/collaborateurs/collaborateurs.component.html

@@ -17,6 +17,9 @@
     </mat-button>
   </mat-form-field>
 
+  <!-- Datepicker début -->
+ 
+
   <!--Checkboxes des BU-->
   <ul>
     <li *ngFor="let bu of bus">
@@ -24,6 +27,23 @@
     </li>
   </ul>
 
+  <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">
     <ng-container matColumnDef="agence">

src/app/collaborateurs/collaborateurs.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit, OnDestroy, ViewChild, ViewChildren } from '@angular/core';
 
+import { MatDatepickerInputEvent } from '@angular/material/datepicker';
+
 import { Observable, Subscription } from 'rxjs';
 
 import {MatTableDataSource} from '@angular/material/table';
@@ -64,12 +66,25 @@ export class CollaborateursComponent implements OnInit {
     */
   tri = "";
 
+  /**
+   * Liste des business units du collaborateur connecté
+   */
   bus = [];
 
+  /**
+   * Liste des id des business units des collaborateurs à afficher
+   */
   busIds: Array<number> = [];
 
-  taille = 100;
+  /**
+   * Nombre total d'élément du tableau
+   */
+  taille: number;
+
 
+  /**
+   * Options pour choisir le nombre de page à affiche
+   */
   pageOption = [ 5, 15, 20, 30, 50];
 
   pageEvent: PageEvent;
@@ -88,6 +103,17 @@ export class CollaborateursComponent implements OnInit {
     * Spécifie si la liste des collaborateurs est en cours de chargement dans le tableau.
     */
   chargement = true;
+  
+  /**
+   * 
+   */
+  dateDebut = undefined;
+  
+  /**
+   * 
+   */
+  dateFin = undefined;
+
   constructor(private service: CollaborateursService, private collaborateurConnecte: CollaborateurConnecte) {}
 
   ngOnInit() {
@@ -100,11 +126,11 @@ 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, this.busIds, 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, 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).subscribe(
+    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)
     );
@@ -112,7 +138,13 @@ export class CollaborateursComponent implements OnInit {
     //this.dataSource.sort = this.sort;
   }
 
-
+  updateDateToUndefined(val : number) {
+    if(val == 1)
+      this.dateDebut = undefined;
+    if(val == 2)
+      this.dateFin = undefined;
+    this.updateDataSource();
+  }
 
   updatePageInfo(event) : PageEvent{
     this.parPage = event.pageSize;
@@ -121,6 +153,10 @@ export class CollaborateursComponent implements OnInit {
     return event;
   }
 
+  setDate(e : MatDatepickerInputEvent<any>, val:number) {
+    this.updateDataSource();
+  }
+
   setSearch() {
     this.numPage = 1;
     this.updateDataSource();

src/app/collaborateurs/collaborateurs.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
 import { MaterialModule } from "@shared/angular-material/angular-material.module";
@@ -32,6 +32,7 @@ import { CollaborateursRoutingModule } from "./collaborateurs.routing.module";
     //FormsModule,
     CommonModule,
     FormsModule,
+    ReactiveFormsModule,
     MaterialModule,
     NavMenuModule,
     CollaborateursRoutingModule,