diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.html b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.html index 9d1f16751..bddccc742 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.html +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.html @@ -62,7 +62,7 @@
- +
[ Checkout ]
\ No newline at end of file diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.ts index 5c975dcbe..aa36a2448 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.ts @@ -29,8 +29,7 @@ export class BasketComponent implements OnInit { this.service.setBasket(this.basket); } - checkOut() { - console.log('checkout clicked!'); + checkOut(event: any) { this.basketwrapper.basket = this.basket; this.router.navigate(['order']); } 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 a38b587d2..30e6140a8 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 @@ -4,172 +4,130 @@ - -
-

Form with Validations

+
-
- - - -
You must include a first name.
-
-
- - - -
You must include a last name.
-
Your last name must be at least 5 characters long.
-
Your last name cannot exceed 10 characters.
-
-
- -
You must select a gender.
-
-
- -
-
- -
-
- +

SHIPPING ADDRESS

+
+
+
+ + +
Required field.
+
+
+
+
+ + +
Required field.
+
+
+
+
+ + +
Required field.
+
+
+
+
+ + +
Required field.
+
+
+
+
+

PAYMENT METHOD

+
+
+
+ + +
Required field.
+
+
+
+
+ + +
Required field.
+
+
+
+
+ + +
Required field.
+
+
+
+
+ + +
Required field.
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ PRODUCT + + + + BRAND + + PRICE + + QUANTITY + + COST +
{{item.productname}}ROSLYN$ {{item.unitprice}}{{item.units}}$ {{item.units * item.unitprice}}
+
+
TOTAL
+ $ 29,00 + +
+
+
- - -
- +
+
+
+ +
-
- - - - - -
-

SHIPPING ADDRESS

-
-
- ADDRESS
- {{address}} -
-
- CITY
- {{city}} -
-
- STATE
- {{state}} -
-
- COUNTRY
- {{country}} -
-
-

PAYMENT METHOD

-
-
- CARD NUMBER
- {{address}} -
-
- CARDHOLDER NAME
- {{city}} -
-
- EXPIRATION DATE
- {{state}} -
-
- SECURITY CODE
- {{country}} -
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- PRODUCT - - - - BRAND - - PRICE - - QUANTITY - - COST -
- - - - - ROSLYN - - - - - - -
-
-
TOTAL
- $ 29,00 - -
-
-
-
-
-
- -
-
- -
-
\ No newline at end of file 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 e1b225420..276c4bec3 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,9 +1,9 @@ import { Component, OnInit } from '@angular/core'; import { OrdersService } from '../orders.service'; import { IOrder } from '../../shared/models/order.model'; -import { SecurityService } from '../../shared/services/security.service'; + import { FormGroup, FormBuilder, Validators } from '@angular/forms'; -import { BasketWrapperService } from '../../shared/services/basket.wrapper.service'; +import { Router } from '@angular/router'; @Component({ selector: 'esh-orders-new .esh-orders-new', @@ -11,33 +11,44 @@ import { BasketWrapperService } from '../../shared/services/ templateUrl: './orders-new.component.html' }) export class OrdersNewComponent implements OnInit { - private newOrderForm = {}; // new order form + private newOrderForm : FormGroup; // new order form + private order: IOrder; - constructor(private service: OrdersService, private identityService: SecurityService, fb: FormBuilder, private basketWrapper: BasketWrapperService) { + constructor(private service: OrdersService, fb: FormBuilder, private router: Router) { + //Obtener información del perfil de usuario. + this.order = service.mapBasketAndIdentityInfoNewOrder(); this.newOrderForm = fb.group({ - 'address': [null, Validators.required], - 'city': [null, Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(10)])], - 'state': [null, Validators.required], - 'country': [null, Validators.required], - 'cardnumber': [null, Validators.required], - 'cardholdername': [null, Validators.required], - 'expirationdate': [null, Validators.required], - 'securitycode': [null, Validators.required], + 'street': [this.order.street, Validators.required], + 'city': [this.order.city, Validators.required], + 'state': [this.order.state, Validators.required], + 'country': [this.order.country, Validators.required], + 'cardnumber': [this.order.cardnumber, Validators.required], + 'cardholdername': [this.order.cardholdername, Validators.required], + 'expirationdate': [this.order.expiration, Validators.required], + 'securitycode': [this.order.cardsecuritynumber, Validators.required], }); } ngOnInit() { - //Obtener el basket. - var basket = this.basketWrapper.basket; - console.log('orders component'); - console.log(basket); - console.log(this.identityService.UserData); - //Obtener información del perfil de usuario. } submitForm(value: any) { - console.log(value); + this.order.street = this.newOrderForm.controls['street'].value; + this.order.city = this.newOrderForm.controls['city'].value; + this.order.state = this.newOrderForm.controls['state'].value; + 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.cardsecuritynumber = this.newOrderForm.controls['securitycode'].value; + + this.service.postOrder(this.order).subscribe(res => { + console.log('order response from api retrieved'); + console.log(res); + + 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 be1455058..dc406dec2 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 @@ -3,6 +3,9 @@ import { Response } from '@angular/http'; import { DataService } from '../shared/services/data.service'; import { IOrder } from '../shared/models/order.model'; +import { IOrderItem } from '../shared/models/orderItem.model'; +import { SecurityService } from '../shared/services/security.service'; +import { BasketWrapperService } from '../shared/services/basket.wrapper.service'; import 'rxjs/Rx'; import { Observable } from 'rxjs/Observable'; @@ -10,11 +13,12 @@ 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) { + constructor(private service: DataService, private basketService: BasketWrapperService, private identityService: SecurityService) { } getOrders(): Observable { @@ -32,4 +36,51 @@ export class OrdersService { return response.json(); }); } + + postOrder(item): Observable { + return this.service.post(this.ordersUrl + '/new', item).map((response: Response) => { + return true; + }); + } + + mapBasketAndIdentityInfoNewOrder(): IOrder { + let order = {}; + let basket = this.basketService.basket; + let identityInfo = this.identityService.UserData; + + console.log(basket); + console.log(identityInfo); + + //Identity data mapping: + order.street = identityInfo.address_street; + order.city = identityInfo.address_city; + order.country = identityInfo.address_country; + order.state = identityInfo.address_state; + order.zipcode = identityInfo.addrees_zipcode; + order.cardexpiration = identityInfo.card_expiration; + order.cardnumber = identityInfo.card_number; + order.cardsecuritynumber = identityInfo.card_security_number; + order.cardtypeid = identityInfo.card_type; + order.cardholdername = identityInfo.card_holder; + + //basket data mapping: + order.orderItems = new Array(); + basket.items.forEach(x => + { + let item: IOrderItem = {}; + item.pictureurl = x.pictureUrl; + item.productId = +x.productId; + item.productname = x.productName; + item.unitprice = x.unitPrice; + item.units = x.quantity; + + order.orderItems.push(item); + }); + + order.buyer = basket.buyerId; + + return order; + } + } + diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/models/order.model.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/models/order.model.ts index 8d38c6a0d..0ed5fcdd4 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/models/order.model.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/models/order.model.ts @@ -1,13 +1,18 @@ 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[]; + city: number; + street: string; + state: string; + country: number; + zipcode: string; + cardnumber: string; + cardexpiration: Date; + expiration: string; + cardsecuritynumber: string; + cardholdername: string; + cardtypeid: number; + buyer: string; + ordernumber: string, + orderItems: IOrderItem[]; } diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/models/orderItem.model.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/models/orderItem.model.ts index 8727d8156..75a2f54f2 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/models/orderItem.model.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/models/orderItem.model.ts @@ -3,4 +3,5 @@ export interface IOrderItem { productname: string; unitprice: number; units: number; + productId: number }