Convert observables to signals.

frontend/package.json

@@ -17,32 +17,26 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^21.0.6",
-    "@angular/cdk": "^21.0.5",
-    "@angular/common": "^21.0.6",
-    "@angular/compiler": "^21.0.6",
-    "@angular/core": "^21.0.6",
-    "@angular/forms": "^21.0.6",
-    "@angular/material": "^21.0.5",
-    "@angular/platform-browser": "^21.0.6",
-    "@angular/platform-browser-dynamic": "^21.0.6",
-    "@angular/router": "^21.0.6",
-    "rxjs": "~7.8.0",
-    "tslib": "^2.3.0",
-    "zone.js": "~0.15.1"
+    "@angular/animations": "^21.1.2",
+    "@angular/cdk": "^21.1.2",
+    "@angular/common": "^21.1.2",
+    "@angular/compiler": "^21.1.2",
+    "@angular/core": "^21.1.2",
+    "@angular/forms": "^21.1.2",
+    "@angular/material": "^21.1.2",
+    "@angular/platform-browser": "^21.1.2",
+    "@angular/platform-browser-dynamic": "^21.1.2",
+    "@angular/router": "^21",
+    "rxjs": "~7.8.2",
+    "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@angular/build": "^21.0.4",
-    "@angular/cli": "^21.0.4",
-    "@angular/compiler-cli": "^21.0.6",
-    "@angular/localize": "^21.0.6",
-    "@types/jasmine": "~5.1.0",
-    "jasmine-core": "~5.1.0",
-    "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.1.0",
+    "@angular/build": "^21.1.2",
+    "@angular/cli": "^21.1.2",
+    "@angular/compiler-cli": "^21.1.2",
+    "@angular/localize": "^21.1.2",
+    "@types/jasmine": "~5.1.15",
+    "jasmine-core": "~5.13.0",
     "typescript": "~5.9.3"
   }
 }

frontend/src/app/components/footer/footer.component.html

@@ -1,8 +1,8 @@
 <div i18n>
     <span class="copy-left">&copy;</span>
-    2016 - 2024 All rights reserved
+    2016 - 2026 All rights reserved
     -
-    2.1
+    2.2
     <a [routerLink]="['./']" matTooltip="Health checking will be available in future..." i18n-matTooltip>
         <mat-icon>favorite</mat-icon>
     </a>

frontend/src/app/components/footer/footer.component.scss

@@ -12,6 +12,7 @@
         display: flex;
         flex-direction: row;
         align-items: center;
+        gap: .2em;
 
         .copy-left {
             transform: rotate(180deg);

frontend/src/app/components/footer/footer.component.ts

@@ -9,6 +9,4 @@ import { RouterModule } from '@angular/router';
     templateUrl: './footer.component.html',
     styleUrl: './footer.component.scss'
 })
-export class FooterComponent {
-
-}
+export class FooterComponent {}

frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.html

@@ -10,7 +10,7 @@
     <h1 i18n>Select an illustration</h1>
 </header>
 <div class="picture-container">
-    @if (isLoading) {
+    @if (isLoading()) {
         <h2 i18n>Pictures loading...</h2>
         <mat-spinner></mat-spinner>
     } @else {

frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, OnInit } from "@angular/core";
+import {Component, inject, OnInit, signal} from "@angular/core";
 import { Picture } from "../../../core/rest-services/picture/model/picture";
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import { MatSnackBar } from "@angular/material/snack-bar";
@@ -24,12 +24,12 @@ export class PictureSelectionDialog implements OnInit {
     private readonly snackBar = inject(MatSnackBar);
     private readonly dialogRef = inject(MatDialogRef<PictureSelectionDialog>);
 
-    isLoading: boolean = false;
-    isLoaded: boolean = false;
+    isLoading = signal(false);
+    isLoaded = signal(false);
     pictures: Picture[] = [];
 
     ngOnInit(): void {
-        this.isLoading = true;
+        this.isLoading.set(true);
         this.pictureRestService.getAllOfCurrentUser()
             .then(pictures => {
                 this.pictures = pictures;
@@ -38,14 +38,14 @@ export class PictureSelectionDialog implements OnInit {
                 if (error.status === 401) {
                     this.dialogRef.close();
                 } else {
-                    const errorMessage = $localize`An error occured while loading pictures.`;
+                    const errorMessage = $localize`An error occurred while loading pictures.`;
                     console.error(errorMessage, error);
                     this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
                 }
             })
             .finally(() => {
-                this.isLoading = false;
-                this.isLoaded = true;
+                this.isLoading.set(false);
+                this.isLoaded.set(true);
             });
     }
 
@@ -65,7 +65,7 @@ export class PictureSelectionDialog implements OnInit {
                     this.dialogRef.close(pictureId);
                 })
                 .catch(error => {
-                    const errorMessage = $localize`A technical error occured while uploading your picture.`;
+                    const errorMessage = $localize`A technical error occurred while uploading your picture.`;
                     console.error(errorMessage, error);
                     this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
                 });

frontend/src/app/components/publication-list/publication-list.component.html

@@ -1,4 +1,4 @@
-@for(publication of publications$ | async; track publication) {
+@for(publication of publications(); track publication.id) {
     <a [routerLink]="['/publications/' + publication.id]" class="publication">
         <img src="/api/pictures/{{ publication.illustrationId }}"/>
         <div class="body">

frontend/src/app/components/publication-list/publication-list.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from "@angular/core";
+import {Component, input, Input} from "@angular/core";
 import { Publication } from "../../core/rest-services/publications/model/publication";
 import { Observable } from "rxjs";
 import { CommonModule } from "@angular/common";
@@ -12,6 +12,5 @@ import { MatTooltipModule } from "@angular/material/tooltip";
     imports: [CommonModule, RouterModule, MatTooltipModule]
 })
 export class PublicationListComponent {
-    @Input()
-    publications$!: Observable<Publication[]>;
+    publications = input.required<Publication[]>();
 }

frontend/src/app/components/side-menu/side-menu.component.html

@@ -1,4 +1,4 @@
-<div class="menu {{ isOpenned ? 'displayed' : '' }}">
+<div class="menu {{ isOpened ? 'displayed' : '' }}">
     <h1>
         <a [routerLink]="['/home']">
             <img src="assets/images/codiki.png" alt="logo"/>
@@ -16,4 +16,4 @@
     <h2 i18n>Categories</h2>
     <app-categories-menu (categoryClicked)="close()"></app-categories-menu>
 </div>
-<div class="overlay {{ isOpenned ? 'displayed' : ''}}" (click)="close()"></div>
+<div class="overlay {{ isOpened ? 'displayed' : ''}}" (click)="close()"></div>

frontend/src/app/components/side-menu/side-menu.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import {Component, signal} from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterModule } from '@angular/router';
@@ -18,13 +18,13 @@ import { MatRippleModule } from '@angular/material/core';
     ]
 })
 export class SideMenuComponent {
-  isOpenned: boolean = false;
+  isOpened = signal(false);
 
   open(): void {
-    this.isOpenned = true;
+    this.isOpened.set(true);
   }
 
   close(): void {
-    this.isOpenned = false;
+    this.isOpened.set(false);
   }
 }

frontend/src/app/components/submit-button/submit-button.component.html

@@ -1,10 +1,10 @@
 <button type="submit"
-        class="cod-button {{color}}"
-        [disabled]="disabled || requestPending"
+        class="cod-button {{color()}}"
+        [disabled]="disabled() || requestPending()"
         (click)="click.emit()"
         matRipple>
-    @if (requestPending) {
-        <mat-spinner class="spinner {{color}}" [diameter]="25"></mat-spinner>
+    @if (requestPending()) {
+        <mat-spinner class="spinner {{color()}}" [diameter]="25"></mat-spinner>
     }
     <span>
         <ng-content/>

frontend/src/app/components/submit-button/submit-button.component.ts

@@ -1,5 +1,5 @@
 
-import { Component, EventEmitter, Input, Output } from "@angular/core";
+import {Component, EventEmitter, input, Input, output, Output, signal} from "@angular/core";
 import { MatRippleModule } from "@angular/material/core";
 import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
 
@@ -13,10 +13,9 @@ import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
 ]
 })
 export class SubmitButtonComponent {
-    @Input() requestPending: boolean = false;
-    @Input() label: string = '';
-    @Input() disabled: boolean = false;
-    @Input() color?: 'secondary';
-    @Output() click = new EventEmitter<void>();
+    requestPending = input.required<boolean>();
+    label = input<string>();
+    disabled = input.required<boolean>();
+    color = input<'secondary' | undefined>('secondary');
+    click = output<void>();
   }
-  

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

@@ -1,10 +1,10 @@
 <h1 i18n>Last publications</h1>
-@if ((isLoading$ | async) === true) {
+@if ((isLoading())) {
     <h2 i18n>Publications loading...</h2>
-    <mat-spinner></mat-spinner>
+    <mat-spinner />
 } @else {
-    @if ((publications$ | async) != []) {
-        <app-publication-list [publications$]="publications$"></app-publication-list>
+    @if (publications(); as publications) {
+        <app-publication-list [publications]="publications" />
     } @else {
         <h2 i18n>No any publication.</h2>
     }

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

@@ -1,10 +1,11 @@
-import { Component, OnInit, inject } from '@angular/core';
+import {Component, OnInit, inject, Signal} from '@angular/core';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { Observable } from 'rxjs';
 import { PublicationListComponent } from '../../components/publication-list/publication-list.component';
 import { Publication } from '../../core/rest-services/publications/model/publication';
 import { HomeService } from './home.service';
 import { CommonModule } from '@angular/common';
+import {toSignal} from "@angular/core/rxjs-interop";
 
 @Component({
     selector: 'app-home',
@@ -20,12 +21,12 @@ import { CommonModule } from '@angular/common';
 export class HomeComponent implements OnInit {
   private homeService = inject(HomeService);
 
-  get isLoading$(): Observable<boolean> {
-    return this.homeService.isLoading$;
+  get isLoading(): Signal<boolean> {
+    return toSignal(this.homeService.isLoading$, { initialValue: false });
   }
 
-  get publications$(): Observable<Publication[]> {
-    return this.homeService.publications$;
+  get publications(): Signal<Publication[]> {
+    return toSignal(this.homeService.publications$, { initialValue: [] });
   }
 
   ngOnInit(): void {

frontend/src/app/pages/my-publications/my-publications.component.html

@@ -9,12 +9,12 @@
     +
 </a>
 
-@if ((isLoading$ | async) === true) {
+@if (isLoading()) {
     <h2 i18n>Publication loading...</h2>
     <mat-spinner></mat-spinner>
 } @else {
-    @if ((isLoaded$ | async) === true) {
-        <app-publication-list [publications$]="publications$"></app-publication-list>
+    @if (isLoaded()) {
+        <app-publication-list [publications]="publications()"></app-publication-list>
     } @else {
         <h2 i18n>There is no any publication...</h2>
     }

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

@@ -1,4 +1,4 @@
-import { Component, inject, OnInit } from "@angular/core";
+import {Component, inject, OnInit, Signal} from "@angular/core";
 import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
 import { MyPublicationsService } from "./my-publications.service";
 import { Observable } from "rxjs";
@@ -8,6 +8,7 @@ import { CommonModule } from "@angular/common";
 import { RouterModule } from "@angular/router";
 import { MatTooltipModule } from "@angular/material/tooltip";
 import { MatRippleModule } from "@angular/material/core";
+import {toSignal} from "@angular/core/rxjs-interop";
 
 
 @Component({
@@ -27,16 +28,16 @@ import { MatRippleModule } from "@angular/material/core";
 export class MyPublicationsComponent implements OnInit {
     private readonly myPublicationsService = inject(MyPublicationsService);
 
-    get publications$(): Observable<Publication[]> {
-        return this.myPublicationsService.publications$;
+    get publications(): Signal<Publication[]> {
+        return toSignal(this.myPublicationsService.publications$, { initialValue: [] });
     }
 
-    get isLoading$(): Observable<boolean> {
-        return this.myPublicationsService.isLoading$;
+    get isLoading(): Signal<boolean> {
+        return toSignal(this.myPublicationsService.isLoading$, { initialValue: false });
     }
 
-    get isLoaded$(): Observable<boolean> {
-        return this.myPublicationsService.isLoaded$;
+    get isLoaded(): Signal<boolean> {
+        return toSignal(this.myPublicationsService.isLoaded$, { initialValue: false });
     }
 
     ngOnInit(): void {

frontend/src/app/pages/publication/publication.component.html

@@ -1,14 +1,14 @@
-@if (isLoading) {
+@if (isLoading()) {
     <h2 i18n>Publication content loading...</h2>
     <mat-spinner></mat-spinner>
 } @else {
-    @if (publication) {
+    @if (publication(); as publication) {
         <div class="card">
             <img src="/api/pictures/{{ publication.illustrationId }}" />
             <header>
                 <h1>{{ publication.title }}</h1>
                 <h2>{{ publication.description }}</h2>
-                @if (isAuthorAndUserEquals) {
+                @if (isAuthorAndUserEquals()) {
                     <a [routerLink]="['edit']"
                         class="button action"
                         matTooltip="Click to edit the publication"

frontend/src/app/pages/publication/publication.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule, Location } from '@angular/common';
-import { Component, OnDestroy, OnInit, inject } from '@angular/core';
+import {Component, OnDestroy, OnInit, inject, signal} from '@angular/core';
 import { MatRippleModule } from '@angular/material/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatIcon } from '@angular/material/icon';
@@ -37,9 +37,9 @@ export class PublicationComponent implements OnInit, OnDestroy {
   private readonly snackBar = inject(MatSnackBar);
   private paramMapSubscription?: Subscription;
   private afterDialogCloseSubscription?: Subscription;
-  isLoading: boolean = false;
-  isAuthorAndUserEquals: boolean = false;
-  publication?: Publication;
+  isLoading = signal(false);
+  isAuthorAndUserEquals = signal(false);
+  publication = signal<Publication | null>(null);
 
   ngOnInit(): void {
     this.paramMapSubscription = this.activatedRoute
@@ -48,12 +48,12 @@ export class PublicationComponent implements OnInit, OnDestroy {
           const publicationId = params.get('publicationId');
 
           if (publicationId) {
-            this.isLoading = true;
+            this.isLoading.set(true);
 
             this.publicationRestService.getById(publicationId)
                 .then(publication => {
-                  this.publication = publication;
-                  this.isAuthorAndUserEquals = this.authenticationService.getAuthenticatedUser()?.id === this.publication.author.id;
+                  this.publication.set(publication);
+                  this.isAuthorAndUserEquals.set(this.authenticationService.getAuthenticatedUser()?.id === this.publication()?.author.id);
                   setTimeout(() => Prism.highlightAll(), 100);
                 })
                 .catch(error => {
@@ -62,7 +62,7 @@ export class PublicationComponent implements OnInit, OnDestroy {
                   console.error(errorMessage, error);
                 })
                 .finally(() => {
-                  this.isLoading = false;
+                  this.isLoading.set(false);
                 });
           }
         });
@@ -86,8 +86,9 @@ export class PublicationComponent implements OnInit, OnDestroy {
 
     this.afterDialogCloseSubscription = dialogRef.afterClosed()
       .subscribe(response => {
-        if (response && this.publication?.id) {
-          this.publicationRestService.delete(this.publication.id);
+        const publication = this.publication();
+        if (response && publication?.id) {
+          this.publicationRestService.delete(publication.id);
           this.snackBar.open($localize`Publication deleted`, $localize`Close`, { duration: 5000 });
           this.location.back();
         }

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

@@ -1,11 +1,12 @@
-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 {Observable} 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 {toSignal} from "@angular/core/rxjs-interop";
 
 @Component({
     selector: 'app-search-publications',
@@ -14,14 +15,15 @@ import { SearchPublicationsService } from "./search-publications.service";
     imports: [CommonModule, MatProgressSpinner, PublicationListComponent],
     providers: [SearchPublicationsService]
 })
-export class SearchPublicationsComponent implements OnInit, OnDestroy {
+export class SearchPublicationsComponent {
     private searchPublicationsService = inject(SearchPublicationsService);
     private activatedRoute = inject(ActivatedRoute);
-    private queryParamsSubscription?: Subscription;
 
-    ngOnInit(): void {
-        this.queryParamsSubscription = this.activatedRoute.queryParamMap
-            .subscribe(params => {  
+    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}`);
@@ -30,11 +32,8 @@ export class SearchPublicationsComponent implements OnInit, OnDestroy {
           if (query) {
             this.searchPublicationsService.loadPublications(query);
           }
-            });
         }
-
-    ngOnDestroy(): void {
-        this.queryParamsSubscription?.unsubscribe();
+      });
     }
 
     get publications$(): Observable<Publication[]> {

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

@@ -4,7 +4,6 @@ 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);