diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.service.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.service.ts index 2f0873f21..434246a8e 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.service.ts +++ b/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 { @@ -48,6 +51,8 @@ export class BasketService { } dropBasket() { - //TODO.. + return this.service.delete(this.basketUrl + '/' + this.basket.buyerId).map((response: Response) => { + return true; + }); } } \ No newline at end of file diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.html b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.html index bf5b7ce79..8cd1cb30f 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.html +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.html @@ -73,51 +73,32 @@
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
- PRODUCT - +
+
Order details
+
- 		- PRICE - - QUANTITY - - COST -
{{item.productname}}$ {{item.unitprice}}{{item.units}}$ {{item.units * item.unitprice}}
-
-
TOTAL
- $ {{order.total}} -
-
-
+
+
+ +
+
{{item.productname}}
+
$ {{item.unitprice}}
+
{{item.units}}
+
$ {{item.units * item.unitprice}}
+
+
+ +
+
+
+
Total
+
+ +
+
+
$ {{order.total}}
+
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.scss index 36d400a06..74a95821d 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.scss +++ b/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; +} diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.ts index e218216c9..e94a1d890 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.ts +++ b/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']); }); diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.service.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.service.ts index cab1053fd..d85bbab28 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.service.ts +++ b/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(); diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/services/basket.wrapper.service.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/services/basket.wrapper.service.ts index 6ca392694..0ad9a4bda 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/services/basket.wrapper.service.ts +++ b/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(); 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(); + } } diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/services/data.service.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/services/data.service.ts index 20f62a015..a7bd76fc5 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/services/data.service.ts +++ b/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 { + 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) {