Skip to content

Commit 76486c8

Browse files
author
Carlos Cañizares Estévez
committed
SPA: New order create form and call to Orders Api.
1 parent 15a2ea7 commit 76486c8

7 files changed

Lines changed: 220 additions & 195 deletions

File tree

‎src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
<div class="col-md-8">
6363
</div>
6464
<div class="col-md-4">
65-
<input type="submit" (Click)="checkOut()" class="btn esh-basket-checkout" value="[ Checkout ]" name="action">
65+
<div (click)="checkOut($event)" class="btn esh-basket-checkout">[ Checkout ]</div>
6666
</div>
6767
</div>
6868
</div>

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,7 @@ export class BasketComponent implements OnInit {
2929
this.service.setBasket(this.basket);
3030
}
3131

32-
checkOut() {
33-
console.log('checkout clicked!');
32+
checkOut(event: any) {
3433
this.basketwrapper.basket = this.basket;
3534
this.router.navigate(['order']);
3635
}

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

Lines changed: 121 additions & 163 deletions
Original file line numberDiff line numberDiff line change
@@ -4,172 +4,130 @@
44
</ul>
55
</div>
66

7-
8-
<div class="jumbotron">
9-
<h2>Form with Validations</h2>
7+
<div class="container esh-orders-new-container">
108
<form [formGroup]="newOrderForm" (ngSubmit)="submitForm(newOrderForm.value)">
11-
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['firstName'].valid && newOrderForm.controls['firstName'].touched}">
12-
<label>First Name:</label>
13-
<input class="form-control" type="text" placeholder="John" [formControl]="newOrderForm.controls['firstName']">
14-
<!-- The hasError method will tell us if a particular error exists -->
15-
<div *ngIf="newOrderForm.controls['firstName'].hasError('required') && newOrderForm.controls['firstName'].touched" class="alert alert-danger">You must include a first name.</div>
16-
</div>
17-
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['lastName'].valid && newOrderForm.controls['lastName'].touched}">
18-
<label>Last Name</label>
19-
<input class="form-control" type="text" placeholder="Doe" [formControl]="complexForm.controls['lastName']">
20-
<!-- The hasError method can work with the built in validators but custom validators as well -->
21-
<div *ngIf="newOrderForm.controls['lastName'].hasError('required') && newOrderForm.controls['lastName'].touched" class="alert alert-danger">You must include a last name.</div>
22-
<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>
23-
<div *ngIf="newOrderForm.controls['lastName'].hasError('maxlength') && newOrderForm.controls['lastName'].touched" class="alert alert-danger">Your last name cannot exceed 10 characters.</div>
24-
</div>
25-
<div class="form-group">
26-
<label>Gender</label>
27-
<div class="alert alert-danger" *ngIf="!newOrderForm.controls['gender'].valid && complexForm.controls['gender'].touched">You must select a gender.</div>
28-
</div>
29-
<div class="radio">
30-
<label>
31-
<input type="radio" name="gender" value="Male" [formControl]="newOrderForm.controls['gender']">
32-
Male
33-
</label>
34-
</div>
35-
<div class="radio">
36-
<label>
37-
<input type="radio" name="gender" value="Female" [formControl]="complexForm.controls['gender']">
38-
Female
39-
</label>
40-
</div>
41-
<div class="form-group">
42-
<label>Activities</label>
9+
<h4>SHIPPING ADDRESS</h4>
10+
<div class="row">
11+
<div class="col-md-6">
12+
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['street'].valid && newOrderForm.controls['street'].touched}">
13+
<label>ADDRESS</label>
14+
<input class="form-control" type="text" placeholder="Street" [formControl]="newOrderForm.controls['street']">
15+
<div *ngIf="newOrderForm.controls['street'].hasError('required') && newOrderForm.controls['street'].touched" class="alert alert-danger">Required field.</div>
16+
</div>
17+
</div>
18+
<div class="col-md-6">
19+
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['city'].valid && newOrderForm.controls['city'].touched}">
20+
<label>CITY</label>
21+
<input class="form-control" type="text" placeholder="City" [formControl]="newOrderForm.controls['city']">
22+
<div *ngIf="newOrderForm.controls['city'].hasError('required') && newOrderForm.controls['city'].touched" class="alert alert-danger">Required field.</div>
23+
</div>
24+
</div>
25+
<div class="col-md-6">
26+
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['state'].valid && newOrderForm.controls['state'].touched}">
27+
<label>STATE</label>
28+
<input class="form-control" type="text" placeholder="state" [formControl]="newOrderForm.controls['state']">
29+
<div *ngIf="newOrderForm.controls['state'].hasError('required') && newOrderForm.controls['state'].touched" class="alert alert-danger">Required field.</div>
30+
</div>
31+
</div>
32+
<div class="col-md-6">
33+
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['country'].valid && newOrderForm.controls['country'].touched}">
34+
<label>COUNTRY</label>
35+
<input class="form-control" type="text" placeholder="country" [formControl]="newOrderForm.controls['country']">
36+
<div *ngIf="newOrderForm.controls['country'].hasError('required') && newOrderForm.controls['country'].touched" class="alert alert-danger">Required field.</div>
37+
</div>
38+
</div>
39+
</div>
40+
<br />
41+
<h4>PAYMENT METHOD</h4>
42+
<div class="row">
43+
<div class="col-md-6">
44+
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['cardnumber'].valid && newOrderForm.controls['cardnumber'].touched}">
45+
<label>CARD NUMBER</label>
46+
<input class="form-control" type="text" placeholder="Card number" [formControl]="newOrderForm.controls['cardnumber']">
47+
<div *ngIf="newOrderForm.controls['cardnumber'].hasError('required') && newOrderForm.controls['cardnumber'].touched" class="alert alert-danger">Required field.</div>
48+
</div>
49+
</div>
50+
<div class="col-md-6">
51+
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['cardholdername'].valid && newOrderForm.controls['cardholdername'].touched}">
52+
<label>CARDHOLDER NAME</label>
53+
<input class="form-control" type="text" placeholder="Card holder" [formControl]="newOrderForm.controls['cardholdername']">
54+
<div *ngIf="newOrderForm.controls['cardholdername'].hasError('required') && newOrderForm.controls['cardholdername'].touched" class="alert alert-danger">Required field.</div>
55+
</div>
56+
</div>
57+
<div class="col-md-3">
58+
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['expirationdate'].valid && newOrderForm.controls['expirationdate'].touched}">
59+
<label>EXPIRATION DATE</label>
60+
<input class="form-control" type="text" placeholder="Card expiration" [formControl]="newOrderForm.controls['expirationdate']">
61+
<div *ngIf="newOrderForm.controls['expirationdate'].hasError('required') && newOrderForm.controls['expirationdate'].touched" class="alert alert-danger">Required field.</div>
62+
</div>
63+
</div>
64+
<div class="col-md-3">
65+
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['securitycode'].valid && newOrderForm.controls['securitycode'].touched}">
66+
<label>SECURITY CODE</label>
67+
<input class="form-control" type="text" placeholder="Card security Code" [formControl]="newOrderForm.controls['securitycode']">
68+
<div *ngIf="newOrderForm.controls['securitycode'].hasError('required') && newOrderForm.controls['securitycode'].touched" class="alert alert-danger">Required field.</div>
69+
</div>
70+
</div>
71+
</div>
72+
<br/>
73+
<div class="col-md-12">
74+
<section>
75+
<table class="table">
76+
<thead>
77+
<tr>
78+
<th class="cart-product-column">
79+
PRODUCT
80+
</th>
81+
<th>
82+
83+
</th>
84+
<th>
85+
BRAND
86+
</th>
87+
<th>
88+
PRICE
89+
</th>
90+
<th>
91+
QUANTITY
92+
</th>
93+
<th>
94+
COST
95+
</th>
96+
</tr>
97+
</thead>
98+
<tbody>
99+
<tr *ngFor="let item of order.orderItems">
100+
<td class="esh-orders-detail-column"><img class="esh-orders-detail-image" src="{{item.pictureurl}}"></td>
101+
<td class="esh-orders-detail-column">{{item.productname}}</td>
102+
<td class="esh-orders-detail-column">ROSLYN</td>
103+
<td class="esh-orders-detail-column">$ {{item.unitprice}}</td>
104+
<td class="esh-orders-detail-column">{{item.units}}</td>
105+
<td class="esh-orders-detail-column esh-orders-detail-total-value">$ {{item.units * item.unitprice}}</td>
106+
</tr>
107+
<tr class="cart-totals">
108+
<td></td>
109+
<td></td>
110+
<td></td>
111+
<td></td>
112+
<td></td>
113+
<td>
114+
<div class="cart-total-value">
115+
<div class="cart-total-label"><span>TOTAL</span></div>
116+
<span>$ 29,00</span>
117+
<input type="hidden" value="29,00" name="Total">
118+
</div>
119+
</td>
120+
</tr>
121+
</tbody>
122+
</table>
123+
</section>
43124
</div>
44-
<label class="checkbox-inline">
45-
<input type="checkbox" value="hiking" name="hiking" [formControl]="complexForm.controls['hiking']"> Hiking
46-
</label>
47-
<label class="checkbox-inline">
48-
<input type="checkbox" value="swimming" name="swimming" [formControl]="complexForm.controls['swimming']"> Swimming
49-
</label>
50-
<label class="checkbox-inline">
51-
<input type="checkbox" value="running" name="running" [formControl]="complexForm.controls['running']"> Running
52-
</label>
53125
<div class="form-group">
54-
<button type="submit" class="btn btn-primary" [disabled]="!complexForm.valid">Submit</button>
126+
<div class="col-md-8">
127+
</div>
128+
<div class="col-md-4">
129+
<button type="submit" class="btn esh-orders-new-placeOrder" [disabled]="!newOrderForm.valid">[ Place Order ]</button>
130+
</div>
55131
</div>
56132
</form>
57-
</div>
58-
59-
60-
61-
62-
63-
<div class="container esh-orders-new-container">
64-
<h1>SHIPPING ADDRESS</h1>
65-
<div class="row">
66-
<div class="col-md-6">
67-
ADDRESS<br />
68-
{{address}}
69-
</div>
70-
<div class="col-md-6">
71-
CITY<br />
72-
{{city}}
73-
</div>
74-
<div class="col-md-6">
75-
STATE<br />
76-
{{state}}
77-
</div>
78-
<div class="col-md-6">
79-
COUNTRY<br />
80-
{{country}}
81-
</div>
82-
</div>
83-
<h1>PAYMENT METHOD</h1>
84-
<div class="row">
85-
<div class="col-md-6">
86-
CARD NUMBER<br />
87-
{{address}}
88-
</div>
89-
<div class="col-md-6">
90-
CARDHOLDER NAME<br />
91-
{{city}}
92-
</div>
93-
<div class="col-md-3">
94-
EXPIRATION DATE<br />
95-
{{state}}
96-
</div>
97-
<div class="col-md-3">
98-
SECURITY CODE<br />
99-
{{country}}
100-
</div>
101-
</div>
102-
<div class="col-md-12">
103-
<section>
104-
<table class="table">
105-
<thead>
106-
<tr>
107-
<th class="cart-product-column">
108-
PRODUCT
109-
</th>
110-
<th>
111-
112-
</th>
113-
<th>
114-
BRAND
115-
</th>
116-
<th>
117-
PRICE
118-
</th>
119-
<th>
120-
QUANTITY
121-
</th>
122-
<th>
123-
COST
124-
</th>
125-
</tr>
126-
</thead>
127-
<tbody>
128-
<!-- ngFor -->
129-
<tr>
130-
<td class="cart-product-column">
131-
132-
</td>
133-
<td class="cart-product-column">
134-
135-
</td>
136-
<td class="cart-product-column">
137-
ROSLYN
138-
</td>
139-
<td class="cart-product-column">
140-
141-
</td>
142-
<td class="cart-product-column">
143-
144-
</td>
145-
<td class="cart-product-column cart-total-value">
146-
147-
</td>
148-
</tr>
149-
<tr class="cart-totals">
150-
<td></td>
151-
<td></td>
152-
<td></td>
153-
<td></td>
154-
<td></td>
155-
<td>
156-
<div class="cart-total-value">
157-
<div class="cart-total-label"><span>TOTAL</span></div>
158-
<span>$ 29,00</span>
159-
<input type="hidden" value="29,00" name="Total">
160-
</div>
161-
</td>
162-
</tr>
163-
</tbody>
164-
</table>
165-
</section>
166-
</div>
167-
<div class="form-group">
168-
<div class="col-md-8">
169-
170-
</div>
171-
<div class="col-md-4">
172-
<input type="submit" value="[ Place Order ]" name="action" class="btn esh-orders-new-placeOrder">
173-
</div>
174-
</div>
175133
</div>

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

Lines changed: 30 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,54 @@
11
import { Component, OnInit } from '@angular/core';
22
import { OrdersService } from '../orders.service';
33
import { IOrder } from '../../shared/models/order.model';
4-
import { SecurityService } from '../../shared/services/security.service';
4+
55
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
6-
import { BasketWrapperService } from '../../shared/services/basket.wrapper.service';
6+
import { Router } from '@angular/router';
77

88
@Component({
99
selector: 'esh-orders-new .esh-orders-new',
1010
styleUrls: ['./orders-new.component.scss'],
1111
templateUrl: './orders-new.component.html'
1212
})
1313
export class OrdersNewComponent implements OnInit {
14-
private newOrderForm = {}; // new order form
14+
private newOrderForm : FormGroup; // new order form
15+
private order: IOrder;
1516

16-
constructor(private service: OrdersService, private identityService: SecurityService, fb: FormBuilder, private basketWrapper: BasketWrapperService) {
17+
constructor(private service: OrdersService, fb: FormBuilder, private router: Router) {
18+
//Obtener información del perfil de usuario.
19+
this.order = service.mapBasketAndIdentityInfoNewOrder();
1720
this.newOrderForm = fb.group({
18-
'address': [null, Validators.required],
19-
'city': [null, Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(10)])],
20-
'state': [null, Validators.required],
21-
'country': [null, Validators.required],
22-
'cardnumber': [null, Validators.required],
23-
'cardholdername': [null, Validators.required],
24-
'expirationdate': [null, Validators.required],
25-
'securitycode': [null, Validators.required],
21+
'street': [this.order.street, Validators.required],
22+
'city': [this.order.city, Validators.required],
23+
'state': [this.order.state, Validators.required],
24+
'country': [this.order.country, Validators.required],
25+
'cardnumber': [this.order.cardnumber, Validators.required],
26+
'cardholdername': [this.order.cardholdername, Validators.required],
27+
'expirationdate': [this.order.expiration, Validators.required],
28+
'securitycode': [this.order.cardsecuritynumber, Validators.required],
2629
});
2730
}
2831

2932
ngOnInit() {
30-
//Obtener el basket.
31-
var basket = this.basketWrapper.basket;
32-
console.log('orders component');
33-
console.log(basket);
34-
console.log(this.identityService.UserData);
35-
//Obtener información del perfil de usuario.
3633

3734
}
3835

3936
submitForm(value: any) {
40-
console.log(value);
37+
this.order.street = this.newOrderForm.controls['street'].value;
38+
this.order.city = this.newOrderForm.controls['city'].value;
39+
this.order.state = this.newOrderForm.controls['state'].value;
40+
this.order.country = this.newOrderForm.controls['country'].value;
41+
this.order.cardnumber = this.newOrderForm.controls['cardnumber'].value;
42+
this.order.cardholdername = this.newOrderForm.controls['cardholdername'].value;
43+
this.order.cardexpiration = new Date(2020, 1);
44+
this.order.cardsecuritynumber = this.newOrderForm.controls['securitycode'].value;
45+
46+
this.service.postOrder(this.order).subscribe(res => {
47+
console.log('order response from api retrieved');
48+
console.log(res);
49+
50+
this.router.navigate(['orders']);
51+
});
4152
}
4253
}
4354

0 commit comments

Comments
 (0)