Add orders list

Author: Quique Fernandez

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.module.ts

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

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

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

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

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

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

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

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.module.ts

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

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.service.ts

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

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/models/order.model.ts

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