Add connected user when updating gear

Back/skydiveLogs-api.DomainBusiness/GearService.cs

@@ -104,6 +104,7 @@ namespace skydiveLogs_api.DomainBusiness
         public bool UpdateGear(int id, Gear gear)
         {
             gear.Id = id;
+            gear.User = _identityService.ConnectedUser;
 
             return _gearRepository.Update(gear);
         }

Front/skydivelogs-app/src/app/gear-infos/gear-infos.component.html

@@ -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>

Front/skydivelogs-app/src/app/gear-infos/gear-infos.component.ts

@@ -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);
+            });
+    }
+}

Front/skydivelogs-app/src/app/jump-infos/jump-infos.component.html

@@ -1,6 +1,9 @@
 <form (ngSubmit)="updateJump()">
     <p>
-        <span>Gear : {{ jump.gear.name }} ({{ jump.gear.mainCanopy }})</span>
+        <span
+            >Gear : {{ jump.gear.name }} ({{ jump.gear.mainCanopy }} -
+            {{ jump.gear.equipment }})</span
+        >
     </p>
     <p>
         <mat-checkbox

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

@@ -79,6 +79,27 @@
                         {{ element.equipment }}
                     </td>
                 </ng-container>
+
+                <ng-container matColumnDef="actions">
+                    <th
+                        mat-header-cell
+                        *matHeaderCellDef
+                        style="min-width: 80px; text-wrap: nowrap"
+                    ></th>
+                    <td
+                        mat-cell
+                        *matCellDef="let element"
+                        style="text-align: left; text-wrap: nowrap"
+                    >
+                        <mat-icon
+                            aria-hidden="false"
+                            aria-label="Update this gear"
+                            style="cursor: pointer; margin-left: 10px"
+                            (click)="openDialog(element, true)"
+                            svgIcon="edit"
+                        ></mat-icon>
+                    </td>
+                </ng-container>
                 <tr
                     mat-header-row
                     *matHeaderRowDef="displayedColumns; sticky: true"

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

@@ -6,12 +6,14 @@ import { TranslateModule, TranslateService } from "@ngx-translate/core";
 
 import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
 import { MatButtonModule } from "@angular/material/button";
+import { MatIconModule } from "@angular/material/icon";
 
 import { GearService } from "../../services/gear.service";
 import { ServiceComm } from "../../services/service-comm.service";
 import { GearResp } from "../../models/gear";
 import { AddAction } from "../../models/add-action.enum";
 import { NewGearComponent } from "../new-gear/new-gear.component";
+import { GearInfosComponent } from "../gear-infos/gear-infos.component";
 
 @Component({
     selector: "app-list-of-gears",
@@ -23,6 +25,7 @@ import { NewGearComponent } from "../new-gear/new-gear.component";
         MatProgressSpinnerModule,
         MatTableModule,
         MatButtonModule,
+        MatIconModule,
     ],
 })
 export class ListOfGearsComponent implements OnInit {
@@ -34,6 +37,7 @@ export class ListOfGearsComponent implements OnInit {
         "mainCanopy",
         "reserveCanopy",
         "equipment",
+        "actions",
     ];
     public dataSourceTable: MatTableDataSource<GearResp>;
     public resultsLength = 0;
@@ -81,6 +85,14 @@ export class ListOfGearsComponent implements OnInit {
         });
     }
 
+    openDialog(item: GearResp, editMode: boolean) {
+        this.dialog.open(GearInfosComponent, {
+            data: { gear: item, editMode: editMode },
+            maxHeight: "400px",
+            minWidth: "350px",
+        });
+    }
+
     private updateTitle() {
         this.translateService.get("ListGears_Title").subscribe((data) => {
             this.serviceComm.updatedComponentTitle(data);

Front/skydivelogs-app/src/app/new-jump/new-jump.component.html

@@ -137,7 +137,8 @@
                 >
                     @for (gear of listOfGear; track gear) {
                         <mat-option [value]="gear">
-                            {{ gear.name }} ({{ gear.mainCanopy }})
+                            {{ gear.name }} ({{ gear.mainCanopy }} -
+                            {{ gear.equipment }})
                         </mat-option>
                     }
                 </mat-autocomplete>

Front/skydivelogs-app/src/services/gear.service.ts

@@ -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,
+        });
+    }
 }