Add orders list
This commit is contained in:
parent
d67f5665c7
commit
0f3f4abbc1
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules
@ -9,6 +9,7 @@ import { AppService } from './app.service';
|
|||||||
import { AppComponent } from './app.component';
|
import { AppComponent } from './app.component';
|
||||||
import { SharedModule } from './shared/shared.module';
|
import { SharedModule } from './shared/shared.module';
|
||||||
import { CatalogModule } from './catalog/catalog.module';
|
import { CatalogModule } from './catalog/catalog.module';
|
||||||
|
import { OrdersModule } from './orders/orders.module';
|
||||||
import { BasketModule } from './basket/basket.module';
|
import { BasketModule } from './basket/basket.module';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
@ -20,6 +21,7 @@ import { BasketModule } from './basket/basket.module';
|
|||||||
// Only module that app module loads
|
// Only module that app module loads
|
||||||
SharedModule.forRoot(),
|
SharedModule.forRoot(),
|
||||||
CatalogModule,
|
CatalogModule,
|
||||||
|
OrdersModule,
|
||||||
BasketModule
|
BasketModule
|
||||||
],
|
],
|
||||||
providers: [
|
providers: [
|
||||||
|
@ -1,57 +1,38 @@
|
|||||||
<div class="esh-order-header">
|
<div class="esh-orders-header">
|
||||||
<ul class="container">
|
<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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="container esh-order-container">
|
<div class="container esh-orders-container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-12">
|
<div class="col-md-12">
|
||||||
<section>
|
<section>
|
||||||
<table class="table">
|
<table class="table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th class="esh-order-product-column">
|
<th class="esh-orders-order-column">
|
||||||
PRODUCT
|
ORDER NUMBER
|
||||||
</th>
|
</th>
|
||||||
<th>
|
<th>
|
||||||
|
DATE
|
||||||
</th>
|
</th>
|
||||||
<th>
|
<th>
|
||||||
BRAND
|
TOTAL
|
||||||
</th>
|
</th>
|
||||||
<th>
|
<th>
|
||||||
PRICE
|
STATUS
|
||||||
</th>
|
|
||||||
<th>
|
|
||||||
QUANTITY
|
|
||||||
</th>
|
|
||||||
<th>
|
|
||||||
COST
|
|
||||||
</th>
|
</th>
|
||||||
|
<th></th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr *ngFor="let item of order?.items">
|
<tr *ngFor="let order of orders">
|
||||||
<td class="esh-order-product-column"><img class="esh-order-product-image" src="{{item.pictureUrl}}" /></td>
|
<td class="esh-orders-order-column">{{order.ordernumber}}</td>
|
||||||
<td class="esh-order-product-column">{{item.productName}}</td>
|
<td class="esh-orders-order-column">{{order.date | date:'short'}}</td>
|
||||||
<td class="esh-order-product-column">ROSLYN</td>
|
<td class="esh-orders-order-column">$ {{order.total}}</td>
|
||||||
<td class="esh-order-product-column">$ {{item.unitPrice}}</td>
|
<td class="esh-orders-order-column">{{order.status}}</td>
|
||||||
<td class="esh-order-product-column">
|
<td class="esh-orders-order-column">
|
||||||
<input type="number" style="width:100px" min="1" [(ngModel)]="item.quantity" (change)="itemQuantityChanged(item)" />
|
<a class="esh-orders-order-link" href="#">Detail</a>
|
||||||
</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>
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
@ -1,6 +1,8 @@
|
|||||||
@import '../_variables.scss';
|
@import '../_variables.scss';
|
||||||
|
|
||||||
.esh-orders {
|
.esh-orders {
|
||||||
|
min-height: 80vh;
|
||||||
|
|
||||||
&-header {
|
&-header {
|
||||||
background-color: #00A69C;
|
background-color: #00A69C;
|
||||||
height: 63px;
|
height: 63px;
|
||||||
@ -38,13 +40,16 @@
|
|||||||
min-width: 992px;
|
min-width: 992px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-product-column {
|
&-order-column {
|
||||||
max-width: 120px;
|
max-width: 120px;
|
||||||
text-transform: uppercase;
|
|
||||||
vertical-align: middle !important;
|
vertical-align: middle !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-product-image {
|
&-order-link {
|
||||||
|
color: #83d01b;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-order-image {
|
||||||
max-width: 210px;
|
max-width: 210px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,91 +1,26 @@
|
|||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
import { OrdersService } from './orders.service';
|
import { OrdersService } from './orders.service';
|
||||||
import { ICatalog } from '../shared/models/catalog.model';
|
import { IOrder } from '../shared/models/order.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';
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'esh-orders .orders',
|
selector: 'esh-orders .orders',
|
||||||
styleUrls: ['./orders.component.scss'],
|
styleUrls: ['./orders.component.scss'],
|
||||||
templateUrl: './orders.component.html'
|
templateUrl: './orders.component.html'
|
||||||
})
|
})
|
||||||
export class CatalogComponent implements OnInit {
|
export class OrdersComponent implements OnInit {
|
||||||
brands: ICatalogBrand[];
|
orders: IOrder[];
|
||||||
types: ICatalogType[];
|
|
||||||
catalog: ICatalog;
|
|
||||||
brandSelected: number;
|
|
||||||
typeSelected: number;
|
|
||||||
paginationInfo: IPager;
|
|
||||||
|
|
||||||
constructor(private service: OrdersService, private basketService: BasketWrapperService) { }
|
constructor(private service: OrdersService) { }
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
this.getBrands();
|
this.getOrders();
|
||||||
this.getCatalog(10, 0);
|
|
||||||
this.getTypes();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onFilterApplied(event: any) {
|
|
||||||
event.preventDefault();
|
|
||||||
this.getCatalog(this.paginationInfo.itemsPage, this.paginationInfo.actualPage, this.brandSelected, this.typeSelected);
|
|
||||||
}
|
|
||||||
|
|
||||||
onBrandFilterChanged(event: any, value: number) {
|
getOrders() {
|
||||||
event.preventDefault();
|
this.service.getOrders().subscribe(orders => {
|
||||||
this.brandSelected = value;
|
this.orders = orders;
|
||||||
}
|
console.log('orders items retrieved: ' + orders.length);
|
||||||
|
|
||||||
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);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -11,4 +11,4 @@ import { Pager } from '../shared/components/pager/pager';
|
|||||||
declarations: [OrdersComponent],
|
declarations: [OrdersComponent],
|
||||||
providers: [OrdersService]
|
providers: [OrdersService]
|
||||||
})
|
})
|
||||||
export class CatalogModule { }
|
export class OrdersModule { }
|
||||||
|
@ -2,9 +2,7 @@ import { Injectable } from '@angular/core';
|
|||||||
import { Response } from '@angular/http';
|
import { Response } from '@angular/http';
|
||||||
|
|
||||||
import { DataService } from '../shared/services/data.service';
|
import { DataService } from '../shared/services/data.service';
|
||||||
import { ICatalog } from '../shared/models/catalog.model';
|
import { IOrder } from '../shared/models/order.model';
|
||||||
import { ICatalogBrand } from '../shared/models/catalogBrand.model';
|
|
||||||
import { ICatalogType } from '../shared/models/catalogType.model';
|
|
||||||
|
|
||||||
import 'rxjs/Rx';
|
import 'rxjs/Rx';
|
||||||
import { Observable } from 'rxjs/Observable';
|
import { Observable } from 'rxjs/Observable';
|
||||||
@ -14,35 +12,16 @@ import 'rxjs/add/operator/map';
|
|||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class OrdersService {
|
export class OrdersService {
|
||||||
private catalogUrl: string = 'http://eshopcontainers:5101/api/v1/catalog/items';
|
private ordersUrl: string = 'http://eshopcontainers:5102/api/v1/orders';
|
||||||
private brandUrl: string = 'http://eshopcontainers:5101/api/v1/catalog/catalogbrands';
|
|
||||||
private typesUrl: string = 'http://eshopcontainers:5101/api/v1/catalog/catalogtypes';
|
|
||||||
|
|
||||||
constructor(private service: DataService) {
|
constructor(private service: DataService) {
|
||||||
}
|
}
|
||||||
|
|
||||||
getCatalog(pageIndex: number, pageSize: number, brand: number, type: number): Observable<ICatalog> {
|
getOrders(): Observable<any> {
|
||||||
var url = this.catalogUrl;
|
var url = this.ordersUrl;
|
||||||
if (brand || type) {
|
|
||||||
url = this.catalogUrl + '/type/' + ((type) ? type.toString() : 'null') + '/brand/' + ((brand) ? brand.toString() : 'null');
|
|
||||||
}
|
|
||||||
|
|
||||||
url = url + '?pageIndex=' + pageIndex + '&pageSize=' + pageSize;
|
|
||||||
|
|
||||||
return this.service.get(url).map((response: Response) => {
|
return this.service.get(url).map((response: Response) => {
|
||||||
return response.json();
|
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();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
@ -0,0 +1,6 @@
|
|||||||
|
export interface IOrder {
|
||||||
|
ordernumber: number,
|
||||||
|
date: Date,
|
||||||
|
status: string,
|
||||||
|
total: number
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user