+

{{ concernedPost?.title }}

Publié le {{ concernedPost?.publicationDate | date: "dd/MM/yyyy à HH:mm" }} -
- +
+
+
+

Commentaires

+ @if (actualAuthor) { + {{actualAuthor | json}} + + } @for (comment of comments; track comment.id) { @if (comment.profilePicture) {
diff --git a/src/app/pages/post/post.component.ts b/src/app/pages/post/post.component.ts index 9ca5ba0..41469dc 100644 --- a/src/app/pages/post/post.component.ts +++ b/src/app/pages/post/post.component.ts @@ -9,6 +9,11 @@ import {CommentService} from '../../services/comment.service'; import {MessageService} from 'primeng/api'; import {Comment} from '../../models/comment'; import {AvatarModule} from 'primeng/avatar'; +import {CardModule} from 'primeng/card'; +import {SafeHtmlPipe} from '../../pipes/safe-html-pipe'; +import {CookieService} from 'ngx-cookie-service'; +import {Author} from '../../models/author'; +import {CommentFormComponent} from '../../components/comment-form/comment-form.component'; @Component({ selector: 'app-post', @@ -16,8 +21,11 @@ import {AvatarModule} from 'primeng/avatar'; imports: [ HeaderComponent, DatePipe, - JsonPipe, - AvatarModule + AvatarModule, + CardModule, + SafeHtmlPipe, + CommentFormComponent, + JsonPipe ], templateUrl: './post.component.html', styleUrl: './post.component.css' @@ -26,20 +34,27 @@ export class PostComponent { subs: Subscription[] = []; comments: Comment[] = []; concernedPost: Post | undefined; + actualAuthor: Author | undefined; + constructor(private route: ActivatedRoute, private postService: PostService, private commentService: CommentService, - private messageService: MessageService,) { + private messageService: MessageService, + private cookieService: CookieService,) { this.route.paramMap.subscribe(params => { + if (this.cookieService.get('author')) { + this.actualAuthor = JSON.parse(this.cookieService.get('author')) + } const postId = params.get('postId'); if (postId) { this.subs.push( forkJoin({ - post: this.postService.getPost(BigInt(postId)), - comment: this.commentService.list(BigInt(postId)) - }).subscribe({ + post: this.postService.getPost(BigInt(postId)), + comment: this.commentService.list(BigInt(postId)) + }).subscribe({ next: res => { + res.post.body = res.post.body.replace(/ /g, ' ') this.concernedPost = res.post; this.comments = res.comment.sort((a, b) => { if (a.commentDate < b.commentDate) { @@ -53,6 +68,9 @@ export class PostComponent { error: err => this.failureMessage("Erreur", err.message) })); } + if (this.concernedPost?.body) { + this.concernedPost.body = this.concernedPost.body.replace(/ /g, ' '); + } }); } diff --git a/src/app/pages/profile/profile.component.css b/src/app/pages/profile/profile.component.css index ae0096b..e20246f 100644 --- a/src/app/pages/profile/profile.component.css +++ b/src/app/pages/profile/profile.component.css @@ -1,6 +1,23 @@ .content { + margin-top: 5rem; + width: 45%; display: flex; - align-items: stretch; - flex-direction: column; + align-items: center; + flex-direction: row; + justify-content: space-between; gap: 3em; } + +h2 { + margin-bottom: 0.1em; +} + +em { + color: rgba(55, 56, 58, 0.8); + margin: 0; +} + +.user-info { + display: flex; + flex-direction: column; +} diff --git a/src/app/pages/profile/profile.component.html b/src/app/pages/profile/profile.component.html index bae7a5d..9d8de28 100644 --- a/src/app/pages/profile/profile.component.html +++ b/src/app/pages/profile/profile.component.html @@ -1,12 +1,21 @@ -{{ concernedAuthor | json }}
- - - @if (concernedAuthor?.id === actualAuthor?.id) { - - - } + +
+ @if (concernedAuthor?.avatar) { + + } @else { + + } +
+ + + + + +
diff --git a/src/app/pages/profile/profile.component.ts b/src/app/pages/profile/profile.component.ts index aee4333..d327301 100644 --- a/src/app/pages/profile/profile.component.ts +++ b/src/app/pages/profile/profile.component.ts @@ -1,11 +1,10 @@ import {Component, OnDestroy} from '@angular/core'; import {HeaderComponent} from '../../components/header/header.component'; -import {ActivatedRoute, Router} from '@angular/router'; +import {ActivatedRoute} from '@angular/router'; import {CookieService} from 'ngx-cookie-service'; import {Author} from '../../models/author'; import {Subscription} from 'rxjs'; import {AuthorService} from '../../services/author.service'; -import {JsonPipe} from '@angular/common'; import {AvatarModule} from 'primeng/avatar'; import {CardModule} from 'primeng/card'; import {Button} from 'primeng/button'; @@ -15,7 +14,6 @@ import {Button} from 'primeng/button'; standalone: true, imports: [ HeaderComponent, - JsonPipe, AvatarModule, CardModule, Button @@ -23,16 +21,19 @@ import {Button} from 'primeng/button'; templateUrl: './profile.component.html', styleUrl: './profile.component.css' }) -export class ProfileComponent implements OnDestroy{ +export class ProfileComponent implements OnDestroy { actualAuthor: Author | undefined; concernedAuthor: Author | undefined; + authorName: string = ""; subs: Subscription[] = []; + constructor(private route: ActivatedRoute, private authorService: AuthorService, private cookieService: CookieService) { this.route.paramMap.subscribe(params => { this.subs.push(this.authorService.getAuthor(params.get('authorId')).subscribe(author => { this.concernedAuthor = author; + this.authorName = author.name; })); }) if (this.cookieService.get('author')) { diff --git a/src/app/pipes/safe-html-pipe.ts b/src/app/pipes/safe-html-pipe.ts new file mode 100644 index 0000000..ff66a36 --- /dev/null +++ b/src/app/pipes/safe-html-pipe.ts @@ -0,0 +1,14 @@ +import {DomSanitizer} from '@angular/platform-browser'; +import {Pipe} from '@angular/core'; + +@Pipe({ + name: "safeHtml", + standalone: true, +}) +export class SafeHtmlPipe { + constructor(private sanitizer: DomSanitizer) {} + + transform(html: any) { + return this.sanitizer.bypassSecurityTrustHtml(html); + } +}