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

Init orders component

Browse Source
This commit is contained in:
Quique Fernandez 2016-12-23 10:51:17 +01:00
parent e3fdd2f39e
commit d67f5665c7
8 changed files with 299 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.routes.ts
View File

@ -2,11 +2,13 @@ import { Routes, RouterModule } from '@angular/router';
import { BasketComponent } from './basket/basket.component';
import { CatalogComponent } from './catalog/catalog.component';
import { OrdersComponent } from './orders/orders.component';
export const routes: Routes = [
{ path: '', redirectTo: 'catalog', pathMatch: 'full' },
{ path: 'basket', component: BasketComponent },
{ path: 'catalog', component: CatalogComponent }
{ path: 'catalog', component: CatalogComponent },
{ path: 'orders', component: OrdersComponent }
//Lazy async modules (angular-loader-router) and enable a router in each module.
//{
// path: 'basket', loadChildren: '/basket/basket.module' });

9
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.routes.ts
View File

@ -1,9 +0,0 @@
//import { Routes, RouterModule } from '@angular/router';
//import { BasketComponent } from './basket.component';
//const routes: Routes = [
// { path: '', component: BasketComponent }
//];
//export const routing = RouterModule.forChild(routes);

9
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.routes.ts
View File

@ -1,9 +0,0 @@
//import { Routes, RouterModule } from '@angular/router';
//import { CatalogComponent } from './catalog.component';
//const routes: Routes = [
// { path: '', component: CatalogComponent }
//];
//export const routing = RouterModule.forChild(routes);

62
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.html Normal file
View File

@ -0,0 +1,62 @@
<div class="esh-order-header">
<ul class="container">
<li class="esh-order-header-back" routerLink="/catalog">Back to list</li>
</ul>
</div>
<div class="container esh-order-container">
<div class="row">
<div class="col-md-12">
<section>
<table class="table">
<thead>
<tr>
<th class="esh-order-product-column">
PRODUCT
</th>
<th>
</th>
<th>
BRAND
</th>
<th>
PRICE
</th>
<th>
QUANTITY
</th>
<th>
COST
</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>
</td>
</tr>
</tbody>
</table>
</section>
</div>
</div>
</div>

80
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.scss Normal file
View File

@ -0,0 +1,80 @@
@import '../_variables.scss';
.esh-orders {
&-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;
min-width: 992px;
}
&-product-column {
max-width: 120px;
text-transform: uppercase;
vertical-align: middle !important;
}
&-product-image {
max-width: 210px;
}
&-total-value {
font-size: 20px;
color: #00a69c;
}
&-total-label {
font-size: 14px;
color: #404040;
margin-top: 10px;
}
&-totals {
border-bottom:none!important;
}
}
.table td {
border-top: solid 1px #ddd;
}
.table thead th {
border: none !important;
}

92
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.ts Normal file
View File

@ -0,0 +1,92 @@
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';
@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;
constructor(private service: OrdersService, private basketService: BasketWrapperService) { }
ngOnInit() {
this.getBrands();
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) {
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);
});
}
}

14
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.module.ts Normal file
View File

@ -0,0 +1,14 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SharedModule } from '../shared/shared.module';
import { OrdersComponent } from './orders.component';
import { OrdersService } from './orders.service';
import { Pager } from '../shared/components/pager/pager';
@NgModule({
imports: [BrowserModule, SharedModule],
declarations: [OrdersComponent],
providers: [OrdersService]
})
export class CatalogModule { }

48
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.service.ts Normal file
View File

@ -0,0 +1,48 @@
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 'rxjs/Rx';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/throw';
import { Observer } from 'rxjs/Observer';
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';
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;
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();
});
};
}