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

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

@@ -1,15 +1,16 @@
-import { Injectable } from '@angular/core';
-import { Response, Headers } from '@angular/http';
+import { Injectable }               from '@angular/core';
+import { Response, Headers }        from '@angular/http';
 
-import { DataService } from '../shared/services/data.service';
-import { SecurityService } from '../shared/services/security.service';
-import { IBasket } from '../shared/models/basket.model';
-import { IBasketItem } from '../shared/models/basketItem.model';
+import { DataService }              from '../shared/services/data.service';
+import { SecurityService }          from '../shared/services/security.service';
+import { IBasket }                  from '../shared/models/basket.model';
+import { IBasketItem }              from '../shared/models/basketItem.model';
+import { BasketWrapperService }     from '../shared/services/basket.wrapper.service';
 
 import 'rxjs/Rx';
-import { Observable } from 'rxjs/Observable';
+import { Observable }               from 'rxjs/Observable';
 import 'rxjs/add/observable/throw';
-import { Observer } from 'rxjs/Observer';
+import { Observer }                 from 'rxjs/Observer';
 import 'rxjs/add/operator/map';
 
 @Injectable()
@@ -20,7 +21,7 @@ export class BasketService {
         items: []
     };
 
-    constructor(private service: DataService, private authService: SecurityService) {
+    constructor(private service: DataService, private authService: SecurityService, private basketEvents: BasketWrapperService) {
         this.basket.items = [];
 
         // Init:
@@ -32,6 +33,8 @@ export class BasketService {
                 });
             }
         }
+
+        this.basketEvents.orderCreated$.subscribe(x => this.dropBasket());
     }
 
     setBasket(item): Observable<boolean> {
@@ -48,6 +51,8 @@ export class BasketService {
     }
 
     dropBasket() {
-        //TODO.. 
+        return this.service.delete(this.basketUrl + '/' + this.basket.buyerId).map((response: Response) => {
+            return true;
+        });
     }
 }

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

@@ -73,51 +73,32 @@
             </div>
         </section>
         <section class="esh-orders_new-section">
-            <div class="col-md-12">
-                <table class="table">
-                    <thead>
-                        <tr>
-                            <th class="cart-product-column">
-                                PRODUCT
-                            </th>
-                            <th>
+            <article class="esh-orders_new-titles row">
+                <section class="esh-orders_new-title col-xs-12">Order details</section>
+            </article>
 
-                            </th>
-                            <th>
-                                PRICE
-                            </th>
-                            <th>
-                                QUANTITY
-                            </th>
-                            <th>
-                                COST
-                            </th>
-                        </tr>
-                    </thead>
-                    <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">$ {{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>
-                        <tr class="cart-totals">
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td>
-                                <div class="cart-total-value">
-                                    <div class="cart-total-label"><span>TOTAL</span></div>
-                                    <span>$ {{order.total}}</span>
-                                </div>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+            <article class="esh-orders_new-items esh-orders_new-items--border row"
+                     *ngFor="let item of order.orderItems">
+                <section class="esh-orders_new-item col-md-4 hidden-md-down">
+                    <img class="esh-orders_new-image" src="{{item.pictureurl}}">
+                </section>
+                <section class="esh-orders_new-item esh-orders_new-item--middle col-xs-4">{{item.productname}}</section>
+                <section class="esh-orders_new-item esh-orders_new-item--middle col-xs-1">$ {{item.unitprice}}</section>
+                <section class="esh-orders_new-item esh-orders_new-item--middle col-xs-1">{{item.units}}</section>
+                <section class="esh-orders_new-item esh-orders_new-item--middle col-xs-2">$ {{item.units * item.unitprice}}</section>
+            </article>
+        </section>
+
+        <section class="esh-orders_new-section esh-orders_new-section--right">
+            <article class="esh-orders_new-titles row">
+                <section class="esh-orders_new-title col-xs-10"></section>
+                <section class="esh-orders_new-title col-xs-2">Total</section>
+            </article>
+
+            <article class="esh-orders_new-items row">
+                <section class="esh-orders_new-item col-xs-10"></section>
+                <section class="esh-orders_new-item esh-orders_new-item--mark col-xs-2">$ {{order.total}}</section>
+            </article>
         </section>
         <section class="esh-orders_new-section">
             <div class="form-group">

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

@@ -48,6 +48,48 @@
         font-size: 16px;
         font-weight: normal;
     }
+
+        &-titles {
+        padding-bottom: 1rem;
+        padding-top: 2rem;
+    }
+
+    &-title {
+        font-size: $font-size-l;
+    }
+
+    &-items {
+        &--border {
+            border-bottom: $border-light solid $color-foreground-bright;
+            padding: .5rem 0;
+
+            &:last-of-type {
+                border-color: transparent;
+            }
+        }
+    }
+
+    $item-height: 8rem;
+    &-item {
+        font-size: $font-size-m;
+        font-weight: $font-weight-semilight;
+
+        &--middle {
+            line-height: $item-height;
+
+            @media screen and (max-width: $media-screen-s) {
+                line-height: $font-size-m;
+            }
+        }
+
+        &--mark {
+            color: $color-secondary;
+        }
+    }
+
+    &-image {
+        height: $item-height;
+    }
 }
 
 
@@ -71,3 +113,14 @@
 .form-input-medium {
     width: 150px!important;
 }
+
+.alert{
+    padding-left: 0px;
+}
+
+.alert-danger {
+    background-color:transparent;
+    border:none;
+    color: #fb0d0d;
+    font-size: 12px;
+}

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

@@ -1,6 +1,7 @@
 import { Component, OnInit }                        from '@angular/core';
 import { OrdersService }                            from '../orders.service';
 import { IOrder }                                   from '../../shared/models/order.model';
+import { BasketWrapperService }                     from '../../shared/services/basket.wrapper.service';
 
 import { FormGroup, FormBuilder, Validators  }      from '@angular/forms';
 import { Router }                                   from '@angular/router';
@@ -14,7 +15,7 @@ export class OrdersNewComponent implements OnInit {
     private newOrderForm : FormGroup;  // new order form
     private order: IOrder;
 
-    constructor(private service: OrdersService, fb: FormBuilder, private router: Router) {
+    constructor(private service: OrdersService, fb: FormBuilder, private router: Router, private basketEvents: BasketWrapperService) {
         //Obtener información del perfil de usuario.
         this.order = service.mapBasketAndIdentityInfoNewOrder();
         this.newOrderForm = fb.group({
@@ -40,12 +41,13 @@ export class OrdersNewComponent implements OnInit {
         this.order.country = this.newOrderForm.controls['country'].value;
         this.order.cardnumber = this.newOrderForm.controls['cardnumber'].value;
         this.order.cardholdername = this.newOrderForm.controls['cardholdername'].value;
-        this.order.cardexpiration = new Date(2020, 1);
+        this.order.cardexpiration = new Date(20 + this.newOrderForm.controls['expirationdate'].value.split('/')[1], this.newOrderForm.controls['expirationdate'].value.split('/')[0]);
         this.order.cardsecuritynumber = this.newOrderForm.controls['securitycode'].value;
 
         this.service.postOrder(this.order).subscribe(res => {
-            console.log('order response from api retrieved');
-            console.log(res);
+            //this will emit an observable. Basket service is subscribed to this observable, and will react deleting the basket for the current user. 
+            this.basketEvents.orderCreated();
+           
 
             this.router.navigate(['orders']);
         });

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

@@ -63,6 +63,7 @@ export class OrdersService {
         order.cardtypeid = identityInfo.card_type;
         order.cardholdername = identityInfo.card_holder;
         order.total = 0;
+        order.expiration = identityInfo.card_expiration;
 
         //basket data mapping:
         order.orderItems = new Array<IOrderItem>();

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/services/basket.wrapper.service.ts

@@ -11,8 +11,12 @@ export class BasketWrapperService {
 
     constructor() { }
 
+    //observable that is fired when a product is added to the cart
     private addItemToBasketSource = new Subject<IBasketItem>();
     addItemToBasket$ = this.addItemToBasketSource.asObservable();
+
+    private orderCreatedSource = new Subject();
+    orderCreated$ = this.orderCreatedSource.asObservable();
     
     addItemToBasket(item: ICatalogItem) {
         let basket: IBasketItem = {
@@ -26,5 +30,7 @@ export class BasketWrapperService {
         this.addItemToBasketSource.next(basket);
     }
 
-    
+    orderCreated() {
+        this.orderCreatedSource.next();
+    }
 }

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/services/data.service.ts

@@ -42,6 +42,20 @@ export class DataService {
             }).catch(this.handleError);
     }
 
+    delete(url: string, params?: any): Observable<Response> {
+        let options: RequestOptionsArgs = {};
+
+        if (this.securityService) {
+            options.headers = new Headers();
+            options.headers.append("Authorization", "Bearer " + this.securityService.GetToken());
+        }
+
+        return this.http.delete(url, options).map(
+            (res: Response) => {
+                return res;
+            }).catch(this.handleError);
+    }
+
     private handleError(error: any) {
         console.error('server error:', error);
         if (error instanceof Response) {