products edit

matsen-tool/src/app/products/products-detail/products-detail.component.html

@@ -22,6 +22,8 @@
                      ngSrc="{{product.imageUrl}}" width="247" height="94"
                      alt="{{product.name}}" title="{{product.name}}"/>
             </div>
+            <span class="position-absolute bi bi-pencil p-2" data-type="user-tool" data-action="edit"
+                  (click)="openModalEditProduct()"></span>
         </div>
     </div>
 </div>

matsen-tool/src/app/products/products-detail/products-detail.component.ts

@@ -3,6 +3,10 @@ import {environment} from "@environments/environment";
 import {ActivatedRoute} from "@angular/router";
 import {Subscription} from "rxjs";
 import {ProductJsonld, ProductService} from "@app/core/api/v1";
+import {NewContactComponent} from "@app/contacts/new-contact/new-contact.component";
+import {ModalStatus} from "@app/_helpers/modal.states";
+import {NgbModal, NgbModalOptions} from "@ng-bootstrap/ng-bootstrap";
+import {NewProductComponent} from "@app/products/new-product/new-product.component";
 
 @Component({
     selector: 'app-products-detail',
@@ -16,9 +20,14 @@ export class ProductsDetailComponent implements OnInit, AfterViewInit {
     protected productDetailSub: Subscription;
     protected product: ProductJsonld;
 
+    protected modalOptions: NgbModalOptions = {
+        centered: true
+    };
+
     constructor(
         private route: ActivatedRoute,
         private productService: ProductService,
+        private modalService: NgbModal
     ) {
         this.id = "";
         this.productDetailSub = new Subscription();
@@ -46,4 +55,15 @@ export class ProductsDetailComponent implements OnInit, AfterViewInit {
             }
         );
     }
+
+    openModalEditProduct() {
+        const modalRefProduct = this.modalService.open(NewProductComponent, this.modalOptions);
+        modalRefProduct.componentInstance.product = this.product;
+        modalRefProduct.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
+            if (modalStatus === ModalStatus.Submitted) {
+                modalRefProduct.dismiss();
+                this.getProductData();
+            }
+        });
+    }
 }