Update to add an equipment in a gear

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

@@ -79,6 +79,26 @@
                         {{ 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>