implémentation de la récupération des collaborateurs dont le référent doit être mise à jour

src/app/referents/assignation-referent/assignation-referent.component.html

@@ -1,18 +1,35 @@
 <app-nav-menu></app-nav-menu>
 <h1>Assignation référent</h1>
 
-<p *ngIf="referentChoisi != undefined">Référent sélectionné : {{referentChoisi.nom}} {{referentChoisi.prenom}}</p>
 
 <mat-horizontal-stepper linear  #stepper>
     <mat-step label="Choix du référent" [completed]="referentChoisi != undefined">
+        <p *ngIf="referentChoisi == undefined">Veuillez sélectionner un référent</p>
+        <p *ngIf="referentChoisi != undefined">Référent sélectionné : {{referentChoisi.nom}} {{referentChoisi.prenom}}</p>
         <collaborateurs-table [typeRecherche]="typeRechercheReferent" [rechercherParBU]="rechercherParBu" [roles]="rolesReferents" [displayedColumns]="displayedColumnsReferent" [rechercherParDate]="rechercherParDate" (eventEmitter)="choixReferent($event)" ></collaborateurs-table>
     </mat-step>
 
-    <mat-step label="Choix des collaborateurs" [completed]="false">
+    <mat-step label="Choix des collaborateurs" [completed]="collaborateursSelectionnes.length != 0">
+        <p *ngIf="referentChoisi != undefined">Référent sélectionné : {{referentChoisi.nom}} {{referentChoisi.prenom}}</p>
+        <p *ngIf="collaborateursSelectionnes.length == 0">Veuillez sélectionner un collaborateur</p>
+        <ng-container *ngIf="collaborateursSelectionnes.length != 0">
+            <p> Collaborateurs sélectionnés :</p>
+            <mat-chip-list >
+                <mat-chip
+                    *ngFor="let collaborateur of collaborateursSelectionnes"
+                    [removable]="true"
+                    (removed)="enleverCollaborateur(collaborateur)">
+                    {{collaborateur.nom}} {{collaborateur.prenom}}
+                    <mat-icon matChipRemove>cancel</mat-icon>
+                </mat-chip>
+            </mat-chip-list>
+        </ng-container>
+
+        <collaborateurs-table [typeRecherche]="typeRechercheCollaborateursEP" [rechercherParBU]="rechercherParBu" [roles]="rolesCollaborateurs" [displayedColumns]="displayedColumnsCollaborateurs" [rechercherParDate]="rechercherParDate" [collaborateursEP]="collaborateursEP" (eventEmitter)="ajoutCollaborateur($event)" ></collaborateurs-table>
     </mat-step>
 
     <mat-step label="Confirmation">
-        <button mat-button matStepperPrevious>Retour</button>
+
         <button mat-button >Valider</button>
     </mat-step>
 </mat-horizontal-stepper>

src/app/referents/assignation-referent/assignation-referent.component.ts

@@ -17,12 +17,17 @@ export class AssignationReferentComponent implements OnInit {
     
     rolesReferents : string[] = ["Manager", "RA", "CP", "TL"];
 
-    rolesCollaborateurs : ["Collaborateur"];
     
     typeRechercheReferent: string = collaborateurTypeRecherche.referents;
     
     collaborateursEP: CollaborateurDTO[] = [];
     
+    rolesCollaborateurs : string[] = ["Collaborateur"];
+
+    typeRechercheCollaborateursEP = collaborateurTypeRecherche.collaborateurs;
+
+    collaborateursSelectionnes: CollaborateurDTO[] = [];
+    
     /**
         * Liste des colonnes du tableau à afficher pour les référents.
         */
@@ -31,7 +36,7 @@ export class AssignationReferentComponent implements OnInit {
     /**
         * Liste des colonnes du tableau à afficher.
         */
-    displayedColumns : string[] = ["businessunit", "collaborateur"];
+    displayedColumnsCollaborateurs : string[] = ["businessunit", "collaborateur", "datearrivee", "referent"];
     
     collaborateurSubscription: Subscription;
 
@@ -56,5 +61,15 @@ export class AssignationReferentComponent implements OnInit {
         );
     }
 
+    ajoutCollaborateur(event:any) {
+        console.log(event);
+        if(!this.collaborateursSelectionnes.includes(event.collaborateur))
+            this.collaborateursSelectionnes.push(event.collaborateur);
+        console.log(this.collaborateursSelectionnes);
+    }
+
+    enleverCollaborateur(collaborateur: CollaborateurDTO) {
+        this.collaborateursSelectionnes = this.collaborateursSelectionnes.filter(c => c.id != collaborateur.id);
+    }
 
 }

src/app/shared/angular-material/angular-material.module.ts

@@ -17,6 +17,8 @@ import {MatNativeDateModule} from '@angular/material/core';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatSelectModule} from '@angular/material/select';
 import {MatStepperModule} from '@angular/material/stepper';
+import {MatChipsModule} from '@angular/material/chips';
+
 
 import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NgxMatNativeDateModule } from '@angular-material-components/datetime-picker';
 
@@ -33,7 +35,8 @@ import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NgxMatNativeDateMod
     MatTabsModule, MatFormFieldModule,
     NgxMatDatetimePickerModule, MatDatepickerModule,
     NgxMatNativeDateModule, MatNativeDateModule,
-    MatCheckboxModule, MatSelectModule, MatStepperModule
+    MatCheckboxModule, MatSelectModule, MatStepperModule,
+    MatChipsModule
   ],
   exports : [MatCardModule,
     MatButtonModule, MatMenuModule,
@@ -43,7 +46,8 @@ import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NgxMatNativeDateMod
     MatTabsModule, MatFormFieldModule,
     NgxMatDatetimePickerModule, MatDatepickerModule,
     NgxMatNativeDateModule, MatNativeDateModule,
-    MatCheckboxModule, MatSelectModule, MatStepperModule
+    MatCheckboxModule, MatSelectModule, MatStepperModule,
+    MatChipsModule
   ]
 })
 export class MaterialModule {}

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

@@ -3,5 +3,5 @@
 }
 
 .dejaCollaborateurEP {
-
+    background-color: red;
 }