item detail draft skeleton

src/Web/WebSPA/Client/src/modules/app.routes.ts

@@ -2,6 +2,7 @@ import { Routes, RouterModule } from '@angular/router';
 
 import { BasketComponent } from './basket/basket.component';
 import { CatalogComponent } from './catalog/catalog.component';
+import { CatalogItemDetailComponent } from './catalog/catalog-item-detail/catalog-item-detail.component';
 import { OrdersComponent } from './orders/orders.component';
 import { OrdersDetailComponent } from './orders/orders-detail/orders-detail.component';
 import { OrdersNewComponent } from './orders/orders-new/orders-new.component';
@@ -10,6 +11,7 @@ export const routes: Routes = [
     { path: '', redirectTo: 'catalog', pathMatch: 'full' },
     { path: 'basket', component: BasketComponent },
     { path: 'catalog', component: CatalogComponent },
+    { path: 'catalog/items/:id', component: CatalogItemDetailComponent },
     { path: 'orders', component: OrdersComponent },
     { path: 'orders/:id', component: OrdersDetailComponent },
     { path: 'order', component: OrdersNewComponent },

src/Web/WebSPA/Client/src/modules/catalog/catalog-item-detail/catalog-item-detail.component.html

@@ -0,0 +1,47 @@
+<div class="esh-catalog_item-detail">
+    <div class="container">
+        <h1 class="mb-4 mt-5">[ Order List Detail ]</h1>
+        <div class="u-background-brightest p-5">
+            <article class="esh-catalog_item-titles row">
+                <section class="col-3">Order number</section>
+                <section class="col-3">Date</section>
+                <section class="col-3">Total</section>
+                <section class="col-3">Status</section>
+            </article>
+
+            <article class="esh-catalog_item-items row">
+                <section class="col-3">{{order.ordernumber}}</section>
+                <section class="col-3">{{order.date | date:'short'}}</section>
+                <section class="col-3">$ {{order.total}}</section>
+                <section class="col-3">{{order.status}}</section>
+            </article>
+
+            <h2 class="esh-catalog_item-title mt-5">Shipping address</h2>
+            <div class="u-mb-5">{{order.street}} {{order.city}} {{order.country}}</div>
+
+            <article class="esh-catalog_item-items divider divider--bottom d-flex align-items-center pb-3 mt-3 u-text-sm"
+                     *ngFor="let item of order.orderitems">
+                <div class="esh-catalog_item-thumbnail-container">
+                    <div class="esh-catalog_item-thumbnail-wrapper">
+                        <img class="esh-catalog_item-thumbnail" src="{{item.pictureurl}}">
+                    </div>
+                </div>
+                <div class="row w-100 ml-3">
+                    <div class="col-6">{{item.productname}}</div>
+                    <div class="col-2">$ {{item.unitprice | number:'.2-2'}}</div>
+                    <div class="col-2">{{item.units}}</div>
+                    <div class="col-2 text-right">${{(item.units * item.unitprice) | number:'.2-2'}}</div>
+                </div>
+            </article>
+
+            <div class="d-flex align-items-center justify-content-end mt-4 mb-4 text-uppercase u-text-xl">
+                <div>Total</div>
+                <div class="ml-3">${{order.total | number:'.2-2'}}</div>
+            </div>
+
+            <aside class="d-flex justify-content-end mt-5">
+                <a class="btn btn-secondary" routerLink="/orders">Back to list</a>
+            </aside>
+        </div>
+    </div>
+</div>

src/Web/WebSPA/Client/src/modules/catalog/catalog-item-detail/catalog-item-detail.component.scss

@@ -0,0 +1,45 @@
+@import 'src/styles/variables';
+
+.esh-orders_detail {
+
+    &-titles {
+        color: $color-secondary-bright;
+        font-size: $font-size-l;
+        font-weight: $font-weight-semilight;
+        margin-bottom: 1.5rem;
+        text-transform: uppercase;
+    }
+
+    &-title {
+        color: $color-secondary-bright;
+        font-size: $font-size-l;
+        font-weight: $font-weight-semilight;
+        text-transform: uppercase;
+    }
+
+    &-items {
+        font-size: $font-size-m;
+        font-weight: $font-weight-normal;
+    }
+
+    &-thumbnail-container {
+        width: 10rem;
+    }
+
+    &-thumbnail-wrapper {
+        background-color: #dbdede;
+        height: 0;
+        overflow: hidden;
+        padding-top: 100%;
+        position: relative;
+    }
+
+    &-thumbnail {
+        height: 100%;
+        left: 50%;
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%,-50%);
+        width: auto;
+    }
+}

src/Web/WebSPA/Client/src/modules/catalog/catalog-item-detail/catalog-item-detail.component.ts

@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { CatalogService } from '../catalog.service';
+import { ICatalogItem } from '../../shared/models/catalogItem.model';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+    selector: 'esh-catalog_item-detail .esh-catalog_item-detail .mb-5',
+    styleUrls: ['./catalog-item-detail.component.scss'],
+    templateUrl: './catalog-item-detail.component.html'
+})
+export class CatalogItemDetailComponent implements OnInit {
+    public order: ICatalogItem = <ICatalogItem>{};
+
+    constructor(private service: CatalogService, private route: ActivatedRoute) { }
+
+    ngOnInit() {
+        this.route.params.subscribe(params => {
+            let id = +params['id']; // (+) converts string 'id' to a number
+           // this.getOrder(id);
+        });
+    }
+
+   /* getOrder(id: number) {
+        this.service.getCatalog().subscribe(order => {
+            this.order = order;
+            console.log('order retrieved: ' + order.ordernumber);
+            console.log(this.order);
+        });
+    } */
+}

src/Web/WebSPA/Client/src/modules/catalog/catalog.module.ts

@@ -5,10 +5,11 @@ import { SharedModule }         from '../shared/shared.module';
 import { CatalogComponent }     from './catalog.component';
 import { CatalogService }       from './catalog.service';
 import { Pager }                from '../shared/components/pager/pager';
+import { CatalogItemDetailComponent } from './catalog-item-detail/catalog-item-detail.component';
 
 @NgModule({
     imports: [BrowserModule, SharedModule, CommonModule],
-    declarations: [CatalogComponent],
+    declarations: [CatalogComponent, CatalogItemDetailComponent],
     providers: [CatalogService]
 })
 export class CatalogModule { }