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

add orders detail

Browse Source
This commit is contained in:
Quique Fernandez 2016-12-23 15:41:08 +01:00
parent 771897b9f6
commit ee3241e2fb
11 changed files with 211 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.routes.ts
View File

@ -3,12 +3,14 @@ import { Routes, RouterModule } from '@angular/router';
import { BasketComponent } from './basket/basket.component';
import { CatalogComponent } from './catalog/catalog.component';
import { OrdersComponent } from './orders/orders.component';
import { OrdersDetailComponent } from './orders/orders-detail/orders-detail.component';
export const routes: Routes = [
{ path: '', redirectTo: 'catalog', pathMatch: 'full' },
{ path: 'basket', component: BasketComponent },
{ path: 'catalog', component: CatalogComponent },
{ path: 'orders', component: OrdersComponent }
{ path: 'orders', component: OrdersComponent },
{ path: 'orders/:id', component: OrdersDetailComponent },
//Lazy async modules (angular-loader-router) and enable a router in each module.
//{
// path: 'basket', loadChildren: '/basket/basket.module' });

59
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html Normal file
View File

@ -0,0 +1,59 @@
<div class="esh-orders-detail-header">
<ul class="container">
<li class="esh-orders-detail-header-back" routerLink="/orders">Back to list</li>
</ul>
</div>
<div class="container esh-orders-detail-container">
<div class="row">
<div class="col-sm-3">
<span>ORDER NUMBER</span><br>
<span>{{order.ordernumber}}</span>
</div>
<div class="col-sm-3">
<span>DATE</span><br>
<span>{{order.date | date:'short'}}</span>
</div>
<div class="col-sm-3">
<span>TOTAL</span><br>
<span>$ {{order.total}}</span>
</div>
<div class="col-sm-3">
<span>STATUS</span><br>
<span>{{order.status}}</span>
</div>
</div>
<div class="row esh-orders-detail-section">
<div class="col-sm-3">
<span>SHIPING ADDRESS</span><br>
<span>{{order.street}}</span><br>
<span>{{order.city}}</span><br>
<span>{{order.country}}</span><br>
</div>
</div>
<div>
<div class="row esh-orders-detail-section"><div class="col-sm-3">ORDER DETAILS</div></div>
<section>
<table class="table">
<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>
</tbody>
</table>
</section>
</div>
<div class="col-md-9 col-md-3">
</div>
<div class="col-md-3">
<div class="esh-orders-detail-total">
<div class="esh-orders-detail-total-label"><span>TOTAL</span></div>
<div class="esh-orders-detail-total-value"><span>$ 12.00</span></div>
</div>
</div>
</div>

86
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.scss Normal file
View File

@ -0,0 +1,86 @@
@import '../../_variables.scss';
.esh-orders-detail {
min-height: 80vh;
&-header {
background-color: #00A69C;
height: 63px;
li {
list-style: none;
display: inline;
opacity: 0.5;
margin-top: 25px;
margin-left: 10px;
float: right;
cursor: pointer;
color: white;
}
li a {
color: white;
}
&-back {
float: left !important;
margin-top: 20px !important;
text-transform: uppercase;
}
li a:hover {
text-decoration: none;
}
}
&-container {
min-height: 70vh;
padding-top: 40px;
margin-bottom: 30px;
}
&-container .table tbody tr:first-child td {
border-top: none;
}
&-container .table tr {
border-bottom: none;
}
&-section {
margin-top: 50px;
}
&-container .table {
margin-left: -7px;
}
&-total {
margin-bottom: 5px;
margin-left: 20px;
text-align: left;
}
&-total-label {
font-size: 14px;
color: #404040;
margin-top:10px;
}
&-total-value {
font-size: 28px;
color: #00a69c;
text-align: left;
}
&-image {
max-width: 210px;
}
&-column {
max-width: 120px;
padding: 8px;
text-transform: uppercase;
vertical-align: middle!important;
}
}

31
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.ts Normal file
View File

@ -0,0 +1,31 @@
import { Component, OnInit } from '@angular/core';
import { OrdersService } from '../orders.service';
import { IOrder } from '../../shared/models/order.model';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'esh-orders-detail .esh-orders-detail',
styleUrls: ['./orders-detail.component.scss'],
templateUrl: './orders-detail.component.html'
})
export class OrdersDetailComponent implements OnInit {
order = {}; // new order
constructor(private service: OrdersService, private route: ActivatedRoute) { }
ngOnInit() {
this.route.params.subscribe(params => {
let id = +params['id']; // (+) converts string 'id' to a number
this.getOrder(id);
});
}
getOrder(id: number) {
this.service.getOrder(id).subscribe(order => {
this.order = order;
console.log('order retrieved: ' + order.ordernumber);
console.log(this.order);
});
}
}

2
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.html
View File

@ -32,7 +32,7 @@
<td class="esh-orders-order-column">$ {{order.total}}</td>
<td class="esh-orders-order-column">{{order.status}}</td>
<td class="esh-orders-order-column">
<a class="esh-orders-order-link" href="#">Detail</a>
<a class="esh-orders-order-link" routerLink="/orders/{{order.ordernumber}}">Detail</a>
</td>
</tr>
</tbody>

2
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.ts
View File

@ -3,7 +3,7 @@ import { OrdersService } from './orders.service';
import { IOrder } from '../shared/models/order.model';
@Component({
selector: 'esh-orders .orders',
selector: 'esh-orders .esh-orders',
styleUrls: ['./orders.component.scss'],
templateUrl: './orders.component.html'
})

3
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.module.ts
View File

@ -3,12 +3,13 @@ import { BrowserModule } from '@angular/platform-browser';
import { SharedModule } from '../shared/shared.module';
import { OrdersComponent } from './orders.component';
import { OrdersDetailComponent } from './orders-detail/orders-detail.component';
import { OrdersService } from './orders.service';
import { Pager } from '../shared/components/pager/pager';
@NgModule({
imports: [BrowserModule, SharedModule],
declarations: [OrdersComponent],
declarations: [OrdersComponent, OrdersDetailComponent],
providers: [OrdersService]
})
export class OrdersModule { }

12
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.service.ts
View File

@ -17,8 +17,16 @@ export class OrdersService {
constructor(private service: DataService) {
}
getOrders(): Observable<any> {
var url = this.ordersUrl;
getOrders(): Observable<IOrder[]> {
let url = this.ordersUrl;
return this.service.get(url).map((response: Response) => {
return response.json();
});
}
getOrder(id: number): Observable<IOrder> {
let url = `${this.ordersUrl}/${id}`;
return this.service.get(url).map((response: Response) => {
return response.json();

1
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/models/catalogItem.model.ts
View File

@ -8,4 +8,5 @@ export interface ICatalogItem {
catalogBrand: string;
catalogTypeId: number;
catalogType: string;
units: number;
}

15
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/models/order.model.ts
View File

@ -1,6 +1,13 @@
import {IOrderItem} from './orderItem.model';
export interface IOrder {
ordernumber: number,
date: Date,
status: string,
total: number
ordernumber: number;
date: Date;
status: string;
total: number;
street?: string;
city?: string;
zipcode?: string;
country?: string;
orderitems?: IOrderItem[];
}

6
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/models/orderItem.model.ts Normal file
View File

@ -0,0 +1,6 @@
export interface IOrderItem {
pictureurl: string;
productname: string;
unitprice: number;
units: number;
}