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/new-tunnel-flight/new-tunnel-flight.component.html

@@ -1,66 +1,145 @@
 <div class="content">
   <div>
-    <button mat-raised-button color="accent" [routerLink]="['/tunnelFlights']" [routerLinkActive]="['active']" skipLocationChange>{{ 'NewTunnelFlight_GoToJump' | translate }}</button>
+    <button
+      mat-raised-button
+      color="accent"
+      [routerLink]="['/tunnelFlights']"
+      [routerLinkActive]="['active']"
+      skipLocationChange
+    >
+      {{ "NewTunnelFlight_GoToJump" | translate }}
+    </button>
   </div>
 
-  <form class="formNewJumps" (ngSubmit)="onFormSubmit()" *ngIf="notLoadingToDisplay() else loading">
+  <form
+    class="formNewJumps"
+    (ngSubmit)="onFormSubmit()"
+    *ngIf="notLoadingToDisplay(); else loading"
+  >
     <mat-form-field>
-      <mat-label>{{ 'NewTunnelFlight_ChooseJumpType' | translate }}</mat-label>
-      <input type="text" matInput [matAutocomplete]="autoJumpType" [(ngModel)]="selectedJumpType" name="selectedJumpType">
-      <mat-autocomplete #autoJumpType="matAutocomplete" [displayWith]="displayNameFn">
+      <mat-label>{{ "NewTunnelFlight_ChooseJumpType" | translate }}</mat-label>
+      <input
+        type="text"
+        matInput
+        [matAutocomplete]="autoJumpType"
+        [(ngModel)]="selectedJumpType"
+        name="selectedJumpType"
+      />
+      <mat-autocomplete
+        #autoJumpType="matAutocomplete"
+        [displayWith]="displayNameFn"
+      >
         <mat-option *ngFor="let jumpType of listOfJumpType" [value]="jumpType">
-          {{jumpType.name}}
+          {{ jumpType.name }}
         </mat-option>
       </mat-autocomplete>
-      <button *ngIf="selectedJumpType" matSuffix mat-icon-button aria-label="Clear" (click)="selectedJumpType=undefined">
+      <button
+        *ngIf="selectedJumpType"
+        matSuffix
+        mat-icon-button
+        aria-label="Clear"
+        (click)="selectedJumpType = undefined"
+      >
         <mat-icon>close</mat-icon>
       </button>
     </mat-form-field>
 
     <mat-form-field>
-      <mat-label>{{ 'NewTunnelFlight_ChooseTunnel' | translate }}</mat-label>
-      <input type="text" matInput [matAutocomplete]="autoDropZone" [(ngModel)]="selectedTunnel"
-        (ngModelChange)="onChangeTunnel($event)" name="selectedTunnel">
-      <mat-autocomplete #autoDropZone="matAutocomplete" [displayWith]="displayNameFn">
-        <mat-option *ngFor="let tunnel of listOfFilteredTunnel" [value]="tunnel">
-          {{tunnel.name}}
+      <mat-label>{{ "NewTunnelFlight_ChooseTunnel" | translate }}</mat-label>
+      <input
+        type="text"
+        matInput
+        [matAutocomplete]="autoDropZone"
+        [(ngModel)]="selectedTunnel"
+        (ngModelChange)="onChangeTunnel($event)"
+        name="selectedTunnel"
+      />
+      <mat-autocomplete
+        #autoDropZone="matAutocomplete"
+        [displayWith]="displayNameFn"
+      >
+        <mat-option
+          *ngFor="let tunnel of listOfFilteredTunnel"
+          [value]="tunnel"
+        >
+          {{ tunnel.name }}
         </mat-option>
       </mat-autocomplete>
-      <button *ngIf="selectedTunnel" matSuffix mat-icon-button aria-label="Clear" (click)="resetTunnel()">
+      <button
+        *ngIf="selectedTunnel"
+        matSuffix
+        mat-icon-button
+        aria-label="Clear"
+        (click)="resetTunnel()"
+      >
         <mat-icon>close</mat-icon>
       </button>
     </mat-form-field>
 
     <mat-form-field>
-      <mat-label>{{ 'NewTunnelFlight_Date_Lbl' | translate }}</mat-label>
-      <input matInput [max]="maxDate" [matDatepicker]="flightDateDp" [(ngModel)]="flightDate" name="flightDate" disabled>
-      <mat-datepicker-toggle matSuffix [for]="flightDateDp"></mat-datepicker-toggle>
+      <mat-label>{{ "NewTunnelFlight_Date_Lbl" | translate }}</mat-label>
+      <input
+        matInput
+        [max]="maxDate"
+        [matDatepicker]="flightDateDp"
+        [(ngModel)]="flightDate"
+        name="flightDate"
+        disabled
+      />
+      <mat-datepicker-toggle
+        matSuffix
+        [for]="flightDateDp"
+      ></mat-datepicker-toggle>
       <mat-datepicker #flightDateDp disabled="false"></mat-datepicker>
     </mat-form-field>
 
     <mat-form-field>
-      <mat-label>{{ 'NewTunnelFlight_Minutes_Lbl' | translate }}</mat-label>
-      <input matInput placeholder="{{ 'NewTunnelFlight_Minutes' | translate }}" [(ngModel)]="minutesOfFlight"
-        name="minutesOfFlight" type="number">
-      <button *ngIf="minutesOfFlight" matSuffix mat-icon-button aria-label="Clear" (click)="minutesOfFlight=undefined">
+      <mat-label>{{ "NewTunnelFlight_Minutes_Lbl" | translate }}</mat-label>
+      <input
+        matInput
+        placeholder="{{ 'NewTunnelFlight_Minutes' | translate }}"
+        [(ngModel)]="minutesOfFlight"
+        name="minutesOfFlight"
+        type="number"
+      />
+      <button
+        *ngIf="minutesOfFlight"
+        matSuffix
+        mat-icon-button
+        aria-label="Clear"
+        (click)="minutesOfFlight = undefined"
+      >
         <mat-icon>close</mat-icon>
       </button>
     </mat-form-field>
 
     <mat-form-field>
-      <mat-label>{{ 'NewTunnelFlight_Comments_Lbl' | translate }}</mat-label>
-      <textarea matInput placeholder="{{ 'NewTunnelFlight_Comments' | translate }}" [(ngModel)]="comments"
-        name="comments" type="text"></textarea>
-      <button *ngIf="comments" matSuffix mat-icon-button aria-label="Clear" (click)="comments=undefined">
+      <mat-label>{{ "NewTunnelFlight_Comments_Lbl" | translate }}</mat-label>
+      <textarea
+        matInput
+        placeholder="{{ 'NewTunnelFlight_Comments' | translate }}"
+        [(ngModel)]="comments"
+        name="comments"
+        type="text"
+      ></textarea>
+      <button
+        *ngIf="comments"
+        matSuffix
+        mat-icon-button
+        aria-label="Clear"
+        (click)="comments = undefined"
+      >
         <mat-icon>close</mat-icon>
       </button>
     </mat-form-field>
 
     <br />
-    <button mat-raised-button color="accent" *ngIf="isValidatedForm()">{{ 'NewTunnelFlight_Submit' | translate }}</button>
+    <button mat-raised-button color="accent" *ngIf="isValidatedForm()">
+      {{ "NewTunnelFlight_Submit" | translate }}
+    </button>
   </form>
 
   <ng-template #loading>
     <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
   </ng-template>
-</div>
+</div>

Front/skydivelogs-app/src/app/new-tunnel-flight/new-tunnel-flight.component.ts

@@ -1,41 +1,72 @@
 import { Component, OnInit } from "@angular/core";
-import { formatDate } from '@angular/common';
-import { DateAdapter, MAT_DATE_FORMATS, NativeDateAdapter } from "@angular/material/core";
-import { TranslateService } from '@ngx-translate/core';
+import { RouterLink, RouterModule } from "@angular/router";
+import { formatDate } from "@angular/common";
+import {
+  DateAdapter,
+  MAT_DATE_FORMATS,
+  NativeDateAdapter,
+} from "@angular/material/core";
+import { TranslateModule, TranslateService } from "@ngx-translate/core";
+import { CommonModule } from "@angular/common";
+import { MatIconModule } from "@angular/material/icon";
+import { MatOptionModule } from "@angular/material/core";
+import { MatAutocompleteModule } from "@angular/material/autocomplete";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatDatepickerModule } from "@angular/material/datepicker";
+import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { MatInputModule } from "@angular/material/input";
+import { MatButtonModule } from "@angular/material/button";
 
 import { TunnelResp } from "../../models/tunnel";
 
 import { JumpTypeResp } from "../../models/jumpType";
-import { TunnelService } from '../../services/tunnel.service';
-import { ServiceComm } from '../../services/service-comm.service';
+import { TunnelService } from "../../services/tunnel.service";
+import { ServiceComm } from "../../services/service-comm.service";
 import { TunnelFlightService } from "../../services/tunnel-flight.service";
 import { JumpTypeService } from "../../services/jump-type.service";
 import { DateService } from "../../services/date.service";
 
 export const PICK_FORMATS = {
-  parse: { dateInput: 'yy MM dd' },
+  parse: { dateInput: "yy MM dd" },
   display: {
-    dateInput: 'yyyy-MM-dd',
-    monthYearLabel: 'yyyy MMM',
-    dateA11yLabel: 'yyyy MM dd',
-    monthYearA11yLabel: 'yyyy MMMM',
-  }
+    dateInput: "yyyy-MM-dd",
+    monthYearLabel: "yyyy MMM",
+    dateA11yLabel: "yyyy MM dd",
+    monthYearA11yLabel: "yyyy MMMM",
+  },
 };
 class PickDateAdapter extends NativeDateAdapter {
-  format(date: Date, displayFormat: Object): string {
+  override format(date: Date, displayFormat: Object): string {
     return formatDate(date, displayFormat.toString(), "en");
   }
 }
 
 @Component({
-    selector: 'app-new-tunnel-flight',
-    templateUrl: './new-tunnel-flight.component.html',
-    styleUrls: ['./new-tunnel-flight.component.css'],
-    providers: [
-        { provide: DateAdapter, useClass: PickDateAdapter },
-        { provide: MAT_DATE_FORMATS, useValue: PICK_FORMATS }
-    ],
-    standalone: false
+  selector: "app-new-tunnel-flight",
+  templateUrl: "./new-tunnel-flight.component.html",
+  styleUrls: ["./new-tunnel-flight.component.css"],
+  providers: [
+    { provide: DateAdapter, useClass: PickDateAdapter },
+    { provide: MAT_DATE_FORMATS, useValue: PICK_FORMATS },
+  ],
+  imports: [
+    TranslateModule,
+    CommonModule,
+    RouterModule,
+    RouterLink,
+    FormsModule,
+    MatFormFieldModule,
+    ReactiveFormsModule,
+    MatAutocompleteModule,
+    MatInputModule,
+    MatButtonModule,
+    MatIconModule,
+    MatFormFieldModule,
+    MatOptionModule,
+    MatDatepickerModule,
+    MatProgressSpinnerModule,
+  ],
 })
 export class NewTunnelFlightComponent implements OnInit {
   public flightDate: Date;
@@ -51,12 +82,14 @@ export class NewTunnelFlightComponent implements OnInit {
   public listOfJumpType: Array<JumpTypeResp>;
   public maxDate: Date;
 
-  constructor(private serviceComm: ServiceComm,
-              private serviceTunnel: TunnelService,
-              private serviceTunnelFlight: TunnelFlightService,
-              private serviceJumpType: JumpTypeService,
-              private translateService: TranslateService,
-              private dateService: DateService) { }
+  constructor(
+    private serviceComm: ServiceComm,
+    private serviceTunnel: TunnelService,
+    private serviceTunnelFlight: TunnelFlightService,
+    private serviceJumpType: JumpTypeService,
+    private translateService: TranslateService,
+    private dateService: DateService
+  ) {}
 
   ngOnInit() {
     this.serviceComm.forceTranslateTitle.subscribe((data) => {
@@ -77,45 +110,48 @@ export class NewTunnelFlightComponent implements OnInit {
   public onFormSubmit() {
     this.pendingAddRequest = true;
 
-    this.serviceTunnelFlight.addFlight(this.selectedTunnel.id,
-                                       this.selectedJumpType.id,
-                                       this.flightDate,
-                                       this.minutesOfFlight,
-                                       this.comments)
-                            .subscribe(() => {
-                              this.comments = undefined;
+    this.serviceTunnelFlight
+      .addFlight(
+        this.selectedTunnel.id,
+        this.selectedJumpType.id,
+        this.flightDate,
+        this.minutesOfFlight,
+        this.comments
+      )
+      .subscribe(() => {
+        this.comments = undefined;
 
-                              if (this.resetForm === true) {
-                                this.initForm();
-                              }
-                              this.pendingAddRequest = false;
-                            });
+        if (this.resetForm === true) {
+          this.initForm();
+        }
+        this.pendingAddRequest = false;
+      });
   }
 
   public isValidatedForm(): boolean {
-    return (this.selectedTunnel !== undefined &&
-            this.selectedTunnel.id !== undefined &&
-            this.minutesOfFlight !== undefined &&
-            typeof this.minutesOfFlight === "number");
+    return (
+      this.selectedTunnel !== undefined &&
+      this.selectedTunnel.id !== undefined &&
+      this.minutesOfFlight !== undefined &&
+      typeof this.minutesOfFlight === "number"
+    );
   }
 
   private getListOfTunnels() {
-    this.serviceTunnel.getListOfTunnels()
-                      .subscribe((data) => {
-                        data.sort((a, b) => a.name.localeCompare(b.name));
-                        this.listOfTunnel = data;
-                        this.listOfFilteredTunnel = data;
-                        this.countDatasLoaded++;
-                      });
+    this.serviceTunnel.getListOfTunnels().subscribe((data) => {
+      data.sort((a, b) => a.name.localeCompare(b.name));
+      this.listOfTunnel = data;
+      this.listOfFilteredTunnel = data;
+      this.countDatasLoaded++;
+    });
   }
 
   private getListOfJumpTypes() {
-    this.serviceJumpType.getListOfJumpTypesForTunnel()
-                        .subscribe((data) => {
-                          data.sort((a, b) => a.name.localeCompare(b.name));
-                          this.listOfJumpType = data;
-                          this.countDatasLoaded++;
-                        });
+    this.serviceJumpType.getListOfJumpTypesForTunnel().subscribe((data) => {
+      data.sort((a, b) => a.name.localeCompare(b.name));
+      this.listOfJumpType = data;
+      this.countDatasLoaded++;
+    });
   }
 
   public notLoadingToDisplay(): boolean {
@@ -123,9 +159,9 @@ export class NewTunnelFlightComponent implements OnInit {
   }
 
   private updateTitle() {
-    this.translateService.get("NewTunnelFlight_Title").subscribe(
-      data => { this.serviceComm.updatedComponentTitle(data); }
-    );
+    this.translateService.get("NewTunnelFlight_Title").subscribe((data) => {
+      this.serviceComm.updatedComponentTitle(data);
+    });
   }
 
   private initForm() {
@@ -139,7 +175,7 @@ export class NewTunnelFlightComponent implements OnInit {
 
   public resetTunnel() {
     this.selectedTunnel = undefined;
-    this.onChangeTunnel('');
+    this.onChangeTunnel("");
   }
 
   public onChangeTunnel(event: any) {