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

This commit was merged in pull request #11.
This commit is contained in:
2026-02-03 15:07:55 +01:00
parent 1ca2f872f7
commit 0cce8b2982
102 changed files with 4102 additions and 4852 deletions

View File

@@ -1,93 +1,93 @@
import { CommonModule, Location } from '@angular/common';
import { Component, inject, OnDestroy, OnInit } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { MatDialogModule } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatTabsModule } from '@angular/material/tabs';
import { MatTooltipModule } from '@angular/material/tooltip';
import { ActivatedRoute, Router } from '@angular/router';
import { BehaviorSubject, Observable, Subscription } from 'rxjs';
import { PublicationEditionComponent } from '../../components/publication-edition/publication-edition.component';
import { Publication } from '../../core/rest-services/publications/model/publication';
import { PublicationRestService } from '../../core/rest-services/publications/publication.rest-service';
import {CommonModule, Location} from '@angular/common';
import {Component, effect, inject, Signal, signal} from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms';
import {MatDialogModule} from '@angular/material/dialog';
import {MatIconModule} from '@angular/material/icon';
import {MatInputModule} from '@angular/material/input';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {MatSnackBar} from '@angular/material/snack-bar';
import {MatTabsModule} from '@angular/material/tabs';
import {MatTooltipModule} from '@angular/material/tooltip';
import {ActivatedRoute, Router} from '@angular/router';
import {PublicationEditionComponent} from '../../components/publication-edition/publication-edition.component';
import {Publication} from '../../core/rest-services/publications/model/publication';
import {PublicationRestService} from '../../core/rest-services/publications/publication.rest-service';
import {toSignal} from "@angular/core/rxjs-interop";
import {map} from "rxjs";
@Component({
selector: 'app-publication-update',
imports: [
CommonModule,
MatDialogModule,
MatIconModule,
MatInputModule,
MatProgressSpinnerModule,
MatTabsModule,
MatTooltipModule,
ReactiveFormsModule,
PublicationEditionComponent
],
templateUrl: './publication-update.component.html',
styleUrl: './publication-update.component.scss'
selector: 'app-publication-update',
imports: [
CommonModule,
MatDialogModule,
MatIconModule,
MatInputModule,
MatProgressSpinnerModule,
MatTabsModule,
MatTooltipModule,
ReactiveFormsModule,
PublicationEditionComponent
],
templateUrl: './publication-update.component.html',
styleUrl: './publication-update.component.scss'
})
export class PublicationUpdateComponent implements OnInit, OnDestroy {
private readonly publicationRestService = inject(PublicationRestService);
private readonly activatedRoute = inject(ActivatedRoute);
private readonly location = inject(Location);
private readonly router = inject(Router);
private readonly snackBar = inject(MatSnackBar);
private isLoadingSubject = new BehaviorSubject<boolean>(false);
private isSavingSubject = new BehaviorSubject<boolean>(false);
private subscriptions: Subscription[] = [];
publication: Publication | undefined;
export class PublicationUpdateComponent {
readonly #activatedRoute = inject(ActivatedRoute);
readonly #location = inject(Location);
readonly #publicationRestService = inject(PublicationRestService);
readonly #router = inject(Router);
readonly #snackBar = inject(MatSnackBar);
#isLoading = signal(false);
#isSavingSubject = signal(false);
publication = signal<Publication | undefined>(undefined);
get isLoading$(): Observable<boolean> {
return this.isLoadingSubject.asObservable();
#publicationId$ = this.#activatedRoute.params
.pipe(map(queryParams => queryParams['publicationId']));
#publicationId = toSignal(this.#publicationId$, {initialValue: undefined});
get isLoading(): Signal<boolean> {
return this.#isLoading.asReadonly();
}
get isSaving$(): Observable<boolean> {
return this.isSavingSubject.asObservable();
get isSaving(): Signal<boolean> {
return this.#isSavingSubject.asReadonly();
}
ngOnInit(): void {
this.isLoadingSubject.next(true);
const activatedRouteSubscription = this.activatedRoute.paramMap.subscribe(params => {
const publicationId = params.get('publicationId');
if (publicationId == undefined) {
this.snackBar.open($localize`A technical error occurred while loading publication data.`, $localize`Close`, { duration: 5000 });
this.location.back();
} else {
this.publicationRestService.getById(publicationId)
.then(publication => {
this.publication = publication;
})
.catch(error => {
const errorMessage = $localize`A technical error occurred while loading publication data.`;
this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
console.error(errorMessage, error)
})
.finally(() => this.isLoadingSubject.next(false));
}
});
this.subscriptions.push(activatedRouteSubscription);
}
constructor() {
effect(() => {
this.#isLoading.set(true);
ngOnDestroy(): void {
this.subscriptions.forEach(subscription => subscription?.unsubscribe());
const publicationId = this.#publicationId();
if (publicationId) {
this.#publicationRestService.getById(publicationId)
.then(publication => {
this.publication.set(publication);
})
.catch(error => {
const errorMessage = $localize`A technical error occurred while loading publication data.`;
this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
console.error(errorMessage, error)
})
.finally(() => this.#isLoading.set(false));
} else {
this.#snackBar.open($localize`A technical error occurred while loading publication data.`, $localize`Close`, {duration: 5000});
this.#location.back();
}
});
}
onPublicationSave(publication: Publication): void {
this.isSavingSubject.next(true);
this.publicationRestService.update(publication)
.then(() => {
this.snackBar.open($localize`Publication updated succesfully!`, $localize`Close`, { duration: 5000 });
this.router.navigate(['/home']);
})
.catch(error => {
const errorMessage = $localize`An error occured while saving publication modifications.`;
console.error(errorMessage, error);
this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
})
.finally(() => this.isSavingSubject.next(false));
this.#isSavingSubject.set(true);
this.#publicationRestService.update(publication)
.then(() => {
this.#snackBar.open($localize`Publication updated succesfully!`, $localize`Close`, {duration: 5000});
this.#router.navigate(['/home']);
})
.catch(error => {
const errorMessage = $localize`An error occured while saving publication modifications.`;
console.error(errorMessage, error);
this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
})
.finally(() => this.#isSavingSubject.set(false));
}
}