Added ecm-related-items Component

git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174399 ce508802-f39f-4f6c-b175-0d175dae99d5

ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-related-items/ecm-related-item.service.ts

+import { Injectable, Input } from '@angular/core';
+import { Http, Response, Headers, RequestOptions } from '@angular/http';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/map';
+
+import { Item } from '../../ecm-model/product-model';
+
+@Injectable()
+export class EcmRelatedItemService {
+    
+    private trendsUrl = '/ecm/service/category/related';  // URL to web service
+    
+    constructor (private http: Http) {}
+
+    getRelatedItems(scatCode): Observable<Item[]> {
+        let headers = new Headers( { 'Content-Type': 'application/json' });
+        let options = new RequestOptions( { headers: headers });
+        let URL = this.trendsUrl + '/' +scatCode;
+        
+        return this.http.get( URL, options )
+            .map( this.extractData )
+            .catch( this.handleError );
+    }
+
+    private extractData(res: Response) {
+      let body = res.json();
+      console.log('extractData[' + JSON.stringify(body) + ']');
+      return body || { };
+    }
+
+    private handleError (error: Response | any) {
+      // In a real world app, we might use a remote logging infrastructure
+      let errMsg: string;
+      if (error instanceof Response) {
+        const body = error.json() || '';
+        const err = body.error || JSON.stringify(body);
+        errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
+      } else {
+        errMsg = error.message ? error.message : error.toString();
+      }
+      console.error('Service handleError:' + errMsg);
+      return Observable.throw(errMsg);
+    }
+}

ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-related-items/ecm-related-items.component.css

+.related-items-section {
+    margin-top: 70px;
+    padding-top: 30px;
+	height: 650px;
+	background-color: #F2F2F2;
+}
+
+.row.row-category {
+	max-width: 72rem;
+}
+.ecm-section-info {
+	padding: 10px;
+	max-width: 72rem;
+	margin-left: auto;
+	margin-right: auto;
+}
+.ecm-section-info-title {
+	padding-left: 30px;
+	font-size: 26px;
+	color: #444;
+	display: block;
+}
+.ecm-section-info-subhead {
+	font-size: 16px;
+	color: #888;
+	display: block;
+}
+.end {
+	padding-top: 15px;
+	padding-bottom: 50px;
+}
+

ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-related-items/ecm-related-items.component.html

+<div *ngIf="relatedItems">
+	<section class="related-items-section">
+		<div class="row row-category">
+			<div class="ecm-section-info">
+				<span class="ecm-section-info-title">Related Items</span>
+			</div>
+			<ecm-carousel #ecmCarouselComp [cardItems]="relatedItems" ></ecm-carousel>
+		</div>
+	</section>
+</div>
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-related-items/ecm-related-items.component.ts

+import { Component, OnInit, Input, ViewChild } from '@angular/core';
+
+import { ItemDetail } from '../../ecm-model/product-detail-model';
+import {EcmRelatedItemService} from './ecm-related-item.service';
+import { Item } from '../../ecm-model/product-model';
+import { EcmCarouselComponent } from '../../ecm-carousel/ecm-carousel.component';
+
+declare var reinitFlickity: any;
+
+@Component({
+  selector: 'ecm-related-items',
+  templateUrl: './ecm-related-items.component.html',
+  styleUrls: ['./ecm-related-items.component.css'],
+  providers: [EcmRelatedItemService]
+})
+export class EcmRelatedItemsComponent implements OnInit {
+  
+  @Input() scatCode;
+  @ViewChild('ecmCarouselComp') ecmCarouselComp: EcmCarouselComponent;
+  
+  relatedItems: Item[];
+  errorMessage: string;
+    
+  constructor(private relatedItemService:EcmRelatedItemService) { }
+
+  ngOnInit() {
+      this.getRelatedItems(this.scatCode);
+  }
+    
+  getRelatedItems(scatCode: string) {
+      
+      this.relatedItemService.getRelatedItems(scatCode).subscribe(
+              relatedItems => {
+          this.relatedItems = relatedItems;
+          reinitFlickity();
+          
+          this.ecmCarouselComp.ngOnInit();
+          
+          console.log('comp relatedItems[' +  JSON.stringify( relatedItems ) + '] \n this.relatedItems[' +  JSON.stringify( this.relatedItems ) + ']');
+        },
+        error =>  {
+          this.errorMessage = <any>error;
+          console.log('comp errorMessage[' + this.errorMessage + ']');
+        });
+  }
+
+}