Ajout de la modification d'une note

src/app/notes/details-note/details-note.component.html

@@ -4,7 +4,7 @@
     <mat-spinner></mat-spinner>
 </ng-container>
 <ng-container *ngIf="note != undefined">
-    <p>Collaborateur : {{ note.collaborateur.nom }} {{ note.collaborateur.prenom }}  <button mat-raised-button [routerLink]="['/collaborateurs', note.collaborateur.id]">Voir les détails</button></p>
+    <p>Collaborateur : {{ note.collaborateur.nom }} {{ note.collaborateur.prenom }}  <button mat-raised-button color="link" [routerLink]="['/collaborateurs', note.collaborateur.id]">Voir les détails</button></p>
     <p>Créé le {{ note.dateCreation | date : 'dd/MM/yyyy à hh:mm'}}</p>
     <p>Dernère mise à jour le {{ note.dateMiseAjour | date : 'dd/MM/yyyy à hh:mm'}}</p>
         
@@ -15,4 +15,6 @@
             <textarea matInput disabled >{{note.texte}}</textarea>
         </mat-form-field>
     </div>
+    <button mat-raised-button [routerLink]="['/notes', note.id, 'edit']">Modifier la note </button>
+    <button mat-raised-button color="warn">Supprimer la note</button>
 </ng-container>

src/app/notes/modifier-note/modifier-note.component.html

@@ -0,0 +1,31 @@
+<app-nav-menu></app-nav-menu>
+<h2>Mise à jour d'une note</h2>
+
+<ng-container *ngIf="noteForm == undefined">
+    <mat-spinner></mat-spinner>
+</ng-container >
+
+<ng-container *ngIf="noteForm != undefined">
+    <div>
+        <p>Collaborateur : {{ noteForm.value.collaborateur.nom}} {{ noteForm.value.collaborateur.prenom}}</p>
+    </div>
+    <form [formGroup]="noteForm" >
+        <div>
+            <mat-form-field>
+                <input matInput placeholder="Titre" formControlName="titre">
+              </mat-form-field>
+        </div>
+    
+        <div>
+            <mat-form-field appearance="fill">
+                <mat-label>Contenu de la note</mat-label>
+                <textarea matInput formControlName="texte"></textarea>
+            </mat-form-field>
+        </div>
+            
+        <div>
+            <button mat-raised-button (click)="mettreAJourNote()">Enregistrer les modification</button>
+            <button mat-raised-button (click)="annuler()">Annuler</button>
+        </div>
+    </form>
+</ng-container>

src/app/notes/modifier-note/modifier-note.component.ts

@@ -0,0 +1,83 @@
+import { SelectorContext } from "@angular/compiler";
+import { Component, OnInit  } from "@angular/core";
+import { FormBuilder, FormGroup } from "@angular/forms";
+import { MatDialog } from "@angular/material/dialog";
+import { ActivatedRoute, Router } from "@angular/router";
+import { CollaborateurDTO, DetailsNoteDTO, NotesService } from "@shared/api-swagger";
+import { Subscription } from "rxjs";
+
+@Component({
+    selector: "modifier-note",
+    templateUrl: "./modifier-note.component.html"
+})
+export class ModifierNoteComponent implements OnInit{
+    
+    chercherNoteSubscription: Subscription;
+    
+    modifierNoteSubscription: Subscription;
+    
+    dialogSubscription: Subscription;
+
+    collaborateurChoisi: CollaborateurDTO;
+
+    id: any;
+
+    noteForm: FormGroup;
+
+    constructor(private noteService: NotesService, private fb: FormBuilder, private router: Router,
+            private dialog: MatDialog, private activatedRoute:ActivatedRoute) {}
+
+    ngOnInit() {
+        this.id = this.activatedRoute.snapshot.paramMap.get("id");
+        if(this.id == undefined)
+            return;
+        this.chercherNoteSubscription = this.noteService.getNoteById(this.id).subscribe(
+            note => this.setNote(note),
+            err => console.log(err)
+        );
+    }
+
+
+    setNote(note: DetailsNoteDTO) {
+        this.noteForm = this.fb.group(
+            {
+                id: [note.id],
+                idAuteur: [note.idAuteur],
+                titre: [note.titre],
+                texte: [note.texte],
+                collaborateur: [note.collaborateur],
+                dateCreation: [note.dateCreation]
+            }
+        );
+    }
+
+    mettreAJourNote() {
+        let noteModifiee : DetailsNoteDTO = this.noteForm.value;
+        noteModifiee.dateMiseAjour = new Date();
+        this.modifierNoteSubscription = this.noteService.updateNote(noteModifiee, this.id).subscribe(
+            note => {
+                console.log(note);
+                this.router.navigate(["/notes", note.id]);
+            },
+            err => console.log(err)
+        );
+    }
+
+    annuler() {
+        this.router.navigate(["/notes", this.noteForm.value.id]);
+    }
+
+    ngOnDestroy() {
+        if(this.dialogSubscription != undefined) {
+            this.dialogSubscription.unsubscribe();
+        }
+
+        if(this.modifierNoteSubscription != undefined) {
+            this.modifierNoteSubscription.unsubscribe();
+        }
+
+        if(this.chercherNoteSubscription != undefined) {
+            this.chercherNoteSubscription.unsubscribe();
+        }
+    }
+}

src/app/notes/notes.module.ts

@@ -10,13 +10,14 @@ import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { DialogChoixCollaborateurNoteComponent, NouvelleNoteComponent } from "./nouvelle-note/nouvelle-note.component";
 import { MatTablesModule } from "@shared/mat-tables/mat-tables.module";
 import { DetailsNoteComponent } from "./details-note/details-note.component";
+import { ModifierNoteComponent } from "./modifier-note/modifier-note.component";
 
 
 @NgModule({
     declarations: [ 
         NotesComponent, NouvelleNoteComponent, 
         DialogChoixCollaborateurNoteComponent,
-        DetailsNoteComponent
+        DetailsNoteComponent, ModifierNoteComponent
     ],
     imports: [
       CommonModule,

src/app/notes/notes.routing.module.ts

@@ -9,10 +9,12 @@ import { AuthGuard } from "@shared/auth/auth.guard";
 import { paths_notes } from "@shared/utils/paths";
 import { NouvelleNoteComponent } from './nouvelle-note/nouvelle-note.component';
 import { DetailsNoteComponent } from './details-note/details-note.component';
+import { ModifierNoteComponent } from './modifier-note/modifier-note.component';
 
 const routes: Routes = [
     { path: paths_notes.ajoutNote, component: NouvelleNoteComponent, canActivate: [AuthGuard]},
     { path: paths_notes.get, component: DetailsNoteComponent, canActivate: [AuthGuard]},
+    { path: paths_notes.edit, component: ModifierNoteComponent, canActivate: [AuthGuard]},
     { path: "", component: NotesComponent, canActivate: [AuthGuard]},
 ]