Skip to content

Commit ee3241e

Browse files
author
Quique Fernandez
committed
add orders detail
1 parent 771897b commit ee3241e

11 files changed

Lines changed: 211 additions & 10 deletions

File tree

‎src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.routes.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,14 @@ import { Routes, RouterModule } from '@angular/router';
33
import { BasketComponent } from './basket/basket.component';
44
import { CatalogComponent } from './catalog/catalog.component';
55
import { OrdersComponent } from './orders/orders.component';
6+
import { OrdersDetailComponent } from './orders/orders-detail/orders-detail.component';
67

78
export const routes: Routes = [
89
{ path: '', redirectTo: 'catalog', pathMatch: 'full' },
910
{ path: 'basket', component: BasketComponent },
1011
{ path: 'catalog', component: CatalogComponent },
11-
{ path: 'orders', component: OrdersComponent }
12+
{ path: 'orders', component: OrdersComponent },
13+
{ path: 'orders/:id', component: OrdersDetailComponent },
1214
//Lazy async modules (angular-loader-router) and enable a router in each module.
1315
//{
1416
// path: 'basket', loadChildren: '/basket/basket.module' });

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

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<div class="esh-orders-detail-header">
2+
<ul class="container">
3+
<li class="esh-orders-detail-header-back" routerLink="/orders">Back to list</li>
4+
</ul>
5+
</div>
6+
<div class="container esh-orders-detail-container">
7+
<div class="row">
8+
<div class="col-sm-3">
9+
<span>ORDER NUMBER</span><br>
10+
<span>{{order.ordernumber}}</span>
11+
</div>
12+
<div class="col-sm-3">
13+
<span>DATE</span><br>
14+
<span>{{order.date | date:'short'}}</span>
15+
</div>
16+
<div class="col-sm-3">
17+
<span>TOTAL</span><br>
18+
<span>$ {{order.total}}</span>
19+
</div>
20+
<div class="col-sm-3">
21+
<span>STATUS</span><br>
22+
<span>{{order.status}}</span>
23+
</div>
24+
</div>
25+
<div class="row esh-orders-detail-section">
26+
<div class="col-sm-3">
27+
<span>SHIPING ADDRESS</span><br>
28+
<span>{{order.street}}</span><br>
29+
<span>{{order.city}}</span><br>
30+
<span>{{order.country}}</span><br>
31+
</div>
32+
</div>
33+
<div>
34+
<div class="row esh-orders-detail-section"><div class="col-sm-3">ORDER DETAILS</div></div>
35+
<section>
36+
<table class="table">
37+
<tbody>
38+
<tr *ngFor="let item of order.orderitems">
39+
<td class="esh-orders-detail-column"><img class="esh-orders-detail-image" src="{{item.pictureurl}}"></td>
40+
<td class="esh-orders-detail-column">{{item.productname}}</td>
41+
<td class="esh-orders-detail-column">ROSLYN</td>
42+
<td class="esh-orders-detail-column">$ {{item.unitprice}}</td>
43+
<td class="esh-orders-detail-column">{{item.units}}</td>
44+
<td class="esh-orders-detail-column esh-orders-detail-total-value">$ {{item.units * item.unitprice}}</td>
45+
</tr>
46+
</tbody>
47+
</table>
48+
</section>
49+
</div>
50+
<div class="col-md-9 col-md-3">
51+
52+
</div>
53+
<div class="col-md-3">
54+
<div class="esh-orders-detail-total">
55+
<div class="esh-orders-detail-total-label"><span>TOTAL</span></div>
56+
<div class="esh-orders-detail-total-value"><span>$ 12.00</span></div>
57+
</div>
58+
</div>
59+
</div>

‎src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.scss‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
@import '../../_variables.scss';
2+
3+
.esh-orders-detail {
4+
min-height: 80vh;
5+
6+
&-header {
7+
background-color: #00A69C;
8+
height: 63px;
9+
10+
li {
11+
list-style: none;
12+
display: inline;
13+
opacity: 0.5;
14+
margin-top: 25px;
15+
margin-left: 10px;
16+
float: right;
17+
cursor: pointer;
18+
color: white;
19+
}
20+
21+
li a {
22+
color: white;
23+
}
24+
25+
&-back {
26+
float: left !important;
27+
margin-top: 20px !important;
28+
text-transform: uppercase;
29+
}
30+
31+
li a:hover {
32+
text-decoration: none;
33+
}
34+
}
35+
36+
&-container {
37+
min-height: 70vh;
38+
padding-top: 40px;
39+
margin-bottom: 30px;
40+
}
41+
42+
&-container .table tbody tr:first-child td {
43+
border-top: none;
44+
}
45+
46+
&-container .table tr {
47+
border-bottom: none;
48+
}
49+
50+
&-section {
51+
margin-top: 50px;
52+
}
53+
54+
&-container .table {
55+
margin-left: -7px;
56+
}
57+
58+
&-total {
59+
margin-bottom: 5px;
60+
margin-left: 20px;
61+
text-align: left;
62+
}
63+
64+
&-total-label {
65+
font-size: 14px;
66+
color: #404040;
67+
margin-top:10px;
68+
}
69+
70+
&-total-value {
71+
font-size: 28px;
72+
color: #00a69c;
73+
text-align: left;
74+
}
75+
76+
&-image {
77+
max-width: 210px;
78+
}
79+
80+
&-column {
81+
max-width: 120px;
82+
padding: 8px;
83+
text-transform: uppercase;
84+
vertical-align: middle!important;
85+
}
86+
}

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { OrdersService } from '../orders.service';
3+
import { IOrder } from '../../shared/models/order.model';
4+
import { ActivatedRoute } from '@angular/router';
5+
6+
@Component({
7+
selector: 'esh-orders-detail .esh-orders-detail',
8+
styleUrls: ['./orders-detail.component.scss'],
9+
templateUrl: './orders-detail.component.html'
10+
})
11+
export class OrdersDetailComponent implements OnInit {
12+
order = {}; // new order
13+
14+
constructor(private service: OrdersService, private route: ActivatedRoute) { }
15+
16+
ngOnInit() {
17+
this.route.params.subscribe(params => {
18+
let id = +params['id']; // (+) converts string 'id' to a number
19+
this.getOrder(id);
20+
});
21+
}
22+
23+
getOrder(id: number) {
24+
this.service.getOrder(id).subscribe(order => {
25+
this.order = order;
26+
console.log('order retrieved: ' + order.ordernumber);
27+
console.log(this.order);
28+
});
29+
}
30+
}
31+

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
<td class="esh-orders-order-column">$ {{order.total}}</td>
3333
<td class="esh-orders-order-column">{{order.status}}</td>
3434
<td class="esh-orders-order-column">
35-
<a class="esh-orders-order-link" href="#">Detail</a>
35+
<a class="esh-orders-order-link" routerLink="/orders/{{order.ordernumber}}">Detail</a>
3636
</td>
3737
</tr>
3838
</tbody>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { OrdersService } from './orders.service';
33
import { IOrder } from '../shared/models/order.model';
44

55
@Component({
6-
selector: 'esh-orders .orders',
6+
selector: 'esh-orders .esh-orders',
77
styleUrls: ['./orders.component.scss'],
88
templateUrl: './orders.component.html'
99
})

‎src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.module.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,13 @@ import { BrowserModule } from '@angular/platform-browser';
33

44
import { SharedModule } from '../shared/shared.module';
55
import { OrdersComponent } from './orders.component';
6+
import { OrdersDetailComponent } from './orders-detail/orders-detail.component';
67
import { OrdersService } from './orders.service';
78
import { Pager } from '../shared/components/pager/pager';
89

910
@NgModule({
1011
imports: [BrowserModule, SharedModule],
11-
declarations: [OrdersComponent],
12+
declarations: [OrdersComponent, OrdersDetailComponent],
1213
providers: [OrdersService]
1314
})
1415
export class OrdersModule { }

‎src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.service.ts‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,16 @@ export class OrdersService {
1717
constructor(private service: DataService) {
1818
}
1919

20-
getOrders(): Observable<any> {
21-
var url = this.ordersUrl;
20+
getOrders(): Observable<IOrder[]> {
21+
let url = this.ordersUrl;
22+
23+
return this.service.get(url).map((response: Response) => {
24+
return response.json();
25+
});
26+
}
27+
28+
getOrder(id: number): Observable<IOrder> {
29+
let url = `${this.ordersUrl}/${id}`;
2230

2331
return this.service.get(url).map((response: Response) => {
2432
return response.json();

‎src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/models/catalogItem.model.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,5 @@ export interface ICatalogItem {
88
catalogBrand: string;
99
catalogTypeId: number;
1010
catalogType: string;
11+
units: number;
1112
}

‎src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/models/order.model.ts‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
1+
import {IOrderItem} from './orderItem.model';
2+
13
export interface IOrder {
2-
ordernumber: number,
3-
date: Date,
4-
status: string,
5-
total: number
4+
ordernumber: number;
5+
date: Date;
6+
status: string;
7+
total: number;
8+
street?: string;
9+
city?: string;
10+
zipcode?: string;
11+
country?: string;
12+
orderitems?: IOrderItem[];
613
}

0 commit comments

Comments
 (0)