Skip to content

Commit 61b9c59

Browse files
author
Quique Fernandez
committed
Merge branch 'Dev' of https://github.com/dotnet/eShopOnContainers into Dev
2 parents 293aa64 + 8cf5801 commit 61b9c59

7 files changed

Lines changed: 121 additions & 59 deletions

File tree

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

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
1-
import { Injectable } from '@angular/core';
2-
import { Response, Headers } from '@angular/http';
1+
import { Injectable } from '@angular/core';
2+
import { Response, Headers } from '@angular/http';
33

4-
import { DataService } from '../shared/services/data.service';
5-
import { SecurityService } from '../shared/services/security.service';
6-
import { IBasket } from '../shared/models/basket.model';
7-
import { IBasketItem } from '../shared/models/basketItem.model';
4+
import { DataService } from '../shared/services/data.service';
5+
import { SecurityService } from '../shared/services/security.service';
6+
import { IBasket } from '../shared/models/basket.model';
7+
import { IBasketItem } from '../shared/models/basketItem.model';
8+
import { BasketWrapperService } from '../shared/services/basket.wrapper.service';
89

910
import 'rxjs/Rx';
10-
import { Observable } from 'rxjs/Observable';
11+
import { Observable } from 'rxjs/Observable';
1112
import 'rxjs/add/observable/throw';
12-
import { Observer } from 'rxjs/Observer';
13+
import { Observer } from 'rxjs/Observer';
1314
import 'rxjs/add/operator/map';
1415

1516
@Injectable()
@@ -20,7 +21,7 @@ export class BasketService {
2021
items: []
2122
};
2223

23-
constructor(private service: DataService, private authService: SecurityService) {
24+
constructor(private service: DataService, private authService: SecurityService, private basketEvents: BasketWrapperService) {
2425
this.basket.items = [];
2526

2627
// Init:
@@ -32,6 +33,8 @@ export class BasketService {
3233
});
3334
}
3435
}
36+
37+
this.basketEvents.orderCreated$.subscribe(x => this.dropBasket());
3538
}
3639

3740
setBasket(item): Observable<boolean> {
@@ -48,6 +51,8 @@ export class BasketService {
4851
}
4952

5053
dropBasket() {
51-
//TODO..
54+
return this.service.delete(this.basketUrl + '/' + this.basket.buyerId).map((response: Response) => {
55+
return true;
56+
});
5257
}
5358
}

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

Lines changed: 25 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -73,51 +73,32 @@ <h4>PAYMENT METHOD</h4>
7373
</div>
7474
</section>
7575
<section class="esh-orders_new-section">
76-
<div class="col-md-12">
77-
<table class="table">
78-
<thead>
79-
<tr>
80-
<th class="cart-product-column">
81-
PRODUCT
82-
</th>
83-
<th>
76+
<article class="esh-orders_new-titles row">
77+
<section class="esh-orders_new-title col-xs-12">Order details</section>
78+
</article>
8479

85-
</th>
86-
<th>
87-
PRICE
88-
</th>
89-
<th>
90-
QUANTITY
91-
</th>
92-
<th>
93-
COST
94-
</th>
95-
</tr>
96-
</thead>
97-
<tbody>
98-
<tr *ngFor="let item of order.orderItems">
99-
<td class="esh-orders-detail-column"><img class="esh-orders-detail-image" src="{{item.pictureurl}}"></td>
100-
<td class="esh-orders-detail-column">{{item.productname}}</td>
101-
<td class="esh-orders-detail-column">$ {{item.unitprice}}</td>
102-
<td class="esh-orders-detail-column">{{item.units}}</td>
103-
<td class="esh-orders-detail-column esh-orders-detail-total-value">$ {{item.units * item.unitprice}}</td>
104-
</tr>
105-
<tr class="cart-totals">
106-
<td></td>
107-
<td></td>
108-
<td></td>
109-
<td></td>
110-
<td></td>
111-
<td>
112-
<div class="cart-total-value">
113-
<div class="cart-total-label"><span>TOTAL</span></div>
114-
<span>$ {{order.total}}</span>
115-
</div>
116-
</td>
117-
</tr>
118-
</tbody>
119-
</table>
120-
</div>
80+
<article class="esh-orders_new-items esh-orders_new-items--border row"
81+
*ngFor="let item of order.orderItems">
82+
<section class="esh-orders_new-item col-md-4 hidden-md-down">
83+
<img class="esh-orders_new-image" src="{{item.pictureurl}}">
84+
</section>
85+
<section class="esh-orders_new-item esh-orders_new-item--middle col-xs-4">{{item.productname}}</section>
86+
<section class="esh-orders_new-item esh-orders_new-item--middle col-xs-1">$ {{item.unitprice}}</section>
87+
<section class="esh-orders_new-item esh-orders_new-item--middle col-xs-1">{{item.units}}</section>
88+
<section class="esh-orders_new-item esh-orders_new-item--middle col-xs-2">$ {{item.units * item.unitprice}}</section>
89+
</article>
90+
</section>
91+
92+
<section class="esh-orders_new-section esh-orders_new-section--right">
93+
<article class="esh-orders_new-titles row">
94+
<section class="esh-orders_new-title col-xs-10"></section>
95+
<section class="esh-orders_new-title col-xs-2">Total</section>
96+
</article>
97+
98+
<article class="esh-orders_new-items row">
99+
<section class="esh-orders_new-item col-xs-10"></section>
100+
<section class="esh-orders_new-item esh-orders_new-item--mark col-xs-2">$ {{order.total}}</section>
101+
</article>
121102
</section>
122103
<section class="esh-orders_new-section">
123104
<div class="form-group">

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,48 @@
4848
font-size: 16px;
4949
font-weight: normal;
5050
}
51+
52+
&-titles {
53+
padding-bottom: 1rem;
54+
padding-top: 2rem;
55+
}
56+
57+
&-title {
58+
font-size: $font-size-l;
59+
}
60+
61+
&-items {
62+
&--border {
63+
border-bottom: $border-light solid $color-foreground-bright;
64+
padding: .5rem 0;
65+
66+
&:last-of-type {
67+
border-color: transparent;
68+
}
69+
}
70+
}
71+
72+
$item-height: 8rem;
73+
&-item {
74+
font-size: $font-size-m;
75+
font-weight: $font-weight-semilight;
76+
77+
&--middle {
78+
line-height: $item-height;
79+
80+
@media screen and (max-width: $media-screen-s) {
81+
line-height: $font-size-m;
82+
}
83+
}
84+
85+
&--mark {
86+
color: $color-secondary;
87+
}
88+
}
89+
90+
&-image {
91+
height: $item-height;
92+
}
5193
}
5294

5395

@@ -71,3 +113,14 @@
71113
.form-input-medium {
72114
width: 150px!important;
73115
}
116+
117+
.alert{
118+
padding-left: 0px;
119+
}
120+
121+
.alert-danger {
122+
background-color:transparent;
123+
border:none;
124+
color: #fb0d0d;
125+
font-size: 12px;
126+
}

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Component, OnInit } from '@angular/core';
22
import { OrdersService } from '../orders.service';
33
import { IOrder } from '../../shared/models/order.model';
4+
import { BasketWrapperService } from '../../shared/services/basket.wrapper.service';
45

56
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
67
import { Router } from '@angular/router';
@@ -14,7 +15,7 @@ export class OrdersNewComponent implements OnInit {
1415
private newOrderForm : FormGroup; // new order form
1516
private order: IOrder;
1617

17-
constructor(private service: OrdersService, fb: FormBuilder, private router: Router) {
18+
constructor(private service: OrdersService, fb: FormBuilder, private router: Router, private basketEvents: BasketWrapperService) {
1819
//Obtener información del perfil de usuario.
1920
this.order = service.mapBasketAndIdentityInfoNewOrder();
2021
this.newOrderForm = fb.group({
@@ -40,12 +41,13 @@ export class OrdersNewComponent implements OnInit {
4041
this.order.country = this.newOrderForm.controls['country'].value;
4142
this.order.cardnumber = this.newOrderForm.controls['cardnumber'].value;
4243
this.order.cardholdername = this.newOrderForm.controls['cardholdername'].value;
43-
this.order.cardexpiration = new Date(2020, 1);
44+
this.order.cardexpiration = new Date(20 + this.newOrderForm.controls['expirationdate'].value.split('/')[1], this.newOrderForm.controls['expirationdate'].value.split('/')[0]);
4445
this.order.cardsecuritynumber = this.newOrderForm.controls['securitycode'].value;
4546

4647
this.service.postOrder(this.order).subscribe(res => {
47-
console.log('order response from api retrieved');
48-
console.log(res);
48+
//this will emit an observable. Basket service is subscribed to this observable, and will react deleting the basket for the current user.
49+
this.basketEvents.orderCreated();
50+
4951

5052
this.router.navigate(['orders']);
5153
});

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ export class OrdersService {
6363
order.cardtypeid = identityInfo.card_type;
6464
order.cardholdername = identityInfo.card_holder;
6565
order.total = 0;
66+
order.expiration = identityInfo.card_expiration;
6667

6768
//basket data mapping:
6869
order.orderItems = new Array<IOrderItem>();

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,12 @@ export class BasketWrapperService {
1111

1212
constructor() { }
1313

14+
//observable that is fired when a product is added to the cart
1415
private addItemToBasketSource = new Subject<IBasketItem>();
1516
addItemToBasket$ = this.addItemToBasketSource.asObservable();
17+
18+
private orderCreatedSource = new Subject();
19+
orderCreated$ = this.orderCreatedSource.asObservable();
1620

1721
addItemToBasket(item: ICatalogItem) {
1822
let basket: IBasketItem = {
@@ -26,5 +30,7 @@ export class BasketWrapperService {
2630
this.addItemToBasketSource.next(basket);
2731
}
2832

29-
33+
orderCreated() {
34+
this.orderCreatedSource.next();
35+
}
3036
}

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,20 @@ export class DataService {
4242
}).catch(this.handleError);
4343
}
4444

45+
delete(url: string, params?: any): Observable<Response> {
46+
let options: RequestOptionsArgs = {};
47+
48+
if (this.securityService) {
49+
options.headers = new Headers();
50+
options.headers.append("Authorization", "Bearer " + this.securityService.GetToken());
51+
}
52+
53+
return this.http.delete(url, options).map(
54+
(res: Response) => {
55+
return res;
56+
}).catch(this.handleError);
57+
}
58+
4559
private handleError(error: any) {
4660
console.error('server error:', error);
4761
if (error instanceof Response) {

0 commit comments

Comments
 (0)