Implementing product feature

src/app/admin/admin.component.html

@@ -1,7 +1,7 @@
 <div class="container-fluid">
     <div class="row">
         <div class="col bg-dark text-white">
-            <a class="navbar-brand">SPORTS STORE</a>
+            <a class="navbar-brand">SPORTS STORE Admin</a>
         </div>
     </div>
     <div class="row mt-2">

src/app/admin/auth.component.html

@@ -1,5 +1,5 @@
 <div class="bg-info p-2 text-center">
-    <h3>SportsStore Admin</h3>
+    <h3>SPORTS STORE Authentication</h3>
 </div>
 <div class="bg-danger mt-2 p-2 text-center text-white" *ngIf="errorMessage != null">
     {{ errorMessage }}

src/app/admin/productEditor.component.html

@@ -0,0 +1,27 @@
+<div  class="bg-primary p-2 text-white" [class.bg-warning]="editing" [class.text-dark]="editing">
+    <h5> {{ editing ? "Edit" : "Create" }} Product </h5>
+</div>
+<form novalidate #form="ngForm" (submit)="save(form)">
+    <div class="form-group">
+        <label>Name</label>
+        <input class="form-control" name="name" [(ngModel)]="product.name"/>
+    </div>
+    <div class="form-group">
+        <label>Category</label>
+        <input class="form-control" name="category" [(ngModel)]="product.category"/>
+    </div>
+    <div class="form-group">
+        <label>Description</label>
+        <textarea class="form-control" name="description" [(ngModel)]="product.description"></textarea>
+    </div>
+    <div class="form-group">
+        <label>Price</label>
+        <input class="form-control" name="price" [(ngModel)]="product.price"/>
+    </div>
+    <button type="submit" class="btn btn-primary" [class.btn-warning]="editing">
+        {{ editing ? "Save" : "Create" }}
+    </button>
+    <button type="reset" class="btn btn-secondary" routerLink="/admin/main/products">
+        Cancel
+    </button>
+</form>

src/app/admin/productEditor.component.ts

@@ -1,7 +1,30 @@
 import { Component } from "@angular/core";
+import { NgForm } from "@angular/forms";
+import { Router, ActivatedRoute } from "@angular/router";
+import { Product } from "../model/product.model";
+import { ProductRepository } from "../model/product.repository";
 
 @Component({
-    template: `<div class="bg-info p-2 text-white"><h3>Product Editor placeholder</h3></div>`
+    templateUrl: "productEditor.component.html" 
 })
 
-export class ProductEditorComponent {}
+export class ProductEditorComponent {
+
+    editing: boolean = false;
+    product: Product = new Product();
+
+    constructor(private repository: ProductRepository,
+                private router: Router,
+                private activeRoute: ActivatedRoute ) {
+
+        this.editing = activeRoute.snapshot.params["mode"] == "edit";
+        if (this.editing) {
+            Object.assign(this.product, repository.getProduct(activeRoute.snapshot.params["id"]))
+        }
+    }
+
+    save(form: NgForm) {
+        this.repository.saveProduct(this.product);
+        this.router.navigateByUrl("/admin/main/products");
+    }
+}

src/app/admin/productTable.component.html

@@ -0,0 +1,30 @@
+<table class="table table-sm table-striped">
+    <thead>
+        <tr>
+            <th>ID</th>
+            <th>Name</th>
+            <th>Category</th>
+            <th>Price</th>
+            <th></th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr *ngFor="let product of getProducts()">
+            <td>{{ product.id }}</td>
+            <td>{{ product.name }}</td>
+            <td>{{ product.category }}</td>
+            <td>{{ product.price | currency:"USD":"symbol":"2.2-2" }}</td>
+            <td>
+                <button class="btn btn-sm btn-warning" [routerLink]="['/admin/main/products/edit', product.id]">
+                    Edit
+                </button>
+                <button class="btn btn-sm btn-danger" (click)="deleteProduct(product.id)">
+                    Delete
+                </button>
+            </td>
+        </tr>
+    </tbody>
+</table>
+<button class="btn btn-primary" routerLink="/admin/main/products/create">
+    Create New Product
+</button>

src/app/admin/productTable.component.ts

@@ -1,7 +1,21 @@
 import { Component } from "@angular/core";
+import { Product } from "../model/product.model";
+import { ProductRepository } from "../model/product.repository";
 
 @Component({
-    template: `<div class="bg-info p-2 text-white"><h3>Product Table placeholder</h3></div>`
+    templateUrl: "productTable.component.html"
 })
 
-export class ProductTableComponent {}
+export class ProductTableComponent {
+
+    constructor(private repository: ProductRepository) {}
+
+    getProducts(): Product[] {
+        return this.repository.getProducts();
+    }
+
+    deleteProduct(id: number) {
+        this.repository.deleteProduct(id);
+    }
+
+}

src/app/model/product.repository.ts

@@ -41,7 +41,8 @@ export class ProductRepository {
 
     deleteProduct(id: number) {
         this.dataSource.deleteProduct(id).subscribe(p => {
-            this.products.slice(this.products.findIndex(p => p.id == id), 1);
+            let index = this.products.findIndex(p => p.id == id);
+            this.products.splice(index, 1);
         });
     }
 }

src/app/model/rest.datasource.ts

@@ -65,7 +65,7 @@ export class RestDataSource {
     private getOptions() {
         return {
             headers: new HttpHeaders({
-                "Authotization": `Bearer<${this.auth_token}>`
+                "Authorization": `Bearer<${this.auth_token}>`
             })
         }
     }