Convert observables to signals.

Rework picture selector to use signals.
2026-02-02 17:51:49 +01:00 · 2026-02-02 17:38:57 +01:00 · 2026-02-02 17:29:49 +01:00 · 2026-02-02 17:26:30 +01:00 · 2026-02-02 17:14:21 +01:00 · 2026-02-02 16:56:55 +01:00
40 changed files with 4919 additions and 9156 deletions
--- a/backend/codiki-exposition/pom.xml
+++ b/backend/codiki-exposition/pom.xml
@@ -33,28 +33,5 @@
            <groupId>org.apache.tika</groupId>
            <artifactId>tika-core</artifactId>
        </dependency>
-<!--        <dependency>-->
-<!--            <groupId>org.springframework.boot</groupId>-->
-<!--            <artifactId>spring-boot-starter-data-jpa</artifactId>-->
-<!--        </dependency>-->
-<!--        <dependency>-->
-<!--            <groupId>org.springframework.boot</groupId>-->
-<!--            <artifactId>spring-boot-starter-security</artifactId>-->
-<!--        </dependency>-->
-<!--        <dependency>-->
-<!--            <groupId>org.postgresql</groupId>-->
-<!--            <artifactId>postgresql</artifactId>-->
-<!--            <scope>runtime</scope>-->
-<!--        </dependency>-->
-<!--        <dependency>-->
-<!--            <groupId>org.springframework.boot</groupId>-->
-<!--            <artifactId>spring-boot-starter-test</artifactId>-->
-<!--            <scope>test</scope>-->
-<!--        </dependency>-->
-<!--        <dependency>-->
-<!--            <groupId>org.springframework.security</groupId>-->
-<!--            <artifactId>spring-security-test</artifactId>-->
-<!--            <scope>test</scope>-->
-<!--        </dependency>-->
    </dependencies>
 </project>
--- a/backend/codiki-exposition/src/main/java/org/codiki/exposition/configuration/security/SecurityConfiguration.java
+++ b/backend/codiki-exposition/src/main/java/org/codiki/exposition/configuration/security/SecurityConfiguration.java
@@ -29,7 +29,7 @@ public class SecurityConfiguration {
    public SecurityFilterChain securityFilterChain(
        HttpSecurity httpSecurity,
        JwtAuthenticationFilter jwtAuthenticationFilter
-    ) throws Exception {
+    ) {
        httpSecurity
            .csrf(AbstractHttpConfigurer::disable)
            .httpBasic(Customizer.withDefaults())
--- a/backend/codiki-infrastructure/src/main/java/org/codiki/infrastructure/configuration/JpaConfiguration.java
+++ b/backend/codiki-infrastructure/src/main/java/org/codiki/infrastructure/configuration/JpaConfiguration.java
@@ -1,6 +1,6 @@
 package org.codiki.infrastructure.configuration;

-import org.springframework.boot.autoconfigure.domain.EntityScan;
+import org.springframework.boot.persistence.autoconfigure.EntityScan;
 import org.springframework.context.annotation.Configuration;
 import org.springframework.data.jpa.repository.config.EnableJpaRepositories;

--- a/backend/pom.xml
+++ b/backend/pom.xml
@@ -15,11 +15,11 @@
 		<java.version>21</java.version>
 		<maven.compiler.source>21</maven.compiler.source>
 		<maven.compiler.target>21</maven.compiler.target>
-		<jakarta.servlet-api.version>6.0.0</jakarta.servlet-api.version>
-		<java-jwt.version>4.4.0</java-jwt.version>
-		<postgresql.version>42.7.0</postgresql.version>
-		<tika-core.version>2.9.0</tika-core.version>
-		<commons-lang3.version>3.14.0</commons-lang3.version>
+		<jakarta.servlet-api.version>6.1.0</jakarta.servlet-api.version>
+		<java-jwt.version>4.5.0</java-jwt.version>
+		<postgresql.version>42.7.8</postgresql.version>
+		<tika-core.version>3.2.3</tika-core.version>
+		<commons-lang3.version>3.20.0</commons-lang3.version>
 	</properties>

 	<modules>
@@ -35,7 +35,7 @@
 			<dependency>
 				<groupId>org.springframework.boot</groupId>
 				<artifactId>spring-boot-dependencies</artifactId>
-				<version>3.2.0</version>
+				<version>4.0.1</version>
 				<type>pom</type>
 				<scope>import</scope>
 			</dependency>
@@ -84,8 +84,6 @@
 				<artifactId>commons-lang3</artifactId>
 				<version>${commons-lang3.version}</version>
 			</dependency>
-
-
 		</dependencies>
 	</dependencyManagement>

--- a/frontend/angular.json
+++ b/frontend/angular.json
@@ -24,13 +24,14 @@
      },
      "architect": {
        "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
          "options": {
            "outputPath": "dist/codiki",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": [
-              "zone.js"
+              "zone.js",
+              "@angular/localize/init"
            ],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
@@ -102,7 +103,7 @@
          "defaultConfiguration": ""
        },
        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
          "configurations": {
            "production-en": {
              "buildTarget": "codiki:build:production-en"
@@ -123,13 +124,13 @@
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
          "options": {
            "buildTarget": "codiki:build"
          }
        },
        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
          "options": {
            "polyfills": [
              "zone.js",
@@ -153,5 +154,31 @@
  },
  "cli": {
    "analytics": false
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
  }
 }
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,32 +17,26 @@
  },
  "private": true,
  "dependencies": {
-    "@angular/animations": "^18.2.5",
-    "@angular/cdk": "^18.2.5",
-    "@angular/common": "^18.2.5",
-    "@angular/compiler": "^18.2.5",
-    "@angular/core": "^18.2.5",
-    "@angular/forms": "^18.2.5",
-    "@angular/material": "^18.2.5",
-    "@angular/platform-browser": "^18.2.5",
-    "@angular/platform-browser-dynamic": "^18.2.5",
-    "@angular/router": "^18.2.5",
-    "rxjs": "~7.8.0",
-    "tslib": "^2.3.0",
-    "zone.js": "~0.14.10"
+    "@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-devkit/build-angular": "^18.2.5",
-    "@angular/cli": "^18.2.5",
-    "@angular/compiler-cli": "^18.2.5",
-    "@angular/localize": "^18.2.5",
-    "@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",
-    "typescript": "~5.5.4"
+    "@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"
  }
 }
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -1,20 +1,18 @@
-import { CommonModule } from '@angular/common';
+
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { HeaderComponent } from './components/header/header.component';
 import { FooterComponent } from './components/footer/footer.component';

@Component({
-  selector: 'app-root',
-  standalone: true,
-  imports: [
-    CommonModule,
+    selector: 'app-root',
+    imports: [
    RouterOutlet,
    HeaderComponent,
    FooterComponent
-  ],
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.scss'
+],
+    templateUrl: './app.component.html',
+    styleUrl: './app.component.scss'
 })
 export class AppComponent {
  title = 'codiki-ng';
--- a/frontend/src/app/app.config.ts
+++ b/frontend/src/app/app.config.ts
@@ -1,4 +1,4 @@
-import { APP_INITIALIZER, ApplicationConfig } from '@angular/core';
+import { ApplicationConfig, inject, provideAppInitializer } from '@angular/core';
 import { provideRouter, withRouterConfig } from '@angular/router';

 import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
@@ -19,11 +19,9 @@ export const appConfig: ApplicationConfig = {
    provideAnimationsAsync(),
    provideHttpClient(withInterceptorsFromDi()),
    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
-    {
-      provide: APP_INITIALIZER,
-      useFactory: (authenticationService: AuthenticationService) => () => authenticationService.startAuthenticationCheckingProcess(),
-      deps: [AuthenticationService],
-      multi: true
-    }
+    provideAppInitializer(() => {
+        const initializerFn = ((authenticationService: AuthenticationService) => () => authenticationService.startAuthenticationCheckingProcess())(inject(AuthenticationService));
+        return initializerFn();
+      })
  ]
 };
--- a/frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.ts
+++ b/frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.ts
@@ -9,7 +9,6 @@ export interface ConfirmationDialogData {

@Component({
    selector: 'app-confirmation-dialog',
-    standalone: true,
    templateUrl: './confirmation-dialog.component.html',
    styleUrl: './confirmation-dialog.component.scss',
    imports: [MatRippleModule]
--- a/frontend/src/app/components/footer/footer.component.html
+++ b/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>
@@ -11,4 +11,4 @@
    <mat-icon matTooltip="Documentation will be available in future..." i18n-matTooltip>menu_book</mat-icon>
    -
    <span i18n>Development realised by</span> Florian THIERRY
-</div>
+</div>
--- a/frontend/src/app/components/footer/footer.component.scss
+++ b/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);
@@ -28,4 +29,4 @@
            align-items: center;
        }
    }
-}
+}
--- a/frontend/src/app/components/footer/footer.component.ts
+++ b/frontend/src/app/components/footer/footer.component.ts
@@ -4,12 +4,9 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterModule } from '@angular/router';

@Component({
-  selector: 'app-footer',
-  standalone: true,
-  imports: [MatIconModule, MatTooltipModule, RouterModule],
-  templateUrl: './footer.component.html',
-  styleUrl: './footer.component.scss'
+    selector: 'app-footer',
+    imports: [MatIconModule, MatTooltipModule, RouterModule],
+    templateUrl: './footer.component.html',
+    styleUrl: './footer.component.scss'
 })
-export class FooterComponent {
-
-}
+export class FooterComponent {}
--- a/frontend/src/app/components/header/header.component.ts
+++ b/frontend/src/app/components/header/header.component.ts
@@ -1,4 +1,4 @@
-import { CommonModule } from '@angular/common';
+
 import { Component, inject } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -12,10 +12,8 @@ import { PublicationsSearchBarComponent } from '../publications-search-bar/publi
 import { SideMenuComponent } from '../side-menu/side-menu.component';

@Component({
-  selector: 'app-header',
-  standalone: true,
-  imports: [
-    CommonModule,
+    selector: 'app-header',
+    imports: [
    MatButtonModule,
    MatIconModule,
    MatMenuModule,
@@ -24,10 +22,10 @@ import { SideMenuComponent } from '../side-menu/side-menu.component';
    PublicationsSearchBarComponent,
    ReactiveFormsModule,
    RouterModule,
-    SideMenuComponent,
-  ],
-  templateUrl: './header.component.html',
-  styleUrl: './header.component.scss',
+    SideMenuComponent
+],
+    templateUrl: './header.component.html',
+    styleUrl: './header.component.scss'
 })
 export class HeaderComponent {
  private authenticationService = inject(AuthenticationService);
--- a/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.ts
+++ b/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.ts
@@ -86,7 +86,6 @@ export const PROGRAMMING_LANGUAGES: ProgramingLanguage[] = [

@Component({
    selector: 'app-code-block-dialog',
-    standalone: true,
    templateUrl: './code-block-dialog.component.html',
    styleUrl: './code-block-dialog.component.scss',
    imports: [
--- a/frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.html
+++ b/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 {
@@ -40,4 +40,4 @@
        Add new picture
    </button>
    <input type="file" (change)="uploadPicture($event)" #fileUpload/>
-</footer>
+</footer>
--- a/frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.ts
+++ b/frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.ts
@@ -1,36 +1,35 @@
-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 {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import { MatSnackBar } from "@angular/material/snack-bar";
 import { PictureRestService } from "../../../core/rest-services/picture/picture.rest-service";
 import { MatIcon } from "@angular/material/icon";
 import { MatDialogRef } from "@angular/material/dialog";
-import {MatRippleModule} from '@angular/material/core'; 
+import {MatRippleModule} from '@angular/material/core';
 import { MatTooltip } from "@angular/material/tooltip";

@Component({
    selector: 'app-picture-selection',
-    standalone: true,
    templateUrl: './picture-selection-dialog.component.html',
    styleUrl: './picture-selection-dialog.component.scss',
    imports: [
-        MatIcon, 
-        MatRippleModule, 
-        MatProgressSpinnerModule, 
+        MatIcon,
+        MatRippleModule,
+        MatProgressSpinnerModule,
        MatTooltip
-    ],
+    ]
 })
 export class PictureSelectionDialog implements OnInit {
    private readonly pictureRestService = inject(PictureRestService);
    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;
@@ -39,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);
            });
    }

@@ -66,10 +65,10 @@ 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 });
                });
        }
    }
-}
+}
--- a/frontend/src/app/components/publication-edition/publication-edition.component.ts
+++ b/frontend/src/app/components/publication-edition/publication-edition.component.ts
@@ -19,7 +19,6 @@ import { MatRippleModule } from "@angular/material/core";

@Component({
    selector: 'app-publication-edition',
-    standalone: true,
    templateUrl: './publication-edition.component.html',
    styleUrl: './publication-edition.component.scss',
    imports: [
@@ -32,7 +31,6 @@ import { MatRippleModule } from "@angular/material/core";
        MatSelectModule,
        MatTabsModule,
        MatTooltipModule,
-        PictureSelectionDialog,
        ReactiveFormsModule,
        SubmitButtonComponent
    ],
@@ -147,4 +145,4 @@ export class PublicationEditionComponent implements OnChanges, OnDestroy {
            this.publicationEditionService.loadPreview();
        }
    }
-}
+}
--- a/frontend/src/app/components/publication-list/publication-list.component.html
+++ b/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">
@@ -13,4 +13,4 @@
            </span>
        </div>
    </a>
-}
+}
--- a/frontend/src/app/components/publication-list/publication-list.component.ts
+++ b/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";
@@ -7,12 +7,10 @@ import { MatTooltipModule } from "@angular/material/tooltip";

@Component({
    selector: 'app-publication-list',
-    standalone: true,
    templateUrl: './publication-list.component.html',
    styleUrl: './publication-list.component.scss',
    imports: [CommonModule, RouterModule, MatTooltipModule]
 })
 export class PublicationListComponent {
-    @Input()
-    publications$!: Observable<Publication[]>;
-}
+    publications = input.required<Publication[]>();
+}
--- a/frontend/src/app/components/publications-search-bar/publications-search-bar.component.ts
+++ b/frontend/src/app/components/publications-search-bar/publications-search-bar.component.ts
@@ -9,7 +9,6 @@ import { Router } from "@angular/router";
    selector: 'app-publications-search-bar',
    templateUrl: './publications-search-bar.component.html',
    styleUrl: './publications-search-bar.component.scss',
-    standalone: true,
    imports: [
        MatIconModule,
        MatRippleModule,
--- a/frontend/src/app/components/side-menu/categories-menu/categories-menu.component.ts
+++ b/frontend/src/app/components/side-menu/categories-menu/categories-menu.component.ts
@@ -6,15 +6,14 @@ import { Observable } from "rxjs";
 import { RouterModule } from "@angular/router";

@Component({
-	selector: 'app-categories-menu',
-  standalone: true,
-  templateUrl: './categories-menu.component.html',
-  imports: [
-    CommonModule,
-    RouterModule,
-    MatIconModule
-  ],
-  styleUrl: './categories-menu.component.scss'
+    selector: 'app-categories-menu',
+    templateUrl: './categories-menu.component.html',
+    imports: [
+        CommonModule,
+        RouterModule,
+        MatIconModule
+    ],
+    styleUrl: './categories-menu.component.scss'
 })
 export class CategoriesMenuComponent implements OnInit {
  private sideMenuService = inject(SideMenuService);
--- a/frontend/src/app/components/side-menu/side-menu.component.html
+++ b/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>
--- a/frontend/src/app/components/side-menu/side-menu.component.ts
+++ b/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';
@@ -6,26 +6,25 @@ import { CategoriesMenuComponent } from './categories-menu/categories-menu.compo
 import { MatRippleModule } from '@angular/material/core';

@Component({
-  selector: 'app-side-menu',
-  standalone: true,
-  templateUrl: './side-menu.component.html',
-  styleUrl: './side-menu.component.scss',
-  imports: [
-    CategoriesMenuComponent, 
-    MatIconModule,
-    MatRippleModule, 
-    MatTooltipModule,
-    RouterModule
-  ]
+    selector: 'app-side-menu',
+    templateUrl: './side-menu.component.html',
+    styleUrl: './side-menu.component.scss',
+    imports: [
+        CategoriesMenuComponent,
+        MatIconModule,
+        MatRippleModule,
+        MatTooltipModule,
+        RouterModule
+    ]
 })
 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);
  }
 }
--- a/frontend/src/app/components/submit-button/submit-button.component.html
+++ b/frontend/src/app/components/submit-button/submit-button.component.html
@@ -1,12 +1,12 @@
 <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/>
    </span>
-</button>
+</button>
--- a/frontend/src/app/components/submit-button/submit-button.component.ts
+++ b/frontend/src/app/components/submit-button/submit-button.component.ts
@@ -1,24 +1,21 @@
-import { CommonModule } from "@angular/common";
-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";

@Component({
    selector: 'app-submit-button',
-    standalone: true,
    templateUrl: 'submit-button.component.html',
    styleUrl: 'submit-button.component.scss',
    imports: [
-        CommonModule,
-        MatRippleModule,
-        MatProgressSpinnerModule
-    ]
+    MatRippleModule,
+    MatProgressSpinnerModule
+]
 })
 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>();
  }
-  
--- a/frontend/src/app/pages/disconnection/disconnection.component.ts
+++ b/frontend/src/app/pages/disconnection/disconnection.component.ts
@@ -4,11 +4,10 @@ import { AuthenticationService } from '../../core/service/authentication.service
 import { Router } from '@angular/router';

@Component({
-  selector: 'app-disconnection',
-  standalone: true,
-  imports: [MatProgressSpinnerModule],
-  templateUrl: './disconnection.component.html',
-  styleUrl: './disconnection.component.scss'
+    selector: 'app-disconnection',
+    imports: [MatProgressSpinnerModule],
+    templateUrl: './disconnection.component.html',
+    styleUrl: './disconnection.component.scss'
 })
 export class DisconnectionComponent implements OnInit {
  private authenticationService = inject(AuthenticationService);
--- a/frontend/src/app/pages/home/home.component.html
+++ b/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>
    }
--- a/frontend/src/app/pages/home/home.component.ts
+++ b/frontend/src/app/pages/home/home.component.ts
@@ -1,32 +1,32 @@
-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',
-  standalone: true,
-  imports: [
-    CommonModule,
-    MatProgressSpinnerModule,
-    PublicationListComponent
-  ],
-  templateUrl: './home.component.html',
-  styleUrl: './home.component.scss',
-  providers: [HomeService]
+    selector: 'app-home',
+    imports: [
+        CommonModule,
+        MatProgressSpinnerModule,
+        PublicationListComponent
+    ],
+    templateUrl: './home.component.html',
+    styleUrl: './home.component.scss',
+    providers: [HomeService]
 })
 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 {
--- a/frontend/src/app/pages/login/login.component.ts
+++ b/frontend/src/app/pages/login/login.component.ts
@@ -9,18 +9,17 @@ import { SubmitButtonComponent } from "../../components/submit-button/submit-but
 import { MatRippleModule } from '@angular/material/core';

@Component({
-  selector: 'app-login',
-  standalone: true,
-  templateUrl: './login.component.html',
-  styleUrl: './login.component.scss',
-  imports: [
-    MatIconModule, 
-    MatRippleModule,
-    ReactiveFormsModule, 
-    RouterModule,
-    SubmitButtonComponent
-  ],
-  providers: [LoginService, MatSnackBarModule]
+    selector: 'app-login',
+    templateUrl: './login.component.html',
+    styleUrl: './login.component.scss',
+    imports: [
+        MatIconModule,
+        MatRippleModule,
+        ReactiveFormsModule,
+        RouterModule,
+        SubmitButtonComponent
+    ],
+    providers: [LoginService, MatSnackBarModule]
 })
 export class LoginComponent implements OnInit, OnDestroy {
  private loginService = inject(LoginService);
--- a/frontend/src/app/pages/my-publications/my-publications.component.html
+++ b/frontend/src/app/pages/my-publications/my-publications.component.html
@@ -9,13 +9,13 @@
    +
 </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>
    }
-}
+}
--- a/frontend/src/app/pages/my-publications/my-publications.component.ts
+++ b/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,11 +8,11 @@ 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({
    selector: 'app-my-component',
-    standalone: true,
    templateUrl: './my-publications.component.html',
    styleUrl: './my-publications.component.scss',
    imports: [
@@ -28,19 +28,19 @@ 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 {
-        this.myPublicationsService.loadAuthenticatedUserPublications();    
+        this.myPublicationsService.loadAuthenticatedUserPublications();
    }
-}
+}
--- a/frontend/src/app/pages/publication-creation/publication-creation.component.ts
+++ b/frontend/src/app/pages/publication-creation/publication-creation.component.ts
@@ -7,17 +7,15 @@ import { BehaviorSubject, Observable, Subscription } from "rxjs";
 import { Publication } from "../../core/rest-services/publications/model/publication";
 import { AuthenticationService } from "../../core/service/authentication.service";
 import { Author } from "../../core/rest-services/publications/model/author";
-import { CommonModule } from "@angular/common";
+

@Component({
    selector: 'app-publication-creation',
-    standalone: true,
    templateUrl: './publication-creation.component.html',
    styleUrl: './publication-creation.component.scss',
    imports: [
-        CommonModule,
-        PublicationEditionComponent
-    ]
+    PublicationEditionComponent
+]
 })
 export class PublicationCreationComponent implements OnInit {
    private readonly authenticationService = inject(AuthenticationService);
--- a/frontend/src/app/pages/publication-update/publication-update.component.ts
+++ b/frontend/src/app/pages/publication-update/publication-update.component.ts
@@ -11,29 +11,24 @@ 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 { SubmitButtonComponent } from '../../components/submit-button/submit-button.component';
 import { Publication } from '../../core/rest-services/publications/model/publication';
 import { PublicationRestService } from '../../core/rest-services/publications/publication.rest-service';
-import { PictureSelectionDialog } from '../../components/publication-edition/picture-selection-dialog/picture-selection-dialog.component';

@Component({
-  selector: 'app-publication-update',
-  standalone: true,
-  imports: [
-    CommonModule,
-    MatDialogModule,
-    MatIconModule,
-    MatInputModule,
-    MatProgressSpinnerModule,
-    MatTabsModule,
-    MatTooltipModule,
-    PictureSelectionDialog,
-    ReactiveFormsModule,
-    SubmitButtonComponent,
-    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);
@@ -56,7 +51,7 @@ export class PublicationUpdateComponent implements OnInit, OnDestroy {

  ngOnInit(): void {
    this.isLoadingSubject.next(true);
-    this.activatedRoute.paramMap.subscribe(params => {
+    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 });
@@ -74,6 +69,7 @@ export class PublicationUpdateComponent implements OnInit, OnDestroy {
            .finally(() => this.isLoadingSubject.next(false));
        }
      });
+    this.subscriptions.push(activatedRouteSubscription);
  }

  ngOnDestroy(): void {
@@ -94,4 +90,4 @@ export class PublicationUpdateComponent implements OnInit, OnDestroy {
        })
        .finally(() => this.isSavingSubject.next(false));
  }
-}
+}
--- a/frontend/src/app/pages/publication/publication.component.html
+++ b/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"
@@ -32,7 +32,7 @@
                @if (isAuthorAndUserEquals) {
                    <button type="button"
                        (click)="deletePublication()"
-                        matTooltip="Click to delete the publication" 
+                        matTooltip="Click to delete the publication"
                        matTooltipPosition="left"
                        matRipple
                        i18n-matTooltip>
@@ -47,4 +47,4 @@
            <h1 i18n>Publication failed to load...</h1>
        </div>
    }
-}
+}
--- a/frontend/src/app/pages/publication/publication.component.ts
+++ b/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';
@@ -16,18 +16,17 @@ import { AuthenticationService } from '../../core/service/authentication.service
 declare let Prism: any;

@Component({
-  selector: 'app-publication',
-  standalone: true,
-  templateUrl: './publication.component.html',
-  styleUrl: './publication.component.scss',
-  imports: [
-    CommonModule,
-    MatIcon,
-    MatRippleModule,
-    MatProgressSpinner,
-    MatTooltipModule,
-    RouterModule
-  ]
+    selector: 'app-publication',
+    templateUrl: './publication.component.html',
+    styleUrl: './publication.component.scss',
+    imports: [
+        CommonModule,
+        MatIcon,
+        MatRippleModule,
+        MatProgressSpinner,
+        MatTooltipModule,
+        RouterModule
+    ]
 })
 export class PublicationComponent implements OnInit, OnDestroy {
  private readonly activatedRoute = inject(ActivatedRoute);
@@ -38,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
@@ -49,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 => {
@@ -63,7 +62,7 @@ export class PublicationComponent implements OnInit, OnDestroy {
                  console.error(errorMessage, error);
                })
                .finally(() => {
-                  this.isLoading = false;
+                  this.isLoading.set(false);
                });
          }
        });
@@ -87,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();
        }
--- a/frontend/src/app/pages/search-publications/search-publications.component.ts
+++ b/frontend/src/app/pages/search-publications/search-publications.component.ts
@@ -1,41 +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 {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',
    templateUrl: './search-publications.component.html',
    styleUrl: './search-publications.component.scss',
-    standalone: true,
    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 => {  
-                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();
+    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);
+          }
+        }
+      });
    }

    get publications$(): Observable<Publication[]> {
@@ -49,4 +47,4 @@ export class SearchPublicationsComponent implements OnInit, OnDestroy {
    get isLoaded$(): Observable<boolean> {
        return this.searchPublicationsService.isLoaded$;
    }
-}
+}
--- a/frontend/src/app/pages/search-publications/search-publications.service.ts
+++ b/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);
@@ -16,7 +15,7 @@ export class SearchPublicationsService {
    get publications$(): Observable<Publication[]> {
        return this.publicationsSubject.asObservable();
    }
-    
+
    get isLoading$(): Observable<boolean> {
        return this.isLoadingSubject.asObservable();
    }
@@ -46,4 +45,4 @@ export class SearchPublicationsService {
                this.isLoadedSubject.next(true);
            });
    }
-}
+}
--- a/frontend/src/app/pages/signin/signin.component.ts
+++ b/frontend/src/app/pages/signin/signin.component.ts
@@ -10,18 +10,17 @@ import { SubmitButtonComponent } from "../../components/submit-button/submit-but
 import { MatRippleModule } from '@angular/material/core';

@Component({
-  selector: 'app-signin',
-  standalone: true,
-  templateUrl: './signin.component.html',
-  styleUrl: './signin.component.scss',
-  imports: [
-    MatIconModule, 
-    MatRippleModule,
-    ReactiveFormsModule, 
-    RouterModule, 
-    SubmitButtonComponent
-  ],
-  providers: [SigninService, LoginService]
+    selector: 'app-signin',
+    templateUrl: './signin.component.html',
+    styleUrl: './signin.component.scss',
+    imports: [
+        MatIconModule,
+        MatRippleModule,
+        ReactiveFormsModule,
+        RouterModule,
+        SubmitButtonComponent
+    ],
+    providers: [SigninService, LoginService]
 })
 export class SigninComponent implements OnInit, OnDestroy {
  private signinService = inject(SigninService);
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -13,15 +13,11 @@
    "sourceMap": true,
    "declaration": false,
    "experimentalDecorators": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
-    "useDefineForClassFields": false,
-    "lib": [
-      "ES2022",
-      "dom"
-    ]
+    "useDefineForClassFields": false
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
Author	SHA1	Message	Date
Florian THIERRY	a2de24fd93	Convert observables to signals.	2026-02-02 17:51:49 +01:00
Florian THIERRY	ebe46a0d11	Convert observables to signals.	2026-02-02 17:38:57 +01:00
Florian THIERRY	a3637faafa	Rework picture selector to use signals.	2026-02-02 17:29:49 +01:00
Florian THIERRY	987d187c44	Rework search page to use signals.	2026-02-02 17:26:30 +01:00
Florian THIERRY	bf7e755c28	Fix page display after receiving data from backend.	2026-02-02 17:14:21 +01:00
Florian THIERRY	241f765648	Upgrade package-lock.json	2026-02-02 16:56:55 +01:00
Florian THIERRY	20782cd45a	Upgrade frontend dependencies.	2026-02-02 16:55:32 +01:00
Florian THIERRY - Takiguchi	1ca2f872f7	Update dependencies - spring boot 4 and angular 21 (#10 ) All checks were successful Build and Deploy Java Gradle Application / build-and-deploy (push) Successful in 1m39s Details Co-authored-by: Florian THIERRY Reviewed-on: #10	2025-12-30 17:45:03 +01:00