From f558516a1ae8242490ead8aedf369b66bf42de97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yana=C3=ABl=20GRETTE?= <yanael.grette@outlook.com>
Date: Thu, 4 Feb 2021 14:12:47 +0100
Subject: [PATCH] =?UTF-8?q?Ajout=20de=20deux=20datepicker=20pour=20r=C3=A9?=
 =?UTF-8?q?cup=C3=A9rer=20les=20collaborateurs=20en=20fonction=20de=20leur?=
 =?UTF-8?q?=20date=20d'arriv=C3=A9e=20dans=20l'entreprise?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../collaborateurs.component.html             | 20 +++++++++
 .../collaborateurs.component.ts               | 44 +++++++++++++++++--
 .../collaborateurs/collaborateurs.module.ts   |  3 +-
 3 files changed, 62 insertions(+), 5 deletions(-)

diff --git a/src/app/collaborateurs/collaborateurs.component.html b/src/app/collaborateurs/collaborateurs.component.html
index 568abc6..ba9949d 100644
--- a/src/app/collaborateurs/collaborateurs.component.html
+++ b/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">
diff --git a/src/app/collaborateurs/collaborateurs.component.ts b/src/app/collaborateurs/collaborateurs.component.ts
index ae72033..b97dd90 100644
--- a/src/app/collaborateurs/collaborateurs.component.ts
+++ b/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();
diff --git a/src/app/collaborateurs/collaborateurs.module.ts b/src/app/collaborateurs/collaborateurs.module.ts
index 8b863b5..b742d6b 100644
--- a/src/app/collaborateurs/collaborateurs.module.ts
+++ b/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,