home page affiche les posts créé :P

src/app/home/home.component.html

@@ -1,20 +1,11 @@
 <app-header></app-header>
 <div class="main-content">
-  <article>
+  @for (post of posts; track post.id) {
-    <img class="blog-img" src="data:image/jpeg;base64,image " alt="article image">
+  <app-post-home [illustration]="post.illustration"
-    <h2 class="blog-title blog">Analyse approfondie de Goodbye Eri</h2>
+                 [date]="post.publication_date"
-    <p class="blog-category blog">Mangas & Animes</p>
+                 [category]="post.category"
-    <em class="blog-date blog">Publié le 30 novembre 2024 à 17:16h</em>
+                 [title]="post.title"
-    <p class="blog-desc">Dans ce post j'analyse le one shot "Goodbye, Eri" écrit par Tatsuki Fujimoto. J'y aborde
+                 [username]="'Guams'"
-      beaucoup d'aspects du manga comme la mémoire humaine, la spontanéité des uns qui vient en opposition avec
+                 [description]="post.description" />
-      l'hypocrisie des autres et plein d'autres thèmes ! Disclaimer : Tout comme mon post sur
+  }
-      "Persona 3 Reload - Episode Aigis", je spoil l'intégralité de l'oeuvre.</p>
-    <p-button (click)="successMessage('salut', 'grgtr')" label="Lire la suite"/>
-    <div>
-      <p-avatar label="G" shape="circle" styleClass="mr-2" size="large"/>
-      <em>Guams</em>
-    </div>
-  </article>
 </div>
-
-{{ actualAuthor | json }}

src/app/home/home.component.ts

@@ -11,6 +11,7 @@ import {ToastModule} from 'primeng/toast';
 import {CookieService} from 'ngx-cookie-service';
 import {PostService} from '../services/post.service';
 import {Post} from '../models/post';
+import {PostHomeComponent} from '../post-home/post-home.component';
 
 @Component({
   selector: 'app-home',
@@ -20,7 +21,8 @@ import {Post} from '../models/post';
     Button,
     HeaderComponent,
     ToastModule,
-    JsonPipe
+    JsonPipe,
+    PostHomeComponent
   ],
   templateUrl: './home.component.html',
   styleUrl: './home.component.css'

src/app/new-post/new-post.component.html

@@ -19,5 +19,3 @@
   <p-editor formControlName="body" [style]="{ height: '320px' }"/>
   <p-button type="submit" label="envoyer" ></p-button>
 </form>
-
-

src/app/new-post/new-post.component.ts

@@ -1,6 +1,6 @@
 import {Component, OnDestroy} from '@angular/core';
 import {HeaderComponent} from '../header/header.component';
-import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
+import {FormBuilder, FormControl, FormGroup, ReactiveFormsModule, ValidationErrors, Validators} from '@angular/forms';
 import {InputTextModule} from 'primeng/inputtext';
 import {InputTextareaModule} from 'primeng/inputtextarea';
 import {FileSelectEvent, FileUploadModule} from 'primeng/fileupload';
@@ -12,6 +12,7 @@ import {MessageService} from 'primeng/api';
 import {EditorModule} from 'primeng/editor';
 import {AuthorService} from '../services/author.service';
 import {Author} from '../models/author';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-new-post',
@@ -31,18 +32,23 @@ export class NewPostComponent implements OnDestroy {
   subs: Subscription[] = []
   actualAuthor: Author | undefined;
   uploadedFile: File | undefined;
-  form: FormGroup = new FormGroup({
+  form: FormGroup;
-    description: new FormControl('', [Validators.required, Validators.maxLength(512)]),
-    title: new FormControl('', [Validators.required, Validators.maxLength(50)]),
-    body: new FormControl('', [Validators.required]),
-    category: new FormControl('', [Validators.required, Validators.maxLength(50)]),
-  });
 
-  constructor(private postService: PostService,
+  constructor(private formBuilder: FormBuilder,
+              private postService: PostService,
               private cookieService: CookieService,
               private authorService: AuthorService,
-              private messageService: MessageService,) {
+              private messageService: MessageService,
-    this.actualAuthor = JSON.parse(this.cookieService.get("author"));
+              private router: Router) {
+    this.form = this.formBuilder.group({
+      description: ['', [Validators.required, Validators.maxLength(512)]],
+      title: ['', [Validators.required, Validators.maxLength(50)]],
+      body: ['', [Validators.required]],
+      category: ['', [Validators.required, Validators.maxLength(50)]],
+    });
+    if (this.cookieService.get("author")) {
+      this.actualAuthor = JSON.parse(this.cookieService.get("author"));
+    }
   }
 
   onSelected(event: FileSelectEvent) {
@@ -54,7 +60,7 @@ export class NewPostComponent implements OnDestroy {
   onSubmit() {
     const formData = this.form.value;
 
-    if (this.uploadedFile) {
+    if (this.uploadedFile && this.form.status === 'VALID') {
       const postToPost: any = { // LOL
         body: formData.body as string,
         description: formData.description as string,
@@ -73,7 +79,9 @@ export class NewPostComponent implements OnDestroy {
           )
         ).subscribe({
           next: () => {
-            console.log('Post créé, attribué et illustration changée avec succès.');
+            this.router.navigate(['/']).then(() => {
+              this.successMessage('Succès', 'Post créé avec succès')
+            });
           },
           error: (err) => {
             this.failureMessage('Erreur', err.message);
@@ -83,6 +91,16 @@ export class NewPostComponent implements OnDestroy {
     }
   }
 
+  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/post-home/post-home.component.html

@@ -0,0 +1,8 @@
+<p-card>
+  <img src="data:image/jpeg;base64,{{ illustration }}"/>
+  <h2>{{ title }}</h2>
+  <p>{{ category }}</p>
+  <em>{{ date }}</em>
+  <p>{{ description }}</p>
+  <p-button label="Lire la suite"/>
+</p-card>

src/app/post-home/post-home.component.ts

@@ -0,0 +1,24 @@
+import {Component, Input} from '@angular/core';
+import {Button} from 'primeng/button';
+import {CardModule} from 'primeng/card';
+
+@Component({
+  selector: 'app-post-home',
+  standalone: true,
+  imports: [
+    Button,
+    CardModule
+  ],
+  templateUrl: './post-home.component.html',
+  styleUrl: './post-home.component.css'
+})
+export class PostHomeComponent {
+  @Input() title: string = '';
+  @Input() illustration: string = '';
+  @Input() category: string = '';
+  @Input() date: Date = new Date();
+  @Input() description: string = '';
+  @Input() username: string = '';
+  @Input() avatar: string = '';
+
+}

src/app/services/author.service.ts

@@ -32,7 +32,7 @@ export class AuthorService {
     return this.httpClient.put<any>(`http://localhost:8080/api/authors/${authorId}/posts`, postId, httpOptions);
   }
 
-  getAuthor(id: string | undefined): Observable<Author> {
+  getAuthor(id: string | null): Observable<Author> {
     if (id) {
       return this.httpClient.get<Author>("http://localhost:8080/api/authors/" + id);
     } else {

src/app/services/post.service.ts

@@ -24,12 +24,18 @@ export class PostService {
   }
 
   changeIllustration(id: bigint, image: File | undefined, token: string): Observable<Post> {
-    const httpOptions = {
+    if (image) {
-      headers: new HttpHeaders({
+      const formData: FormData = new FormData();
-        'Authorization': `Bearer ${token}`
+      formData.append('illustration', image);
-      })
+      const httpOptions = {
-    };
+        headers: new HttpHeaders({
-    return this.httpClient.put<Post>(`${this.url}/${id}`, image, httpOptions);
+          'Authorization': `Bearer ${token}`
+        })
+      };
+      console.log(image);
+      return this.httpClient.put<Post>(`${this.url}/${id}/illustration`, formData, httpOptions);
+    } else {
+      throw new Error('Image doesn\'t exist');
+    }
   }
-
 }