Add a component to display a publication list and fix publication search rest service to handle ids.

frontend/src/app/core/rest-services/publications/publication.rest-service.ts

@@ -1,4 +1,4 @@
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpParams } from '@angular/common/http';
 import { Injectable, inject } from '@angular/core';
 import { lastValueFrom } from 'rxjs';
 import { Publication } from './model/publication';
@@ -20,4 +20,10 @@ export class PublicationRestService {
   update(publication: Publication): Promise<void> {
     return lastValueFrom(this.httpClient.put<void>(`/api/publications/${publication.id}`, publication));
   }
+
+  search(searchCriteria: string): Promise<Publication[]> {
+    let params = new HttpParams();
+    params = params.set('query', searchCriteria);
+    return lastValueFrom(this.httpClient.get<Publication[]>('/api/publications', { params }));
+  }
 }

frontend/src/app/pages/home/home.component.html

@@ -1,17 +1,2 @@
 <h1>Last publications</h1>
-<div class="publication-container">
-    <a *ngFor="let publication of publications$ | async" [routerLink]="['/publications/' + publication.id]" class="publication">
-        <img src="/pictures/{{ publication.illustrationId }}"/>
-        <div class="body">
-            <h1>{{publication.title}}</h1>
-            <h2>{{publication.description}}</h2>
-        </div>
-        <div class="footer">
-            <img src="/pictures/{{ publication.author.image }}" [matTooltip]="publication.author.name"/>
-            Publication posted by {{publication.author.name}}
-            <span class="publication-date">
-                ({{ publication.creationDate | date: 'short' : 'fr-Fr' }})
-            </span>
-        </div>
-    </a>
-</div>
+<app-publication-list [publications$]="publications$"></app-publication-list>

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

@@ -5,11 +5,12 @@ import { Publication } from '../../core/rest-services/publications/model/publica
 import { RouterModule } from '@angular/router';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { CommonModule } from '@angular/common';
+import { PublicationListComponent } from '../../components/publication-list/publication-list.component';
 
 @Component({
   selector: 'app-home',
   standalone: true,
-  imports: [CommonModule, RouterModule, MatTooltipModule],
+  imports: [PublicationListComponent],
   templateUrl: './home.component.html',
   styleUrl: './home.component.scss',
   providers: [HomeService]