update Angular to v20

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

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

@@ -3,7 +3,7 @@ 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";
 
@@ -14,76 +14,75 @@ import { AddAction } from "../../models/add-action.enum";
 import { NewGearComponent } from "../new-gear/new-gear.component";
 
 @Component({
-  selector: "app-list-of-gears",
-  templateUrl: "./list-of-gears.component.html",
-  styleUrls: ["./list-of-gears.component.css"],
-  imports: [
-    TranslateModule,
-    CommonModule,
-    MatPaginatorModule,
-    MatProgressSpinnerModule,
-    MatTableModule,
-    MatButtonModule,
-  ],
+    selector: "app-list-of-gears",
+    templateUrl: "./list-of-gears.component.html",
+    styleUrls: ["./list-of-gears.component.css"],
+    imports: [
+        TranslateModule,
+        MatPaginatorModule,
+        MatProgressSpinnerModule,
+        MatTableModule,
+        MatButtonModule,
+    ],
 })
 export class ListOfGearsComponent implements OnInit {
-  public displayedColumns: Array<string> = [
-    "name",
-    "manufacturer",
-    "maxSize",
-    "aad",
-    "mainCanopy",
-    "reserveCanopy",
-  ];
-  public dataSourceTable: MatTableDataSource<GearResp>;
-  public resultsLength = 0;
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+    public displayedColumns: Array<string> = [
+        "name",
+        "manufacturer",
+        "maxSize",
+        "aad",
+        "mainCanopy",
+        "reserveCanopy",
+    ];
+    public dataSourceTable: MatTableDataSource<GearResp>;
+    public resultsLength = 0;
+    @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 
-  constructor(
-    private serviceApi: GearService,
-    private serviceComm: ServiceComm,
-    public dialog: MatDialog,
-    private translateService: TranslateService
-  ) {}
+    constructor(
+        private serviceApi: GearService,
+        private serviceComm: ServiceComm,
+        public dialog: MatDialog,
+        private translateService: TranslateService,
+    ) {}
+
+    ngOnInit() {
+        this.serviceComm.refreshRequest.subscribe((action) => {
+            if (action === AddAction.Gear) {
+                this.dialog.closeAll();
+                this.getListOfGears();
+            }
+        });
+        this.serviceComm.forceTranslateTitle.subscribe((data) => {
+            if (data === true) {
+                this.updateTitle();
+            }
+        });
 
-  ngOnInit() {
-    this.serviceComm.refreshRequest.subscribe((action) => {
-      if (action === AddAction.Gear) {
-        this.dialog.closeAll();
-        this.getListOfGears();
-      }
-    });
-    this.serviceComm.forceTranslateTitle.subscribe((data) => {
-      if (data === true) {
         this.updateTitle();
-      }
-    });
+        this.getListOfGears();
+    }
 
-    this.updateTitle();
-    this.getListOfGears();
-  }
+    getListOfGears() {
+        this.serviceApi.getListOfGears().subscribe((data) => {
+            setTimeout(() => {
+                data.sort((a, b) => b.id - a.id);
+                this.dataSourceTable = new MatTableDataSource<GearResp>(data);
+                this.dataSourceTable.paginator = this.paginator;
+                this.resultsLength = data.length;
+            }, 500);
+        });
+    }
 
-  getListOfGears() {
-    this.serviceApi.getListOfGears().subscribe((data) => {
-      setTimeout(() => {
-        data.sort((a, b) => b.id - a.id);
-        this.dataSourceTable = new MatTableDataSource<GearResp>(data);
-        this.dataSourceTable.paginator = this.paginator;
-        this.resultsLength = data.length;
-      }, 500);
-    });
-  }
+    openDialogToAdd() {
+        this.dialog.open(NewGearComponent, {
+            height: "400px",
+            width: "600px",
+        });
+    }
 
-  openDialogToAdd() {
-    this.dialog.open(NewGearComponent, {
-      height: "400px",
-      width: "600px",
-    });
-  }
-
-  private updateTitle() {
-    this.translateService.get("ListGears_Title").subscribe((data) => {
-      this.serviceComm.updatedComponentTitle(data);
-    });
-  }
+    private updateTitle() {
+        this.translateService.get("ListGears_Title").subscribe((data) => {
+            this.serviceComm.updatedComponentTitle(data);
+        });
+    }
 }