Merge branch 'Dev' of https://github.com/dotnet/eShopOnContainers

src/Mobile/eShopOnContainers/eShopOnContainers.Core/App.xaml.cs

@@ -25,7 +25,7 @@ namespace eShopOnContainers
 
         private void InitApp()
         {
-            UseMockServices = false;
+            UseMockServices = true;
 
             ViewModelLocator.Instance.UpdateDependencies(UseMockServices);
         }

src/Mobile/eShopOnContainers/eShopOnContainers.Core/ViewModels/CheckoutViewModel.cs

@@ -161,15 +161,18 @@ namespace eShopOnContainers.Core.ViewModels
 
             foreach (var basketItem in basketItems)
             {
-                orderItems.Add(new OrderItem
+                if (!string.IsNullOrEmpty(basketItem.ProductName))
                 {
-                    OrderId = null,
-                    ProductId = basketItem.ProductId,
-                    ProductName = basketItem.ProductName,
-                    PictureUrl = basketItem.PictureUrl,
-                    Quantity = basketItem.Quantity,
-                    UnitPrice = basketItem.UnitPrice
-                });
+                    orderItems.Add(new OrderItem
+                    {
+                        OrderId = null,
+                        ProductId = basketItem.ProductId,
+                        ProductName = basketItem.ProductName,
+                        PictureUrl = basketItem.PictureUrl,
+                        Quantity = basketItem.Quantity,
+                        UnitPrice = basketItem.UnitPrice
+                    });
+                }
             }
 
             return orderItems;

src/Mobile/eShopOnContainers/eShopOnContainers.Droid/eShopOnContainers.Droid.csproj

@@ -17,7 +17,7 @@
     <GenerateSerializationAssemblies>Off</GenerateSerializationAssemblies>
     <AndroidManifest>Properties\AndroidManifest.xml</AndroidManifest>
     <AndroidUseLatestPlatformSdk>true</AndroidUseLatestPlatformSdk>
-    <TargetFrameworkVersion>v6.0</TargetFrameworkVersion>
+    <TargetFrameworkVersion>v7.0</TargetFrameworkVersion>
     <AndroidSupportedAbis>armeabi,armeabi-v7a,x86</AndroidSupportedAbis>
     <AndroidStoreUncompressedFileExtensions />
     <MandroidI18n />

src/Mobile/eShopOnContainers/eShopOnContainers.TestRunner.Droid/eShopOnContainers.TestRunner.Droid.csproj

@@ -16,7 +16,7 @@
     <AndroidResgenFile>Resources\Resource.Designer.cs</AndroidResgenFile>
     <GenerateSerializationAssemblies>Off</GenerateSerializationAssemblies>
     <AndroidUseLatestPlatformSdk>True</AndroidUseLatestPlatformSdk>
-    <TargetFrameworkVersion>v6.0</TargetFrameworkVersion>
+    <TargetFrameworkVersion>v7.0</TargetFrameworkVersion>
     <AndroidManifest>Properties\AndroidManifest.xml</AndroidManifest>
     <NuGetPackageImportStamp>
     </NuGetPackageImportStamp>

src/Mobile/eShopOnContainers/eShopOnContainers.TestRunner.Droid/eShopOnContainers.TestRunner.Droid.csproj.bak

@@ -16,7 +16,7 @@
     <AndroidResgenFile>Resources\Resource.Designer.cs</AndroidResgenFile>
     <GenerateSerializationAssemblies>Off</GenerateSerializationAssemblies>
     <AndroidUseLatestPlatformSdk>True</AndroidUseLatestPlatformSdk>
-    <TargetFrameworkVersion>v7.0</TargetFrameworkVersion>
+    <TargetFrameworkVersion>v6.0</TargetFrameworkVersion>
     <AndroidManifest>Properties\AndroidManifest.xml</AndroidManifest>
     <NuGetPackageImportStamp>
     </NuGetPackageImportStamp>

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

@@ -9,6 +9,7 @@ import { AppService } from './app.service';
 import { AppComponent } from './app.component';
 import { SharedModule }  from './shared/shared.module';
 import { CatalogModule }  from './catalog/catalog.module';
+import { OrdersModule }  from './orders/orders.module';
 import { BasketModule } from './basket/basket.module';
 
 @NgModule({
@@ -20,6 +21,7 @@ import { BasketModule } from './basket/basket.module';
         // Only module that app module loads
         SharedModule.forRoot(),
         CatalogModule,
+        OrdersModule,
         BasketModule
     ],
     providers: [

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

@@ -2,11 +2,15 @@ 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: 'catalog', component: CatalogComponent },
+    { 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/basket/basket.routes.ts

@@ -1,9 +0,0 @@
-//import { Routes, RouterModule } from '@angular/router';
-
-//import { BasketComponent } from './basket.component';
-
-//const routes: Routes = [
-//    { path: '', component: BasketComponent }
-//];
-
-//export const routing = RouterModule.forChild(routes);

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

@@ -1,9 +0,0 @@
-//import { Routes, RouterModule } from '@angular/router';
-
-//import { CatalogComponent } from './catalog.component';
-
-//const routes: Routes = [
-//    { path: '', component: CatalogComponent }
-//];
-
-//export const routing = RouterModule.forChild(routes);

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

@@ -0,0 +1,43 @@
+<div class="esh-orders-header">
+    <ul class="container">
+        <li class="esh-orders-header-back" routerLink="/catalog">Back to list</li>
+    </ul>
+</div>
+<div class="container esh-orders-container">
+    <div class="row">
+        <div class="col-md-12">
+            <section>
+                <table class="table">
+                    <thead>
+                        <tr>
+                            <th class="esh-orders-order-column">
+                                ORDER NUMBER
+                            </th>
+                            <th>
+                                DATE
+                            </th>
+                            <th>
+                                TOTAL
+                            </th>
+                            <th>
+                                STATUS
+                            </th>
+                            <th></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr *ngFor="let order of orders">
+                            <td class="esh-orders-order-column">{{order.ordernumber}}</td>
+                            <td class="esh-orders-order-column">{{order.date | date:'short'}}</td>
+                            <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" routerLink="/orders/{{order.ordernumber}}">Detail</a>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </section>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,85 @@
+@import '../_variables.scss';
+
+.esh-orders {
+    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;
+        min-width: 992px;
+    }
+
+    &-order-column {
+        max-width: 120px;
+        vertical-align: middle !important;
+    }
+
+    &-order-link {
+        color: #83d01b;
+    }
+
+    &-order-image {
+        max-width: 210px;
+    }
+
+    &-total-value {
+        font-size: 20px;
+        color: #00a69c;
+    }
+
+    &-total-label {
+        font-size: 14px;
+        color: #404040;
+        margin-top: 10px;
+    }
+
+    &-totals {
+        border-bottom:none!important;
+    }
+}
+
+.table td {
+    border-top: solid 1px #ddd;
+}
+
+.table thead th {
+    border: none !important;
+}
+
+
+
+
+
+
+

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

@@ -0,0 +1,27 @@
+import { Component, OnInit }    from '@angular/core';
+import { OrdersService }        from './orders.service';
+import { IOrder }               from '../shared/models/order.model';
+
+@Component({
+    selector: 'esh-orders .esh-orders',
+    styleUrls: ['./orders.component.scss'],
+    templateUrl: './orders.component.html'
+})
+export class OrdersComponent implements OnInit {
+    orders: IOrder[];
+
+    constructor(private service: OrdersService) { }
+
+    ngOnInit() {
+        this.getOrders();
+    }
+
+
+    getOrders() {
+        this.service.getOrders().subscribe(orders => {
+            this.orders = orders;
+            console.log('orders items retrieved: ' + orders.length);
+        });
+    }
+}
+

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

@@ -0,0 +1,15 @@
+import { NgModule }             from '@angular/core';
+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, OrdersDetailComponent],
+    providers: [OrdersService]
+})
+export class OrdersModule { }

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

@@ -0,0 +1,35 @@
+import { Injectable } from '@angular/core';
+import { Response } from '@angular/http';
+
+import { DataService } from '../shared/services/data.service';
+import { IOrder } from '../shared/models/order.model';
+
+import 'rxjs/Rx';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/throw';
+import { Observer } from 'rxjs/Observer';
+import 'rxjs/add/operator/map';
+
+@Injectable()
+export class OrdersService {
+    private ordersUrl: string = 'http://eshopcontainers:5102/api/v1/orders';
+
+    constructor(private service: DataService) {
+    }
+
+    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

@@ -0,0 +1,13 @@
+import {IOrderItem} from './orderItem.model';
+
+export interface IOrder {
+    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;
+}