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

30
frontend/src/app/pages/my-publications/my-publications.component.html
View File

@@ -1,21 +1,21 @@
<h1 i18n>Your publications</h1>
<a [routerLink]="['/publications/new']"
class="new-publication"
matTooltip="Add a new publication"
matTooltipPosition="left"
matRipple
i18n-matTooltip>
+
class="new-publication"
matTooltip="Add a new publication"
matTooltipPosition="left"
matRipple
i18n-matTooltip>
+
</a>
@if ((isLoading$ | async) === true) {
<h2 i18n>Publication loading...</h2>
<mat-spinner></mat-spinner>
@if (isLoading()) {
<h2 i18n>Publication loading...</h2>
<mat-spinner></mat-spinner>
} @else {
@if ((isLoaded$ | async) === true) {
<app-publication-list [publications$]="publications$"></app-publication-list>
} @else {
<h2 i18n>There is no any publication...</h2>
}
}
@if (isLoaded()) {
<app-publication-list [publications]="publications()"></app-publication-list>
} @else {
<h2 i18n>There is no any publication...</h2>
}
}

48
frontend/src/app/pages/my-publications/my-publications.component.scss
View File

@@ -1,29 +1,29 @@
$newPublicationButtonSize: 1.7em;
:host {
display: flex;
flex-direction: column;
align-items: center;
display: flex;
flex-direction: column;
align-items: center;
.new-publication {
position: fixed;
border-radius: 10em;
background-color: #14A44D;
color: white;
display: flex;
justify-content: center;
align-items: center;
bottom: $newPublicationButtonSize;
right: $newPublicationButtonSize;
width: $newPublicationButtonSize;
height: $newPublicationButtonSize;
text-decoration: none;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
transition: background-color .2s ease-in-out;
font-size: 2.2em;
&:hover {
background-color: #0e7a3a;
}
.new-publication {
position: fixed;
border-radius: 10em;
background-color: #14A44D;
color: white;
display: flex;
justify-content: center;
align-items: center;
bottom: $newPublicationButtonSize;
right: $newPublicationButtonSize;
width: $newPublicationButtonSize;
height: $newPublicationButtonSize;
text-decoration: none;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
transition: background-color .2s ease-in-out;
font-size: 2.2em;
&:hover {
background-color: #0e7a3a;
}
}
}
}

66
frontend/src/app/pages/my-publications/my-publications.component.ts
View File

@@ -1,45 +1,35 @@
import { Component, inject, OnInit } from "@angular/core";
import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
import { MyPublicationsService } from "./my-publications.service";
import { Observable } from "rxjs";
import { PublicationListComponent } from "../../components/publication-list/publication-list.component";
import { Publication } from "../../core/rest-services/publications/model/publication";
import { CommonModule } from "@angular/common";
import { RouterModule } from "@angular/router";
import { MatTooltipModule } from "@angular/material/tooltip";
import { MatRippleModule } from "@angular/material/core";
import {Component, inject, OnInit} from "@angular/core";
import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
import {MyPublicationsService} from "./my-publications.service";
import {PublicationListComponent} from "../../components/publication-list/publication-list.component";
import {CommonModule} from "@angular/common";
import {RouterModule} from "@angular/router";
import {MatTooltipModule} from "@angular/material/tooltip";
import {MatRippleModule} from "@angular/material/core";
@Component({
selector: 'app-my-component',
templateUrl: './my-publications.component.html',
styleUrl: './my-publications.component.scss',
imports: [
CommonModule,
MatProgressSpinnerModule,
MatRippleModule,
MatTooltipModule,
PublicationListComponent,
RouterModule
],
providers: [MyPublicationsService]
selector: 'app-my-component',
templateUrl: './my-publications.component.html',
styleUrl: './my-publications.component.scss',
imports: [
CommonModule,
MatProgressSpinnerModule,
MatRippleModule,
MatTooltipModule,
PublicationListComponent,
RouterModule
],
providers: [MyPublicationsService]
})
export class MyPublicationsComponent implements OnInit {
private readonly myPublicationsService = inject(MyPublicationsService);
private readonly myPublicationsService = inject(MyPublicationsService);
get publications$(): Observable<Publication[]> {
return this.myPublicationsService.publications$;
}
publications = this.myPublicationsService.publications;
isLoading = this.myPublicationsService.isLoading;
isLoaded = this.myPublicationsService.isLoaded;
get isLoading$(): Observable<boolean> {
return this.myPublicationsService.isLoading$;
}
get isLoaded$(): Observable<boolean> {
return this.myPublicationsService.isLoaded$;
}
ngOnInit(): void {
this.myPublicationsService.loadAuthenticatedUserPublications();
}
}
ngOnInit(): void {
this.myPublicationsService.loadAuthenticatedUserPublications();
}
}

10
frontend/src/app/pages/my-publications/my-publications.routes.ts
View File

@@ -1,7 +1,7 @@
import { Route } from "@angular/router";
import { authenticationGuard } from "../../core/guard/authentication.guard";
import { MyPublicationsComponent } from "./my-publications.component";
import {Route} from "@angular/router";
import {authenticationGuard} from "../../core/guard/authentication.guard";
import {MyPublicationsComponent} from "./my-publications.component";
export const ROUTES: Route[] = [
{ path: '', component: MyPublicationsComponent, canActivate: [authenticationGuard] }
]
{path: '', component: MyPublicationsComponent, canActivate: [authenticationGuard]}
]

103
frontend/src/app/pages/my-publications/my-publications.service.ts
View File

@@ -1,57 +1,56 @@
import { inject, Injectable } from "@angular/core";
import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service";
import { AuthenticationService } from "../../core/service/authentication.service";
import { BehaviorSubject, Observable } from "rxjs";
import { Publication } from "../../core/rest-services/publications/model/publication";
import { Router } from "@angular/router";
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 {AuthenticationService} from "../../core/service/authentication.service";
import {Publication} from "../../core/rest-services/publications/model/publication";
import {Router} from "@angular/router";
import {MatSnackBar} from "@angular/material/snack-bar";
@Injectable()
export class MyPublicationsService {
private readonly authenticationService = inject(AuthenticationService);
private readonly publicationRestService = inject(PublicationRestService);
private readonly snackBar = inject(MatSnackBar);
private readonly router = inject(Router);
private publicationsSubject = new BehaviorSubject<Publication[]>([]);
private isLoadingSubject = new BehaviorSubject<boolean>(false);
private isLoadedSubject = new BehaviorSubject<boolean>(false);
readonly #authenticationService = inject(AuthenticationService);
readonly #publicationRestService = inject(PublicationRestService);
readonly #snackBar = inject(MatSnackBar);
readonly #router = inject(Router);
#publications = signal<Publication[]>([]);
#isLoading = signal(false);
#isLoaded = signal(false);
get publications$(): Observable<Publication[]> {
return this.publicationsSubject.asObservable();
get publications(): Signal<Publication[]> {
return this.#publications.asReadonly();
}
get isLoading(): Signal<boolean> {
return this.#isLoading.asReadonly();
}
get isLoaded(): Signal<boolean> {
return this.#isLoaded.asReadonly();
}
loadAuthenticatedUserPublications(): void {
const authenticatedUser = this.#authenticationService.getAuthenticatedUser();
if (authenticatedUser) {
this.#isLoading.set(true);
this.#isLoaded.set(false);
const query = `author_id=${authenticatedUser.id}`;
this.#publicationRestService.search(query)
.then(publications => {
this.#publications.set(publications);
})
.catch(error => {
const errorMessage = $localize`An error occurred while retrieving your publications...`;
this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
console.error(errorMessage, error);
})
.finally(() => {
this.#isLoading.set(false);
this.#isLoaded.set(true);
});
} else {
this.#authenticationService.unauthenticate();
this.#snackBar.open($localize`You are unauthenticated. Please, log-in first.`, $localize`Close`, {duration: 5000});
this.#router.navigate(['/login']);
}
get isLoading$(): Observable<boolean> {
return this.isLoadingSubject.asObservable();
}
get isLoaded$(): Observable<boolean> {
return this.isLoadedSubject.asObservable();
}
loadAuthenticatedUserPublications(): void {
const authenticatedUser = this.authenticationService.getAuthenticatedUser();
if (authenticatedUser) {
this.isLoadingSubject.next(true);
this.isLoadedSubject.next(false);
const query = `author_id=${authenticatedUser.id}`;
this.publicationRestService.search(query)
.then(publications => {
this.publicationsSubject.next(publications);
})
.catch(error => {
const errorMessage = $localize`An error occurred while retrieving your publications...`;
this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
console.error(errorMessage, error);
})
.finally(() => {
this.isLoadingSubject.next(false);
this.isLoadedSubject.next(true);
});
} else {
this.authenticationService.unauthenticate();
this.snackBar.open($localize`You are unauthenticated. Please, log-in first.`, $localize`Close`, { duration: 5000 });
this.router.navigate(['/login']);
}
}
}
}
}