florian/codiki-hexagonal
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Fixing Angular 21 by migrating all values by signals. (#11)
Some checks failed
Build and Deploy Java Gradle Application / build-and-deploy (push) Failing after 53s
Details

Browse Source
This commit was merged in pull request #11.
This commit is contained in:
Florian THIERRY - Takiguchi
2026-02-03 15:07:55 +01:00
parent 1ca2f872f7
commit 0cce8b2982
102 changed files with 4102 additions and 4852 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/app/pages/search-publications/search-publications.component.html
View File

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

10
frontend/src/app/pages/search-publications/search-publications.component.scss
View File

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

82
frontend/src/app/pages/search-publications/search-publications.component.ts
View File

@@ -1,51 +1,39 @@
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";
import {CommonModule} from "@angular/common";
import {Component, effect, inject} from "@angular/core";
import {MatProgressSpinner} from "@angular/material/progress-spinner";
import {ActivatedRoute} from "@angular/router";
import {PublicationListComponent} from "../../components/publication-list/publication-list.component";
import {SearchPublicationsService} from "./search-publications.service";
import {toSignal} from "@angular/core/rxjs-interop";
@Component({
selector: 'app-search-publications',
templateUrl: './search-publications.component.html',
styleUrl: './search-publications.component.scss',
imports: [CommonModule, MatProgressSpinner, PublicationListComponent],
providers: [SearchPublicationsService]
selector: 'app-search-publications',
templateUrl: './search-publications.component.html',
styleUrl: './search-publications.component.scss',
imports: [CommonModule, MatProgressSpinner, PublicationListComponent],
providers: [SearchPublicationsService]
})
export class SearchPublicationsComponent implements OnInit, OnDestroy {
private searchPublicationsService = inject(SearchPublicationsService);
private activatedRoute = inject(ActivatedRoute);
private queryParamsSubscription?: Subscription;
export class SearchPublicationsComponent {
private searchPublicationsService = inject(SearchPublicationsService);
private activatedRoute = inject(ActivatedRoute);
publications = this.searchPublicationsService.publications;
isLoading = this.searchPublicationsService.isLoading;
isLoaded = this.searchPublicationsService.isLoaded;
ngOnInit(): void {
this.queryParamsSubscription = this.activatedRoute.queryParamMap
.subscribe(params => {
const categoryId = params.get('category-id');
if (categoryId) {
this.searchPublicationsService.loadPublications(`category_id=${categoryId}`);
}
const query = params.get('query')
if (query) {
this.searchPublicationsService.loadPublications(query);
}
});
}
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$;
}
}
constructor() {
const queryParams = toSignal(this.activatedRoute.queryParamMap);
effect(() => {
let params = queryParams();
if (params) {
const categoryId = params.get('category-id');
if (categoryId) {
this.searchPublicationsService.loadPublications(`category_id=${categoryId}`);
}
const query = params.get('query')
if (query) {
this.searchPublicationsService.loadPublications(query);
}
}
});
}
}

82
frontend/src/app/pages/search-publications/search-publications.service.ts
View File

@@ -1,49 +1,47 @@
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";
import {inject, Injectable, Signal, signal} from "@angular/core";
import {PublicationRestService} from "../../core/rest-services/publications/publication.rest-service";
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);
#snackBar = inject(MatSnackBar);
#publicationRestService = inject(PublicationRestService);
#publications = signal<Publication[]>([]);
#isLoading = signal(false);
#isLoaded = signal(false);
get publications$(): Observable<Publication[]> {
return this.publicationsSubject.asObservable();
}
get isLoading$(): Observable<boolean> {
return this.isLoadingSubject.asObservable();
}
get publications(): Signal<Publication[]> {
return this.#publications.asReadonly();
}
get isLoaded$(): Observable<boolean> {
return this.isLoadedSubject.asObservable();
}
get isLoading(): Signal<boolean> {
return this.#isLoading.asReadonly();
}
loadPublications(searchCriteria: string): void {
this.isLoadingSubject.next(true);
this.isLoadedSubject.next(false);
this.publicationsSubject.next([]);
get isLoaded(): Signal<boolean> {
return this.#isLoaded.asReadonly();
}
this.publicationRestService.search(searchCriteria)
.then(publications => {
this.publicationsSubject.next(publications);
})
.catch(error => {
if (error.status !== 404) {
const errorMessage = $localize`An error occured while retrieving publications.`;
console.error(errorMessage, error);
this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
}
})
.finally(() => {
this.isLoadingSubject.next(false);
this.isLoadedSubject.next(true);
});
}
}
loadPublications(searchCriteria: string): void {
this.#isLoading.set(true);
this.#isLoaded.set(false);
this.#publications.set([]);
this.#publicationRestService.search(searchCriteria)
.then(publications => {
this.#publications.set(publications);
})
.catch(error => {
if (error.status !== 404) {
const errorMessage = $localize`An error occured while retrieving publications.`;
console.error(errorMessage, error);
this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
}
})
.finally(() => {
this.#isLoading.set(false);
this.#isLoaded.set(true);
});
}
}