Update to Angular v19 and fixing (#3)

Reviewed-on: #3
Co-authored-by: sandre <perso@sebastienandre.com>
Co-committed-by: sandre <perso@sebastienandre.com>

Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html

@@ -1,82 +1,165 @@
 <div class="content">
-    <div>
-        <button mat-raised-button color="accent" [routerLink]="['/newjump']" [routerLinkActive]="['active']"
-            skipLocationChange>{{ 'List_Jump_Add' | translate }}</button>
-    </div>
+  <div>
+    <button
+      mat-raised-button
+      color="accent"
+      [routerLink]="['/newjump']"
+      [routerLinkActive]="['active']"
+      skipLocationChange
+    >
+      {{ "ListJump_Add" | translate }}
+    </button>
+  </div>
 
-    <mat-progress-bar [mode]="'indeterminate'" *ngIf="isLoading"></mat-progress-bar>
+  <mat-progress-bar
+    [mode]="'indeterminate'"
+    *ngIf="isLoading"
+  ></mat-progress-bar>
 
-    <div>
-        <table mat-table [dataSource]="dataSourceTable">
-            <ng-container matColumnDef="infos">
-                <th mat-header-cell *matHeaderCellDef style="min-width: 80px;text-wrap: nowrap;"></th>
-                <td mat-cell *matCellDef="let element" style="text-align: left;text-wrap: nowrap;">
-                    <mat-icon aria-hidden="false" aria-label="Additional informations of the jump"
-                        style="cursor: pointer;" (click)='openDialog(element, false)'>info</mat-icon>
-                    <mat-icon aria-hidden="false" aria-label="Special jump"
-                        [style.visibility]="element.notes != undefined ? 'visible' : 'hidden'">sticky_note_2</mat-icon>
-                    <mat-icon aria-hidden="false" aria-label="Special jump"
-                        [style.visibility]="element.isSpecial ? 'visible' : 'hidden'">celebration</mat-icon>
-                </td>
-            </ng-container>
+  <div>
+    <table mat-table [dataSource]="dataSourceTable">
+      <ng-container matColumnDef="infos">
+        <th
+          mat-header-cell
+          *matHeaderCellDef
+          style="min-width: 80px; text-wrap: nowrap"
+        ></th>
+        <td
+          mat-cell
+          *matCellDef="let element"
+          style="text-align: left; text-wrap: nowrap"
+        >
+          <mat-icon
+            aria-hidden="false"
+            aria-label="Additional informations of the jump"
+            style="cursor: pointer"
+            (click)="openDialog(element, false)"
+            svgIcon="info"
+          ></mat-icon>
+          <mat-icon
+            aria-hidden="false"
+            aria-label="Notes"
+            [style.visibility]="
+              element.notes != undefined ? 'visible' : 'hidden'
+            "
+            svgIcon="note"
+          ></mat-icon>
+          <mat-icon
+            aria-hidden="false"
+            aria-label="Special jump"
+            [style.visibility]="element.isSpecial ? 'visible' : 'hidden'"
+            svgIcon="celebration"
+          ></mat-icon>
+        </td>
+      </ng-container>
 
-            <ng-container matColumnDef="id">
-                <th mat-header-cell *matHeaderCellDef style="min-width: 70px;">{{ 'List_Jump_Header_Num' | translate }}
-                </th>
-                <td mat-cell *matCellDef="let element; let i = index">
-                    {{ paginator.length - ( (paginator.pageIndex * paginator.pageSize ) + i ) }}
-                </td>
-            </ng-container>
+      <ng-container matColumnDef="id">
+        <th mat-header-cell *matHeaderCellDef style="min-width: 70px">
+          {{ "ListJump_Header_Num" | translate }}
+        </th>
+        <td mat-cell *matCellDef="let element; let i = index">
+          {{
+            paginator.length - (paginator.pageIndex * paginator.pageSize + i)
+          }}
+        </td>
+      </ng-container>
 
-            <ng-container matColumnDef="jumpDate">
-                <th mat-header-cell *matHeaderCellDef>{{ 'List_Jump_Header_Date' | translate }}</th>
-                <td mat-cell *matCellDef="let element">
-                    <span class="smallSpanWithBreakWord" [innerHTML]="element.jumpDate | date: 'yyyy-MM-dd'"></span>
-                </td>
-            </ng-container>
+      <ng-container matColumnDef="jumpDate">
+        <th mat-header-cell *matHeaderCellDef>
+          {{ "ListJump_Header_Date" | translate }}
+        </th>
+        <td mat-cell *matCellDef="let element">
+          <span
+            class="smallSpanWithBreakWord"
+            [innerHTML]="element.jumpDate | date: 'yyyy-MM-dd'"
+          ></span>
+        </td>
+      </ng-container>
 
-            <ng-container matColumnDef="jumpType">
-                <th mat-header-cell *matHeaderCellDef style="min-width: 100px;text-wrap: nowrap;">{{ 'List_Jump_Header_JumpType' |
-                    translate }}</th>
-                <td mat-cell *matCellDef="let element" style="text-wrap: nowrap;">
-                    <span class="smallSpanWithBreakWord" [innerHTML]="element.jumpType.name"></span>
-                </td>
-            </ng-container>
+      <ng-container matColumnDef="jumpType">
+        <th
+          mat-header-cell
+          *matHeaderCellDef
+          style="min-width: 100px; text-wrap: nowrap"
+        >
+          {{ "ListJump_Header_JumpType" | translate }}
+        </th>
+        <td mat-cell *matCellDef="let element" style="text-wrap: nowrap">
+          <span
+            class="smallSpanWithBreakWord"
+            [innerHTML]="element.jumpType.name"
+          ></span>
+        </td>
+      </ng-container>
 
-            <ng-container matColumnDef="aircraft">
-                <th mat-header-cell *matHeaderCellDef style="min-width: 110px;">{{ 'List_Jump_Header_Aircraft' |
-                    translate }}</th>
-                <td mat-cell *matCellDef="let element">
-                    <span class="smallSpanWithBreakWord" [innerHTML]="element.aircraft.name"></span>
-                </td>
-            </ng-container>
+      <ng-container matColumnDef="aircraft">
+        <th mat-header-cell *matHeaderCellDef style="min-width: 110px">
+          {{ "ListJump_Header_Aircraft" | translate }}
+        </th>
+        <td mat-cell *matCellDef="let element">
+          <span
+            class="smallSpanWithBreakWord"
+            [innerHTML]="element.aircraft.name"
+          ></span>
+        </td>
+      </ng-container>
 
-            <ng-container matColumnDef="dropZone">
-                <th mat-header-cell *matHeaderCellDef>{{ 'List_Jump_Header_Dz' | translate }}</th>
-                <td mat-cell *matCellDef="let element">
-                    <span class="spanWithBreakWord" [innerHTML]="element.dropZone.name"></span>
-                </td>
-            </ng-container>
+      <ng-container matColumnDef="dropZone">
+        <th mat-header-cell *matHeaderCellDef>
+          {{ "ListJump_Header_Dz" | translate }}
+        </th>
+        <td mat-cell *matCellDef="let element">
+          <span
+            class="spanWithBreakWord"
+            [innerHTML]="element.dropZone.name"
+          ></span>
+        </td>
+      </ng-container>
 
-            <ng-container matColumnDef="gear">
-                <th mat-header-cell *matHeaderCellDef>{{ 'List_Jump_Header_Id' | translate }}</th>
-                <td mat-cell *matCellDef="let element">{{element.gear.name}}</td>
-            </ng-container>
+      <ng-container matColumnDef="gear">
+        <th mat-header-cell *matHeaderCellDef>
+          {{ "ListJump_Header_Id" | translate }}
+        </th>
+        <td mat-cell *matCellDef="let element">{{ element.gear.name }}</td>
+      </ng-container>
 
-            <ng-container matColumnDef="actions">
-                <th mat-header-cell *matHeaderCellDef style="min-width: 80px;text-wrap: nowrap;"></th>
-                <td mat-cell *matCellDef="let element" style="text-align: left;text-wrap: nowrap;">
-                    <mat-icon aria-hidden="false" aria-label="Delete this jump" style="cursor: pointer;"
-                        (click)='delete(element)'>delete</mat-icon>
-                    <mat-icon aria-hidden="false" aria-label="Update some informations of the jump"
-                        style="cursor: pointer; margin-left: 10px;" (click)='openDialog(element, true)'>edit</mat-icon>
-                </td>
-            </ng-container>
+      <ng-container matColumnDef="actions">
+        <th
+          mat-header-cell
+          *matHeaderCellDef
+          style="min-width: 80px; text-wrap: nowrap"
+        ></th>
+        <td
+          mat-cell
+          *matCellDef="let element"
+          style="text-align: left; text-wrap: nowrap"
+        >
+          <mat-icon
+            aria-hidden="false"
+            aria-label="Delete this jump"
+            style="cursor: pointer"
+            (click)="delete(element)"
+            svgIcon="delete"
+          ></mat-icon>
+          <mat-icon
+            aria-hidden="false"
+            aria-label="Update some informations of the jump"
+            style="cursor: pointer; margin-left: 10px"
+            (click)="openDialog(element, true)"
+            svgIcon="edit"
+          ></mat-icon>
+        </td>
+      </ng-container>
 
-            <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-        </table>
-    </div>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+    </table>
+  </div>
 
-    <mat-paginator #paginator [pageSize]="20" (page)="pageChanged($event)" showFirstLastButtons></mat-paginator>
-</div>
+  <mat-paginator
+    #paginator
+    [pageSize]="20"
+    (page)="pageChanged($event)"
+    showFirstLastButtons
+  ></mat-paginator>
+</div>

Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.ts

@@ -1,8 +1,21 @@
 import { Component, OnInit, ViewChild } from "@angular/core";
-import { MatPaginator, PageEvent } from "@angular/material/paginator";
-import { MatTableDataSource } from "@angular/material/table";
+import { RouterLink, RouterModule } from "@angular/router";
+import {
+  MatPaginator,
+  MatPaginatorModule,
+  PageEvent,
+} from "@angular/material/paginator";
+import { MatTableDataSource, MatTableModule } from "@angular/material/table";
 import { MatDialog } from "@angular/material/dialog";
-import { TranslateService } from "@ngx-translate/core";
+import { TranslateModule, TranslateService } from "@ngx-translate/core";
+import { CommonModule } from "@angular/common";
+import { MatIconModule } from "@angular/material/icon";
+import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
+import { MatProgressBarModule } from "@angular/material/progress-bar";
+import { MatButtonModule } from "@angular/material/button";
+import { MatInputModule } from "@angular/material/input";
+import { ReactiveFormsModule } from "@angular/forms";
+import { MatFormFieldModule } from "@angular/material/form-field";
 
 import { AddAction } from "../../models/add-action.enum";
 import { Jump } from "../../models/jump";
@@ -12,10 +25,24 @@ import { JumpInfosComponent } from "../jump-infos/jump-infos.component";
 import { StatsService } from "../../services/stats.service";
 
 @Component({
-    selector: "app-list-of-jumps",
-    templateUrl: "./list-of-jumps.component.html",
-    styleUrls: ["./list-of-jumps.component.css"],
-    standalone: false
+  selector: "app-list-of-jumps",
+  templateUrl: "./list-of-jumps.component.html",
+  styleUrls: ["./list-of-jumps.component.css"],
+  imports: [
+    TranslateModule,
+    CommonModule,
+    RouterLink,
+    RouterModule,
+    MatIconModule,
+    MatPaginatorModule,
+    MatProgressSpinnerModule,
+    MatProgressBarModule,
+    MatTableModule,
+    MatFormFieldModule,
+    ReactiveFormsModule,
+    MatInputModule,
+    MatButtonModule,
+  ],
 })
 export class ListOfJumpsComponent implements OnInit {
   public displayedColumns: Array<string> = [
@@ -31,11 +58,12 @@ export class ListOfJumpsComponent implements OnInit {
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   public isLoading: boolean = false;
 
-  constructor(private serviceApi: JumpService,
-              private serviceComm: ServiceComm,
-              public dialog: MatDialog,
-              private translateService: TranslateService,
-              private statsService: StatsService
+  constructor(
+    private serviceApi: JumpService,
+    private serviceComm: ServiceComm,
+    public dialog: MatDialog,
+    private translateService: TranslateService,
+    private statsService: StatsService
   ) {}
 
   ngAferViewInit(): void {
@@ -62,15 +90,16 @@ export class ListOfJumpsComponent implements OnInit {
   getListOfJumps(pageSize: number = 20, pageIndex: number = 0) {
     this.isLoading = true;
 
-    this.serviceApi.getJumps(pageIndex * pageSize, pageIndex * pageSize + pageSize)
-                   .subscribe((data) => {
-                     this.dataSourceTable.data = data.rows;
-                     setTimeout(() => {
-                       this.paginator.length = data.count;
-                       this.paginator.pageIndex = pageIndex;
-                       this.isLoading = false;
-                     }, 500);
-                   });
+    this.serviceApi
+      .getJumps(pageIndex * pageSize, pageIndex * pageSize + pageSize)
+      .subscribe((data) => {
+        this.dataSourceTable.data = data.rows;
+        setTimeout(() => {
+          this.paginator.length = data.count;
+          this.paginator.pageIndex = pageIndex;
+          this.isLoading = false;
+        }, 500);
+      });
   }
 
   openDialog(item: Jump, editMode: boolean) {