diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.routes.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.routes.ts index 3ab758b3f..853b64ac4 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.routes.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.routes.ts @@ -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' }); diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html new file mode 100644 index 000000000..a6bd0c41b --- /dev/null +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html @@ -0,0 +1,59 @@ +
+ +
+
+
+
+ ORDER NUMBER
+ {{order.ordernumber}} +
+
+ DATE
+ {{order.date | date:'short'}} +
+
+ TOTAL
+ $ {{order.total}} +
+
+ STATUS
+ {{order.status}} +
+
+
+
+ SHIPING ADDRESS
+ {{order.street}}
+ {{order.city}}
+ {{order.country}}
+
+
+
+
ORDER DETAILS
+
+ + + + + + + + + + + +
{{item.productname}}ROSLYN$ {{item.unitprice}}{{item.units}}$ {{item.units * item.unitprice}}
+
+
+
+ +
+
+
+
TOTAL
+
$ 12.00
+
+
+
\ No newline at end of file diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.scss new file mode 100644 index 000000000..6ca4d6fbf --- /dev/null +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.scss @@ -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; + } +} diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.ts new file mode 100644 index 000000000..804aaa57e --- /dev/null +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.ts @@ -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); + }); + } +} + diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.html b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.html index bbda19c23..deb2eb37f 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.html +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.html @@ -32,7 +32,7 @@ $ {{order.total}} {{order.status}} - Detail + Detail diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.ts index f52509875..8dd3b0485 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.ts @@ -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' }) diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.module.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.module.ts index 51f1bb0d9..f3a920f59 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.module.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.module.ts @@ -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 { } diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.service.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.service.ts index da1903a11..be1455058 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.service.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.service.ts @@ -17,8 +17,16 @@ export class OrdersService { constructor(private service: DataService) { } - getOrders(): Observable { - var url = this.ordersUrl; + getOrders(): Observable { + let url = this.ordersUrl; + + return this.service.get(url).map((response: Response) => { + return response.json(); + }); + } + + getOrder(id: number): Observable { + let url = `${this.ordersUrl}/${id}`; return this.service.get(url).map((response: Response) => { return response.json(); diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/models/catalogItem.model.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/models/catalogItem.model.ts index 521df03a7..bf4c7ea70 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/models/catalogItem.model.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/models/catalogItem.model.ts @@ -8,4 +8,5 @@ export interface ICatalogItem { catalogBrand: string; catalogTypeId: number; catalogType: string; + units: number; } diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/models/order.model.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/models/order.model.ts index 35be8bafb..8d38c6a0d 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/models/order.model.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/models/order.model.ts @@ -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[]; } diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/models/orderItem.model.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/models/orderItem.model.ts new file mode 100644 index 000000000..8727d8156 --- /dev/null +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/models/orderItem.model.ts @@ -0,0 +1,6 @@ +export interface IOrderItem { + pictureurl: string; + productname: string; + unitprice: number; + units: number; +}