ayan.poddar
/
eShopOnContainers
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 19 Wiki Activity
Browse Source

SPA: New order create form and call to Orders Api.

pull/49/merge
Carlos Cañizares Estévez 8 years ago
parent
15a2ea727f
commit
76486c8c8c
7 changed files with 220 additions and 195 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.html
  2. +1
    -2
      src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.ts
  3. +121
    -163
      src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.html
  4. +30
    -19
      src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.ts
  5. +52
    -1
      src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.service.ts
  6. +14
    -9
      src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/models/order.model.ts
  7. +1
    -0
      src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/models/orderItem.model.ts

+ 1
- 1
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.html View File

@ -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>

+ 1
- 2
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.ts View File

@ -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']);
}


+ 121
- 163
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.html View File

@ -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>
</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>
</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>
<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>
<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>
<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>

+ 30
- 19
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.ts View File

@ -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']);
});
}
}

+ 52
- 1
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.service.ts View File

@ -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;
}
}

+ 14
- 9
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/models/order.model.ts View File

@ -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[];
}

+ 1
- 0
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/models/orderItem.model.ts View File

@ -3,4 +3,5 @@ export interface IOrderItem {
productname: string;
unitprice: number;
units: number;
productId: number
}

Write Preview
Loading…
Cancel
Save