Init orders component

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' });

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.routes.ts

@@ -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);

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.routes.ts

@@ -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);

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.html

@@ -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>

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;
+}
+
+
+
+
+
+
+

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);
+        });
+    }
+}
+

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 { }

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<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();
+        });
+    };
+}