Add search publication page and fix category access

frontend/src/app/components/publication-list/publication-list.component.html

@@ -0,0 +1,16 @@
+@for(publication of publications$ | async; track publication) {
+    <a [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>
+}

frontend/src/app/components/publication-list/publication-list.component.scss

@@ -0,0 +1,87 @@
+$cardBorderRadius: .5em;
+
+:host {
+    display: flex;
+    flex-direction: column;
+    gap: 2em;
+    max-width: 50em;
+    width: 90%;
+    margin: auto;
+
+    .publication {
+        display: flex;
+        flex-direction: column;
+        border-radius: $cardBorderRadius;
+        box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
+        transition: box-shadow .2s ease-in-out;
+        text-decoration: none;
+        color: black;
+        background-color: #ffffff;
+        
+        &:hover {
+            box-shadow: 0 4px 8px 0 rgba(0,0,0,.24),0 4px 14px 0 rgba(0,0,0,.16);
+        }
+
+        img {
+            object-fit: cover;
+            height: 15em;
+            border-radius: $cardBorderRadius $cardBorderRadius 0 0;
+            transition: height .2s ease-in-out;
+
+            @media screen and (min-width: 450px) {
+                height: 20em;
+            }
+
+            @media screen and (min-width: 600px) {
+                height: 25em;
+            }
+
+            @media screen and (min-width: 750px) {
+                height: 32em;
+            }
+        }
+        
+        .body {
+            display: flex;
+            flex-direction: column;
+            padding: 1.5em 2em;
+
+            h1 {
+                font-size: 1.8em;
+                margin-bottom: .5em;
+            }
+
+            h2 {
+                font-size: 1em;
+                line-height: 1.4em;
+                margin: 0;
+                color: #747373;
+                font-weight: 400;
+            }
+        }
+
+        .footer {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            background-color: #f0f0f0;
+            border-radius: 0 0 $cardBorderRadius $cardBorderRadius;
+            padding: 1em 2em;
+            gap: 1em;
+            color: #6c757d;
+
+            img {
+                $imageSize: 4em;
+                border-radius: 10em;
+                width: $imageSize;
+                height: $imageSize;
+                object-fit: cover;
+            }
+
+            .publication-date {
+                font-style: italic;
+                color: #bdbdbd;
+            }
+        }
+    }
+}

frontend/src/app/components/publication-list/publication-list.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input } from "@angular/core";
+import { Publication } from "../../core/rest-services/publications/model/publication";
+import { Observable } from "rxjs";
+import { CommonModule } from "@angular/common";
+import { RouterModule } from "@angular/router";
+import { MatTooltipModule } from "@angular/material/tooltip";
+
+@Component({
+    selector: 'app-publication-list',
+    standalone: true,
+    templateUrl: './publication-list.component.html',
+    styleUrl: './publication-list.component.scss',
+    imports: [CommonModule, RouterModule, MatTooltipModule]
+})
+export class PublicationListComponent {
+    @Input()
+    publications$!: Observable<Publication[]>;
+}

frontend/src/app/components/side-menu/categories-menu/categories-menu.component.html

@@ -6,7 +6,7 @@
         </div>
         <div class="sub-category-container {{category.isOpenned ? 'displayed' : ''}}">
             @for(subCategory of category.subCategories; track subCategory) {
-                <a [routerLink]="['/categories/' + subCategory.id]" class="sub-category">
+                <a [routerLink]="['/publications']" [queryParams]="{'category-id': subCategory.id}" (click)="categoryClicked.emit()" class="sub-category">
                     {{subCategory.name}}
                 </a>
             }

frontend/src/app/components/side-menu/categories-menu/categories-menu.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from "@angular/common";
-import { Component, inject, OnInit } from "@angular/core";
+import { Component, EventEmitter, inject, OnInit, Output } from "@angular/core";
 import { MatIconModule } from "@angular/material/icon";
 import { DisplayableCategory, SideMenuService } from "../side-menu.service";
 import { Observable } from "rxjs";
@@ -14,6 +14,8 @@ import { RouterModule } from "@angular/router";
 })
 export class CategoriesMenuComponent implements OnInit {
   private sideMenuService = inject(SideMenuService);
+  @Output()
+  categoryClicked = new EventEmitter<void>();
 
   ngOnInit(): void {
     this.sideMenuService.loadCategories();

frontend/src/app/components/side-menu/side-menu.component.html

@@ -9,6 +9,6 @@
         </button>
     </h1>
     <h2>Catégories</h2>
-    <app-categories-menu></app-categories-menu>
+    <app-categories-menu (categoryClicked)="close()"></app-categories-menu>
 </div>
 <div class="overlay {{ isOpenned ? 'displayed' : ''}}" (click)="close()"></div>