diff --git a/src/app/components/comment-form/comment-form.component.css b/src/app/components/comment-form/comment-form.component.css index a13e8c5..7164016 100644 --- a/src/app/components/comment-form/comment-form.component.css +++ b/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; +} diff --git a/src/app/components/comment-form/comment-form.component.html b/src/app/components/comment-form/comment-form.component.html index b414a70..564b5be 100644 --- a/src/app/components/comment-form/comment-form.component.html +++ b/src/app/components/comment-form/comment-form.component.html @@ -1,4 +1,4 @@
- +
diff --git a/src/app/components/comment-form/comment-form.component.ts b/src/app/components/comment-form/comment-form.component.ts index 60138cc..6daf490 100644 --- a/src/app/components/comment-form/comment-form.component.ts +++ b/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' diff --git a/src/app/pages/login/login.component.ts b/src/app/pages/login/login.component.ts index 7ccf3fa..a82bdb2 100644 --- a/src/app/pages/login/login.component.ts +++ b/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) diff --git a/src/app/pages/post/post.component.css b/src/app/pages/post/post.component.css index 166ee37..b9e602f 100644 --- a/src/app/pages/post/post.component.css +++ b/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; diff --git a/src/app/pages/post/post.component.html b/src/app/pages/post/post.component.html index c973280..73b3f87 100644 --- a/src/app/pages/post/post.component.html +++ b/src/app/pages/post/post.component.html @@ -1,7 +1,7 @@ @if (concernedPost) {
-

{{ concernedPost?.title }}

+

{{ concernedPost.title }}

Publié le {{ concernedPost.publicationDate | date: "dd/MM/yyyy à HH:mm" }}
@@ -18,10 +18,26 @@ {{ comment.authorName }}

- {{ comment.authorRole }}

@if (comment.isUpdated) { -

Mis à jour le {{ comment.commentDate | date: "dd/MM/yyyy à HH:mm" }}

+

Modifié le {{ comment.commentDate | date: "dd/MM/yyyy à HH:mm" }}

} @else {

Envoyé le {{ comment.commentDate | date: "dd/MM/yyyy à HH:mm" }}

} + @if (actualAuthor) { + @if (comment.authorId === actualAuthor.id || actualAuthor.role === 'ADMIN') { + + +
+ + +
+
+ } + } } @else {
@@ -29,10 +45,26 @@ {{ comment.authorName }}

- {{ comment.authorRole }}

@if (comment.isUpdated) { -

Mis à jour le {{ comment.commentDate | date: "dd/MM/yyyy à HH:mm" }}

+

Modifié le {{ comment.commentDate | date: "dd/MM/yyyy à HH:mm" }}

} @else {

Envoyé le {{ comment.commentDate | date: "dd/MM/yyyy à HH:mm" }}

} + @if (actualAuthor) { + @if (comment.authorId === actualAuthor.id || actualAuthor.role === 'ADMIN') { + + +
+ + +
+
+ } + }
}

{{ comment.content }}

diff --git a/src/app/pages/post/post.component.ts b/src/app/pages/post/post.component.ts index cd30109..97c134b 100644 --- a/src/app/pages/post/post.component.ts +++ b/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 = 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', diff --git a/src/app/services/comment.service.ts b/src/app/services/comment.service.ts index ae96a56..df0366c 100644 --- a/src/app/services/comment.service.ts +++ b/src/app/services/comment.service.ts @@ -22,14 +22,13 @@ export class CommentService { }; return this.httpClient.post(`${this.url}/posts/${postId}`, {postId: postId, authorId: authorId, content: content}, httpOptions); } -} -// POST localhost:8080/api/comments/posts/1 -// Content-Type: application/json -// Authorization: Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ3cml0ZXIiLCJpYXQiOjE3MzY2OTYwNDgsImV4cCI6MTczNjczMjA0OH0.lHkOTGUzklZFJvm3poEhU5RhcG32y-ew-I2WpqDLVOs -// -// { -// "postId": 1, -// "content": "test", -// "authorId": "2c8c4079-8649-4086-9a4e-3d7ddcb402d8" -// } + delete(commentId: bigint, token: string) { + const httpOptions = { + headers: new HttpHeaders({ + 'Authorization': `Bearer ${token}` + }) + }; + return this.httpClient.delete(`${this.url}/${commentId}`, httpOptions); + } +}