Fixing Angular 21 by migrating all values by signals. (#11)

2026-02-03 15:07:55 +01:00
parent 1ca2f872f7
commit 0cce8b2982
102 changed files with 4102 additions and 4852 deletions
--- a/frontend/src/app/components/publication-edition/publication-edition.component.ts
+++ b/frontend/src/app/components/publication-edition/publication-edition.component.ts
@@ -1,148 +1,135 @@
-import { CommonModule, Location } from "@angular/common";
-import { Component, EventEmitter, inject, Input, OnChanges, OnDestroy, Output } from "@angular/core";
-import { FormGroup, 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 { MatSelectModule } from "@angular/material/select";
-import { MatTabsModule } from "@angular/material/tabs";
-import { MatTooltipModule } from "@angular/material/tooltip";
-import { map, Observable, of, Subscription } from "rxjs";
-import { Category } from "../../core/rest-services/category/model/category";
-import { Publication } from "../../core/rest-services/publications/model/publication";
-import { CategoryService } from "../../core/service/category.service";
-import { SubmitButtonComponent } from "../submit-button/submit-button.component";
-import { PictureSelectionDialog } from "./picture-selection-dialog/picture-selection-dialog.component";
-import { PublicationEditionService } from "./publication-edition.service";
-import { MatRippleModule } from "@angular/material/core";
+import {CommonModule, Location} from "@angular/common";
+import {Component, effect, inject, input, output, signal} from "@angular/core";
+import {FormGroup, 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 {MatSelectModule} from "@angular/material/select";
+import {MatTabsModule} from "@angular/material/tabs";
+import {MatTooltipModule} from "@angular/material/tooltip";
+import {map, Observable} from "rxjs";
+import {Category} from "../../core/rest-services/category/model/category";
+import {DEFAULT_PUBLICATION, Publication} from "../../core/rest-services/publications/model/publication";
+import {CategoryService} from "../../core/service/category.service";
+import {SubmitButtonComponent} from "../submit-button/submit-button.component";
+import {PublicationEditionService} from "./publication-edition.service";
+import {MatRippleModule} from "@angular/material/core";

@Component({
-    selector: 'app-publication-edition',
-    templateUrl: './publication-edition.component.html',
-    styleUrl: './publication-edition.component.scss',
-    imports: [
-        CommonModule,
-        MatDialogModule,
-        MatIconModule,
-        MatInputModule,
-        MatRippleModule,
-        MatProgressSpinnerModule,
-        MatSelectModule,
-        MatTabsModule,
-        MatTooltipModule,
-        ReactiveFormsModule,
-        SubmitButtonComponent
-    ],
-    providers: [PublicationEditionService]
+  selector: 'app-publication-edition',
+  templateUrl: './publication-edition.component.html',
+  styleUrl: './publication-edition.component.scss',
+  imports: [
+    CommonModule,
+    MatDialogModule,
+    MatIconModule,
+    MatInputModule,
+    MatRippleModule,
+    MatProgressSpinnerModule,
+    MatSelectModule,
+    MatTabsModule,
+    MatTooltipModule,
+    ReactiveFormsModule,
+    SubmitButtonComponent
+  ],
+  providers: [PublicationEditionService]
 })
-export class PublicationEditionComponent implements OnChanges, OnDestroy {
-    @Input()
-    publication!: Publication;
-    @Input()
-    title!: string;
-    @Input()
-    isSaving$: Observable<boolean> = of(false);
-    @Output()
-    publicationSave = new EventEmitter<Publication>();
+export class PublicationEditionComponent {
+  readonly #categoryService = inject(CategoryService);
+  readonly #location = inject(Location);
+  readonly #publicationEditionService = inject(PublicationEditionService);

-    publicationInEdition!: Publication;
-    private readonly categoryService = inject(CategoryService);
-    private readonly location = inject(Location);
-    private readonly publicationEditionService = inject(PublicationEditionService);
-    private subscriptions: Subscription[] = [];
+  publication = input.required<Publication>();
+  title = input.required<string>();
+  isSaving = input.required<boolean>();
+  publicationSave = output<Publication>();

-    get publicationEditionForm(): FormGroup {
-        return this.publicationEditionService.publicationEditionForm;
+  isLoading = this.#publicationEditionService.isLoading;
+  isPreviewing = this.#publicationEditionService.isPreviewing;
+  publicationInEdition = signal<Publication>(DEFAULT_PUBLICATION);
+
+  constructor() {
+    effect(() => {
+      let publication = this.publication();
+      const publicationInEdition = this.publicationInEdition();
+      if (!publicationInEdition || publicationInEdition !== publication) {
+        this.publicationInEdition.set(publication);
+        this.#publicationEditionService.init(publication);
+      }
+    });
+  }
+
+  get publicationEditionForm(): FormGroup {
+    return this.#publicationEditionService.publicationEditionForm;
+  }
+
+  get categories$(): Observable<Category[]> {
+    return this.#categoryService.categories$
+      .pipe(
+        map(categories =>
+          categories.filter(category => category.subCategories.length == 0)
+            .sort(this.byNameAscComparator())
+        )
+      );
+  }
+
+  private byNameAscComparator(): (categoryA: Category, categoryB: Category) => number {
+    return (categoryA, categoryB) => this.compareStrings(categoryA.name, categoryB.name);
+  }
+
+  private compareStrings(stringA: string, stringB: string): number {
+    if (stringA < stringB) {
+      return -1;
    }
-
-    get isLoading$(): Observable<boolean> {
-        return this.publicationEditionService.isLoading$;
+    if (stringA > stringB) {
+      return 1;
    }
+    return 0;
+  }

-    get isPreviewing$(): Observable<boolean> {
-        return this.publicationEditionService.isPreviewing$;
+  goPreviousLocation(): void {
+    this.#location.back();
+  }
+
+  insertTitle(titleNumber: number): void {
+    this.#publicationEditionService.insertTitle(titleNumber);
+  }
+
+  selectAPicture(): void {
+    this.#publicationEditionService.selectAPicture();
+  }
+
+  insertLink(): void {
+    this.#publicationEditionService.insertLink();
+  }
+
+  displayCodeBlockDialog(): void {
+    this.#publicationEditionService.displayCodeBlockDialog();
+  }
+
+  displayPictureSectionDialog(): void {
+    this.#publicationEditionService.displayPictureSectionDialog();
+  }
+
+  updateCursorPosition(event: KeyboardEvent | MouseEvent): void {
+    if (event.target) {
+      const textarea = event.target as HTMLTextAreaElement;
+
+      const positionStart = textarea.selectionStart;
+      const positionEnd = textarea.selectionEnd;
+
+      this.#publicationEditionService.editCursorPosition(positionStart, positionEnd);
    }
+  }

-    get categories$(): Observable<Category[]> {
-        return this.categoryService.categories$
-            .pipe(
-                map(categories =>
-                    categories.filter(category => category.subCategories.length == 0)
-                    .sort(this.byNameAscComparator())
-                )
-            );
-    }
-
-    private byNameAscComparator(): (categoryA: Category, categoryB: Category) => number {
-        return (categoryA, categoryB) => this.compareStrings(categoryA.name, categoryB.name);
-    }
-
-    private compareStrings(stringA: string, stringB: string): number {
-        if (stringA < stringB) {
-            return -1;
-        }
-        if (stringA > stringB) {
-            return 1;
-        }
-        return 0;
-    }
-
-    ngOnChanges(): void {
-        this.ngOnDestroy();
-
-        if (!this.publicationInEdition || this.publicationInEdition !== this.publication) {
-            this.publicationInEdition = this.publication;
-            this.publicationEditionService.init(this.publicationInEdition);
-        }
-    }
-
-    ngOnDestroy(): void {
-        this.subscriptions.forEach(subscription => subscription?.unsubscribe());
-    }
-
-    goPreviousLocation(): void {
-        this.location.back();
-    }
-
-    insertTitle(titleNumber: number): void {
-        this.publicationEditionService.insertTitle(titleNumber);
-    }
-
-    selectAPicture(): void {
-        this.publicationEditionService.selectAPicture();
-    }
-
-    insertLink(): void {
-        this.publicationEditionService.insertLink();
-    }
-
-    displayCodeBlockDialog(): void {
-        this.publicationEditionService.displayCodeBlockDialog();
-    }
-
-    displayPictureSectionDialog(): void {
-        this.publicationEditionService.displayPictureSectionDialog();
-    }
-
-    updateCursorPosition(event: KeyboardEvent | MouseEvent): void {
-        if (event.target) {
-            const textarea = event.target as HTMLTextAreaElement;
-
-            const positionStart = textarea.selectionStart;
-            const positionEnd = textarea.selectionEnd;
-
-            this.publicationEditionService.editCursorPosition(positionStart, positionEnd);
-        }
-    }
-
-    save(): void {
-        this.publicationSave.emit(this.publicationEditionService.editedPublication);
-    }
-
-    onTabChange(tabSelectedIndex: number): void {
-        if (tabSelectedIndex === 1) {
-            this.publicationEditionService.loadPreview();
-        }
+  save(): void {
+    this.publicationSave.emit(this.#publicationEditionService.editedPublication);
+  }
+
+  onTabChange(tabSelectedIndex: number): void {
+    if (tabSelectedIndex === 1) {
+      this.#publicationEditionService.loadPreview();
    }
+  }
 }