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-aircrafts/list-of-aircrafts.component.html

@@ -1,25 +1,44 @@
 <div class="content">
-  <div *ngIf="dataSourceTable != null else loading">
-    <button mat-raised-button color="accent" (click)="openDialogToAdd()" *ngIf="isUserAdmin == true">{{ 'List_Aircrafts_Add' | translate }}</button>
+  <div *ngIf="dataSourceTable != null; else loading">
+    <button
+      mat-raised-button
+      color="accent"
+      (click)="openDialogToAdd()"
+      *ngIf="isUserAdmin == true"
+    >
+      {{ "ListAircrafts_Add" | translate }}
+    </button>
 
     <table mat-table [dataSource]="dataSourceTable">
       <ng-container matColumnDef="id">
-        <th mat-header-cell *matHeaderCellDef>{{ 'List_Aircrafts_Header_Id' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{element.id}}</td>
+        <th mat-header-cell *matHeaderCellDef>
+          {{ "ListAircrafts_Header_Id" | translate }}
+        </th>
+        <td mat-cell *matCellDef="let element">{{ element.id }}</td>
       </ng-container>
 
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef>{{ 'List_Aircrafts_Header_Name' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{element.name}}</td>
+        <th mat-header-cell *matHeaderCellDef>
+          {{ "ListAircrafts_Header_Name" | translate }}
+        </th>
+        <td mat-cell *matCellDef="let element">{{ element.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="imageData">
-        <th mat-header-cell *matHeaderCellDef>{{ 'List_Aircrafts_Header_Image' | translate }}</th>
-        <td mat-cell *matCellDef="let element"><img src="{{element.imageData}}" alt="No image" style="width: 128px;"></td>
+        <th mat-header-cell *matHeaderCellDef>
+          {{ "ListAircrafts_Header_Image" | translate }}
+        </th>
+        <td mat-cell *matCellDef="let element">
+          <img
+            src="{{ element.imageData }}"
+            alt="No image"
+            style="width: 128px"
+          />
+        </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
   </div>
   <mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>

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

@@ -1,56 +1,69 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatTableDataSource } from '@angular/material/table';
-import { MatDialog } from '@angular/material/dialog';
-import { TranslateService } from '@ngx-translate/core';
+import { Component, OnInit, ViewChild } from "@angular/core";
+import { MatPaginator, MatPaginatorModule } from "@angular/material/paginator";
+import { MatTableDataSource, MatTableModule } from "@angular/material/table";
+import { MatDialog } from "@angular/material/dialog";
+import { TranslateModule, TranslateService } from "@ngx-translate/core";
+import { CommonModule } from "@angular/common";
+import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
+import { MatButtonModule } from "@angular/material/button";
 
-import { AircraftService } from '../../services/aircraft.service';
-import { ServiceComm } from '../../services/service-comm.service';
-import { AuthenticationService } from '../../services/authentication.service';
-import { NewAircraftComponent } from '../new-aircraft/new-aircraft.component';
-import { AddAction } from '../../models/add-action.enum';
-import { AircraftResp } from '../../models/aircraft';
+import { AircraftService } from "../../services/aircraft.service";
+import { ServiceComm } from "../../services/service-comm.service";
+import { AuthenticationService } from "../../services/authentication.service";
+import { NewAircraftComponent } from "../new-aircraft/new-aircraft.component";
+import { AddAction } from "../../models/add-action.enum";
+import { AircraftResp } from "../../models/aircraft";
 
 @Component({
-    selector: 'app-list-of-aircrafts',
-    templateUrl: './list-of-aircrafts.component.html',
-    styleUrls: ['./list-of-aircrafts.component.css'],
-    standalone: false
+  selector: "app-list-of-aircrafts",
+  templateUrl: "./list-of-aircrafts.component.html",
+  styleUrls: ["./list-of-aircrafts.component.css"],
+  imports: [
+    TranslateModule,
+    CommonModule,
+    MatPaginatorModule,
+    MatProgressSpinnerModule,
+    MatTableModule,
+    MatButtonModule,
+  ],
 })
 export class ListOfAircraftsComponent implements OnInit {
-  public displayedColumns: Array<string> = ['name', 'imageData'];
+  public displayedColumns: Array<string> = ["name", "imageData"];
   public dataSourceTable: MatTableDataSource<AircraftResp>;
   public resultsLength = 0;
   public isUserAdmin: boolean;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 
-  constructor(private serviceApi: AircraftService,
-              private serviceComm: ServiceComm,
-              private authenticationService: AuthenticationService,
-              public dialog: MatDialog,
-              private translateService: TranslateService) { 
-    this.isUserAdmin = this.authenticationService.currentUserValue.roles === "admin";
+  constructor(
+    private serviceApi: AircraftService,
+    private serviceComm: ServiceComm,
+    private authenticationService: AuthenticationService,
+    public dialog: MatDialog,
+    private translateService: TranslateService
+  ) {
+    this.isUserAdmin =
+      this.authenticationService.currentUserValue.roles === "admin";
   }
 
   ngOnInit() {
-    this.serviceComm.refreshRequest.subscribe(action => {
+    this.serviceComm.refreshRequest.subscribe((action) => {
       if (action === AddAction.Aircraft) {
         this.dialog.closeAll();
         this.getListOfAircrafts();
       }
     });
-    this.serviceComm.forceTranslateTitle.subscribe((data)=> {
-      if (data === true){
+    this.serviceComm.forceTranslateTitle.subscribe((data) => {
+      if (data === true) {
         this.updateTitle();
       }
     });
-    
+
     this.updateTitle();
     this.getListOfAircrafts();
   }
 
   private getListOfAircrafts() {
-    this.serviceApi.getListOfAircrafts().subscribe(data => {
+    this.serviceApi.getListOfAircrafts().subscribe((data) => {
       setTimeout(() => {
         data.sort((a, b) => a.name.localeCompare(b.name));
         this.dataSourceTable = new MatTableDataSource<AircraftResp>(data);
@@ -65,8 +78,8 @@ export class ListOfAircraftsComponent implements OnInit {
   }
 
   private updateTitle() {
-    this.translateService.get("ListAircrafts_Title").subscribe(
-      data => { this.serviceComm.updatedComponentTitle(data); }
-    );
+    this.translateService.get("ListAircrafts_Title").subscribe((data) => {
+      this.serviceComm.updatedComponentTitle(data);
+    });
   }
 }