From fdd8667b64bb156e7af0a13d0f93c61974820575 Mon Sep 17 00:00:00 2001
From: cshowalter <cshowalter@xtechnology.org>
Date: Sun, 15 May 2022 22:30:59 -0700
Subject: [PATCH 1/4] Added validationError checking in test code.

---
 client/src/app/core/interceptors/error.interceptor.ts    | 7 ++++++-
 client/src/app/core/test-error/test-error.component.html | 5 +++++
 client/src/app/core/test-error/test-error.component.ts   | 5 ++++-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/client/src/app/core/interceptors/error.interceptor.ts b/client/src/app/core/interceptors/error.interceptor.ts
index 391bf45..867d867 100644
--- a/client/src/app/core/interceptors/error.interceptor.ts
+++ b/client/src/app/core/interceptors/error.interceptor.ts
@@ -20,7 +20,12 @@ export class ErrorInterceptor implements HttpInterceptor {
         if (error){
 
           if (error.status === 400){
-            this.toastr.error(error.error.message, error.error.statusCode);
+            if (error.error.errors){
+              //log('error thrown ' + error.error);
+              throw error.error;
+            } else {
+              this.toastr.error(error.error.message, error.error.statusCode);
+            }
           }
 
           if (error.status === 401){
diff --git a/client/src/app/core/test-error/test-error.component.html b/client/src/app/core/test-error/test-error.component.html
index 0a413af..be6b557 100644
--- a/client/src/app/core/test-error/test-error.component.html
+++ b/client/src/app/core/test-error/test-error.component.html
@@ -3,4 +3,9 @@
   <button (click)="get404Error()" class="btn btn-outline-primary me-3">Test 404 Error</button>
   <button (click)="get400Error()" class="btn btn-outline-primary me-3">Test 400 Error</button>
   <button (click)="get400ValidationError()" class="btn btn-outline-primary me-3">Test 400 Validation Error</button>
+  <div class="row mt-5" *ngIf="validationErrors">
+    <ul class="text-danger">
+      <li *ngFor="let error of validationErrors">{{error}}</li>
+    </ul>
+  </div>
 </div>
diff --git a/client/src/app/core/test-error/test-error.component.ts b/client/src/app/core/test-error/test-error.component.ts
index 64a9955..8ca4ce8 100644
--- a/client/src/app/core/test-error/test-error.component.ts
+++ b/client/src/app/core/test-error/test-error.component.ts
@@ -9,6 +9,7 @@ import { environment } from 'src/environments/environment';
 })
 export class TestErrorComponent implements OnInit {
   baseURL = environment.apiUrl;
+  validationErrors: any;
 
   constructor(private http: HttpClient) { }
 
@@ -49,7 +50,9 @@ export class TestErrorComponent implements OnInit {
     this.http.get(this.baseURL + 'products/five').subscribe(
       {
         next: (response) => { console.log(response); },
-        error: (e: any) => { console.log(e); },
+        error: (e: any) => {
+          //console.log(e.errors);
+          this.validationErrors = e.errors; },
         complete: () => { console.log('complete'); }
       }
     );

From 590cd0a37c46f0b7feaac3d69e2181f282758970 Mon Sep 17 00:00:00 2001
From: cshowalter <cshowalter@xtechnology.org>
Date: Mon, 16 May 2022 14:04:57 -0700
Subject: [PATCH 2/4] Updated Error.

---
 .../app/core/interceptors/error.interceptor.ts   |  5 +++--
 .../server-error/server-error.component.html     | 16 +++++++++++++++-
 .../core/server-error/server-error.component.ts  |  7 ++++++-
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/client/src/app/core/interceptors/error.interceptor.ts b/client/src/app/core/interceptors/error.interceptor.ts
index 867d867..2ec41e4 100644
--- a/client/src/app/core/interceptors/error.interceptor.ts
+++ b/client/src/app/core/interceptors/error.interceptor.ts
@@ -6,7 +6,7 @@ import {
   HttpInterceptor
 } from '@angular/common/http';
 import { catchError, Observable, throwError } from 'rxjs';
-import { Router } from '@angular/router';
+import { NavigationExtras, Router } from '@angular/router';
 import { ToastrService } from 'ngx-toastr';
 
 @Injectable()
@@ -37,7 +37,8 @@ export class ErrorInterceptor implements HttpInterceptor {
           }
 
           if (error.status === 500){
-            this.router.navigateByUrl('/server-error');
+            const navigationExtras: NavigationExtras = {state: {error: error.error}};
+            this.router.navigateByUrl('/server-error', navigationExtras);
           }
         }
         return throwError(() => new Error(error));
diff --git a/client/src/app/core/server-error/server-error.component.html b/client/src/app/core/server-error/server-error.component.html
index 95017c1..d301fcb 100644
--- a/client/src/app/core/server-error/server-error.component.html
+++ b/client/src/app/core/server-error/server-error.component.html
@@ -1,3 +1,17 @@
 <div class="container mt-5">
-  <h1>Internal Server Error</h1>
+  <h4>Server Internal Error - Refreshing the page clears the exception</h4>
+  <ng-container *ngIf="e">
+    <h5 class="text-danger">{{e.message}}</h5>
+    <p class="font-weight-bold">Note: if you are seeing this, this is not a client side error.</p>
+    <p>What's next?</p>
+    <ol>
+      <li>Open Chrom Dev Tools</li>
+      <li>Inspect the Network Tab</li>
+      <li>Check the failing request</li>
+      <li>Examin the request URL. Is it correct?</li>
+      <li>Reproduce Error in Postman</li>
+    </ol>
+    <p>Following is the stack trace - This is where your investigation begins.</p>
+    <code class="mt-5" style="background-color: whitesmoke;">{{e.details}}</code>
+  </ng-container>
 </div>
diff --git a/client/src/app/core/server-error/server-error.component.ts b/client/src/app/core/server-error/server-error.component.ts
index bc3f70f..d643d5f 100644
--- a/client/src/app/core/server-error/server-error.component.ts
+++ b/client/src/app/core/server-error/server-error.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-server-error',
@@ -6,8 +7,12 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./server-error.component.scss']
 })
 export class ServerErrorComponent implements OnInit {
+  e: any;
 
-  constructor() { }
+  constructor(private router: Router) {
+    const navigation = this.router.getCurrentNavigation();
+    this.e = navigation?.extras?.state?.error;
+  }
 
   ngOnInit(): void {
   }

From d7ee64fff3495a91a2ec3f4ce7846e897007d7a9 Mon Sep 17 00:00:00 2001
From: cshowalter <cshowalter@xtechnology.org>
Date: Mon, 16 May 2022 15:52:55 -0700
Subject: [PATCH 3/4] Adding Breadcrumbs

---
 client/package-lock.json                      | 24 +++++++++++++++++++
 client/package.json                           |  1 +
 client/src/app/app-routing.module.ts          | 14 +++++------
 client/src/app/app.component.html             |  3 ++-
 client/src/app/core/core.module.ts            | 10 ++++++--
 .../section-header.component.html             | 12 ++++++++++
 .../section-header.component.scss             |  0
 .../section-header.component.ts               | 17 +++++++++++++
 .../product-details.component.ts              |  8 +++++--
 client/src/app/shop/shop-routing.module.ts    |  3 +--
 client/src/app/shop/shop.component.html       |  2 +-
 client/src/styles.scss                        | 15 ++++++++++++
 12 files changed, 93 insertions(+), 16 deletions(-)
 create mode 100644 client/src/app/core/section-header/section-header.component.html
 create mode 100644 client/src/app/core/section-header/section-header.component.scss
 create mode 100644 client/src/app/core/section-header/section-header.component.ts

diff --git a/client/package-lock.json b/client/package-lock.json
index ad6cad8..9b85545 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -22,6 +22,7 @@
         "ngx-toastr": "^14.3.0",
         "rxjs": "~7.5.0",
         "tslib": "^2.3.0",
+        "xng-breadcrumb": "^7.2.0",
         "zone.js": "~0.11.4"
       },
       "devDependencies": {
@@ -11661,6 +11662,21 @@
         }
       }
     },
+    "node_modules/xng-breadcrumb": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/xng-breadcrumb/-/xng-breadcrumb-7.2.0.tgz",
+      "integrity": "sha512-dgqAVjrAyD0fDRxcUbVSHWs1SCriWSCqIGfpaW+MAh87LbkBbQRFIyAqNjV534C6CeZxqE+9L357OVmVAw0I5w==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=13.0.0",
+        "@angular/core": ">=13.0.0",
+        "@angular/platform-browser-dynamic": ">=13.0.0",
+        "@angular/router": ">=13.0.0",
+        "rxjs": ">=6.0.0"
+      }
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
@@ -20228,6 +20244,14 @@
       "dev": true,
       "requires": {}
     },
+    "xng-breadcrumb": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/xng-breadcrumb/-/xng-breadcrumb-7.2.0.tgz",
+      "integrity": "sha512-dgqAVjrAyD0fDRxcUbVSHWs1SCriWSCqIGfpaW+MAh87LbkBbQRFIyAqNjV534C6CeZxqE+9L357OVmVAw0I5w==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
     "y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
diff --git a/client/package.json b/client/package.json
index 585ee42..8970ae6 100644
--- a/client/package.json
+++ b/client/package.json
@@ -24,6 +24,7 @@
     "ngx-toastr": "^14.3.0",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
+    "xng-breadcrumb": "^7.2.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts
index d9bb9a1..0805e5e 100644
--- a/client/src/app/app-routing.module.ts
+++ b/client/src/app/app-routing.module.ts
@@ -4,16 +4,14 @@ import { NotFoundComponent } from './core/not-found/not-found.component';
 import { ServerErrorComponent } from './core/server-error/server-error.component';
 import { TestErrorComponent } from './core/test-error/test-error.component';
 import { HomeComponent } from './home/home.component';
-import { ProductDetailsComponent } from './shop/product-details/product-details.component';
-import { ShopComponent } from './shop/shop.component';
 
 const routes: Routes = [
-  {path: '', component: HomeComponent},
-  {path: 'test-error', component: TestErrorComponent},
-  {path: 'server-error', component: ServerErrorComponent},
-  {path: 'not-found', component: NotFoundComponent},
-  {path: 'shop', loadChildren: ()=> import('./shop/shop.module').then(mod => mod.ShopModule)},
-  {path: '**', redirectTo: '', pathMatch: 'full'}
+  {path: '', component: HomeComponent, data: {breadcrumb: 'Home'}},
+  {path: 'test-error', component: TestErrorComponent, data: {breadcrumb: 'Test Errors'}},
+  {path: 'server-error', component: ServerErrorComponent, data: {breadcrumb: 'Server Error'}},
+  {path: 'not-found', component: NotFoundComponent, data: {breadcrumb: 'Not Found'}},
+  {path: 'shop', loadChildren: ()=> import('./shop/shop.module').then(mod => mod.ShopModule), data: {breadcrumb: 'Shop'}},
+  {path: '**', redirectTo: 'not-found', pathMatch: 'full'}
 ];
 
 
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index c8a3fba..0581529 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -1,4 +1,5 @@
 <app-nav-bar></app-nav-bar>
-<div class="container" style="margin-top: 140px;">
+<app-section-header></app-section-header>
+<div class="container">
   <router-outlet></router-outlet>
 </div>
diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts
index 4abdf78..cd64fa7 100644
--- a/client/src/app/core/core.module.ts
+++ b/client/src/app/core/core.module.ts
@@ -6,19 +6,25 @@ import { TestErrorComponent } from './test-error/test-error.component';
 import { NotFoundComponent } from './not-found/not-found.component';
 import { ServerErrorComponent } from './server-error/server-error.component';
 import { ToastrModule } from 'ngx-toastr';
+import { SectionHeaderComponent } from './section-header/section-header.component';
+import { BreadcrumbModule } from 'xng-breadcrumb';
 
 
 
 @NgModule({
-  declarations: [NavBarComponent, TestErrorComponent, NotFoundComponent, ServerErrorComponent],
+  declarations: [NavBarComponent, TestErrorComponent, NotFoundComponent, ServerErrorComponent, SectionHeaderComponent],
   imports: [
     CommonModule,
     RouterModule,
+    BreadcrumbModule,
     ToastrModule.forRoot({
       positionClass: 'toast-bottom-right',
       preventDuplicates: true
     })
   ],
-  exports: [NavBarComponent]
+  exports: [
+    NavBarComponent,
+    SectionHeaderComponent
+  ]
 })
 export class CoreModule { }
diff --git a/client/src/app/core/section-header/section-header.component.html b/client/src/app/core/section-header/section-header.component.html
new file mode 100644
index 0000000..18e9c1f
--- /dev/null
+++ b/client/src/app/core/section-header/section-header.component.html
@@ -0,0 +1,12 @@
+<section class="py-5" style="margin-top: 105px; background-color:#f5f5f5;">
+  <div class="container">
+    <div class="row d-flex align-item-center">
+      <div class="col-9">
+        <h1>Title Goes Here</h1>
+      </div>
+      <div class="col-3">
+          <xng-breadcrumb></xng-breadcrumb>
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/client/src/app/core/section-header/section-header.component.scss b/client/src/app/core/section-header/section-header.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/app/core/section-header/section-header.component.ts b/client/src/app/core/section-header/section-header.component.ts
new file mode 100644
index 0000000..738118a
--- /dev/null
+++ b/client/src/app/core/section-header/section-header.component.ts
@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import { BreadcrumbService } from 'xng-breadcrumb';
+
+@Component({
+  selector: 'app-section-header',
+  templateUrl: './section-header.component.html',
+  styleUrls: ['./section-header.component.scss']
+})
+export class SectionHeaderComponent implements OnInit {
+
+  constructor(private bcService: BreadcrumbService) { }
+
+  ngOnInit(): void {
+    //this.bcService.breadcrumbs$.
+  }
+
+}
diff --git a/client/src/app/shop/product-details/product-details.component.ts b/client/src/app/shop/product-details/product-details.component.ts
index 05289ae..ddfa847 100644
--- a/client/src/app/shop/product-details/product-details.component.ts
+++ b/client/src/app/shop/product-details/product-details.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { IProduct } from 'src/app/shared/models/product';
+import { BreadcrumbService } from 'xng-breadcrumb';
 import { ShopService } from '../shop.service';
 
 @Component({
@@ -11,7 +12,7 @@ import { ShopService } from '../shop.service';
 export class ProductDetailsComponent implements OnInit {
   product: IProduct;
 
-  constructor(private shopService: ShopService, private activatedRoute: ActivatedRoute) { }
+  constructor(private shopService: ShopService, private activatedRoute: ActivatedRoute, private bcService: BreadcrumbService) { }
 
   ngOnInit(): void {
     this.loadProduct();
@@ -20,7 +21,10 @@ export class ProductDetailsComponent implements OnInit {
   loadProduct(){
     this.shopService.getProduct(+this.activatedRoute.snapshot.paramMap.get('id')).subscribe(
       {
-        next: (product) => { this.product = product; },
+        next: (product) => {
+          this.product = product;
+          this.bcService.set('@productDetails', product.name)
+        },
         error: (e: any) => { console.log(e); },
         complete: () => { console.log('complete'); }
       }
diff --git a/client/src/app/shop/shop-routing.module.ts b/client/src/app/shop/shop-routing.module.ts
index adb709a..f527c3b 100644
--- a/client/src/app/shop/shop-routing.module.ts
+++ b/client/src/app/shop/shop-routing.module.ts
@@ -1,12 +1,11 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { RouterModule, Routes } from '@angular/router';
 import { ShopComponent } from './shop.component';
 import { ProductDetailsComponent } from './product-details/product-details.component';
 
 const routes: Routes = [
   {path: '', component: ShopComponent},
-  {path: ':id', component: ProductDetailsComponent},
+  {path: ':id', component: ProductDetailsComponent, data: {breadcrumb: {alias: 'productDetails'}}},
 ]
 
 @NgModule({
diff --git a/client/src/app/shop/shop.component.html b/client/src/app/shop/shop.component.html
index 0975315..827ff71 100644
--- a/client/src/app/shop/shop.component.html
+++ b/client/src/app/shop/shop.component.html
@@ -1,5 +1,5 @@
 <div class="container">
-  <div class="row">
+  <div class="row mt-5">
     <section class="col-3">
       <h5 class="text-warning ml-3">Sort</h5>
       <select class="form-select mb-3" style="width: 100%;" (change)="onSortSelected($event.target.value)">
diff --git a/client/src/styles.scss b/client/src/styles.scss
index 6e0c7d4..5822957 100644
--- a/client/src/styles.scss
+++ b/client/src/styles.scss
@@ -5,3 +5,18 @@
 
 /* Importing Datepicker SCSS file. */
 @import "node_modules/ngx-bootstrap/datepicker/bs-datepicker";
+
+.xng-breadcrumb-root {
+  padding: 8px 16px;
+  display: inline;
+  border-radius: 0;
+}
+
+label.xng-breadcrumb-trail {
+  margin-bottom: 0;
+  color: orange;
+}
+
+xng-breadcrumb-separator {
+  padding: 0 0;
+}

From 0d6f68095d6c7e99d2494dea421008e89e41d0fe Mon Sep 17 00:00:00 2001
From: cshowalter <cshowalter@xtechnology.org>
Date: Mon, 16 May 2022 22:02:02 -0700
Subject: [PATCH 4/4] Styling Products Page

---
 .../section-header.component.html             | 22 ++++++++++---------
 .../section-header.component.ts               |  4 +++-
 .../product-item/product-item.component.html  |  8 +++----
 .../product-item/product-item.component.scss  |  4 ++++
 4 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/client/src/app/core/section-header/section-header.component.html b/client/src/app/core/section-header/section-header.component.html
index 18e9c1f..e1ca757 100644
--- a/client/src/app/core/section-header/section-header.component.html
+++ b/client/src/app/core/section-header/section-header.component.html
@@ -1,12 +1,14 @@
-<section class="py-5" style="margin-top: 105px; background-color:#f5f5f5;">
-  <div class="container">
-    <div class="row d-flex align-item-center">
-      <div class="col-9">
-        <h1>Title Goes Here</h1>
-      </div>
-      <div class="col-3">
-          <xng-breadcrumb></xng-breadcrumb>
+<ng-container *ngIf="(breadcrumb$ | async) as breadcrumbs">
+  <section *ngIf="breadcrumbs.length > 0 && breadcrumbs[breadcrumbs.length-1].label !== 'Home'" class="py-5" style="margin-top: 105px; background-color:#f5f5f5;">
+    <div class="container">
+      <div class="row d-flex align-item-center">
+        <div class="col-9">
+          <h1>{{breadcrumbs.length > 0 && breadcrumbs[breadcrumbs.length-1].label | titlecase}}</h1>
+        </div>
+        <div class="col-3">
+            <xng-breadcrumb></xng-breadcrumb>
+        </div>
       </div>
     </div>
-  </div>
-</section>
+  </section>
+</ng-container>
diff --git a/client/src/app/core/section-header/section-header.component.ts b/client/src/app/core/section-header/section-header.component.ts
index 738118a..7c769d0 100644
--- a/client/src/app/core/section-header/section-header.component.ts
+++ b/client/src/app/core/section-header/section-header.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
 import { BreadcrumbService } from 'xng-breadcrumb';
 
 @Component({
@@ -7,11 +8,12 @@ import { BreadcrumbService } from 'xng-breadcrumb';
   styleUrls: ['./section-header.component.scss']
 })
 export class SectionHeaderComponent implements OnInit {
+  breadcrumb$: Observable<any[]>;
 
   constructor(private bcService: BreadcrumbService) { }
 
   ngOnInit(): void {
-    //this.bcService.breadcrumbs$.
+    this.breadcrumb$ = this.bcService.breadcrumbs$;
   }
 
 }
diff --git a/client/src/app/shop/product-item/product-item.component.html b/client/src/app/shop/product-item/product-item.component.html
index b1391b3..bf05c27 100644
--- a/client/src/app/shop/product-item/product-item.component.html
+++ b/client/src/app/shop/product-item/product-item.component.html
@@ -1,13 +1,13 @@
 <div class="card h-100 shadow-sm">
   <img src="{{product.pictureUrl}}" alt="{{product.name}}" class="img-fluid bg-light">
+  <div class="d-flex align-items-center justify-content-center hover-overlay">
+    <button type="button" class="btn btn-sm btn-primary fa fa-shopping-cart me-2"></button>
+    <button routerLink="/shop/{{product.id}}" type="button" class="btn btn-sm btn-primary">View</button>
+  </div>
   <div class="card-body d-flex flex-column">
     <a routerLink="/shop/{{product.id}}">
       <h6 class="text-uppercase">{{product.name}}</h6>
     </a>
     <span class="mb-2">{{product.price | currency}}</span>
-      <div class="btn-group mt-auto">
-        <button type="button" class="btn btn-sm btn-outline-secondary fa fa-shopping-cart me-2"></button>
-        <button routerLink="/shop/{{product.id}}" type="button" class="btn btn-sm btn-outline-secondary">View</button>
-      </div>
   </div>
 </div>
diff --git a/client/src/app/shop/product-item/product-item.component.scss b/client/src/app/shop/product-item/product-item.component.scss
index e69de29..6839850 100644
--- a/client/src/app/shop/product-item/product-item.component.scss
+++ b/client/src/app/shop/product-item/product-item.component.scss
@@ -0,0 +1,4 @@
+.btn {
+  width: 30%;
+  height: 40px;
+}