début de style et d'implémentation des commentaire sur la page de visualisation d'un post

src/app/models/comment.ts

@@ -1,5 +1,9 @@
 export interface Comment {
   id: bigint
+  authorId: string
+  authorName: string
+  profilePicture: string
+  authorRole: string
   content: string
   commentDate: Date
   isUpdated: boolean

src/app/pages/home/home.component.ts

@@ -39,7 +39,14 @@ export class HomeComponent implements OnDestroy {
     }
     this.subs.push(this.postService.list()
       .subscribe({
-        next: (posts: Post[]) => this.posts = posts,
+        next: (posts: Post[]) => this.posts = posts.sort((a, b) => {
+          if (a.publicationDate < b.publicationDate) {
+            return -1
+          } else if (a.publicationDate > b.publicationDate) {
+            return 1
+          }
+          return 0
+        }),
         error: (err) => console.error(err.message),
       }));
   }

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

@@ -0,0 +1,31 @@
+::ng-deep * {
+  box-sizing: border-box;
+}
+
+.body-content {
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.comment-div {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+::ng-deep .body-content * {
+  white-space: normal;
+  word-break: break-word;
+  width: 100%;
+}
+
+img {
+  height: 100%
+}
+
+.main-content {
+  margin: auto;
+  width: 45%;
+}

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

@@ -1,5 +1,33 @@
 <app-header></app-header>
-<h1>{{ concernedPost?.title }}</h1>
-<em>Publié le {{ concernedPost?.publicationDate | date: "dd/MM/yyyy à HH:mm" }}</em>
-<div [innerHTML]="concernedPost?.body"></div>
-<div></div>
+<div class="main-content">
+  <h1>{{ concernedPost?.title }}</h1>
+  <em>Publié le {{ concernedPost?.publicationDate | date: "dd/MM/yyyy à HH:mm" }}</em>
+  <div class="body-content" [innerHTML]="concernedPost?.body"></div>
+
+  @for (comment of comments; track comment.id) {
+    @if (comment.profilePicture) {
+      <div class="comment-div">
+        <p-avatar image="data:image/jpeg;base64,{{ comment.profilePicture }}" styleClass="mr-2" size="large"></p-avatar>
+        <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>
+        } @else {
+          <p> Envoyé le {{ comment.commentDate | date: "dd/MM/yyyy à HH:mm" }}</p>
+        }
+      </div>
+    } @else {
+      <div class="comment-div">
+        <p-avatar label="{{ comment.authorName.charAt(0).toUpperCase() }}" styleClass="mr-2" size="large"></p-avatar>
+        <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>
+        } @else {
+          <p> Envoyé le {{ comment.commentDate | date: "dd/MM/yyyy à HH:mm" }}</p>
+        }
+      </div>
+    }
+    <p>{{ comment.content }}</p>
+  }
+</div>

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

@@ -1,42 +1,68 @@
 import {Component} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
-import {mergeMap, Subscription} from 'rxjs';
+import {forkJoin, Subscription} from 'rxjs';
 import {Post} from '../../models/post';
 import {PostService} from '../../services/post.service';
 import {HeaderComponent} from '../../components/header/header.component';
-import {DatePipe} from '@angular/common';
+import {DatePipe, JsonPipe} from '@angular/common';
 import {CommentService} from '../../services/comment.service';
+import {MessageService} from 'primeng/api';
+import {Comment} from '../../models/comment';
+import {AvatarModule} from 'primeng/avatar';
 
 @Component({
   selector: 'app-post',
   standalone: true,
   imports: [
     HeaderComponent,
-    DatePipe
+    DatePipe,
+    JsonPipe,
+    AvatarModule
   ],
   templateUrl: './post.component.html',
   styleUrl: './post.component.css'
 })
 export class PostComponent {
   subs: Subscription[] = [];
+  comments: Comment[] = [];
   concernedPost: Post | undefined;
 
   constructor(private route: ActivatedRoute,
               private postService: PostService,
-              private commentService: CommentService) {
+              private commentService: CommentService,
+              private messageService: MessageService,) {
     this.route.paramMap.subscribe(params => {
       const postId = params.get('postId');
       if (postId) {
         this.subs.push(
-          this.postService.getPost(BigInt(postId)).pipe(
-            mergeMap(post => this.commentService.list(post.id))
-          ).subscribe(post => {
-            this.concernedPost = post;
-          })
-        );
+          forkJoin({
+          post: this.postService.getPost(BigInt(postId)),
+          comment: this.commentService.list(BigInt(postId))
+        }).subscribe({
+            next: res => {
+              this.concernedPost = res.post;
+              this.comments = res.comment.sort((a, b) => {
+                if (a.commentDate < b.commentDate) {
+                  return -1
+                } else if (a.commentDate > b.commentDate) {
+                  return 1
+                }
+                return 0
+              });
+            },
+            error: err => this.failureMessage("Erreur", err.message)
+          }));
       }
     });
-
   }
 
+  failureMessage(summary: string, detail: string): void {
+    this.messageService.add({
+      severity: 'error',
+      summary: summary,
+      detail: detail,
+      life: 3000,
+      closable: false
+    });
+  }
 }

src/app/services/comment.service.ts

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import {HttpClient} from '@angular/common/http';
 import {Observable} from 'rxjs';
+import {Comment} from '../models/comment';
 
 @Injectable({
   providedIn: 'root'