Merge branch 'Dev' of https://github.com/dotnet/eShopOnContainers into Dev
This commit is contained in:
Quique Fernandez
commit
d77fa14b1f
@ -62,7 +62,7 @@
|
||||
<div class="col-md-8">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<input type="submit" (Click)="checkOut()" class="btn esh-basket-checkout" value="[ Checkout ]" name="action">
|
||||
<div (click)="checkOut($event)" class="btn esh-basket-checkout">[ Checkout ]</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -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']);
|
||||
}
|
||||
|
||||
@ -4,172 +4,130 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="jumbotron">
|
||||
<h2>Form with Validations</h2>
|
||||
<div class="container esh-orders-new-container">
|
||||
<form [formGroup]="newOrderForm" (ngSubmit)="submitForm(newOrderForm.value)">
|
||||
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['firstName'].valid && newOrderForm.controls['firstName'].touched}">
|
||||
<label>First Name:</label>
|
||||
<input class="form-control" type="text" placeholder="John" [formControl]="newOrderForm.controls['firstName']">
|
||||
<!-- The hasError method will tell us if a particular error exists -->
|
||||
<div *ngIf="newOrderForm.controls['firstName'].hasError('required') && newOrderForm.controls['firstName'].touched" class="alert alert-danger">You must include a first name.</div>
|
||||
<h4>SHIPPING ADDRESS</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['street'].valid && newOrderForm.controls['street'].touched}">
|
||||
<label>ADDRESS</label>
|
||||
<input class="form-control" type="text" placeholder="Street" [formControl]="newOrderForm.controls['street']">
|
||||
<div *ngIf="newOrderForm.controls['street'].hasError('required') && newOrderForm.controls['street'].touched" class="alert alert-danger">Required field.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['city'].valid && newOrderForm.controls['city'].touched}">
|
||||
<label>CITY</label>
|
||||
<input class="form-control" type="text" placeholder="City" [formControl]="newOrderForm.controls['city']">
|
||||
<div *ngIf="newOrderForm.controls['city'].hasError('required') && newOrderForm.controls['city'].touched" class="alert alert-danger">Required field.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['state'].valid && newOrderForm.controls['state'].touched}">
|
||||
<label>STATE</label>
|
||||
<input class="form-control" type="text" placeholder="state" [formControl]="newOrderForm.controls['state']">
|
||||
<div *ngIf="newOrderForm.controls['state'].hasError('required') && newOrderForm.controls['state'].touched" class="alert alert-danger">Required field.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['country'].valid && newOrderForm.controls['country'].touched}">
|
||||
<label>COUNTRY</label>
|
||||
<input class="form-control" type="text" placeholder="country" [formControl]="newOrderForm.controls['country']">
|
||||
<div *ngIf="newOrderForm.controls['country'].hasError('required') && newOrderForm.controls['country'].touched" class="alert alert-danger">Required field.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['lastName'].valid && newOrderForm.controls['lastName'].touched}">
|
||||
<label>Last Name</label>
|
||||
<input class="form-control" type="text" placeholder="Doe" [formControl]="complexForm.controls['lastName']">
|
||||
<!-- The hasError method can work with the built in validators but custom validators as well -->
|
||||
<div *ngIf="newOrderForm.controls['lastName'].hasError('required') && newOrderForm.controls['lastName'].touched" class="alert alert-danger">You must include a last name.</div>
|
||||
<div *ngIf="newOrderForm.controls['lastName'].hasError('minlength') && newOrderForm.controls['lastName'].touched" class="alert alert-danger">Your last name must be at least 5 characters long.</div>
|
||||
<div *ngIf="newOrderForm.controls['lastName'].hasError('maxlength') && newOrderForm.controls['lastName'].touched" class="alert alert-danger">Your last name cannot exceed 10 characters.</div>
|
||||
<br />
|
||||
<h4>PAYMENT METHOD</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['cardnumber'].valid && newOrderForm.controls['cardnumber'].touched}">
|
||||
<label>CARD NUMBER</label>
|
||||
<input class="form-control" type="text" placeholder="Card number" [formControl]="newOrderForm.controls['cardnumber']">
|
||||
<div *ngIf="newOrderForm.controls['cardnumber'].hasError('required') && newOrderForm.controls['cardnumber'].touched" class="alert alert-danger">Required field.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['cardholdername'].valid && newOrderForm.controls['cardholdername'].touched}">
|
||||
<label>CARDHOLDER NAME</label>
|
||||
<input class="form-control" type="text" placeholder="Card holder" [formControl]="newOrderForm.controls['cardholdername']">
|
||||
<div *ngIf="newOrderForm.controls['cardholdername'].hasError('required') && newOrderForm.controls['cardholdername'].touched" class="alert alert-danger">Required field.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['expirationdate'].valid && newOrderForm.controls['expirationdate'].touched}">
|
||||
<label>EXPIRATION DATE</label>
|
||||
<input class="form-control" type="text" placeholder="Card expiration" [formControl]="newOrderForm.controls['expirationdate']">
|
||||
<div *ngIf="newOrderForm.controls['expirationdate'].hasError('required') && newOrderForm.controls['expirationdate'].touched" class="alert alert-danger">Required field.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['securitycode'].valid && newOrderForm.controls['securitycode'].touched}">
|
||||
<label>SECURITY CODE</label>
|
||||
<input class="form-control" type="text" placeholder="Card security Code" [formControl]="newOrderForm.controls['securitycode']">
|
||||
<div *ngIf="newOrderForm.controls['securitycode'].hasError('required') && newOrderForm.controls['securitycode'].touched" class="alert alert-danger">Required field.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="col-md-12">
|
||||
<section>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="cart-product-column">
|
||||
PRODUCT
|
||||
</th>
|
||||
<th>
|
||||
|
||||
</th>
|
||||
<th>
|
||||
BRAND
|
||||
</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">ROSLYN</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>$ 29,00</span>
|
||||
<input type="hidden" value="29,00" name="Total">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Gender</label>
|
||||
<div class="alert alert-danger" *ngIf="!newOrderForm.controls['gender'].valid && complexForm.controls['gender'].touched">You must select a gender.</div>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="gender" value="Male" [formControl]="newOrderForm.controls['gender']">
|
||||
Male
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="gender" value="Female" [formControl]="complexForm.controls['gender']">
|
||||
Female
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Activities</label>
|
||||
</div>
|
||||
<label class="checkbox-inline">
|
||||
<input type="checkbox" value="hiking" name="hiking" [formControl]="complexForm.controls['hiking']"> Hiking
|
||||
</label>
|
||||
<label class="checkbox-inline">
|
||||
<input type="checkbox" value="swimming" name="swimming" [formControl]="complexForm.controls['swimming']"> Swimming
|
||||
</label>
|
||||
<label class="checkbox-inline">
|
||||
<input type="checkbox" value="running" name="running" [formControl]="complexForm.controls['running']"> Running
|
||||
</label>
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-primary" [disabled]="!complexForm.valid">Submit</button>
|
||||
<div class="col-md-8">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<button type="submit" class="btn esh-orders-new-placeOrder" [disabled]="!newOrderForm.valid">[ Place Order ]</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="container esh-orders-new-container">
|
||||
<h1>SHIPPING ADDRESS</h1>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
ADDRESS<br />
|
||||
{{address}}
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
CITY<br />
|
||||
{{city}}
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
STATE<br />
|
||||
{{state}}
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
COUNTRY<br />
|
||||
{{country}}
|
||||
</div>
|
||||
</div>
|
||||
<h1>PAYMENT METHOD</h1>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
CARD NUMBER<br />
|
||||
{{address}}
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
CARDHOLDER NAME<br />
|
||||
{{city}}
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
EXPIRATION DATE<br />
|
||||
{{state}}
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
SECURITY CODE<br />
|
||||
{{country}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<section>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="cart-product-column">
|
||||
PRODUCT
|
||||
</th>
|
||||
<th>
|
||||
|
||||
</th>
|
||||
<th>
|
||||
BRAND
|
||||
</th>
|
||||
<th>
|
||||
PRICE
|
||||
</th>
|
||||
<th>
|
||||
QUANTITY
|
||||
</th>
|
||||
<th>
|
||||
COST
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- ngFor -->
|
||||
<tr>
|
||||
<td class="cart-product-column">
|
||||
|
||||
</td>
|
||||
<td class="cart-product-column">
|
||||
|
||||
</td>
|
||||
<td class="cart-product-column">
|
||||
ROSLYN
|
||||
</td>
|
||||
<td class="cart-product-column">
|
||||
|
||||
</td>
|
||||
<td class="cart-product-column">
|
||||
|
||||
</td>
|
||||
<td class="cart-product-column cart-total-value">
|
||||
|
||||
</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>$ 29,00</span>
|
||||
<input type="hidden" value="29,00" name="Total">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-md-8">
|
||||
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<input type="submit" value="[ Place Order ]" name="action" class="btn esh-orders-new-placeOrder">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -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']);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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<IOrder[]> {
|
||||
@ -32,4 +36,51 @@ export class OrdersService {
|
||||
return response.json();
|
||||
});
|
||||
}
|
||||
|
||||
postOrder(item): Observable<boolean> {
|
||||
return this.service.post(this.ordersUrl + '/new', item).map((response: Response) => {
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
mapBasketAndIdentityInfoNewOrder(): IOrder {
|
||||
let order = <IOrder>{};
|
||||
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<IOrderItem>();
|
||||
basket.items.forEach(x =>
|
||||
{
|
||||
let item: IOrderItem = <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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -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[];
|
||||
}
|
||||
|
||||
@ -3,4 +3,5 @@ export interface IOrderItem {
|
||||
productname: string;
|
||||
unitprice: number;
|
||||
units: number;
|
||||
productId: number
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user