Implémentation de l'ajout, la modification et la suppression d'un commentaire assistant

src/app/ep/details-ep/details-ep.component.html

@@ -57,7 +57,7 @@
         </mat-tab>
 
         <mat-tab label="Commentaire assistant">
-            <ep-commentaires-assistant [ep]="ep"></ep-commentaires-assistant>
+            <ep-commentaires-assistant [ep]="ep" [collaborateurConnecte]="collaborateurConnecte"></ep-commentaires-assistant>
         </mat-tab>
 
         <mat-tab label="Choix de dates" *ngIf="afficherChoixDates()" > 

src/app/ep/details-ep/details-ep.component.ts

@@ -1,7 +1,8 @@
 import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
-import { affichageStatut, EpDTO, EpService, StatutEp, estEPEnCours, estEPSigne, estEPEnAttenteSignatureCollaborateur, estEPEffectue } from "@shared/api-swagger";
+import { affichageStatut, EpDTO, EpService, StatutEp, estEPEnCours, estEPSigne, estEPEnAttenteSignatureCollaborateur, estEPEffectue, CollaborateurDTO } from "@shared/api-swagger";
 import { AuthService } from "@shared/auth/auth.service";
+import { cles } from "@shared/utils/cles";
 import { Role } from "@shared/utils/roles";
 import { Subscription } from "rxjs";
 
@@ -22,6 +23,8 @@ export class DetailsEPComponent implements OnInit {
     role : Role;
     roleUtilisateur: string;
 
+    collaborateurConnecte : CollaborateurDTO;
+
     ep : EpDTO;
     constructor(private epService : EpService, private route : ActivatedRoute, private authService: AuthService) {
         this.roleUtilisateur = authService.firstRole;
@@ -36,8 +39,19 @@ export class DetailsEPComponent implements OnInit {
             },
             err => console.log(err) 
         );
+        this.setCollaborateurConnecte();
     }
 
+    setCollaborateurConnecte() {
+        if(sessionStorage.getItem(cles.sessionKeyConnectee) == undefined) {
+          setTimeout( () => this.setCollaborateurConnecte(), 1000);
+        }
+        else {
+          this.collaborateurConnecte = JSON.parse(sessionStorage.getItem(cles.sessionKeyConnectee));
+
+        }
+      }
+
     afficherDemandesFormationEtEngagements() {
         return estEPSigne(this.ep.statut) || estEPEnAttenteSignatureCollaborateur(this.ep.statut);
     }

src/app/ep/details-ep/ep-commentaires-assistant/dialog-ep-ajouter-commentaire-assistant.html

@@ -0,0 +1,12 @@
+<h3 *ngIf="nouveauCommentaire">Ajouter un commentaire</h3>
+<h3 *ngIf="!nouveauCommentaire">Modifier un commentaire</h3>
+
+<div>
+    <mat-form-field appearance="fill">
+        <mat-label>Commentaire</mat-label>
+        <textarea matInput [(ngModel)]="commentaire"></textarea>
+    </mat-form-field>
+</div>
+
+<button mat-raised-button color="primary" (click)="enregistrer()">Enregister les modifications</button>
+<button mat-raised-button color="warn" (click)="annuler()">Annuler</button>

src/app/ep/details-ep/ep-commentaires-assistant/dialog-ep-supprimer-commentaire-assistant.html

@@ -0,0 +1,3 @@
+<p> Êtes-vous certain de vouloir supprimer votre commentaire ?</p>
+<button mat-raised-button color="warn" (click)="valider(true)">Supprimer</button>
+<button mat-raised-button color="primary" (click)="valider(false)">Annuler</button>

src/app/ep/details-ep/ep-commentaires-assistant/ep-commentaires-assistant.component.html

@@ -1,14 +1,31 @@
-<ng-container *ngIf="ep.commentairesAssistant == undefined || ep.commentairesAssistant == []">
+<ng-container *ngIf="ep.commentairesAssistant == undefined || ep.commentairesAssistant.length == 0">
     Aucun commentaire assistant
 </ng-container>
 
+<button mat-raised-button *ngIf="!aDejaCommente()" (click)="nouveauCommentaire()">Ajouter un commentaire</button>
 
-<ng-container *ngIf="ep.commentairesAssistant != undefined && ep.commentairesAssistant != []">
+<ng-container *ngIf="ep.commentairesAssistant != undefined && ep.commentairesAssistant.length != 0">
     Liste des commentaires assistants :
-    <ul>
-        <li *ngFor="let commentaire of ep.commentairesAssistant">
-            <p>Assistant : {{commentaire.assistant}}</p>
-            <p>{{commentaire.commentaire}}</p>
-        </li>
-    </ul>
+    <mat-card *ngFor="let commentaire of ep.commentairesAssistant">
+        <p>
+            {{commentaire.assistant}}
+            <ng-container *ngIf="commentaire.idAssistant == collaborateurConnecte.id">
+                <mat-icon (click)="modifierCommentaire(commentaire)">edit</mat-icon>
+                <mat-icon (click)="supprimerCommentaire(commentaire.id)">delete</mat-icon>
+            </ng-container>
+        </p>
+        <p>{{commentaire.commentaire}}</p>
+        
+    </mat-card>
+    <!--
+        <ul>
+            <li *ngFor="let commentaire of ep.commentairesAssistant">
+                <p>Assistant : {{commentaire.assistant}}</p>
+                <p>{{commentaire.commentaire}}</p>
+            </li>
+        </ul>
+    -->
 </ng-container>
+<mat-card>
+
+</mat-card>

src/app/ep/details-ep/ep-commentaires-assistant/ep-commentaires-assistant.component.ts

@@ -1,5 +1,9 @@
-import { Component, Input } from '@angular/core';
-import { EpDTO } from '@shared/api-swagger';
+import { analyzeAndValidateNgModules } from '@angular/compiler';
+import { Component, Inject, Input } from '@angular/core';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { CollaborateurDTO, CommentaireAssistantDTO, EpDTO } from '@shared/api-swagger';
+import { AuthService } from '@shared/auth/auth.service';
+import { Subscription } from 'rxjs';
 
 /**
   * Composant pour permettre au référent d'ajouter son commentaire et à tous les participants de le consulter
@@ -12,6 +16,116 @@ export class EpCommentairesAssistantComponent {
 
   @Input() ep : EpDTO;
 
-  constructor() {}
+  @Input() collaborateurConnecte : CollaborateurDTO;
 
+  dialogAjoutModificationSubscription : Subscription;
+  dialogSuppressionSubscription : Subscription;
+
+  constructor(private matDialog: MatDialog) {}
+
+
+  aDejaCommente() {
+    return this.ep.commentairesAssistant != undefined && this.ep.commentairesAssistant.some( c => c.idAssistant == this.collaborateurConnecte.id);
+  }
+
+  nouveauCommentaire() {
+    this.ouvrirSaisiCommentaire(undefined);
+  }
+    
+  modifierCommentaire(commentaire : CommentaireAssistantDTO) {
+     this.ouvrirSaisiCommentaire(commentaire);
+  }
+
+  supprimerCommentaire(id : number) {
+    const dialogRef: MatDialogRef<DialogEPSupprimerCommentaireAssistant> = this.matDialog.open(DialogEPSupprimerCommentaireAssistant);
+    this.dialogSuppressionSubscription = dialogRef.afterClosed().subscribe(
+      reponse => {
+        if(reponse)
+          this.ep.commentairesAssistant = this.ep.commentairesAssistant.filter( c => c.id != id);
+      }
+    );
+  }
+
+  ouvrirSaisiCommentaire(data?: any) {
+    const dialogRef: MatDialogRef<DialogEPAjouterCommentaireAssistant> = this.matDialog.open(DialogEPAjouterCommentaireAssistant, { data: data});
+    this.dialogAjoutModificationSubscription = dialogRef.afterClosed().subscribe(
+      reponse => {
+        if(reponse != undefined && reponse.nouveauCommentaire)
+          this.ajouterCommentaire(reponse.commentaire);
+      }
+    );
+  }
+
+  ajouterCommentaire(commentaire : CommentaireAssistantDTO) {
+    commentaire.idAssistant = this.collaborateurConnecte.id;
+    commentaire.assistant = this.collaborateurConnecte.nom + " " + this.collaborateurConnecte.prenom;
+    if(this.ep.commentairesAssistant == undefined) {
+      this.ep.commentairesAssistant = [];
+    }
+    this.ep.commentairesAssistant.push(commentaire);
+  }
+
+
+  ngOnDestroy() {
+    this.dialogAjoutModificationSubscription?.unsubscribe();
+    this.dialogSuppressionSubscription?.unsubscribe();
+  }
 }
+
+/**
+ * Composant pour faire afficher un pop up pour l'ajout d'un commentaire assistant
+ */
+@Component( {
+  selector: "dialog-ep-ajouter-commentaire",
+  templateUrl: "./dialog-ep-ajouter-commentaire-assistant.html"
+})
+export class DialogEPAjouterCommentaireAssistant {
+  commentaire : string = "";
+  nouveauCommentaire : boolean = true;
+  commentaireDTO : CommentaireAssistantDTO;
+
+  constructor(private dialogRef : MatDialogRef<DialogEPAjouterCommentaireAssistant>, @Inject(MAT_DIALOG_DATA) public data: CommentaireAssistantDTO) {
+    if(data != undefined) {
+      this.commentaireDTO = data;
+      this.commentaire = this.commentaireDTO.commentaire;
+      this.nouveauCommentaire = false;
+    }
+  }
+
+  enregistrer() {
+    if(this.nouveauCommentaire) {
+      this.commentaireDTO = {
+        idAssistant : "",
+        commentaire : this.commentaire
+      }
+    }
+    else {
+      this.commentaireDTO.commentaire = this.commentaire;
+    }
+    const reponse : any =  {
+      nouveauCommentaire: this.nouveauCommentaire,
+      commentaire : this.commentaireDTO
+    }
+    this.dialogRef.close(reponse);
+  }   
+
+  annuler() {
+    this.dialogRef.close(undefined);
+  }
+}
+
+/**
+ * Composant pour afficher un pop permettant la validation ou non de la suppression d'un commentaire
+ */
+@Component( {
+  selector: "dialog-ep-supprimer-commentaire-assistant",
+  templateUrl: "./dialog-ep-supprimer-commentaire-assistant.html"
+})
+export class DialogEPSupprimerCommentaireAssistant {
+  constructor( private dialogRef: MatDialogRef<DialogEPSupprimerCommentaireAssistant>) {}
+
+  valider(reponse : boolean) {
+    this.dialogRef.close(reponse);
+  }
+}
+

src/app/ep/ep.module.ts

@@ -16,12 +16,14 @@ import { DetailsEPComponent } from "./details-ep/details-ep.component";
 import { EpObjectifsComponent } from "./details-ep/ep-objectifs/ep-objectifs.component";
 import { EpParticipantsComponent } from "./details-ep/ep-participants/ep-participants.component";
 import { EpDemandeDelegationComponent } from "./details-ep/ep-demande-delegation/ep-demande-delegation.component";
-import { EpCommentairesAssistantComponent } from "./details-ep/ep-commentaires-assistant/ep-commentaires-assistant.component";
+import { DialogEPAjouterCommentaireAssistant, DialogEPSupprimerCommentaireAssistant, EpCommentairesAssistantComponent } from "./details-ep/ep-commentaires-assistant/ep-commentaires-assistant.component";
 import { EpEngagementsCompenent } from "./details-ep/ep-engagements/ep-engagements.component";
 import { EpPropositionsDatesComponent } from "./details-ep/ep-propositions-dates/ep-propositions-dates.component";
 import { EpChoixDateComponent } from "./details-ep/ep-choix-date/ep-choix-date.component";
 import { EpDemandesFormationComponent } from "./details-ep/ep-demandes-formation/ep-demandes-formation.component";
 
+
+
 /**
   * Module de l'ep
   */
@@ -30,7 +32,7 @@ import { EpDemandesFormationComponent } from "./details-ep/ep-demandes-formation
     EpComponent, EpSignesComponent, DetailsEPComponent, EpObjectifsComponent,
      EpParticipantsComponent, EpDemandeDelegationComponent, EpCommentairesAssistantComponent,
      EpEngagementsCompenent, EpPropositionsDatesComponent, EpChoixDateComponent,
-    EpDemandesFormationComponent
+    EpDemandesFormationComponent, DialogEPAjouterCommentaireAssistant, DialogEPSupprimerCommentaireAssistant
   ],
   exports: [EpComponent, DetailsEPComponent
   ],