feat: component the handle DELETE method

Author: thiagojacinto

web/src/app/app.module.ts

@@ -30,6 +30,7 @@ import { MatSortModule } from '@angular/material/sort';
 import localePt from '@angular/common/locales/pt';
 import { registerLocaleData } from '@angular/common';
 import { ProductUpdateComponent } from './components/product/product-update/product-update.component';
+import { ProductRemoveComponent } from './components/product/product-remove/product-remove.component';
 
 registerLocaleData(localePt);
 
@@ -45,7 +46,8 @@ registerLocaleData(localePt);
     ProductCreateComponent,
     ProductReadComponent,
     MatTemplateTableComponent,
-    ProductUpdateComponent
+    ProductUpdateComponent,
+    ProductRemoveComponent
   ],
   imports: [
     BrowserModule,

web/src/app/components/product/product-remove/product-remove.component.css

@@ -0,0 +1 @@
+@import "../product-create/product-create.component.css";

web/src/app/components/product/product-remove/product-remove.component.html

@@ -0,0 +1,21 @@
+<mat-card>
+  <mat-card-title>Remove '{{ product.nome }}'?</mat-card-title>
+  <form>
+    <mat-form-field>
+      <input matInput placeholder="Name" name="name" [(ngModel)]="product.nome">
+    </mat-form-field>
+    <mat-form-field>
+      <input matInput placeholder="Description" name="description" [(ngModel)]="product.descricao">
+    </mat-form-field>
+    <mat-form-field>
+      <input matInput placeholder="Price (R$)" name="price" [(ngModel)]="product.precoUnitario">
+    </mat-form-field>
+  </form>
+  
+  <button (click)="delete()" mat-raised-button color="warn">
+    Remove
+  </button>
+  <button (click)="navigateToProducts()" mat-raised-button>
+    Cancel
+  </button>
+</mat-card>

web/src/app/components/product/product-remove/product-remove.component.ts

@@ -0,0 +1,40 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Product } from '../product.model';
+import { ProductService } from '../product.service';
+
+@Component({
+  selector: "app-product-remove",
+  templateUrl: "./product-remove.component.html",
+  styleUrls: ["./product-remove.component.css"],
+})
+export class ProductRemoveComponent implements OnInit {
+  product: Product;
+  
+  constructor(
+    private service: ProductService,
+    private router: Router,
+    private route: ActivatedRoute
+  ) {}
+
+  ngOnInit(): void {
+    const id = this.route.snapshot.paramMap.get("id");
+    this.service.getById(id).subscribe((found) => {
+      this.product = found;
+    })
+  }
+
+  delete(): void {
+    const idToDelete = this.product.id.toString();
+    this.service.delete(idToDelete).subscribe(() => {
+      this.service.showMessage(
+        `The item id. ${idToDelete} was removed from database.`
+      );
+    });
+    this.navigateToProducts();
+  }
+
+  navigateToProducts(): void {
+    this.router.navigate(["/products"]);
+  }
+}