Add search publication page and fix category access

This commit is contained in:
Florian THIERRY
2024-08-29 17:24:01 +02:00
parent b5f881e2c5
commit 090143fdae
13 changed files with 254 additions and 93 deletions

View File

@@ -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.
}

View File

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

View File

@@ -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$;
}
}

View File

@@ -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);
});
}
}