diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.routes.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.routes.ts index 3ce3eda19..3ab758b3f 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.routes.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.routes.ts @@ -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' }); diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.routes.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.routes.ts deleted file mode 100644 index 3ed2bc003..000000000 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.routes.ts +++ /dev/null @@ -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); diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.routes.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.routes.ts deleted file mode 100644 index cee81b259..000000000 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.routes.ts +++ /dev/null @@ -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); diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.html b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.html new file mode 100644 index 000000000..6856c90b2 --- /dev/null +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.html @@ -0,0 +1,62 @@ +
+ +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ PRODUCT + + + + BRAND + + PRICE + + QUANTITY + + COST +
{{item.productName}}ROSLYN$ {{item.unitPrice}} + + $ {{item.unitPrice * item.quantity}}
+
+
TOTAL
+ $ {{totalPrice}} +
+
+
+
+
+
\ No newline at end of file diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.scss new file mode 100644 index 000000000..d748fa784 --- /dev/null +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.scss @@ -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; +} + + + + + + + diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.ts new file mode 100644 index 000000000..ea1ec9fed --- /dev/null +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.ts @@ -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); + }); + } +} + diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.module.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.module.ts new file mode 100644 index 000000000..ef3bec4d7 --- /dev/null +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.module.ts @@ -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 { } diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.service.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.service.ts new file mode 100644 index 000000000..ee57cdc86 --- /dev/null +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.service.ts @@ -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 { + 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 { + return this.service.get(this.brandUrl).map((response: Response) => { + return response.json(); + }); + } + + getTypes(): Observable { + return this.service.get(this.typesUrl).map((response: Response) => { + return response.json(); + }); + }; +} \ No newline at end of file