diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 7125145..f1de12c 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -8,6 +8,7 @@ import {authGuard} from './guards/auth.guard';
import {ProfileComponent} from './profile/profile.component';
import {NewPostComponent} from './new-post/new-post.component';
import {writerGuard} from './guards/writer.guard';
+import {PostComponent} from './post/post.component';
export const routes: Routes = [
{path: '', component: HomeComponent},
@@ -15,6 +16,7 @@ export const routes: Routes = [
{path: 'register', component: RegisterComponent, canActivate: [authGuard]},
{path: 'logout', component: LogoutComponent},
{path: 'profile/:authorId', component: ProfileComponent},
+ {path: 'post/:postId', component: PostComponent},
{path: 'new-post', component: NewPostComponent, canActivate: [writerGuard]},
{path: '**', component: NotFoundComponent}
];
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 9d61f57..a682e04 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -2,7 +2,8 @@
<div class="main-content">
@for (post of posts; track post.id) {
<app-post-home [illustration]="post.illustration"
- [date]="post.publication_date"
+ [date]="post.publicationDate"
+ [postId]="post.id"
[category]="post.category"
[title]="post.title"
[username]="'Guams'"
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index 3e62198..47d7ad7 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -1,10 +1,10 @@
<app-header></app-header>
<label for="username">Nom d'utilisateur</label>
-<input id="username" placeholder="Jean Zay" pInputText [(ngModel)]="name"/>
+<input type="text" id="username" placeholder="Jean Zay" pInputText [(ngModel)]="name"/>
<label for="password">Mot de passe</label>
-<input id="password" placeholder="motDePasseTrèsSecret" pInputText [(ngModel)]="password"/>
+<input type="password" id="password" placeholder="motDePasseTrèsSecret" pInputText [(ngModel)]="password"/>
<label for="confirm-password">Confirmez le mot de passe</label>
-<input id="confirm-password" placeholder="motDePasseTrèsSecret" pInputText [(ngModel)]="confirmPassword" (keyup.enter)="sendLogins()" />
+<input type="password" id="confirm-password" placeholder="motDePasseTrèsSecret" pInputText [(ngModel)]="confirmPassword" (keyup.enter)="sendLogins()" />
<p-button
label="Se connecter"
icon="pi pi-check"
diff --git a/src/app/models/post.ts b/src/app/models/post.ts
index f6f0207..d093e3f 100644
--- a/src/app/models/post.ts
+++ b/src/app/models/post.ts
@@ -5,5 +5,5 @@ export interface Post {
title: string
body: string
category: string
- publication_date: Date
+ publicationDate: Date
}
diff --git a/src/app/post-home/post-home.component.css b/src/app/post-home/post-home.component.css
index e69de29..bda9f33 100644
--- a/src/app/post-home/post-home.component.css
+++ b/src/app/post-home/post-home.component.css
@@ -0,0 +1,8 @@
+img {
+ border-radius: 5px;
+ object-fit: cover;
+ width: 100%;
+ height: 300px;
+ display: block;
+ margin: auto;
+}
diff --git a/src/app/post-home/post-home.component.html b/src/app/post-home/post-home.component.html
index 12aa862..79e1bfa 100644
--- a/src/app/post-home/post-home.component.html
+++ b/src/app/post-home/post-home.component.html
@@ -2,7 +2,7 @@
<img src="data:image/jpeg;base64,{{ illustration }}"/>
<h2>{{ title }}</h2>
<p>{{ category }}</p>
- <em>{{ date }}</em>
+ <p>{{ date | date : "dd/MM/yyyy" }}</p>
<p>{{ description }}</p>
- <p-button label="Lire la suite"/>
+ <p-button routerLink="post/{{ postId }}" label="Lire la suite"/>
</p-card>
diff --git a/src/app/post-home/post-home.component.ts b/src/app/post-home/post-home.component.ts
index 725c380..2a1caab 100644
--- a/src/app/post-home/post-home.component.ts
+++ b/src/app/post-home/post-home.component.ts
@@ -1,24 +1,30 @@
import {Component, Input} from '@angular/core';
import {Button} from 'primeng/button';
import {CardModule} from 'primeng/card';
+import {DatePipe} from '@angular/common';
+import {RouterLink} from '@angular/router';
@Component({
selector: 'app-post-home',
standalone: true,
imports: [
Button,
- CardModule
+ CardModule,
+ DatePipe,
+ RouterLink
],
templateUrl: './post-home.component.html',
styleUrl: './post-home.component.css'
})
export class PostHomeComponent {
+ @Input() postId: bigint = BigInt(0);
@Input() title: string = '';
@Input() illustration: string = '';
@Input() category: string = '';
- @Input() date: Date = new Date();
+ @Input() date: Date | undefined;
@Input() description: string = '';
@Input() username: string = '';
@Input() avatar: string = '';
+ constructor() {}
}
diff --git a/src/app/post/post.component.css b/src/app/post/post.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/post/post.component.html b/src/app/post/post.component.html
new file mode 100644
index 0000000..1f0e574
--- /dev/null
+++ b/src/app/post/post.component.html
@@ -0,0 +1,4 @@
+<app-header></app-header>
+<h1>{{ concernedPost?.title }}</h1>
+<em>{{ concernedPost?.publicationDate | date: "dd/MM/yyyy" }}</em>
+<div [innerHTML]="concernedPost?.body"></div>
diff --git a/src/app/post/post.component.ts b/src/app/post/post.component.ts
new file mode 100644
index 0000000..5758f5c
--- /dev/null
+++ b/src/app/post/post.component.ts
@@ -0,0 +1,41 @@
+import { Component } from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {AuthorService} from '../services/author.service';
+import {CookieService} from 'ngx-cookie-service';
+import {Subscription} from 'rxjs';
+import {Post} from '../models/post';
+import {PostService} from '../services/post.service';
+import {HeaderComponent} from '../header/header.component';
+import {DatePipe, JsonPipe} from '@angular/common';
+
+@Component({
+ selector: 'app-post',
+ standalone: true,
+ imports: [
+ HeaderComponent,
+ JsonPipe,
+ DatePipe
+ ],
+ templateUrl: './post.component.html',
+ styleUrl: './post.component.css'
+})
+export class PostComponent {
+ subs: Subscription[] = [];
+ concernedPost: Post | undefined;
+
+ constructor(private route: ActivatedRoute,
+ private postService: PostService) {
+ this.route.paramMap.subscribe(params => {
+ const postId = params.get('postId');
+ if (postId) {
+ this.subs.push(
+ this.postService.getPost(BigInt(postId)).subscribe(post => {
+ this.concernedPost = post;
+ })
+ );
+ }
+ });
+
+ }
+
+}
diff --git a/src/app/services/post.service.ts b/src/app/services/post.service.ts
index cdb7876..35d6a86 100644
--- a/src/app/services/post.service.ts
+++ b/src/app/services/post.service.ts
@@ -14,6 +14,10 @@ export class PostService {
return this.httpClient.get<Post[]>(this.url);
}
+ getPost(id: bigint) {
+ return this.httpClient.get<Post>(`${this.url}/${id}`);
+ }
+
createPost(post: any, token: string | undefined): Observable<Post> {
const httpOptions = {
headers: new HttpHeaders({