add orders detail

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

@@ -3,12 +3,14 @@ import { Routes, RouterModule } from '@angular/router';
 import { BasketComponent } from './basket/basket.component';
 import { CatalogComponent } from './catalog/catalog.component';
 import { OrdersComponent } from './orders/orders.component';
+import { OrdersDetailComponent } from './orders/orders-detail/orders-detail.component';
 
 export const routes: Routes = [
     { path: '', redirectTo: 'catalog', pathMatch: 'full' },
     { path: 'basket', component: BasketComponent },
     { path: 'catalog', component: CatalogComponent },
-    { path: 'orders', component: OrdersComponent }
+    { path: 'orders', component: OrdersComponent },
+    { path: 'orders/:id', component: OrdersDetailComponent },
    //Lazy async modules (angular-loader-router) and enable a router in each module. 
    //{
    // path: 'basket',  loadChildren: '/basket/basket.module' });

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html

@@ -0,0 +1,59 @@
+<div class="esh-orders-detail-header">
+    <ul class="container">
+        <li class="esh-orders-detail-header-back" routerLink="/orders">Back to list</li>
+    </ul>
+</div>
+<div class="container esh-orders-detail-container">
+    <div class="row">
+        <div class="col-sm-3">
+            <span>ORDER NUMBER</span><br>
+            <span>{{order.ordernumber}}</span>
+        </div>
+        <div class="col-sm-3">
+            <span>DATE</span><br>
+            <span>{{order.date | date:'short'}}</span>
+        </div>
+        <div class="col-sm-3">
+            <span>TOTAL</span><br>
+            <span>$ {{order.total}}</span>
+        </div>
+        <div class="col-sm-3">
+            <span>STATUS</span><br>
+            <span>{{order.status}}</span>
+        </div>
+    </div>
+    <div class="row esh-orders-detail-section">
+        <div class="col-sm-3">
+            <span>SHIPING ADDRESS</span><br>
+            <span>{{order.street}}</span><br>
+            <span>{{order.city}}</span><br>
+            <span>{{order.country}}</span><br>
+        </div>
+    </div>
+    <div>
+        <div class="row esh-orders-detail-section"><div class="col-sm-3">ORDER DETAILS</div></div>
+        <section>
+            <table class="table">
+                <tbody>
+                    <tr *ngFor="let item of order.orderitems">
+                        <td class="esh-orders-detail-column"><img class="esh-orders-detail-image" src="{{item.pictureurl}}"></td>
+                        <td class="esh-orders-detail-column">{{item.productname}}</td>
+                        <td class="esh-orders-detail-column">ROSLYN</td>
+                        <td class="esh-orders-detail-column">$ {{item.unitprice}}</td>
+                        <td class="esh-orders-detail-column">{{item.units}}</td>
+                        <td class="esh-orders-detail-column esh-orders-detail-total-value">$ {{item.units * item.unitprice}}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </section>
+    </div>
+    <div class="col-md-9 col-md-3">
+        
+    </div>
+    <div class="col-md-3">
+        <div class="esh-orders-detail-total">
+            <div class="esh-orders-detail-total-label"><span>TOTAL</span></div>
+            <div class="esh-orders-detail-total-value"><span>$ 12.00</span></div>
+        </div>
+    </div>
+</div>

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.scss

@@ -0,0 +1,86 @@
+@import '../../_variables.scss';
+
+.esh-orders-detail {
+    min-height: 80vh;
+
+    &-header {
+        background-color: #00A69C;
+        height: 63px;
+
+        li {
+            list-style: none;
+            display: inline;
+            opacity: 0.5;
+            margin-top: 25px;
+            margin-left: 10px;
+            float: right;
+            cursor: pointer;
+            color: white;
+        }
+
+        li a {
+            color: white;
+        }
+
+        &-back {
+            float: left !important;
+            margin-top: 20px !important;
+            text-transform: uppercase;
+        }
+
+        li a:hover {
+            text-decoration: none;
+        }
+    }
+
+    &-container {
+        min-height: 70vh;
+        padding-top: 40px;
+        margin-bottom: 30px;
+    }
+
+    &-container .table tbody tr:first-child td {
+        border-top: none;
+    }
+
+    &-container .table tr {
+        border-bottom: none;
+    }
+
+    &-section {
+        margin-top: 50px;
+    }
+
+    &-container .table {
+        margin-left: -7px;
+    }
+
+    &-total {
+        margin-bottom: 5px;
+        margin-left: 20px;
+        text-align: left;
+    }
+
+    &-total-label {
+        font-size: 14px;
+        color: #404040;
+        margin-top:10px;
+    }
+
+    &-total-value {
+        font-size: 28px;
+        color: #00a69c;
+        text-align: left;
+    }
+
+    &-image {
+        max-width: 210px;
+    }
+
+    &-column {
+        max-width: 120px;
+        padding: 8px;
+        text-transform: uppercase;
+        vertical-align: middle!important;
+    }
+}

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit }    from '@angular/core';
+import { OrdersService }        from '../orders.service';
+import { IOrder }               from '../../shared/models/order.model';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+    selector: 'esh-orders-detail .esh-orders-detail',
+    styleUrls: ['./orders-detail.component.scss'],
+    templateUrl: './orders-detail.component.html'
+})
+export class OrdersDetailComponent implements OnInit {
+    order = {}; // new order
+
+    constructor(private service: OrdersService, 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.getOrder(id).subscribe(order => {
+            this.order = order;
+            console.log('order retrieved: ' + order.ordernumber);
+            console.log(this.order);
+        });
+    }
+}
+

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.html

@@ -32,7 +32,7 @@
                             <td class="esh-orders-order-column">$ {{order.total}}</td>
                             <td class="esh-orders-order-column">{{order.status}}</td>
                             <td class="esh-orders-order-column">
-                                <a class="esh-orders-order-link" href="#">Detail</a>
+                                <a class="esh-orders-order-link" routerLink="/orders/{{order.ordernumber}}">Detail</a>
                             </td>
                         </tr>
                     </tbody>

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.ts

@@ -3,7 +3,7 @@ import { OrdersService }        from './orders.service';
 import { IOrder }               from '../shared/models/order.model';
 
 @Component({
-    selector: 'esh-orders .orders',
+    selector: 'esh-orders .esh-orders',
     styleUrls: ['./orders.component.scss'],
     templateUrl: './orders.component.html'
 })

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.module.ts

@@ -3,12 +3,13 @@ import { BrowserModule  }       from '@angular/platform-browser';
 
 import { SharedModule }         from '../shared/shared.module';
 import { OrdersComponent }      from './orders.component';
+import { OrdersDetailComponent }      from './orders-detail/orders-detail.component';
 import { OrdersService }        from './orders.service';
 import { Pager }                from '../shared/components/pager/pager';
 
 @NgModule({
     imports: [BrowserModule, SharedModule],
-    declarations: [OrdersComponent],
+    declarations: [OrdersComponent, OrdersDetailComponent],
     providers: [OrdersService]
 })
 export class OrdersModule { }

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.service.ts

@@ -17,8 +17,16 @@ export class OrdersService {
     constructor(private service: DataService) {
     }
 
-    getOrders(): Observable<any> {
-        var url = this.ordersUrl;
+    getOrders(): Observable<IOrder[]> {
+        let url = this.ordersUrl;
+
+        return this.service.get(url).map((response: Response) => {
+            return response.json();
+        });
+    }
+
+    getOrder(id: number): Observable<IOrder> {
+        let url = `${this.ordersUrl}/${id}`;
 
         return this.service.get(url).map((response: Response) => {
             return response.json();

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/models/catalogItem.model.ts

@@ -8,4 +8,5 @@ export interface ICatalogItem {
     catalogBrand: string;
     catalogTypeId: number;
     catalogType: string;
+    units: number;
 }

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/models/order.model.ts

@@ -1,6 +1,13 @@
+import {IOrderItem} from './orderItem.model';
+
 export interface IOrder {
-    ordernumber: number,
-    date: Date,
-    status: string,
-    total: number
+    ordernumber: number;
+    date: Date;
+    status: string;
+    total: number;
+    street?: string;
+    city?: string;
+    zipcode?: string;
+    country?: string;
+    orderitems?: IOrderItem[];
 }

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/models/orderItem.model.ts

@@ -0,0 +1,6 @@
+export interface IOrderItem {
+    pictureurl: string;
+    productname: string;
+    unitprice: number;
+    units: number;
+}