Finalisation de la fonctionnalité de l'assignation du référent EP pour un ou plusieurs collaborateurs

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

@@ -10,6 +10,7 @@
     </mat-step>
 
     <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">
@@ -25,11 +26,18 @@
             </mat-chip-list>
         </ng-container>
 
-        <collaborateurs-table [typeRecherche]="typeRechercheCollaborateursEP" [rechercherParBU]="rechercherParBu" [roles]="rolesCollaborateurs" [displayedColumns]="displayedColumnsCollaborateurs" [rechercherParDate]="rechercherParDate" [collaborateursEP]="collaborateursEP" (eventEmitter)="ajoutCollaborateur($event)" ></collaborateurs-table>
+        <collaborateurs-table [typeRecherche]="typeRechercheCollaborateursEP" [rechercherParBU]="rechercherParBu" [roles]="rolesCollaborateurs" [displayedColumns]="displayedColumnsCollaborateurs" [rechercherParDate]="rechercherParDate" [collaborateursEP]="collaborateursEP" [collaborateursAjouts]="collaborateursSelectionnes" (eventEmitter)="ajoutCollaborateur($event)" ></collaborateurs-table>
     </mat-step>
 
     <mat-step label="Confirmation">
-
-        <button mat-button >Valider</button>
+        <p *ngIf="referentChoisi != undefined">Référent sélectionné : {{referentChoisi.nom}} {{referentChoisi.prenom}}</p>
+        <p> Collaborateurs sélectionnés :</p>
+            <mat-chip-list >
+                <mat-chip
+                    *ngFor="let collaborateur of collaborateursSelectionnes">
+                    {{collaborateur.nom}} {{collaborateur.prenom}}
+                </mat-chip>
+            </mat-chip-list>
+        <button mat-raised-button color="primary" (click)="mettreAJourReferentEP()">Valider</button>
     </mat-step>
 </mat-horizontal-stepper>

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

@@ -1,14 +1,21 @@
-import { Component, OnInit } from "@angular/core";
-import { CollaborateurDTO, CollaborateursService } from "@shared/api-swagger";
+import { Component, Inject } from "@angular/core";
+import { CollaborateurDTO, CollaborateursService, ReferentsEPService, ReferentEPDTO } from "@shared/api-swagger";
 import { collaborateurTypeRecherche } from "@shared/utils/cles";
+
+import {MatDialog, MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+  
+
 import { Subscription } from "rxjs";
+import { Router } from "@angular/router";
+
+
 
 @Component({
     selector: 'assignation-referent',
     templateUrl: './assignation-referent.component.html'
 })
-export class AssignationReferentComponent implements OnInit {
-
+export class AssignationReferentComponent {
     rechercherParDate: boolean = false;
 
     rechercherParBu: boolean = true;
@@ -40,13 +47,13 @@ export class AssignationReferentComponent implements OnInit {
     
     collaborateurSubscription: Subscription;
 
-    constructor(private collaborateurService: CollaborateursService) {}
-
-    ngOnInit() {
+    referentEPSubscription: Subscription;
 
+    constructor(private collaborateurService: CollaborateursService, private referentEPService: ReferentsEPService, private dialog: MatDialog,
+        private snackBar: MatSnackBar) {
     }
 
-    choixReferent(event) {
+    choixReferent(event: any) {
         this.referentChoisi = event.collaborateur;
         this.setCollaborateurEP();
     }
@@ -55,21 +62,101 @@ export class AssignationReferentComponent implements OnInit {
         this.collaborateurSubscription = this.collaborateurService.getCollaborateursByReferent(this.referentChoisi.id).subscribe(
             collaborateurs => {
                 this.collaborateursEP = collaborateurs;
-
+                this.collaborateursSelectionnes = this.collaborateursSelectionnes.filter(c => !this.contientCollaborateur(this.collaborateursEP, c));
             },
             error => console.log(error)
         );
     }
 
     ajoutCollaborateur(event:any) {
-        console.log(event);
-        if(!this.collaborateursSelectionnes.includes(event.collaborateur))
+        if(event.type != "collaborateur")
+            return;
+        if(event.collaborateur.id == this.referentChoisi.id) {
+            this.openSnackBar("Un collaborateur ne peut pas être son propre référent");
+            return;
+        }
+        if(this.contientCollaborateur(this.collaborateursSelectionnes, event.collaborateur)){
+            this.enleverCollaborateur(event.collaborateur);
+            return;
+        }
+        if(this.contientCollaborateur(this.collaborateursEP, event.collaborateur)){
+            this.openSnackBar("Le référent choisi est déjà le référent EP du collaborateur sélectionné")
+            return;
+        }
         this.collaborateursSelectionnes.push(event.collaborateur);
-        console.log(this.collaborateursSelectionnes);
+    }
+
+    peutAjouterCollaborateur(event) : boolean {
+        return event.type == "collaborateur" && !this.collaborateursSelectionnes.some(event.collaborateur) && !this.collaborateursEP.includes(event.collaborateur);
+    }
+
+    contientCollaborateur(listes: CollaborateurDTO[], collaborateur: CollaborateurDTO ) : boolean {
+        return listes.some(c => c.id == collaborateur.id);
     }
 
     enleverCollaborateur(collaborateur: CollaborateurDTO) {
         this.collaborateursSelectionnes = this.collaborateursSelectionnes.filter(c => c.id != collaborateur.id);
     }
 
+    mettreAJourReferentEP() {
+        const  referentEP :ReferentEPDTO = {
+            idReferent: this.referentChoisi.id,
+            idsCollaborateur: this.collaborateursSelectionnes.map( collaborateur => collaborateur.id)
+        };
+        this.referentEPSubscription = this.referentEPService.updateCollaborateursReferent(referentEP, this.referentChoisi.id).subscribe(
+            () => this.openDialog(),
+            err => console.log(err)
+        )
+    }
+
+    openDialog() {
+        this.dialog.open(DialogAssignationReferentComponent, { disableClose: true, data: this.referentChoisi.id});
+    }
+
+    openSnackBar(message: string) {
+        this.snackBar.open(message,"", {
+            duration: 5000,
+            horizontalPosition: "center",
+            verticalPosition: "top",
+          });
+    }
+
+    /*
+    etapeAccessible(etape: number) {
+        switch(etape) {
+            case 1:
+                if(this.referentChoisi == undefined)
+                    this.openSnackBar("Vous devez choisir un référent avant d'accéder à l'étape 2");
+                break;
+            case 2:
+                if(this.collaborateursSelectionnes.length == 0)
+                    this.openSnackBar("Vous devez sélectionner au moins un collaborateur pour accéder à l'étape de confirmation");
+                break;
+        }
+    }*/
+
+}
+
+@Component({
+    selector: "dialog-assignation-referent",
+    templateUrl: "dialog-assignation-referent.html"
+})
+export class DialogAssignationReferentComponent {
+    constructor(private  dialogRef: MatDialogRef<DialogAssignationReferentComponent>, @Inject(MAT_DIALOG_DATA) private data: string, private router: Router) {
+    }
+
+
+    home() {
+        this.router.navigate(["/home"]);
+        this.dialogRef.close();
+    }
+
+    detailsReferent() {
+        this.router.navigate(["/referents", this.data]);
+        this.dialogRef.close();
+    }
+
+    nouvelleAssignation() {
+        location.reload();
+    }
 }

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

@@ -0,0 +1,4 @@
+<p>La mise à jour du référent a été effectué avec succès</p>
+<button mat-raised-button color="primary" (click)="home()">Retourner à l'accueil</button>
+<button mat-raised-button color="primary" (click)="nouvelleAssignation()">Effectuer une nouvelle assignation référent</button>
+<button mat-raised-button color="primary" (click)="detailsReferent()">Accéder aux détails du référent</button> 

src/app/referents/referents.module.ts

@@ -10,11 +10,12 @@ 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';
-import { AssignationReferentComponent } from "./assignation-referent/assignation-referent.component";
+import { AssignationReferentComponent, DialogAssignationReferentComponent } from "./assignation-referent/assignation-referent.component";
 
 @NgModule({
   declarations: [ DetailsReferentComponent,
-    ReferentsComponent, AssignationReferentComponent
+    ReferentsComponent, AssignationReferentComponent,
+    DialogAssignationReferentComponent
   ],
   exports: [ ReferentsComponent
   ],

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

@@ -18,7 +18,7 @@ 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 {MatSnackBarModule} from '@angular/material/snack-bar';
 
 import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NgxMatNativeDateModule } from '@angular-material-components/datetime-picker';
 
@@ -36,7 +36,7 @@ import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NgxMatNativeDateMod
     NgxMatDatetimePickerModule, MatDatepickerModule,
     NgxMatNativeDateModule, MatNativeDateModule,
     MatCheckboxModule, MatSelectModule, MatStepperModule,
-    MatChipsModule
+    MatChipsModule, MatSnackBarModule
   ],
   exports : [MatCardModule,
     MatButtonModule, MatMenuModule,
@@ -47,7 +47,7 @@ import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NgxMatNativeDateMod
     NgxMatDatetimePickerModule, MatDatepickerModule,
     NgxMatNativeDateModule, MatNativeDateModule,
     MatCheckboxModule, MatSelectModule, MatStepperModule,
-    MatChipsModule
+    MatChipsModule, MatSnackBarModule
   ]
 })
 export class MaterialModule {}

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

@@ -1,7 +1,7 @@
 .collaborateurAjoute {
-    background-color: dodgerblue;
+    background-color: #5cb85c;
 }
 
 .dejaCollaborateurEP {
-    background-color: red;
+    background-color: #337ab7;
 }

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

@@ -16,11 +16,7 @@
 
   <!--Checkboxes des BU-->
   <ng-container *ngIf="rechercherParBU">
-    <ul>
-      <li *ngFor="let bu of bus">
-        <mat-checkbox (change)="updateCheckbox($event.checked,bu)" [checked]="true"> {{bu.nom}}</mat-checkbox>
-        </li>
-    </ul>
+        <mat-checkbox *ngFor="let bu of bus" (change)="updateCheckbox($event.checked,bu)" [checked]="true"> {{bu.nom}}</mat-checkbox>
   </ng-container> 
   
   <ng-container *ngIf="rechercherParDate">
@@ -72,7 +68,7 @@
     </ng-container>
 
     <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+    <mat-row [ngClass]="setClassCouleurLigne(row)" *matRowDef="let row; columns: displayedColumns;"></mat-row>
   </mat-table>
 
     <mat-paginator #paginator

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

@@ -278,6 +278,19 @@ export class CollaborateursTableComponent implements OnInit {
         }
      }
       
+     setClassCouleurLigne(collaborateur: CollaborateurDTO) {
+        if(this.contientCollaborateur(this.collaborateursAjouts,collaborateur))  {
+          return "collaborateurAjoute";
+        }
+        if(this.contientCollaborateur(this.collaborateursEP,collaborateur))
+          return "dejaCollaborateurEP"
+        return "";
+     }
+
+     contientCollaborateur(listes: CollaborateurDTO[], collaborateur: CollaborateurDTO ) : boolean {
+          return listes.some(c => c.id == collaborateur.id);
+      }
+
       /**
        * Mettre à jour la liste des 
        * @param event case cochée ou décochée
@@ -307,3 +320,4 @@ export class CollaborateursTableComponent implements OnInit {
         }
       }
     }
+