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

Add orders list

Browse Source
This commit is contained in:
Quique Fernandez 2016-12-23 12:14:49 +01:00
parent d67f5665c7
commit 0f3f4abbc1
7 changed files with 48 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.module.ts
View File

@ -9,6 +9,7 @@ import { AppService } from './app.service';
import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module';
import { CatalogModule } from './catalog/catalog.module';
import { OrdersModule } from './orders/orders.module';
import { BasketModule } from './basket/basket.module';
@NgModule({
@ -20,6 +21,7 @@ import { BasketModule } from './basket/basket.module';
// Only module that app module loads
SharedModule.forRoot(),
CatalogModule,
OrdersModule,
BasketModule
],
providers: [

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

@ -1,57 +1,38 @@
<div class="esh-order-header">
<div class="esh-orders-header">
<ul class="container">
<li class="esh-order-header-back" routerLink="/catalog">Back to list</li>
<li class="esh-orders-header-back" routerLink="/catalog">Back to list</li>
</ul>
</div>
<div class="container esh-order-container">
<div class="container esh-orders-container">
<div class="row">
<div class="col-md-12">
<section>
<table class="table">
<thead>
<tr>
<th class="esh-order-product-column">
PRODUCT
<th class="esh-orders-order-column">
ORDER NUMBER
</th>
<th>
DATE
</th>
<th>
BRAND
TOTAL
</th>
<th>
PRICE
</th>
<th>
QUANTITY
</th>
<th>
COST
STATUS
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of order?.items">
<td class="esh-order-product-column"><img class="esh-order-product-image" src="{{item.pictureUrl}}" /></td>
<td class="esh-order-product-column">{{item.productName}}</td>
<td class="esh-order-product-column">ROSLYN</td>
<td class="esh-order-product-column">$ {{item.unitPrice}}</td>
<td class="esh-order-product-column">
<input type="number" style="width:100px" min="1" [(ngModel)]="item.quantity" (change)="itemQuantityChanged(item)" />
</td>
<td class="esh-order-product-column esh-order-total-value">$ {{item.unitPrice * item.quantity}}</td>
</tr>
<tr class="esh-order-totals">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<div class="esh-order-total-value">
<div class="esh-order-total-label"><span>TOTAL</span></div>
<span>$ {{totalPrice}}</span>
</div>
<tr *ngFor="let order of orders">
<td class="esh-orders-order-column">{{order.ordernumber}}</td>
<td class="esh-orders-order-column">{{order.date | date:'short'}}</td>
<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>
</td>
</tr>
</tbody>

11
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.scss
View File

@ -1,6 +1,8 @@
@import '../_variables.scss';
.esh-orders {
min-height: 80vh;
&-header {
background-color: #00A69C;
height: 63px;
@ -38,13 +40,16 @@
min-width: 992px;
}
&-product-column {
&-order-column {
max-width: 120px;
text-transform: uppercase;
vertical-align: middle !important;
}
&-product-image {
&-order-link {
color: #83d01b;
}
&-order-image {
max-width: 210px;
}

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

@ -1,91 +1,26 @@
import { Component, OnInit } from '@angular/core';
import { OrdersService } from './orders.service';
import { ICatalog } from '../shared/models/catalog.model';
import { ICatalogItem } from '../shared/models/catalogItem.model';
import { ICatalogType } from '../shared/models/catalogType.model';
import { ICatalogBrand } from '../shared/models/catalogBrand.model';
import { IPager } from '../shared/models/pager.model';
import { BasketWrapperService} from '../shared/services/basket.wrapper.service';
import { OrdersService } from './orders.service';
import { IOrder } from '../shared/models/order.model';
@Component({
selector: 'esh-orders .orders',
styleUrls: ['./orders.component.scss'],
templateUrl: './orders.component.html'
})
export class CatalogComponent implements OnInit {
brands: ICatalogBrand[];
types: ICatalogType[];
catalog: ICatalog;
brandSelected: number;
typeSelected: number;
paginationInfo: IPager;
export class OrdersComponent implements OnInit {
orders: IOrder[];
constructor(private service: OrdersService, private basketService: BasketWrapperService) { }
constructor(private service: OrdersService) { }
ngOnInit() {
this.getBrands();
this.getCatalog(10, 0);
this.getTypes();
this.getOrders();
}
onFilterApplied(event: any) {
event.preventDefault();
this.getCatalog(this.paginationInfo.itemsPage, this.paginationInfo.actualPage, this.brandSelected, this.typeSelected);
}
onBrandFilterChanged(event: any, value: number) {
event.preventDefault();
this.brandSelected = value;
}
onTypeFilterChanged(event: any, value: number) {
event.preventDefault();
this.typeSelected = value;
}
onPageChanged(value: any) {
console.log('catalog pager event fired' + value);
event.preventDefault();
this.paginationInfo.actualPage = value;
this.getCatalog(this.paginationInfo.itemsPage, value);
}
addToCart(item: ICatalogItem) {
this.basketService.addItemToBasket(item);
}
getCatalog(pageSize:number, pageIndex: number, brand?: number, type?: number) {
this.service.getCatalog(pageIndex, pageSize, brand, type).subscribe(catalog => {
this.catalog = catalog;
console.log('catalog items retrieved: ' + catalog.count);
this.paginationInfo = {
actualPage : catalog.pageIndex,
itemsPage : catalog.pageSize,
totalItems : catalog.count,
totalPages: Math.ceil(catalog.count / catalog.pageSize),
items: catalog.pageSize
};
console.log(this.paginationInfo);
});
}
getTypes() {
this.service.getTypes().subscribe(types => {
this.types = types;
let alltypes = { id: null, type: 'All' };
this.types.unshift(alltypes);
console.log('types retrieved: ' + types.length);
});
}
getBrands() {
this.service.getBrands().subscribe(brands => {
this.brands = brands;
let allBrands = { id: null, brand: 'All' };
this.brands.unshift(allBrands);
console.log('brands retrieved: ' + brands.length);
getOrders() {
this.service.getOrders().subscribe(orders => {
this.orders = orders;
console.log('orders items retrieved: ' + orders.length);
});
}
}

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

@ -11,4 +11,4 @@ import { Pager } from '../shared/components/pager/pager';
declarations: [OrdersComponent],
providers: [OrdersService]
})
export class CatalogModule { }
export class OrdersModule { }

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

@ -2,9 +2,7 @@ import { Injectable } from '@angular/core';
import { Response } from '@angular/http';
import { DataService } from '../shared/services/data.service';
import { ICatalog } from '../shared/models/catalog.model';
import { ICatalogBrand } from '../shared/models/catalogBrand.model';
import { ICatalogType } from '../shared/models/catalogType.model';
import { IOrder } from '../shared/models/order.model';
import 'rxjs/Rx';
import { Observable } from 'rxjs/Observable';
@ -14,35 +12,16 @@ import 'rxjs/add/operator/map';
@Injectable()
export class OrdersService {
private catalogUrl: string = 'http://eshopcontainers:5101/api/v1/catalog/items';
private brandUrl: string = 'http://eshopcontainers:5101/api/v1/catalog/catalogbrands';
private typesUrl: string = 'http://eshopcontainers:5101/api/v1/catalog/catalogtypes';
private ordersUrl: string = 'http://eshopcontainers:5102/api/v1/orders';
constructor(private service: DataService) {
}
getCatalog(pageIndex: number, pageSize: number, brand: number, type: number): Observable<ICatalog> {
var url = this.catalogUrl;
if (brand || type) {
url = this.catalogUrl + '/type/' + ((type) ? type.toString() : 'null') + '/brand/' + ((brand) ? brand.toString() : 'null');
}
url = url + '?pageIndex=' + pageIndex + '&pageSize=' + pageSize;
getOrders(): Observable<any> {
var url = this.ordersUrl;
return this.service.get(url).map((response: Response) => {
return response.json();
});
}
getBrands(): Observable<ICatalogBrand[]> {
return this.service.get(this.brandUrl).map((response: Response) => {
return response.json();
});
}
getTypes(): Observable<ICatalogType[]> {
return this.service.get(this.typesUrl).map((response: Response) => {
return response.json();
});
};
}
}

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

@ -0,0 +1,6 @@
export interface IOrder {
ordernumber: number,
date: Date,
status: string,
total: number
}