feat(admin-ui): Create rudimentary ProductDetail component

admin-ui/src/app/catalog/catalog.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { SharedModule } from '../shared/shared.module';
 import { catalogRoutes } from './catalog.routes';
+import { ProductDetailComponent } from './components/product-detail/product-detail.component';
 import { ProductListComponent } from './components/product-list/product-list.component';
 
 @NgModule({
@@ -10,7 +11,7 @@ import { ProductListComponent } from './components/product-list/product-list.com
         RouterModule.forChild(catalogRoutes),
     ],
     exports: [],
-    declarations: [ProductListComponent],
+    declarations: [ProductListComponent, ProductDetailComponent],
     providers: [],
 })
 export class CatalogModule {

admin-ui/src/app/catalog/catalog.routes.ts

@@ -5,5 +5,28 @@ export const catalogRoutes: Route[] = [
     {
         path: 'products',
         component: ProductListComponent,
+        data: {
+            breadcrumb: 'Products',
+        },
+    },
+    {
+        path: 'products/:id',
+        component: ProductDetailComponent,
+        data: {
+            breadcrumb: productBreadcrumb,
+        },
     },
 ];
+
+export function productBreadcrumb(data, params, store) {
+    return [
+        {
+            label: 'Products',
+            link: ['../', 'products'],
+        },
+        {
+            label: params.id,
+            link: [params.id],
+        },
+    ];
+}

admin-ui/src/app/catalog/components/product-detail/product-detail.component.html

@@ -0,0 +1,5 @@
+<h1>Product Detail</h1>
+
+<pre>
+    {{ product$ | async | json }}
+</pre>

admin-ui/src/app/catalog/components/product-detail/product-detail.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Observable } from 'rxjs';
+
+import { DataService } from '../../../core/providers/data/data.service';
+
+@Component({
+    selector: 'vdr-product-detail',
+    templateUrl: './product-detail.component.html',
+    styleUrls: ['./product-detail.component.scss'],
+})
+export class ProductDetailComponent implements OnInit {
+
+    product$: Observable<any>;
+
+    constructor(private dataService: DataService,
+                private route: ActivatedRoute) { }
+
+    ngOnInit() {
+        this.product$ = this.dataService.product.getProduct(this.route.snapshot.paramMap.get('id'));
+    }
+
+}

admin-ui/src/app/catalog/components/product-list/product-list.component.html

@@ -4,7 +4,7 @@
     <clr-dg-column>Slug</clr-dg-column>
     <clr-dg-column>Description</clr-dg-column>
 
-    <clr-dg-row *ngFor="let product of products$ | async">
+    <clr-dg-row *ngFor="let product of products$ | async" [routerLink]="['./', product.id]">
         <clr-dg-cell>{{ product.id }}</clr-dg-cell>
         <clr-dg-cell>{{ product.name }}</clr-dg-cell>
         <clr-dg-cell>{{ product.slug }}</clr-dg-cell>