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-gear/new-gear.component.ts

@@ -1,22 +1,40 @@
 import { Component, OnInit } from "@angular/core";
-import { FormControl, FormGroup, Validators } from "@angular/forms";
+import {
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from "@angular/forms";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { TranslateModule, TranslateService } from "@ngx-translate/core";
+import { MatInputModule } from "@angular/material/input";
+import { MatButtonModule } from "@angular/material/button";
 
 import { ServiceComm } from "../../services/service-comm.service";
 import { GearService } from "../../services/gear.service";
 import { AddAction } from "../../models/add-action.enum";
 
 @Component({
-    selector: "app-new-gear",
-    templateUrl: "./new-gear.component.html",
-    styleUrls: ["./new-gear.component.css"],
-    standalone: false
+  selector: "app-new-gear",
+  templateUrl: "./new-gear.component.html",
+  styleUrls: ["./new-gear.component.css"],
+  imports: [
+    TranslateModule,
+    MatFormFieldModule,
+    ReactiveFormsModule,
+    ReactiveFormsModule,
+    MatInputModule,
+    MatButtonModule,
+  ],
 })
 export class NewGearComponent implements OnInit {
   public addForm: FormGroup;
 
-  constructor(private serviceComm: ServiceComm,
-              private serviceApi: GearService)
-  {
+  constructor(
+    private serviceComm: ServiceComm,
+    private serviceApi: GearService,
+    private translateService: TranslateService,
+  ) {
     this.addForm = new FormGroup(
       {
         name: new FormControl("", Validators.required),
@@ -24,41 +42,58 @@ export class NewGearComponent implements OnInit {
         minSize: new FormControl("", [
           Validators.required,
           Validators.min(60),
-          Validators.max(320)
+          Validators.max(320),
         ]),
         maxSize: new FormControl("", [
           Validators.required,
           Validators.min(60),
-          Validators.max(320)
+          Validators.max(320),
         ]),
         aad: new FormControl("", Validators.required),
         mainCanopy: new FormControl("", [
           Validators.required,
           Validators.min(60),
-          Validators.max(320)
+          Validators.max(320),
         ]),
         reserveCanopy: new FormControl("", [
           Validators.required,
           Validators.min(60),
-          Validators.max(320)
-        ])
+          Validators.max(320),
+        ]),
       },
-      { updateOn: "blur" }
+      { updateOn: "blur" },
     );
   }
 
-  ngOnInit() { }
+  ngOnInit() {
+    this.serviceComm.forceTranslateTitle.subscribe((data) => {
+      if (data === true) {
+        this.updateTitle();
+      }
+    });
+
+    this.updateTitle();
+  }
 
   onSubmit(formData) {
-    this.serviceApi.addGear(formData.name,
-                            formData.manufacturer,
-                            +formData.minSize,
-                            +formData.maxSize,
-                            formData.aad,
-                            formData.mainCanopy,
-                            formData.reserveCanopy)
-                    .subscribe(() => {
-                      this.serviceComm.refreshData(AddAction.Gear);
-                    });
+    this.serviceApi
+      .addGear(
+        formData.name,
+        formData.manufacturer,
+        +formData.minSize,
+        +formData.maxSize,
+        formData.aad,
+        formData.mainCanopy,
+        formData.reserveCanopy,
+      )
+      .subscribe(() => {
+        this.serviceComm.refreshData(AddAction.Gear);
+      });
+  }
+
+  private updateTitle() {
+    this.translateService.get("NewGear_Title").subscribe((data) => {
+      this.serviceComm.updatedComponentTitle(data);
+    });
   }
 }