Add sample with igGrid and WebAPI

hanastasov · Oct 11, 2016 · a8c037f · a8c037f
1 parent 3d5e456
commit a8c037f
Show file tree

Hide file tree

Showing 8 changed files with 394 additions and 10 deletions.
diff --git a/app/samples.ts b/app/samples.ts
@@ -1,4 +1,4 @@
-import {Component, Inject, ElementRef, EventEmitter, HostListener} from '@angular/core';
+import { Component } from '@angular/core';
 
 declare var jQuery: any;
 @Component({

diff --git a/index.html b/index.html
@@ -112,7 +112,7 @@
 			<div class="row">
 				<div class="col-sm-12 col-lg-5">
 				<h1>Ignite UI</h1>
-				<h2>Angular 2 Directives</h2>
+				<h2>Angular 2 Components</h2>
 				</div>
 				<div class="col-sm-12 header-fg col-lg-7"></div>
 			</div>
@@ -130,21 +130,19 @@ <h2>Live sample...</h2>
 			<h2>Code...</h2>
 			<div style="height: 511px; overflow-y: scroll;">
 			<pre>
-import {Component, Inject, ElementRef, EventEmitter, HostListener} from '@angular/core';
-import {IgGridComponent} from "../src/igniteui.angular2.ts";
+import { Component } from '@angular/core';
 
 declare var jQuery: any;
 @Component({
-	selector: 'my-app',
+	selector: "my-app",
 	template: `
 		&lt;ig-grid 
 			[(options)]=&quot;gridOptions&quot; 
-			[(widgetId)]='id' 
+			[(widgetId)]="id" 
 			(cellClick)=&quot;cellClickHandler($event)&quot; 
-			(rendering)='renderedEventHandler($event)' 
+			(rendering)="renderedEventHandler($event)" 
 		&gt;&lt;/ig-grid&gt;
-		`,
-	directives: [IgGridComponent]
+		`
 })
 export class AppComponent {
 	private gridOptions: IgGrid;
@@ -209,6 +207,7 @@ <h2>Samples</h2>
 					<li><a href="samples/igGrid/igGrid.html">Default</a></li>
 					<li><a href="samples/igGrid-TopLevelOpts/igGrid-TopLevelOpts.html">Top-level template options</a></li>
 					<li><a href="samples/igGrid-ComplexOpts/igGrid-ComplexOpts.html">Complex template options</a></li>
+					<li><a href="samples/igGrid-HTTPClient/igGrid-HTTPClient.html">Grid with HTTP client</a></li>
 				</ul>
 			</div>
 			<a class="btn btn-default" href="samples/igHierarchicalGrid/igHierarchicalGrid.html">igHierarchicalGrid</a>

diff --git a/samples/data/product-data.ts b/samples/data/product-data.ts
@@ -0,0 +1,155 @@
+import { InMemoryDbService } from 'angular-in-memory-web-api';
+export class ProductData implements InMemoryDbService {
+  createDb() {
+    let products = [
+  {
+    "ProductID": 1,
+    "ProductName": "Chai",
+    "DealerName": "A",
+    "CategoryName": "Beverages",
+    "ImageUrl": "../../images/samples/nw/categories/1.png",
+    "InStock": 39,
+    "Inventory": "" 
+  },
+  {
+    "ProductID": 2,
+    "ProductName": "Chang",
+    "DealerName": "B",
+    "CategoryName": "Beverages",
+    "ImageUrl": "../../images/samples/nw/categories/1.png",
+    "InStock": 17,
+    "Inventory": ""
+  },
+  {
+
+    "ProductID": 3,
+    "ProductName": "Aniseed Syrup",
+    "DealerName": "C",
+    "CategoryName": "Condiments",
+    "ImageUrl": "../../images/samples/nw/categories/2.png",
+    "InStock": 13,
+    "Inventory": ""
+  },
+  {
+    "ProductID": 4,
+    "ProductName": "Chef Anton\u0027s Cajun Seasoning",
+    "DealerName": "D",
+    "CategoryName": "Condiments",
+    "ImageUrl": "../../images/samples/nw/categories/2.png",
+    "InStock": 53,
+    "Inventory": ""
+  },
+  {
+
+    "ProductID": 5,
+    "ProductName": "Chef Anton\u0027s Gumbo Mix",
+    "DealerName": "E",
+    "CategoryName": "Condiments",
+    "ImageUrl": "../../images/samples/nw/categories/2.png",
+    "InStock": 0,
+    "Inventory": ""
+  },
+  {
+
+    "ProductID": 6,
+    "ProductName": "Grandma\u0027s Boysenberry Spread",
+    "DealerName": "F",
+    "CategoryName": "Condiments",
+    "ImageUrl": "../../images/samples/nw/categories/2.png",
+    "InStock": 120,
+    "Inventory": ""
+  },
+  {
+
+    "ProductID": 7,
+    "ProductName": "Uncle Bob\u0027s Organic Dried Pears",
+    "DealerName": "G",
+    "CategoryName": "Produce",
+    "ImageUrl": "../../images/samples/nw/categories/7.png",
+    "InStock": 15,
+    "Inventory": ""
+  },
+  {
+
+    "ProductID": 8,
+    "ProductName": "Northwoods Cranberry Sauce",
+    "DealerName": "H",
+    "CategoryName": "Condiments",
+    "ImageUrl": "../../images/samples/nw/categories/2.png",
+    "InStock": 6,
+    "Inventory": ""
+  },
+  {
+
+    "ProductID": 9,
+    "ProductName": "Mishi Kobe Niku",
+    "DealerName": "I",
+    "CategoryName": "Meat/Poultry",
+    "ImageUrl": "../../images/samples/nw/categories/6.png",
+    "InStock": 29,
+    "Inventory": ""
+  },
+  {
+
+    "ProductID": 10,
+    "ProductName": "Ikura",
+    "DealerName": "J",
+    "CategoryName": "Seafood",
+    "ImageUrl": "../../images/samples/nw/categories/8.png",
+    "InStock": 31,
+    "Inventory": ""
+  },
+  {
+
+    "ProductID": 11,
+    "ProductName": "Queso Cabrales",
+    "DealerName": "K",
+    "CategoryName": "Dairy Products",
+    "ImageUrl": "../../images/samples/nw/categories/4.png",
+    "InStock": 22,
+    "Inventory": ""
+  },
+  {
+
+    "ProductID": 12,
+    "ProductName": "Queso Manchego La Pastora",
+    "DealerName": "J",
+    "CategoryName": "Dairy Products",
+    "ImageUrl": "../../images/samples/nw/categories/4.png",
+    "InStock": 86,
+    "Inventory": ""
+  },
+  {
+
+    "ProductID": 13,
+    "ProductName": "Konbu",
+    "DealerName": "K",
+    "CategoryName": "Seafood",
+    "ImageUrl": "../../images/samples/nw/categories/8.png",
+    "InStock": 24,
+    "Inventory": ""
+  },
+  {
+
+    "ProductID": 14,
+    "ProductName": "Tofu",
+    "DealerName": "L",
+    "CategoryName": "Produce",
+    "ImageUrl": "../../images/samples/nw/categories/7.png",
+    "InStock": 35,
+    "Inventory": ""
+  },
+  {
+
+    "ProductID": 15,
+    "ProductName": "Genen Shouyu",
+    "DealerName": "M",
+    "CategoryName": "Condiments",
+    "ImageUrl": "../../images/samples/nw/categories/2.png",
+    "InStock": 39,
+    "Inventory": ""
+  }
+];
+    return {products};
+  }
+}
diff --git a/samples/igGrid-HTTPClient/app.ts b/samples/igGrid-HTTPClient/app.ts
@@ -0,0 +1,112 @@
+import { Component, Injectable, NgModule } from '@angular/core';
+import { IgGridComponent } from "../../src/igniteui.angular2";
+import { Http, Response, HttpModule } from '@angular/http';
+import { Headers, RequestOptions } from '@angular/http';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import 'rxjs/add/operator/map';
+import { Observable } from 'rxjs/Observable';
+import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
+import { ProductData } from '../data/product-data';
+
+declare var jQuery: any;
+
+
+@Injectable()
+export class ProductService {
+    constructor(private http: Http) { }
+
+    getAll() {
+        let people$ = this.http
+            .get("app/products").map((res: Response) => res.json());
+        return people$;
+    }
+
+    addProduct(ProductID, ProductName, DealerName, CategoryName, InStock): Observable<any> {
+        let body = JSON.stringify({ ProductID, ProductName, DealerName, CategoryName, InStock });
+        let headers = new Headers({ 'Content-Type': 'application/json' });
+        let options = new RequestOptions({ headers: headers });
+
+        return this.http.post("app/products", body, options)
+            .map(this.extractData);
+    }
+
+
+    private extractData(res: Response) {
+        let body = res.json();
+        return body.data || { };
+    }
+
+    private handleError (error: any) {
+        let errMsg = (error.message) ? error.message :
+        error.status ? `${error.status} - ${error.statusText}` : 'Server error';
+        console.error(errMsg); // log to console instead
+        return Observable.throw(errMsg);
+    }
+}
+
+@Component({
+    selector: 'my-app',
+    templateUrl: "./igGrid-HTTPClientTemplate.html",
+    providers: [ProductService]
+})
+export class AppComponent {
+    private gridOptions: IgGrid;
+    private id: string;
+    private products: any = [];
+    errorMessage: string;
+    private newId: number;
+
+    constructor(private productService: ProductService) {
+        this.productService.getAll().subscribe(
+            res => {
+                this.products = res.data;
+                this.newId = this.products.length;
+            },
+            error =>  this.errorMessage = <any>error
+        );
+
+        this.id = 'grid1';
+
+        this.gridOptions = {
+            autoCommit: true,
+            width: "100%",
+            height: "400px",
+            autoGenerateColumns: false,
+            primaryKey: "ProductID",
+            columns: [
+                { key: "ProductID", headerText: "Product ID", width: "15%", dataType: "number" },
+                { key: "ProductName", headerText: "Name", width: "35%", dataType: "string" },
+                { key: "DealerName", headerText: "Dealer Name", width: "15%", dataType: "string" },
+                { key: "CategoryName", headerText: "CategoryName", width: "25%", dataType: "string" },
+                { key: "InStock", headerText: "InStock", width: "15%", dataType: "number" }
+            ],
+            features: [
+                {
+                    name: "Updating",
+                    editMode: "none",
+                    enableAddRow: false,
+                    enableDeleteRow: false
+                }
+            ]
+        }
+    }
+
+    addProduct(newProductName, newDealerName, newCategoryName, newInStock) {
+        this.newId++;
+        this.productService.addProduct(this.newId, newProductName, newDealerName, newCategoryName, newInStock)
+            .subscribe(
+                product => this.products.push(product),
+                error =>  this.errorMessage = <any>error
+            );
+    }
+}
+
+@NgModule({
+  imports:      [ BrowserModule, HttpModule, InMemoryWebApiModule.forRoot(ProductData) ],
+  declarations: [ AppComponent, IgGridComponent ],
+  bootstrap:    [ AppComponent ]
+})
+export class AppModule {}
+
+platformBrowserDynamic().bootstrapModule(AppModule);