Add a component to update a gear

2026-05-05 23:26:59 +02:00
parent 658c5dc362
commit 96f84cdc84
4 changed files with 202 additions and 0 deletions
@@ -0,0 +1,110 @@
+<form (ngSubmit)="updateGear()">
+    <p>
+        <mat-form-field>
+            <input
+                type="text"
+                matInput
+                placeholder="Name"
+                name="name"
+                [(ngModel)]="gear.name"
+                name="name"
+                type="text"
+            />
+        </mat-form-field>
+    </p>
+    <p>
+        <mat-form-field>
+            <input
+                type="text"
+                matInput
+                placeholder="Manufacturer"
+                name="manufacturer"
+                [(ngModel)]="gear.manufacturer"
+                name="manufacturer"
+                type="text"
+            />
+        </mat-form-field>
+    </p>
+    <p>
+        <mat-form-field>
+            <input
+                type="text"
+                matInput
+                placeholder="minSize"
+                name="minSize"
+                [(ngModel)]="gear.minSize"
+                name="minSize"
+                type="text"
+            />
+        </mat-form-field>
+    </p>
+    <p>
+        <mat-form-field>
+            <input
+                type="text"
+                matInput
+                placeholder="maxSize"
+                name="maxSize"
+                [(ngModel)]="gear.maxSize"
+                name="maxSize"
+                type="text"
+            />
+        </mat-form-field>
+    </p>
+    <p>
+        <mat-form-field>
+            <input
+                type="text"
+                matInput
+                placeholder="aad"
+                name="aad"
+                [(ngModel)]="gear.aad"
+                name="aad"
+                type="text"
+            />
+        </mat-form-field>
+    </p>
+    <p>
+        <mat-form-field>
+            <input
+                type="text"
+                matInput
+                placeholder="mainCanopy"
+                name="mainCanopy"
+                [(ngModel)]="gear.mainCanopy"
+                name="mainCanopy"
+                type="text"
+            />
+        </mat-form-field>
+    </p>
+    <p>
+        <mat-form-field>
+            <input
+                type="text"
+                matInput
+                placeholder="reserveCanopy"
+                name="reserveCanopy"
+                [(ngModel)]="gear.reserveCanopy"
+                name="reserveCanopy"
+                type="text"
+            />
+        </mat-form-field>
+    </p>
+    <p>
+        <mat-form-field>
+            <input
+                type="text"
+                matInput
+                placeholder="equipment"
+                name="equipment"
+                [(ngModel)]="gear.equipment"
+                name="equipment"
+                type="text"
+            />
+        </mat-form-field>
+    </p>
+    <br />
+    @if (editMode) {
+        <button mat-raised-button color="accent">Update</button>
+    }
+</form>
@@ -0,0 +1,63 @@
+import { Component, Inject, OnInit } from "@angular/core";
+
+import { MAT_DIALOG_DATA } from "@angular/material/dialog";
+import { TranslateModule } from "@ngx-translate/core";
+import { MatCheckboxModule } from "@angular/material/checkbox";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { MatInputModule } from "@angular/material/input";
+import { MatButtonModule } from "@angular/material/button";
+
+import { AddAction } from "../../models/add-action.enum";
+import { GearResp } from "../../models/gear";
+
+import { GearService } from "../../services/gear.service";
+import { ServiceComm } from "../../services/service-comm.service";
+
+@Component({
+    selector: "app-gear-infos",
+    templateUrl: "./gear-infos.component.html",
+    styleUrls: ["./gear-infos.component.css"],
+    imports: [
+        TranslateModule,
+        FormsModule,
+        MatCheckboxModule,
+        MatFormFieldModule,
+        ReactiveFormsModule,
+        MatInputModule,
+        MatButtonModule,
+    ],
+})
+export class GearInfosComponent implements OnInit {
+    public editMode: boolean;
+    public gear: GearResp;
+
+    constructor(
+        @Inject(MAT_DIALOG_DATA) public data: any,
+        private serviceGear: GearService,
+        private serviceComm: ServiceComm,
+    ) {
+        this.gear = new GearResp(data.gear);
+        this.editMode = data.editMode;
+    }
+
+    ngOnInit(): void {}
+
+    public updateGear() {
+        this.serviceGear
+            .updateGear(
+                this.gear.id,
+                this.gear.name,
+                this.gear.manufacturer,
+                this.gear.minSize,
+                this.gear.maxSize,
+                this.gear.aad,
+                this.gear.mainCanopy,
+                this.gear.reserveCanopy,
+                this.gear.equipment,
+            )
+            .subscribe(() => {
+                this.serviceComm.refreshData(AddAction.Gear);
+            });
+    }
+}
@@ -65,4 +65,33 @@ export class GearService extends BaseService {
    public getFromCache(): Observable<Array<GearResp>> {
        return this.serviceCacheApi.getByKey<Array<GearResp>>(CacheApiKey.Gear);
    }
+
+    public updateGear(
+        id: number,
+        name: string,
+        manufacturer: string,
+        minSize: number,
+        maxSize: number,
+        aad: string,
+        mainCanopy: string,
+        reserveCanopy: string,
+        equipment: string,
+    ) {
+        const gearData = {
+            id: id,
+            name: name,
+            manufacturer: manufacturer,
+            minSize: minSize,
+            maxSize: maxSize,
+            aad: aad,
+            mainCanopy: mainCanopy,
+            reserveCanopy: reserveCanopy,
+            equipment: equipment,
+        };
+        const bodyUpdatedGear = new GearReq(gearData);
+
+        return this.http.put(`${this.apiUrl}/Gear/${id}`, bodyUpdatedGear, {
+            headers: this.headers,
+        });
+    }
 }