item detail draft skeleton
This commit is contained in:
Marek Wilkosz
parent
0c64635c89
commit
2a53ed644e
@ -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 },
|
||||
|
||||
@ -0,0 +1,47 @@
|
||||
<div class="esh-catalog_item-detail">
|
||||
<div class="container">
|
||||
<h1 class="mb-4 mt-5">[ Order List Detail ]</h1>
|
||||
<div class="u-background-brightest p-5">
|
||||
<article class="esh-catalog_item-titles row">
|
||||
<section class="col-3">Order number</section>
|
||||
<section class="col-3">Date</section>
|
||||
<section class="col-3">Total</section>
|
||||
<section class="col-3">Status</section>
|
||||
</article>
|
||||
|
||||
<article class="esh-catalog_item-items row">
|
||||
<section class="col-3">{{order.ordernumber}}</section>
|
||||
<section class="col-3">{{order.date | date:'short'}}</section>
|
||||
<section class="col-3">$ {{order.total}}</section>
|
||||
<section class="col-3">{{order.status}}</section>
|
||||
</article>
|
||||
|
||||
<h2 class="esh-catalog_item-title mt-5">Shipping address</h2>
|
||||
<div class="u-mb-5">{{order.street}} {{order.city}} {{order.country}}</div>
|
||||
|
||||
<article class="esh-catalog_item-items divider divider--bottom d-flex align-items-center pb-3 mt-3 u-text-sm"
|
||||
*ngFor="let item of order.orderitems">
|
||||
<div class="esh-catalog_item-thumbnail-container">
|
||||
<div class="esh-catalog_item-thumbnail-wrapper">
|
||||
<img class="esh-catalog_item-thumbnail" src="{{item.pictureurl}}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row w-100 ml-3">
|
||||
<div class="col-6">{{item.productname}}</div>
|
||||
<div class="col-2">$ {{item.unitprice | number:'.2-2'}}</div>
|
||||
<div class="col-2">{{item.units}}</div>
|
||||
<div class="col-2 text-right">${{(item.units * item.unitprice) | number:'.2-2'}}</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="d-flex align-items-center justify-content-end mt-4 mb-4 text-uppercase u-text-xl">
|
||||
<div>Total</div>
|
||||
<div class="ml-3">${{order.total | number:'.2-2'}}</div>
|
||||
</div>
|
||||
|
||||
<aside class="d-flex justify-content-end mt-5">
|
||||
<a class="btn btn-secondary" routerLink="/orders">Back to list</a>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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 = <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);
|
||||
});
|
||||
} */
|
||||
}
|
||||
@ -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 { }
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user