Add search publication page and fix category access

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

@@ -1,94 +1,6 @@
-$cardBorderRadius: .5em;
-
 :host {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-
-    .publication-container {
-        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/pages/search-publications/search-publications.component.html

@@ -0,0 +1,13 @@
+<h1>Search results</h1>
+@if((isLoading$ | async) === true) {
+    <h2>Search in progress...</h2>
+    <mat-spinner></mat-spinner>
+} @else if((isLoaded$ | async) === true) {
+    @if((publications$ | async)?.length) {
+        <app-publication-list [publications$]="publications$"></app-publication-list>
+    } @else {
+        No any result.
+    }
+} @else {
+    No any result.
+}

frontend/src/app/pages/search-publications/search-publications.component.scss

@@ -0,0 +1,6 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}

frontend/src/app/pages/search-publications/search-publications.component.ts

@@ -0,0 +1,48 @@
+import { CommonModule } from "@angular/common";
+import { Component, inject, OnDestroy, OnInit } from "@angular/core";
+import { MatProgressSpinner } from "@angular/material/progress-spinner";
+import { ActivatedRoute } from "@angular/router";
+import { Observable, Subscription } from "rxjs";
+import { PublicationListComponent } from "../../components/publication-list/publication-list.component";
+import { Publication } from "../../core/rest-services/publications/model/publication";
+import { SearchPublicationsService } from "./search-publications.service";
+
+@Component({
+    selector: 'app-search-publications',
+    templateUrl: './search-publications.component.html',
+    styleUrl: './search-publications.component.scss',
+    standalone: true,
+    imports: [CommonModule, MatProgressSpinner, PublicationListComponent],
+    providers: [SearchPublicationsService]
+})
+export class SearchPublicationsComponent implements OnInit, OnDestroy {
+    private searchPublicationsService = inject(SearchPublicationsService);
+    private activatedRoute = inject(ActivatedRoute);
+    private queryParamsSubscription?: Subscription;
+
+    ngOnInit(): void {
+        this.queryParamsSubscription = this.activatedRoute.queryParamMap
+            .subscribe(params => {  
+                const categoryId = params.get('category-id');
+                if (categoryId) {
+                    this.searchPublicationsService.loadPublications(`category_id=${categoryId}`);
+                }
+            });
+    }
+
+    ngOnDestroy(): void {
+        this.queryParamsSubscription?.unsubscribe();
+    }
+
+    get publications$(): Observable<Publication[]> {
+        return this.searchPublicationsService.publications$;
+    }
+
+    get isLoading$(): Observable<boolean> {
+        return this.searchPublicationsService.isLoading$;
+    }
+
+    get isLoaded$(): Observable<boolean> {
+        return this.searchPublicationsService.isLoaded$;
+    }
+}

frontend/src/app/pages/search-publications/search-publications.service.ts

@@ -0,0 +1,49 @@
+import { inject, Injectable } from "@angular/core";
+import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service";
+import { BehaviorSubject, Observable } from "rxjs";
+import { Publication } from "../../core/rest-services/publications/model/publication";
+import { MatSnackBar } from "@angular/material/snack-bar";
+
+
+@Injectable()
+export class SearchPublicationsService {
+    private publicationRestService = inject(PublicationRestService);
+    private publicationsSubject = new BehaviorSubject<Publication[]>([]);
+    private isLoadingSubject = new BehaviorSubject<boolean>(false);
+    private isLoadedSubject = new BehaviorSubject<boolean>(false);
+    private snackBar = inject(MatSnackBar);
+
+    get publications$(): Observable<Publication[]> {
+        return this.publicationsSubject.asObservable();
+    }
+    
+    get isLoading$(): Observable<boolean> {
+        return this.isLoadingSubject.asObservable();
+    }
+
+    get isLoaded$(): Observable<boolean> {
+        return this.isLoadedSubject.asObservable();
+    }
+
+    loadPublications(searchCriteria: string): void {
+         this.isLoadingSubject.next(true);
+         this.isLoadedSubject.next(false);
+         this.publicationsSubject.next([]);
+
+         this.publicationRestService.search(searchCriteria)
+            .then(publications => {
+                this.publicationsSubject.next(publications);
+            })
+            .catch(error => {
+                if (error.status !== 404) {
+                    const errorMessage = 'An error occured while retrieving publications.';
+                    console.error(errorMessage, error);
+                    this.snackBar.open(errorMessage, 'Close', { duration: 5000 });
+                }
+            })
+            .finally(() => {
+                this.isLoadingSubject.next(false);
+                this.isLoadedSubject.next(true);
+            });
+    }
+}