ajout et suppression de commentaire

src/app/components/comment-form/comment-form.component.css

@@ -3,3 +3,9 @@
   height: 8rem;
   resize: none;
 }
+
+form {
+  gap: 1rem;
+  display: flex;
+  flex-direction: column;
+}

src/app/components/comment-form/comment-form.component.html

@@ -1,4 +1,4 @@
 <form [formGroup]="commentForm" (ngSubmit)="onSubmit()">
   <textarea class="textarea" [(ngModel)]="commentForm.value.content" maxlength="512" formControlName="content" id="desc" pInputTextarea></textarea>
-  <p-button [disabled]="commentForm.invalid" type="submit" label="Envoyer"></p-button>
+  <p-button [ngStyle]="{ alignSelf: 'flex-end' }"  [disabled]="commentForm.invalid" type="submit" label="Envoyer"></p-button>
 </form>

src/app/components/comment-form/comment-form.component.ts

@@ -8,6 +8,7 @@ import {Author} from '../../models/author';
 import {Subscription} from 'rxjs';
 import {Comment} from '../../models/comment';
 import {MessageService} from 'primeng/api';
+import {NgStyle} from '@angular/common';
 
 @Component({
   selector: 'app-comment-form',
@@ -15,7 +16,8 @@ import {MessageService} from 'primeng/api';
   imports: [
     ReactiveFormsModule,
     InputTextareaModule,
-    Button
+    Button,
+    NgStyle
   ],
   templateUrl: './comment-form.component.html',
   styleUrl: './comment-form.component.css'

src/app/pages/login/login.component.ts

@@ -50,7 +50,7 @@ export class LoginComponent implements OnDestroy {
           .subscribe({
             next: (author: Author) => {
               console.log(author)
-              this.cookieService.set("author", JSON.stringify(author));
+              this.cookieService.set("author", JSON.stringify(author), {path: '/'});
               this.getAuthorCookie();
               this.router.navigate(['/']).then(() => {
                 this.successMessage('Connecté avec succès', 'Heureux de vous revoir ' + this.actualAuthor?.name)

src/app/pages/post/post.component.css

@@ -68,6 +68,13 @@ em {
   margin-top: 5rem;
 }
 
+.delete-dialog {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 3em;
+}
+
 .comment-div {
   display: flex;
   align-items: center;

src/app/pages/post/post.component.html

@@ -1,7 +1,7 @@
 <app-header></app-header>
 @if (concernedPost) {
   <div class="title-div">
-    <h1>{{ concernedPost?.title }}</h1>
+    <h1>{{ concernedPost.title }}</h1>
     <em>Publié le {{ concernedPost.publicationDate | date: "dd/MM/yyyy à HH:mm" }}</em>
   </div>
   <div [innerHTML]="concernedPost.body | safeHtml" class="body-content"></div>
@@ -18,10 +18,26 @@
           <em>{{ comment.authorName }}</em>
           <p class="{{ comment.authorRole }}">- {{ comment.authorRole }}</p>
           @if (comment.isUpdated) {
-            <p> Mis à jour le {{ comment.commentDate | date: "dd/MM/yyyy à HH:mm" }}</p>
+            <p> Modifié le {{ comment.commentDate | date: "dd/MM/yyyy à HH:mm" }}</p>
           } @else {
             <p> Envoyé le {{ comment.commentDate | date: "dd/MM/yyyy à HH:mm" }}</p>
           }
+          @if (actualAuthor) {
+            @if (comment.authorId === actualAuthor.id || actualAuthor.role === 'ADMIN') {
+              <p-button severity="danger" icon="pi pi-trash" (onClick)="setCommentDialogVisible(comment.id)"></p-button>
+              <p-dialog [closable]="false" [modal]="true" header='Supprimer le commentaire ?' [visible]="commentDeleteDialogMap.get(comment.id) ?? false">
+                <div class="delete-dialog">
+                  <p-button label="Annuler"
+                            icon="pi pi-times"
+                            severity="info"
+                            (click)="setCommentDialogHidden(comment.id)"/>
+                  <p-button label="Oui" icon="pi pi-trash"
+                            (click)="deleteComment(comment)"
+                            severity="danger"/>
+                </div>
+              </p-dialog>
+            }
+          }
         </div>
       } @else {
         <div class="comment-div">
@@ -29,10 +45,26 @@
           <em>{{ comment.authorName }}</em>
           <p class="{{ comment.authorRole }}">- {{ comment.authorRole }}</p>
           @if (comment.isUpdated) {
-            <p> Mis à jour le {{ comment.commentDate | date: "dd/MM/yyyy à HH:mm" }}</p>
+            <p> Modifié le {{ comment.commentDate | date: "dd/MM/yyyy à HH:mm" }}</p>
           } @else {
             <p> Envoyé le {{ comment.commentDate | date: "dd/MM/yyyy à HH:mm" }}</p>
           }
+          @if (actualAuthor) {
+            @if (comment.authorId === actualAuthor.id || actualAuthor.role === 'ADMIN') {
+              <p-button severity="danger" icon="pi pi-trash" (onClick)="setCommentDialogVisible(comment.id)"></p-button>
+              <p-dialog [closable]="false" [modal]="true" header='Supprimer le commentaire ?' [visible]="commentDeleteDialogMap.get(comment.id) ?? false">
+                <div class="delete-dialog">
+                  <p-button label="Annuler"
+                            icon="pi pi-times"
+                            severity="info"
+                            (click)="setCommentDialogHidden(comment.id)"/>
+                  <p-button label="Oui" icon="pi pi-trash"
+                            (click)="deleteComment(comment)"
+                            severity="danger"/>
+                </div>
+              </p-dialog>
+            }
+          }
         </div>
       }
       <p>{{ comment.content }}</p>

src/app/pages/post/post.component.ts

@@ -15,6 +15,8 @@ import {CookieService} from 'ngx-cookie-service';
 import {Author} from '../../models/author';
 import {CommentFormComponent} from '../../components/comment-form/comment-form.component';
 import {FooterComponent} from '../../components/footer/footer.component';
+import {Button} from 'primeng/button';
+import {DialogModule} from 'primeng/dialog';
 
 @Component({
   selector: 'app-post',
@@ -26,7 +28,9 @@ import {FooterComponent} from '../../components/footer/footer.component';
     CardModule,
     SafeHtmlPipe,
     CommentFormComponent,
-    FooterComponent
+    FooterComponent,
+    Button,
+    DialogModule
   ],
   templateUrl: './post.component.html',
   styleUrl: './post.component.css'
@@ -36,6 +40,7 @@ export class PostComponent {
   comments: Comment[] = [];
   concernedPost: Post | undefined;
   actualAuthor: Author | undefined;
+  commentDeleteDialogMap: Map<bigint, boolean> = new Map();
 
 
   constructor(private route: ActivatedRoute,
@@ -66,6 +71,7 @@ export class PostComponent {
                 }
                 return 0
               });
+              this.comments.forEach(comment => this.commentDeleteDialogMap.set(comment.id, false));
             },
             error: err => this.failureMessage("Erreur", err.message)
           }));
@@ -81,6 +87,31 @@ export class PostComponent {
     this.sortCommentList(this.comments);
   }
 
+  setCommentDialogVisible(commentId: bigint) {
+    this.commentDeleteDialogMap.set(commentId, true);
+  }
+
+  setCommentDialogHidden(commentId: bigint) {
+    this.commentDeleteDialogMap.set(commentId, false);
+  }
+
+  deleteComment(comment: Comment) {
+    const token = this.cookieService.get('token');
+    if (token) {
+      this.subs.push(
+        this.commentService.delete(comment.id, token).subscribe({
+          next: () => {
+            this.comments = this.comments.filter(c => c.id !== comment.id);
+            this.successMessage('Succès', 'Le commentaire a été supprimé avec succès');
+            this.setCommentDialogHidden(comment.id);
+            this.commentDeleteDialogMap.delete(comment.id);
+          },
+          error: err => this.failureMessage("Erreur", err.message)
+        })
+      );
+    }
+  }
+
   sortCommentList(comments: Comment[]) {
     comments.sort((a, b) => {
       if (a.commentDate > b.commentDate) {
@@ -92,6 +123,16 @@ export class PostComponent {
     })
   }
 
+  successMessage(summary: string, detail: string): void {
+    this.messageService.add({
+      severity: 'success',
+      summary: summary,
+      detail: detail,
+      life: 3000,
+      closable: false
+    });
+  }
+
   failureMessage(summary: string, detail: string): void {
     this.messageService.add({
       severity: 'error',

src/app/services/comment.service.ts

@@ -22,14 +22,13 @@ export class CommentService {
     };
     return this.httpClient.post<Comment>(`${this.url}/posts/${postId}`, {postId: postId, authorId: authorId, content: content}, httpOptions);
   }
-}
 
-// POST localhost:8080/api/comments/posts/1
+  delete(commentId: bigint, token: string) {
-// Content-Type: application/json
+    const httpOptions = {
-// Authorization: Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ3cml0ZXIiLCJpYXQiOjE3MzY2OTYwNDgsImV4cCI6MTczNjczMjA0OH0.lHkOTGUzklZFJvm3poEhU5RhcG32y-ew-I2WpqDLVOs
+      headers: new HttpHeaders({
-//
+        'Authorization': `Bearer ${token}`
-// {
+      })
-//   "postId": 1,
+    };
-//   "content": "test",
+    return this.httpClient.delete<Comment>(`${this.url}/${commentId}`, httpOptions);
-//   "authorId": "2c8c4079-8649-4086-9a4e-3d7ddcb402d8"
+  }
-// }
+}