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 @@ -
+ +
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 @@ +
+
+
+
+

Title Goes Here

+
+
+ +
+
+
+
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 @@
-
+
Sort