diff --git a/src/Web/WebSPA/Client/src/modules/app.routes.ts b/src/Web/WebSPA/Client/src/modules/app.routes.ts index 8e22eb841..d15fb7644 100644 --- a/src/Web/WebSPA/Client/src/modules/app.routes.ts +++ b/src/Web/WebSPA/Client/src/modules/app.routes.ts @@ -2,6 +2,7 @@ import { Routes, RouterModule } from '@angular/router'; import { BasketComponent } from './basket/basket.component'; import { CatalogComponent } from './catalog/catalog.component'; +import { CatalogItemDetailComponent } from './catalog/catalog-item-detail/catalog-item-detail.component'; import { OrdersComponent } from './orders/orders.component'; import { OrdersDetailComponent } from './orders/orders-detail/orders-detail.component'; import { OrdersNewComponent } from './orders/orders-new/orders-new.component'; @@ -10,6 +11,7 @@ export const routes: Routes = [ { path: '', redirectTo: 'catalog', pathMatch: 'full' }, { path: 'basket', component: BasketComponent }, { path: 'catalog', component: CatalogComponent }, + { path: 'catalog/items/:id', component: CatalogItemDetailComponent }, { path: 'orders', component: OrdersComponent }, { path: 'orders/:id', component: OrdersDetailComponent }, { path: 'order', component: OrdersNewComponent }, diff --git a/src/Web/WebSPA/Client/src/modules/catalog/catalog-item-detail/catalog-item-detail.component.html b/src/Web/WebSPA/Client/src/modules/catalog/catalog-item-detail/catalog-item-detail.component.html new file mode 100644 index 000000000..349d3bbfb --- /dev/null +++ b/src/Web/WebSPA/Client/src/modules/catalog/catalog-item-detail/catalog-item-detail.component.html @@ -0,0 +1,47 @@ +
+
+

[ Order List Detail ]

+
+
+
Order number
+
Date
+
Total
+
Status
+
+ +
+
{{order.ordernumber}}
+
{{order.date | date:'short'}}
+
$ {{order.total}}
+
{{order.status}}
+
+ +

Shipping address

+
{{order.street}} {{order.city}} {{order.country}}
+ +
+
+
+ +
+
+
+
{{item.productname}}
+
$ {{item.unitprice | number:'.2-2'}}
+
{{item.units}}
+
${{(item.units * item.unitprice) | number:'.2-2'}}
+
+
+ +
+
Total
+
${{order.total | number:'.2-2'}}
+
+ + +
+
+
diff --git a/src/Web/WebSPA/Client/src/modules/catalog/catalog-item-detail/catalog-item-detail.component.scss b/src/Web/WebSPA/Client/src/modules/catalog/catalog-item-detail/catalog-item-detail.component.scss new file mode 100644 index 000000000..74daaa91e --- /dev/null +++ b/src/Web/WebSPA/Client/src/modules/catalog/catalog-item-detail/catalog-item-detail.component.scss @@ -0,0 +1,45 @@ +@import 'src/styles/variables'; + +.esh-orders_detail { + + &-titles { + color: $color-secondary-bright; + font-size: $font-size-l; + font-weight: $font-weight-semilight; + margin-bottom: 1.5rem; + text-transform: uppercase; + } + + &-title { + color: $color-secondary-bright; + font-size: $font-size-l; + font-weight: $font-weight-semilight; + text-transform: uppercase; + } + + &-items { + font-size: $font-size-m; + font-weight: $font-weight-normal; + } + + &-thumbnail-container { + width: 10rem; + } + + &-thumbnail-wrapper { + background-color: #dbdede; + height: 0; + overflow: hidden; + padding-top: 100%; + position: relative; + } + + &-thumbnail { + height: 100%; + left: 50%; + position: absolute; + top: 50%; + transform: translate(-50%,-50%); + width: auto; + } +} diff --git a/src/Web/WebSPA/Client/src/modules/catalog/catalog-item-detail/catalog-item-detail.component.ts b/src/Web/WebSPA/Client/src/modules/catalog/catalog-item-detail/catalog-item-detail.component.ts new file mode 100644 index 000000000..62afc9078 --- /dev/null +++ b/src/Web/WebSPA/Client/src/modules/catalog/catalog-item-detail/catalog-item-detail.component.ts @@ -0,0 +1,30 @@ +import { Component, OnInit } from '@angular/core'; +import { CatalogService } from '../catalog.service'; +import { ICatalogItem } from '../../shared/models/catalogItem.model'; +import { ActivatedRoute } from '@angular/router'; + +@Component({ + selector: 'esh-catalog_item-detail .esh-catalog_item-detail .mb-5', + styleUrls: ['./catalog-item-detail.component.scss'], + templateUrl: './catalog-item-detail.component.html' +}) +export class CatalogItemDetailComponent implements OnInit { + public order: ICatalogItem = {}; + + constructor(private service: CatalogService, 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.getCatalog().subscribe(order => { + this.order = order; + console.log('order retrieved: ' + order.ordernumber); + console.log(this.order); + }); + } */ +} \ No newline at end of file diff --git a/src/Web/WebSPA/Client/src/modules/catalog/catalog.module.ts b/src/Web/WebSPA/Client/src/modules/catalog/catalog.module.ts index 4dd7b6d86..3f875c443 100644 --- a/src/Web/WebSPA/Client/src/modules/catalog/catalog.module.ts +++ b/src/Web/WebSPA/Client/src/modules/catalog/catalog.module.ts @@ -5,10 +5,11 @@ import { SharedModule } from '../shared/shared.module'; import { CatalogComponent } from './catalog.component'; import { CatalogService } from './catalog.service'; import { Pager } from '../shared/components/pager/pager'; +import { CatalogItemDetailComponent } from './catalog-item-detail/catalog-item-detail.component'; @NgModule({ imports: [BrowserModule, SharedModule, CommonModule], - declarations: [CatalogComponent], + declarations: [CatalogComponent, CatalogItemDetailComponent], providers: [CatalogService] }) export class CatalogModule { }