SPA: comunication between orders component and basket service.
This commit is contained in:
Carlos Cañizares Estévez
parent
5ea6248d3d
commit
fdd7bcb626
@ -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;
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -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">
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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']);
|
||||
});
|
||||
|
||||
@ -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>();
|
||||
|
||||
@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
@ -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) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user