Updated

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

ecm/Angular/trunk/src/app/ecm-card/ecm-card.component.ts

@@ -59,8 +59,8 @@ export class ECMCardComponent implements OnInit {
       }
       let menu : Observable<any> = this.store.select('menuList');
       menu.subscribe( menuList => {
-          this.categoryList = menuList.catSummary;
-          console.log('menuList.catSummary',menuList,  menuList.catSummary);
+          this.categoryList = menuList.summary;
+          console.log('menuList.summary',menuList,  menuList.summary);
       });
   }
 

ecm/Angular/trunk/src/app/ecm-carousel/ecm-carousel.component.html

 <div class="carousel" [attr.data-flickity]="cardsPerSlide" >
 	<div class="carousel-cell small-12 medium-6 large-4 column end " *ngFor="let cardItem of cardItems">
-		<ecm-card *ngIf='! cardItem.viewAll' [itemData]="cardItem" [trendImg]="true"></ecm-card>
+		<ecm-card *ngIf='! cardItem.viewAll' [itemData]="cardItem" [trendImg]="true" (addToWishlist)="addToWishlist(cardItem);" (removeFromWishlist)="removeFromWishlist(cardItem);"></ecm-card>
 		<div *ngIf='cardItem.viewAll' class="view-all-card" >
 			<a md-button class="view-all-link" (click)="viewAll();">{{cardItem.viewAll}}</a>
 		</div>
 	</div>
-</div>
+</div>
\ No newline at end of file
+
+<ecm-panel #ecmPanel>
+
+</ecm-panel>
\ No newline at end of file

ecm/Angular/trunk/src/app/ecm-carousel/ecm-carousel.component.ts

-import { Component, OnInit, Input, ViewEncapsulation, OnChanges } from '@angular/core';
+import { Component, OnInit, Input, ViewEncapsulation, OnChanges, ViewChild } from '@angular/core';
+import { MdSnackBar } from '@angular/material';
 
 import { RESIZE_EVENT } from '../ecm-store/ecm-resize';
 
+import { AppState } from '../ecm-store/reducers';
+import { Store } from '@ngrx/store';
+import { WishListActions } from '../ecm-store/actions';
+
+import { EcmPanelComponent } from '../ecm-view/ecm-panel/ecm-panel.component';
+
 declare var reinitFlickity: any;
 
 @Component( {
@@ -15,7 +22,9 @@ export class EcmCarouselComponent implements OnInit, OnChanges {
     @Input() cardItems: any;
     cardsPerSlide: string = '{ "groupCells": 3 }';
     
-    constructor() {}
+    @ViewChild( 'ecmPanel' ) ecmPanel: EcmPanelComponent;
+    
+    constructor(private wishlistAction: WishListActions, private store: Store<AppState>, public snackBar: MdSnackBar) {}
 
     ngOnInit() {
         /*
@@ -68,4 +77,42 @@ export class EcmCarouselComponent implements OnInit, OnChanges {
     ngOnChanges(){
         console.log("ngOnChanges of Carousel");
     }
+    
+    addToWishlist( item ) {
+        if(this.isAuthUser())
+        {
+            this.store.dispatch( this.wishlistAction.addToWishlistSuccess( item ) );
+            this.openSnackBar('Item Added to your Wishlist');
+        }
+        else
+        {
+            //this.header.userAction();
+            this.ecmPanel.open({ type: 'overlay', option: 'SIGNIN_OPT', top:'100px', left: 'calc( 50% - 375px / 2 )', width:'375px', height: '535px' });
+        }
+    }
+    
+    removeFromWishlist( item ){
+        this.store.dispatch( this.wishlistAction.deleteWishlistItemSuccess( item ) );
+        this.openSnackBar('Item Deleted from your Wishlist');
+    }
+    
+    openSnackBar( message: string ) {
+        this.snackBar.open( message, '', {
+            duration: 2000,
+        });
+    }
+    
+    isAuthUser(){
+        var isAuthUser;
+        var userInfo = localStorage.getItem( 'userInfo' );
+        if ( userInfo !== 'undefined' && userInfo !== null && userInfo !== 'null' )
+        { 
+            isAuthUser = true;
+        }
+        else
+        {
+            isAuthUser = false;
+        }
+        return isAuthUser;
+    }
 }

ecm/Angular/trunk/src/app/ecm-header/ecm-header.component.ts

@@ -242,7 +242,7 @@ export class ECMHeaderComponent implements OnInit, OnDestroy {
             this.ecmPanel.open({ type: 'overlay', option: 'MENU_OPT', top:'', right: '', width:'80%', height: '100%' });
         }
         else {
-            this.ecmPanel.open({ type: 'inplace', option: 'MENU_OPT', hideClose: true , top:'60px', left: '16px', width:'280px', height: '70%' });
+            this.ecmPanel.open({ type: 'inplace', option: 'MENU_OPT', hideClose: true , top:'60px', left: '16px', width:'280px', height: '75%' });
         }
     }
 

ecm/Angular/trunk/src/app/ecm-nav-menu/ecm-nav-menu.component.css

@@ -70,7 +70,7 @@
 
 .category-products-tab {
     width: 40%;
-    height: 70%;
+    height: 75%;
     left: 296px;
     top: 64px;
     position: fixed;

ecm/Angular/trunk/src/app/ecm-nav-menu/ecm-nav-menu.component.ts

@@ -31,8 +31,8 @@ export class ECMNavMenuComponent implements OnInit {
   getCategories() {
       this.menu = this.store.select('menuList');
       this.menu.subscribe( menuList => {
-          this.categoryList = menuList.catSummary;
-          console.log('menuList.catSummary',menuList,  menuList.catSummary);
+          this.categoryList = menuList.summary;
+          console.log('menuList.summary',menuList,  menuList.summary);
       });
   }
   

ecm/Angular/trunk/src/app/ecm-product-details/ecm-product-details.component.ts

@@ -73,7 +73,10 @@ export class EcmProductDetailsComponent implements OnInit {
           this.itemCode = params['itemCode'];
            console.log( 'ngOnInit itemCode[' + this.itemCode + ']' );
            window.scrollTo(0,0);
-           this.getItemFromStore();
+           //this.getItemFromStore();
+           
+           this.store.dispatch( this.itemAction.getItem(this.itemCode) );
+           
            this.getItemDetail(this.itemCode);
        });
   }
@@ -93,8 +96,8 @@ export class EcmProductDetailsComponent implements OnInit {
       this.store.select('item')
           .subscribe( itemDetail => { 
            this.itemDetail = itemDetail 
-
-           if ( this.itemDetail ) {
+           console.log('Item Detail ****',itemDetail);
+           if ( this.itemDetail.itemCategory ) {
                this.storeCatSubcat();
                let ecmTemplateName = this.itemDetail.itemCategory.ecmTemplate;
                console.log( "getItemDetail ecmTemplateName: " + ecmTemplateName )

ecm/Angular/trunk/src/app/ecm-product-details/ecm-template/ecm-food.component.ts

-import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';
 import { EcmTemplateInterface } from './ecm-template.component';
 import { ItemDetail } from '../../ecm-model/product-detail-model';
 import { Router, ActivatedRoute } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+
+import { Store } from '@ngrx/store';
+import { AppState } from '../../ecm-store/reducers';
 
 import { Http } from '@angular/http';
 import { EcmCartComponent } from '../../ecm-view/ecm-cart/ecm-cart.component';
 import { Item } from '../../ecm-model/product-model';
 import { EcmRecentViewComponent } from '../../ecm-view/ecm-recent-view/ecm-recent-view.component';
+import { RESIZE_EVENT } from '../../ecm-store/ecm-resize';
 
 @Component( {
     selector: 'ecm-food',
-    templateUrl: './ecm-food.component.html',
-    styleUrls: ['./ecm-food.component.css']
+    templateUrl: './ecm-general.component.html',
+    styleUrls: ['./ecm-general.component.css']
 })
 export class EcmFoodComponent implements OnInit, EcmTemplateInterface {
 
     @Input() itemDetail: ItemDetail;
+    @Input() isAddToCart: boolean = false;
+    @Input() inWishlist: boolean = false;
+    
     @Output() scrollToReviews = new EventEmitter();
     @Output() doActivity = new EventEmitter();
+    
     @ViewChild( 'recentView' ) recentView: EcmRecentViewComponent;
+    @ViewChild('itemDetails') itemDetails: ElementRef;
 
-    userActionUrl = '/ecm/service/feeds/cart';
+    clientWidth: any;
     itemCode;
-    myCity;
-    Item;
-    ingredients;
-    itemDetailpath;
-    Preferences;
+    cartItems: Observable<Item[]>;
+    wishlistItems: Observable<Item[]>;
 
-    Overview = "Champions Yacht Club specializes in offering luxury boating and yachting experiences in Goa with a large fleet of Catamarans, Boats, Cruisers & Yachts in Goa. We do Rocking birthday parties, anniversary bashes, island excursions & barbeques, fishing expeditions, snorkeling, corporate parties and more. We ensure you have a luxury experience in yachts that will leave a memory of a lifetime";
+    overview = "In the midst of one of the busiest streets of Mumbai you will find authentic Indian food at B Bhagat Tarachand.It started as a small eatery set up after the partition to serve home-cooked-style meals to the market goers. Soon with the principles of Mr. Bhagat Tarachand intact and the new vision it grew into its current avatar of 3 storey restaurant.";
 
-    constructor( private route: ActivatedRoute, private router: Router, private http: Http ) { }
+    constructor( private route: ActivatedRoute, private router: Router, private http: Http, private store: Store<AppState> ) { }
 
     ngOnInit() {
 
+        console.log( "Item data in food " + JSON.stringify(this.itemDetail) );
         console.log( "ngOnInit EcmFoodComponent Object Keys : " + Object.keys( this.itemDetail ) )
         console.log( this.itemDetail );
-        this.route.params.subscribe( params => {
-            this.itemCode = params['key'];
-        });
 
-        this.myCity = localStorage.getItem( 'mycity' );
+        this.itemCode = this.itemDetail.itemCode;
+        
+        this.clientWidth = document.documentElement.clientWidth;
+        RESIZE_EVENT.subscribe(data => {
+            this.clientWidth = data;
+        });
+        
+        this.cartItems = this.store.select('cartItems');
+        this.cartItems.subscribe( cartItems => {
+            if(cartItems.find(x => x.itemCode === this.itemDetail.itemCode))
+                this.isAddToCart = true;
+            else
+                this.isAddToCart = false;
+        } );
+        
+        this.wishlistItems = this.store.select('wishlistItems');
+        this.wishlistItems.subscribe( wishlistItems => {
+            if(wishlistItems.find(x => x.itemCode === this.itemDetail.itemCode))
+                this.inWishlist = true;
+            else
+                this.inWishlist = false;
+        } );
     }
 
     ngAfterViewInit() {
@@ -59,9 +85,36 @@ export class EcmFoodComponent implements OnInit, EcmTemplateInterface {
         }
         return rating;
     }
-
+    
+    addToWishlist() {
+        this.doActivity.emit( { activity: 'ADD_WISHLIST', data: { 'item': this.itemDetail }, 'caller': this, 'callBack': 'changeStatus' });
+    }
+    
+    removeFromWishlist() {
+        this.inWishlist = false;
+        this.doActivity.emit( { activity: 'REMOVE_WISHLIST', data: { 'item': this.itemDetail } });
+    }
+    
+    scrollToItemDetails() {
+        let offsetTop = this.itemDetails.nativeElement.offsetTop;
+        window.scrollTo(0, offsetTop + 60); 
+    }
+    
+    getCSV(value:string){
+        let attributeValue: Array<string> = [];
+        attributeValue = value.split(',');
+        
+        return attributeValue;
+    }
+    
+    loadItem(itemCode){
+        console.log('selected itemCode',itemCode);
+        
+        this.router.navigate(['/detail',itemCode]);
+    }
+    
+    scrollToReview(){
+        if(this.itemDetail.itemRatings.NO_OF_REVIEWS != 0)
+            this.scrollToReviews.emit();
+    }
 }
-
-
-
-

ecm/Angular/trunk/src/app/ecm-product-details/ecm-template/ecm-general.component.css

+@media screen and (max-width: 640px) {
+  md-card {
+    margin: 0px 15px;
+  }	
+  
+  .wishButton {
+  	right: 0 !important;
+  }
+}
+
+.ecm-product-ratings {
+	color: rgb(500, 150, 50);
+	font-size: large;
+	display: block;
+	padding-right: 10px;
+}
+
+.ecm-null-ratings {
+	color: lightgray;
+	font-size: large;
+}
+
+.Add_to_cart {
+    background: #fff;
+    color: mediumvioletred;
+    max-width: 190px;
+    height: 50px;
+    font-size: 15px;
+    line-height: 15px;
+    text-align: center;
+    /* border-radius: 2px; */
+    position: relative;
+    /* float: left; */
+    width: calc(50% - 40px);
+    font-weight: 700;
+    box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
+    border-radius: 3px;
+}
+
+.Buy_now {
+    background: mediumvioletred;
+    color: #fff;
+    max-width: 190px;
+    height: 50px;
+    font-size: 15px;
+    line-height: 15px;
+    text-align: center;
+    position: relative;
+    width: calc(50% - 40px);
+    margin-left: 10px;
+    margin-right: 10px;
+    font-weight: bold;
+    box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
+    border-radius: 3px;
+}
+
+.link_button {
+	color: mediumvioletred;
+	font-weight: bold;
+	padding-left: 10px;
+    padding-right: 10px;
+}
+
+ul {
+	list-style: none;
+	display: inline;
+}
+
+li::before {
+	content: "• ";
+	color: gray; /* or whatever color you prefer */
+}
+
+.btn {
+	font-weight: bold;
+	color: mediumvioletred;
+	text-align: center;
+	line-height: 18px;
+}
+
+.selected {
+	font-weight: bold;
+	color: white;
+	text-align: center;
+	line-height: 18px;
+}
+
+.link_button_size {
+	color: mediumvioletred;
+	font-weight: bold;
+	padding-left: 15px;
+	font-size: 14px;
+}
+
+.symbol {
+	display: inline-block;
+    vertical-align: super;
+	/*
+	height: 20px;
+	width: 20px;
+	border-radius: 50%;
+	border: 1px solid black;
+	border: black;
+	*/
+}
+
+.back {
+	background-color: mediumvioletred;
+}
+
+.back_selected {
+	background-color: ghostwhite;
+}
+
+.ecm-Info {
+	padding-left: 8px;
+	vertical-align: super;
+}
+
+.ecm-payments {
+    font-size: 13px;
+    color: #787878;
+    padding: 32px 0px 36px 5px;
+}
+
+.ecm-share {
+	float: right;
+	cursor: pointer;
+	font-weight: bold;
+	font-size: 14px;
+	padding-right: 25px;
+	padding-top: 25px;
+}
+
+.share {
+	vertical-align: super;
+	color: dimgray;
+}
+
+.arrow {
+	vertical-align: middle;
+	margin-left: -2px;
+	font-size: 21px;
+}
+
+/*  new */
+.ecm-other-title {
+	font-size: 16px;
+	padding-bottom: 6px;
+	display: block;
+    font-weight: bold;	
+}
+
+.ecm-other-detail {
+	font-weight: 100;
+	font-size: 15px;
+	color: black;
+	text-align: justify;
+}
+
+.short-detail {
+	padding-bottom: 15px;
+}
+
+.ecm-card {
+	/* margin-top: 20px; */
+	/* max-width: 75rem; */
+	/* margin-left: auto; */
+	/* margin-right: auto; */
+	padding-top: 20px;
+}
+
+.ecm-itemDeatils {
+	padding-bottom: 21px;
+	border-bottom: 2px solid #c71585;
+	font-size: 16px;
+	margin-left: 17px;
+}
+
+.ecm-returnsPolicy {
+	padding-top: 30px;
+	font-size: 16px;
+}
+
+.ecm-termsCondition {
+	padding-top: 30px;
+    padding-bottom: 30px;
+    font-size: 16px;
+}
+
+
+.image {
+    border-right: 1px solid #f3f3f3;
+}
+
+.head {
+    padding-left: 25px;
+    /*border-left: 1px solid #f3f3f3;*/
+}
+
+.link_changebutton {
+	color: mediumvioletred;
+	font-weight: bold;
+	position: absolute;
+}
+
+/* new*/
+@media screen and (min-width: 20rem) {
+	.Available {
+		font-size: calc(0.8rem + 1.2 * (( 100vw - 20rem)/30));
+	}
+}
+
+@media screen and (min-width: 50rem) {
+	.Available {
+		font-size: 2rem;
+	}
+}
+
+
+.ecm-returnsPolicy {
+	padding-top: 30px;
+}
+
+.ecm-termsCondition {
+	padding-top: 30px;
+}
+
+
+.attraction {
+	font-size: 16px;
+	padding-bottom: 6px;
+	display: block;
+    font-weight: bold;
+}
+
+.extra-details {
+
+}
+
+.data-title {
+	padding: 5px 0px 5px 0px;
+	color: #787878;
+	font-weight: 700;
+    vertical-align: top;
+    padding-top: 15px;
+}
+
+.data-title-detail {
+	color: black;
+	padding: 5px;
+	font-weight: inherit;
+	padding: 15px;
+}
+
+.product-detail-card {
+	margin-top: 5px;	
+	padding: 0;
+}
+
+.ecm-product-details {
+	padding-right: 10px;
+}
+
+.ecm-recent-view {
+	padding-left: 10px;	
+}
+
+@media screen and (max-width: 640px) {
+	.ecm-recent-view {
+		display: none;
+	}
+	
+	.ecm-product-details {
+		width: 100%;
+	}
+}
+
+hr {
+	margin-top: 8px;
+}
+
+.attribute-button{
+   color: black;
+   background-color: #efecec;
+   width: 36px;
+   height: 36px;
+   min-width: 36px;
+   padding: 0;
+   margin: 0;
+   line-height: 36px;
+   border-radius: 100%;
+   box-shadow: none;
+   font-size: 15px;
+   
+}
+.attribute-button .mat-button-ripple {
+   border-radius: 100% !important;
+}
+
+.highlight {
+	color: white;
+    background-color: mediumvioletred;
+    cursor: auto;
+    font-weight: bold;
+}
+
+.highlight:HOVER {
+	color: white !important;
+}
+
+.selected {
+	box-shadow: 0 0 1px 1px mediumvioletred;
+	cursor: auto;
+}
+
+.color-title  {
+	color: #787878;
+	font-size: 14px;
+	position: relative;
+	display: inline-block;
+	height: 60px;
+	line-height: 60px;
+	float: left;
+	margin: 0;
+	padding: 0;
+	font-weight: 700;
+    padding-right: 30px;
+}
+
+.size-title  {
+	color: #787878;
+	font-size: 14px;
+	position: relative;
+	display: inline-block;
+	height: 40px;
+	line-height: 40px;
+	float: left;
+	margin: 0;
+	padding: 0;
+	font-weight: 700;
+    padding-right: 30px;
+}
+
+.size-variant {
+    margin-right: 14px;
+	cursor: pointer;
+	display: inline-block;
+}
+
+.color-variant {
+    margin-right: 14px;
+	padding: 0;
+	height: 60px;
+	width: 60px;
+	position: relative;
+	display: inline-block;
+	cursor: pointer;
+}
+
+.help-icon {
+    cursor: pointer;
+    color: black;
+}
+
+.delivery-info {
+	vertical-align: super;
+}
+
+.offers-section {
+	padding-bottom: 14px;
+	font-size: 14px;
+}
+
+.seller-name {
+	display: inline;
+	color: mediumvioletred;
+	font-size: 14px;
+	font-weight:bold;
+    padding-left: 2px;
+    padding-right: 2px;
+    cursor: pointer;
+}
+
+.sold-by-title {
+	display: inline;
+	color: #787878;
+	font-size: 14px;
+	font-weight: 700;
+}
+
+.item-descr {
+    display: block;
+    font-size: 18px;
+    font-weight: 600;
+    padding-right: 120px;
+    line-height: 24px;
+    color: black;
+}
+
+.item-shdescr {
+	display: block;
+	font-size: 14px;
+	font-weight: bold;
+    padding-bottom: 8px;
+    padding-top: 28px;
+}
+
+.subcat-link {
+	color: mediumvioletred;	
+}
+
+.item-descount-rate {
+	font-size: 25px;
+	font-weight:bold;
+	line-height: 1;
+}
+
+.item-cost-rate {
+	font-size: 14px;
+	color: gray;
+	font-weight: 100;
+}
+
+.details-title {
+	font-size: 14px;
+	color: #787878;
+    width: 55px;
+    display: inline-block;
+    vertical-align: top;
+    font-weight: 700;
+}
+
+.Available {
+	font-size: 14px;
+	color: #444;
+	padding-left: initial;
+}
+
+.available-title {
+	display:inline;
+	color: forestgreen;
+	font-weight:bold; 
+}
+
+.service-title {
+	font-size: 14px;
+	color: #444;
+	padding-left: initial; 
+}
+
+.buy-cart-button {
+	padding-top: 8px;
+}
+
+.item-discount {
+	padding-left: 10px;
+	color: forestgreen;
+	font-weight:bold;
+	font-size: 14px;
+}
+
+.reviews-no {
+	padding-left: 12px;
+}
+
+.share-icon {
+	color: dimgray;
+	font-size: 20px;
+}
+
+.item-descount-rate-section {
+	padding-top: 14px;
+}
+
+.item-detail-1{
+	font-size: 14px;
+    display: inline-block;
+    color: #444;
+    padding-left: 45px;
+    line-height: 1.5;
+}
+
+.service-detail {
+	font-size: 14px;
+}
+
+.review-msg-title {
+	color: black;
+	font-size: 14px;
+}
+
+.discount-validity {
+	color: black;
+}
+
+.secure-icon {
+	font-size: 20px;
+}
+
+.details-list {
+	color: black;
+	line-height: 1.5;
+}
+
+.item-details-title {
+	border-bottom: 1px solid #f3f3f3;
+	padding: 20px;
+}
+
+.extra-details-card {
+	padding: 0;
+}
+
+.extra-details-section {
+	padding: 30px;	
+}
+
+.extra-detail-font{
+	
+}
+
+.Attraction {
+	padding-top: 30px;
+}
+
+li::BEFORE {
+	padding-right: 3px !important;
+}
+
+.product-image {
+	min-height: 400px;
+	max-height: 600px;
+	position: relative;
+	display: block;
+	/* height: 600px; */
+	width: 100%;
+}
+
+.ecm-ratingStars {
+	color: rgb(500, 150, 50);
+}
+
+.ecm-itemAvgRating {
+	color: black;
+    padding-right: 5px;
+    padding-left: 5px;	
+    line-height: 20px;
+}
+
+.ecm-itemNumOfReviews {
+	padding-left: 5px;
+    color: black;
+    border-left: 1px solid #f3f3f3;
+    line-height: 20px;
+}
+
+md-card {
+	border-radius: 3px !important;
+	box-shadow: 0 0px 16px -3px rgba(0,0,0,.1) !important;
+}
+
+/* Mobile View*/
+.mobi-buy-cart-button{
+    position: fixed !important;
+    bottom: 0 !important;
+    height: 65px !important;
+    background: #fff;
+    z-index: 2;
+    width: 100%;
+    right: 0%;
+}
+
+.mobi-buy-cart-button > .Add_to_cart{
+	background: #fff;
+    color: mediumvioletred;
+    height: 50px;
+    font-size: 15px;
+    line-height: 15px;
+    text-align: center;
+    position: relative;
+    width: calc(50% - 40px);
+    font-weight: 700;
+    box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
+    border-radius: 3px;
+    margin-left: 40px;
+    margin-right: 18px;
+    margin-top: -7px;
+}
+.mobi-buy-cart-button > .Buy_now{
+	background: mediumvioletred;
+    color: #fff;
+    max-width: 190px;
+    height: 50px;
+    font-size: 15px;
+    line-height: 15px;
+    text-align: center;
+    position: relative;
+    width: calc(50% - 40px);
+    font-weight: bold;
+    box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
+    border-radius: 3px;
+    margin-top: -7px;
+    margin-left: -7px;
+    margin-right: 29px;
+}
+.wishButton{
+    float: right;
+    z-index: 1;
+    /* padding-top: 18px; */
+    background: none;
+    color: mediumvioletred;
+    top: 15px;
+    right: 50%;
+    position: absolute;
+    box-shadow: none;
+}
+
+.attrib-value {
+	display: block;
+}

ecm/Angular/trunk/src/app/ecm-product-details/ecm-template/ecm-general.component.html

+
+<md-card class="product-detail-card">
+	
+<div class="row">
+    <!-- ------------------------HANDICRAFT-IMAGE START HERE-------------------------------- -->
+    <div class="small-12 medium-6 large-6 columns image">
+      <div>
+	 <md-button-toggle class="wishButton">
+       <md-icon style="color: mediumvioletred; font-size: 28px;" *ngIf="!inWishlist" (click)="addToWishlist();">favorite_border</md-icon>
+       <md-icon style="color: mediumvioletred; font-size: 28px;" *ngIf="inWishlist" (click)="removeFromWishlist();" >favorite</md-icon>
+     </md-button-toggle>
+     </div>     
+      <div class="md-card-image">
+           <ecm-image  [refId]='itemDetail.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage] = "true" class="product-image"></ecm-image>
+      </div>
+   	</div>
+	    
+    <!-- ----------------------HANDICRAFT-DETAILS  START HERE-------------------------------- -->   
+  <div class="small-12 medium-6 large-6 columns head">
+   <md-card-content>
+     <div>
+          <div class="ecm-share">
+			     <i class="material-icons share-icon">&#xE80D;</i>
+			     <span class="share">Share</span>
+		  </div>
+		  <span class="item-shdescr">
+	          <a [routerLink]="['/products', itemDetail.itemSubCategory.scatCode]" class="subcat-link">
+	            {{itemDetail.itemSubCategory.shDescr}}
+	          </a>
+          </span>
+			
+		  <span class="item-descr"> {{itemDetail.itemHeader.itemDescr}} </span>
+			
+		  <span class="sold-by-title">Sold by</span>
+		  <span class="seller-name">{{itemDetail.itemDetail1?.sellerInfo.name}}</span><br>
+			
+		  <a class="link-reviews">
+		   <span *ngIf="itemDetail.itemRatings.AVG_RATING == 0 && itemDetail.itemRatings.NO_OF_REVIEWS == 0 " class="review-msg-title">
+			 Be the first to Review this product
+		   </span>
+					
+		   <span (click)="scrollToReview();" *ngIf="itemDetail.itemRatings.AVG_RATING > 0 || itemDetail.itemRatings.NO_OF_REVIEWS > 0 " style="display: inline-flex; cursor: pointer;" >
+				<rating [rate]="itemDetail.itemRatings.AVG_RATING" [isSmallRatings]=true></rating>
+				<span class="ecm-itemAvgRating">{{itemDetail.itemRatings.AVG_RATING}} Ratings</span>
+				<span *ngIf="itemDetail.itemRatings.NO_OF_REVIEWS != 0" class="ecm-itemNumOfReviews">{{itemDetail.itemRatings.NO_OF_REVIEWS}} Reviews</span>
+<!-- 				<span *ngIf="itemDetail.itemRatings.NO_OF_REVIEWS == 0" class="ecm-itemNumOfReviews" (click)="doActivity.emit({activity:'WRITE_REVIEW', data: {'firstReview': true} });">Be the first to Review this product</span> -->
+		   </span>
+		  </a>
+           
+          <div class="item-descount-rate-section">
+			 <span class="item-descount-rate">
+				Rs. {{itemDetail.itemHeader.itemDiscountedRate | number : '3.1-5'}}
+		     </span>
+		  </div>
+	     <div>
+		   <span class="item-cost-rate">
+     		  <s>Rs. {{itemDetail.itemHeader.itemCostRate}}</s>
+     	   </span>
+     	   <span class="item-discount">
+     			 {{itemDetail.itemHeader.itemDiscount}}% off
+           </span>  
+         </div>  
+     	 <div class="offers-section">
+     	   <span class="discount-validity">{{itemDetail.itemDetail1?.validity}}</span>
+    	   <button type="button" onclick="()" class="md-button link_button">
+    	     More Offers
+     	     <i class="material-icons arrow ">&#xE313;</i>
+     	   </button>
+     	 </div> 
+           <div>   
+               <div class="short-detail">
+                 <div class="details-title">Details</div>
+                 <div class="item-detail-1">
+                   <ul class="details-list">
+                     <li *ngFor="let attribute of itemDetail.itemAttributes | slice:0:2;">
+                     	{{attribute.label}}: {{attribute.value}}
+                     </li>
+                   </ul> 
+                   <button type="button" (click)="scrollToItemDetails()" class="md-button link_button">View More</button>
+                 </div>
+              </div>
+          </div>
+		  <ecm-variants [itemVariants]="itemDetail.itemVariants" [itemCode]="itemCode" (selected)="loadItem($event);"></ecm-variants>		
+		</div>
+	</md-card-content>
+		
+		<div  [ngClass]="{'buy-cart-button': ( clientWidth > 640 ) , 'mobi-buy-cart-button': ( clientWidth < 639 )  }" >
+			<button md-button class="button medium-btn Add_to_cart" (click)="doActivity.emit({activity:'ADD_CART', data: {'item' : itemDetail, 'isAddToCart' : isAddToCart}}); isAddToCart= true;">{{ isAddToCart ? 'Go to Cart' : 'Add to Cart' }}</button>
+<!-- 			<button md-button class="button medium-btn Buy_now" (click)="doActivity.emit({activity:'BUY_NOW', data: {'item' : itemDetail, 'isAddToCart' : isAddToCart} });">Buy -->
+<!-- 				Now</button> -->
+		</div>
+		<div  class="medium-12 columns ecm-payments">
+			<i class="material-icons secure-icon"> &#xE8E8;</i> <span
+				 class="ecm-Info">Safe and Secure Payments.
+				100% Authentic products</span>
+		</div>
+	</div>
+</div>
+</md-card>
+<!-- ----------------------HANDICRAFT-DETAILS ENDS HERE-------------------------------- -->
+
+<div class="row ecm-card" #itemDetails>
+	<div class="medium-8 large-8 columns ecm-product-details">
+	<md-card class="extra-details-card">
+		<div class="item-details-title"> <span class="ecm-itemDeatils">Item Details</span> </div>
+		<div class="extra-details-section">
+			<div class="ecm-Overview">
+				<span class="ecm-other-title">Overview</span> 
+				<span class="ecm-other-detail"> 
+					<ecm-readmore [text]="overview" [maxLength]="60"></ecm-readmore>
+				</span>
+			</div>
+	
+			<div class="Attraction">
+				<span class="attraction">Description</span>
+				<table style="width: 100%">
+					<tr class="extra-details" *ngFor="let attribute of itemDetail.itemAttributes">
+						<td class="data-title" *ngIf="attribute.value">
+							{{attribute.label}}
+						</td>
+						<td class="data-title-detail" *ngIf="attribute.value">
+							<span class="attrib-value" *ngFor="let value of getCSV(attribute.value)">{{value}}</span>
+						</td>
+					</tr>
+				</table>
+			</div>
+	
+			<div class="ecm-returnsPolicy">
+				<span class="ecm-other-title">Return Policy</span> 
+				<span class="ecm-other-detail">
+				    Return is a scheme provided by respective sellers directly under this policy in terms of
+					which the option of replacement and/or refund is offered by the respective sellers to you.All products listed under a particular 
+					category may not have the same cancellation policy.Kindly check the respective items's applicable return policy on the
+					product page for any exception on the table show below.
+				</span>
+			</div>
+	
+			<div class="ecm-termsCondition">
+				<span class="ecm-other-title">Terms and Conditions</span> 
+				<span class="ecm-other-detail">
+			      The images represent actual product through color of the image and product may slightly differ.For warranty-related claims,please contact the brand service center.
+				</span>
+			</div>
+		</div>
+	</md-card>
+	</div>
+	<div class=" medium-4 large-4 columns ecm-recent-view">
+		<ecm-recent-view #recentView> </ecm-recent-view>
+	</div>
+</div>
\ No newline at end of file

ecm/Angular/trunk/src/app/ecm-product-details/ecm-template/ecm-handicraft.component.html

@@ -39,7 +39,7 @@
 			 Be the first to Review this product
 		   </span>
 					
-		   <span (click)="scrollToReviews.emit();" *ngIf="itemDetail.itemRatings.AVG_RATING > 0 || itemDetail.itemRatings.NO_OF_REVIEWS > 0 " style="display: inline-flex; cursor: pointer;" >
+		   <span (click)="scrollToReview();" *ngIf="itemDetail.itemRatings.AVG_RATING > 0 || itemDetail.itemRatings.NO_OF_REVIEWS > 0 " style="display: inline-flex; cursor: pointer;" >
 				<rating [rate]="itemDetail.itemRatings.AVG_RATING" [isSmallRatings]=true></rating>
 				<span class="ecm-itemAvgRating">{{itemDetail.itemRatings.AVG_RATING}} Ratings</span>
 				<span *ngIf="itemDetail.itemRatings.NO_OF_REVIEWS != 0" class="ecm-itemNumOfReviews">{{itemDetail.itemRatings.NO_OF_REVIEWS}} Reviews</span>
@@ -76,7 +76,7 @@
                      	{{attribute.label}}: {{attribute.value}}
                      </li>
                    </ul> 
-                   <button type="button" (click)="scrollToItemDetails()" class="md-button link_button">View More</button>
+                   <button type="button" (click)="scrollToItemDetails();" class="md-button link_button">View More</button>
                  </div>
               </div>
               

ecm/Angular/trunk/src/app/ecm-product-details/ecm-template/ecm-handicraft.component.ts

-import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef, OnDestroy } from '@angular/core';
 import { EcmTemplateInterface } from './ecm-template.component';
 import { ItemDetail } from '../../ecm-model/product-detail-model';
 import { Router, ActivatedRoute } from '@angular/router';
@@ -16,26 +16,27 @@ import { EcmRecentViewComponent } from '../../ecm-view/ecm-recent-view/ecm-recen
 
 @Component( {
     selector: 'ecm-handicraft',
-    templateUrl: './ecm-handicraft.component.html',
-    styleUrls: ['./ecm-handicraft.component.css']
+    templateUrl: './ecm-general.component.html',
+    styleUrls: ['./ecm-general.component.css']
 })
-export class EcmHandicraftComponent implements OnInit, EcmTemplateInterface {
+export class EcmHandicraftComponent implements OnInit, EcmTemplateInterface, OnDestroy {
 
     @Input() itemDetail: ItemDetail;
+    @Input() isAddToCart: boolean = false;
+    @Input() inWishlist: boolean = false;
+    
     @Output() scrollToReviews = new EventEmitter();
     @Output() doActivity = new EventEmitter();
+    
     @ViewChild( 'recentView' ) recentView: EcmRecentViewComponent;
     @ViewChild('itemDetails') itemDetails: ElementRef;
-    @Input() isAddToCart: boolean = false;
-    @Input() inWishlist: boolean = false;
+    
     clientWidth: any;
     itemCode;
     cartItems: Observable<Item[]>;
     wishlistItems: Observable<Item[]>;
     
-    userActionUrl = '/ecm/service/feeds/cart';
-
-    Overview = "Champions Yacht Club specializes in offering luxury boating and yachting experiences in Goa with a large fleet of Catamarans, Boats, Cruisers & Yachts in Goa. We do Rocking birthday parties, anniversary bashes, island excursions & barbeques, fishing expeditions, snorkeling, corporate parties and more. We ensure you have a luxury experience in yachts that will leave a memory of a lifetime";
+    overview = "We are a renowned manufacture, supplier, wholesalers and traders of decorative basket, artificial flower, artificial flower bunches, rangoli designs, chocolate decoration material, wedding decoration material, candle making material, emboss painting, glass painting, school decoration material, handicrafts trays, handicraft trays-etc and caters to hotels, restaurants, bungalows, school, households-etc.";
 
     constructor( private route: ActivatedRoute, private router: Router, private http: Http, public dialog: MdDialog, private store: Store<AppState>) { }
 
@@ -71,7 +72,7 @@ export class EcmHandicraftComponent implements OnInit, EcmTemplateInterface {
     }
 
     ngAfterViewInit() {
-        this.recentView.ngOnInit();
+        //this.recentView.ngOnInit();
     }
 
     ngOnDestroy() {
@@ -115,4 +116,16 @@ export class EcmHandicraftComponent implements OnInit, EcmTemplateInterface {
         this.router.navigate(['/detail',itemCode]);
     }
     
+    scrollToReview() {
+        if(this.itemDetail.itemRatings.NO_OF_REVIEWS != 0)
+            this.scrollToReviews.emit();
+    }
+    
+    getCSV(value:string) {
+        let attributeValue: Array<string> = [];
+        attributeValue = value.split(',');
+        
+        return attributeValue;
+    }
+    
 }
\ No newline at end of file

ecm/Angular/trunk/src/app/ecm-product-details/ecm-template/ecm-outing.component.ts

-import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';
 import { Router,ActivatedRoute } from '@angular/router';
 import { Http } from '@angular/http';
 import { Observable } from 'rxjs/Observable';
@@ -15,8 +15,8 @@ import { Item } from '../../ecm-model/product-model';
 
 @Component( {
     selector: 'ecm-outing',
-    templateUrl: './ecm-outing.component.html',
-    styleUrls: ['./ecm-outing.component.css']
+    templateUrl: './ecm-general.component.html',
+    styleUrls: ['./ecm-general.component.css']
 })
 export class EcmOutingComponent implements OnInit, EcmTemplateInterface {
     
@@ -25,6 +25,7 @@ export class EcmOutingComponent implements OnInit, EcmTemplateInterface {
     @Output() doActivity = new EventEmitter();
     @ViewChild( 'recentView' ) recentView: EcmRecentViewComponent;
     @Input() inWishlist: boolean = false;
+    @ViewChild('itemDetails') itemDetails: ElementRef;
 
     counterValue = 1;
     itemPrice = 1000;
@@ -73,14 +74,6 @@ export class EcmOutingComponent implements OnInit, EcmTemplateInterface {
         if( this.recentView )
           this.recentView.doDestroy( this.itemDetail.itemCode );
     }
-    
-    createRatings( ratings ) {
-        var rating: number[] = [];
-        for ( var i = 1; i <= ratings; i++ ) {
-            rating.push( i );
-        }
-        return rating;
-    }
 
     increment() {
         this.counterValue += 1;
@@ -110,7 +103,6 @@ export class EcmOutingComponent implements OnInit, EcmTemplateInterface {
     }
     
     fetchAttributes(){
-
         this.itemDetail.itemAttributes.forEach(attribute => {
            if(attribute.label == 'Attractions')
                this.attractions = attribute.value.split(',');
@@ -126,13 +118,28 @@ export class EcmOutingComponent implements OnInit, EcmTemplateInterface {
            if(attribute.label == 'Advisory')
                this.advisory = attribute.value.split(',');           
         });
-        
     }
     
-    
     loadItem(itemCode){
         console.log('selected itemCode',itemCode);
         this.router.navigate(['/detail',itemCode]);
     }
     
+    scrollToItemDetails() {
+        let offsetTop = this.itemDetails.nativeElement.offsetTop;
+        window.scrollTo(0, offsetTop + 60); 
+    }
+    
+    getCSV(value:string){
+        let attributeValue: Array<string> = [];
+        attributeValue = value.split(',');
+        
+        return attributeValue;
+    }
+    
+    scrollToReview(){
+        if(this.itemDetail.itemRatings.NO_OF_REVIEWS != 0)
+            this.scrollToReviews.emit();
+    }
+    
 }
\ No newline at end of file

ecm/Angular/trunk/src/app/ecm-product-details/ecm-template/ecm-training.component.ts

-import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { Http } from '@angular/http';
 import { EcmTemplateInterface } from './ecm-template.component';
@@ -10,8 +10,8 @@ import { Item } from '../../ecm-model/product-model';
 
 @Component( {
     selector: 'ecm-training',
-    templateUrl: './ecm-training.component.html',
-    styleUrls: ['./ecm-training.component.css']
+    templateUrl: './ecm-general.component.html',
+    styleUrls: ['./ecm-general.component.css']
 })
 export class EcmTrainingComponent implements OnInit, EcmTemplateInterface {
 
@@ -19,6 +19,7 @@ export class EcmTrainingComponent implements OnInit, EcmTemplateInterface {
     @Output() scrollToReviews = new EventEmitter();
     @Output() doActivity = new EventEmitter();
     @ViewChild( 'recentView' ) recentView: EcmRecentViewComponent;
+    @ViewChild('itemDetails') itemDetails: ElementRef;
     
     counterValue = 1;
     itemPrice = 1000;
@@ -77,5 +78,17 @@ export class EcmTrainingComponent implements OnInit, EcmTemplateInterface {
         else
             return false;
     }
+    
+    scrollToItemDetails() {
+        let offsetTop = this.itemDetails.nativeElement.offsetTop;
+        window.scrollTo(0, offsetTop + 60); 
+    }
+    
+    getCSV(value:string){
+        let attributeValue: Array<string> = [];
+        attributeValue = value.split(',');
+        
+        return attributeValue;
+    }
 }
  

ecm/Angular/trunk/src/app/ecm-view/ecm-cart/counter.html

@@ -2,7 +2,7 @@
 	<span class="quantity-title columns">Quantity</span>
 
 	<div class="counter small-8 large-12 columns">
-		<button md-button class="counter-button" (click)="decrement.emit()">
+		<button md-button class="counter-button" [disabled]="quantity == 1" (click)="decrement.emit()">
 			<i class="material-icons decr-icon" style="padding: 0px;">remove</i>
 		</button>
 		<span> <input class="ecm-textBox" type="text" [value]="quantity"></span>

ecm/Angular/trunk/src/app/ecm-view/ecm-category/ecm-category.service.ts

@@ -38,7 +38,7 @@ export class EcmCategoryService {
         let headers = new Headers( { 'Content-Type': 'application/json' });
         let options = new RequestOptions( { headers: headers });
 
-        return this.http.get( this.SERVICE_URL + '/sideoptions', options )
+        return this.http.get( this.SERVICE_URL + '/summary', options )
             .map( this.extractData )
             .catch( this.handleError );
     }

ecm/Angular/trunk/src/app/ecm-view/ecm-product/ecm-product.component.css

@@ -184,6 +184,7 @@
 .product-list-card{
     display: inline-block;
     padding: 0;
+    width: 100%;
 } 
 @media screen and (max-width: 640px){
   .filter-pane{
@@ -234,6 +235,7 @@
 	 border-right: 0px;
 	 border-bottom: 0px;
      padding-top: 20px;
+     width: 100%;
 }	
 .ecm-filter-details{
 /*  margin-top: -24px; */

ecm/Angular/trunk/src/app/ecm-view/ecm-product/ecm-product.component.ts

@@ -82,7 +82,7 @@ export class EcmProductComponent implements OnInit {
     }
 
     storeItem( selectedItem ) {
-        this.store.dispatch( this.itemAction.getItemSuccess( selectedItem ) );
+        //this.store.dispatch( this.itemAction.getItemSuccess( selectedItem ) );
     }
 
     fetchStore( viewType: string ) {

ecm/Angular/trunk/src/app/ecm-view/ecm-recent-view/ecm-recent-view.component.html

@@ -8,8 +8,8 @@
 		  <ecm-image [refId]='item.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage] = "true" [isThumbnail]="true"></ecm-image>		
 	    </div>
 	    <div class="product-data medium-6 large-8 columns">
-	      <span class="item-descr">{{item.descr}}</span>
-          <span class="item-cost">Rs. {{item.costRate}}</span>		
+	      <span class="item-descr">{{item.itemHeader.itemShDescr}}</span>
+          <span class="item-cost">Rs. {{item.itemHeader.itemDiscountedRate | number : '3.1-5'}}</span>		
 	    </div>
 	</div>
     <div class="view-all-section" *ngIf="recentViewItems.length > 3 && show == 3" (click)="show = recentViewItems.length">

ecm/Angular/trunk/src/app/ecm-view/ecm-recent-view/ecm-recent-view.component.ts

@@ -25,9 +25,10 @@ export class EcmRecentViewComponent implements OnInit {
     getRecentViewItems() {
         this.recentviewService.getRecentViewItems().subscribe(
             recentViewItems => {
-                console.log('recentViewItems.length >> ' + recentViewItems.length);
-                this.recentViewItems = recentViewItems.reverse();
-                console.log( 'comp recentItems[' + JSON.stringify( recentViewItems ) + '] \n this.trendingItems[' + JSON.stringify( this.recentViewItems ) + ']' );
+                if(recentViewItems.length){
+                    this.recentViewItems = recentViewItems.reverse();
+                }
+                console.log( 'comp recentItems',this.recentViewItems );
             },
             error => {
                 this.errorMessage = <any>error;

ecm/Angular/trunk/src/app/ecm-view/ecm-recent-view/ecm-recent-view.service.ts

@@ -18,7 +18,7 @@ export class EcmRecentViewService {
         let options = new RequestOptions( { headers: headers });
 
         return this.http.get( this.recentViewUrl, options )
-            .map( this.extractData )
+            .map( (res) => this.extractData(res) )
             .catch( this.handleError );
     }
     
@@ -32,24 +32,66 @@ export class EcmRecentViewService {
     }
     
 
-    private extractData(res: Response) {
-      let body = res.json();
-      console.log('extractData[' + JSON.stringify(body) + ']');
-      return body || { };
+    private extractData( res: Response ) {
+        let respJson = res.json();
+        console.log( 'extracData', respJson );
+        if ( respJson != null ) {
+            for ( let key of Object.keys( respJson ) ) {
+                console.log( "getItemDetail itemDetail ==> key: " + key )
+                let data = respJson[key];
+
+                try {
+                    respJson[key] = JSON.parse( data );
+                    console.log( "getItemDetail itemDetail try : " + respJson[key] );
+                }
+                catch ( e ) {
+                    console.log( "getItemDetail itemDetail ==> key: ", data, typeof data === 'object' )
+                    if ( typeof data === 'object' )
+                        respJson[key] = this.formatObject( data );
+                    else
+                        respJson[key] = data;
+                    console.log( "getItemDetail itemDetail catch : " + respJson[key] );
+                }
+            }
+            console.log( 'extractData[' + JSON.stringify( respJson ) + ']' );
+        }
+        return respJson || {};
     }
 
-    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);
+    formatObject( respJson: any ) {
+
+        console.log( 'formatObject', respJson );
+        if ( respJson != null ) {
+            for ( let key of Object.keys( respJson ) ) {
+                console.log( "formatObject itemDetail ==> key: " + key )
+                let data = respJson[key];
+                try {
+                    respJson[key] = JSON.parse( data );
+                    console.log( "formatObject itemDetail try : " + respJson[key] );
+                }
+                catch ( e ) {
+                    respJson[key] = data;
+                    console.log( "formatObject itemDetail catch : " + respJson[key] );
+                }
+            }
+            console.log( 'formatObject[' + JSON.stringify( respJson ) + ']' );
+        }
+        return respJson || {};
+    }
+
+
+    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/trunk/src/app/ecm-view/ecm-variants/ecm-variants.component.css

@@ -290,7 +290,7 @@ hr {
 }
 
 .highlight {
-	color: white;
+	color: white !important;
     background-color: mediumvioletred;
     cursor: auto;
     font-weight: bold;

ecm/Angular/trunk/src/app/ecm-view/ecm-variants/ecm-variants.component.ts

@@ -21,18 +21,15 @@ export class EcmVariantsComponent implements OnChanges{
     time_selected;
     size_selected;
     color_selected;
-    timeVar
-    attractions: Array<string> = [];
-    activities: Array<string> = [];
-    transportation: Array<string> = [];
-    thingsToCarry: Array<string> = [];
-    advisory: Array<string> = [];
+    timeVar;
 
     constructor() { }
 
     ngOnChanges() {
         console.log( 'OnInit Item Variants and itemcode', this.itemVariants, this.itemCode );
-        this.fetchAttributes();
+        if(this.itemVariants.products){
+            this.fetchAttributes();
+        }
     }
 
     fetchAttributes() {
@@ -90,29 +87,35 @@ export class EcmVariantsComponent implements OnChanges{
     }
 
     loadItem( index, variant ) {
-
-        let varIndex = this.getVarIndex( variant );
-        let currentVariants = this.simpleClone( this.currentVariants );
-        currentVariants[varIndex] = index;
-        console.log( 'loadItem index:[' + index + ']variant:[' + variant + ']varIndex[' + varIndex + ']', currentVariants );
-
-        let itemCode;
-        let keys = Object.keys( this.itemVariants.products );
-        //items.find(x => x.itemCode === this.itemCode);
-        keys.forEach( product => {
-
-            let variants = this.itemVariants.products[product];
-            console.log( 'loadItem variants:[', variants, currentVariants );
-            if ( this.compare( currentVariants, variants ) ) {
-                if ( product != this.itemCode ) {
-                    itemCode = product;
-                    console.log( 'compare  product:[' + product + ']' );
+        let varIndex;
+        let currentVariants;
+        
+        if(this.size_selected != index)
+        {    
+            varIndex = this.getVarIndex( variant );
+            currentVariants = this.simpleClone( this.currentVariants );
+            currentVariants[varIndex] = index;
+            console.log( 'loadItem index:[' + index + ']variant:[' + variant + ']varIndex[' + varIndex + ']', currentVariants );
+    
+            let itemCode;
+            let keys = Object.keys( this.itemVariants.products );
+            //items.find(x => x.itemCode === this.itemCode);
+            keys.forEach( product => {
+    
+                let variants = this.itemVariants.products[product];
+                console.log( 'loadItem variants:[', variants, currentVariants );
+                if ( this.compare( currentVariants, variants ) ) {
+                    if ( product != this.itemCode ) {
+                        itemCode = product;
+                        console.log( 'compare  product:[' + product + ']' );
+                    }
                 }
+            });
+            
+    
+            if ( itemCode ) {
+                this.selected.emit( itemCode );
             }
-        });
-
-        if ( itemCode ) {
-            this.selected.emit( itemCode );
         }
     }
     dispDateFormat = 'dd MMM yyyy - EEEE';

ecm/Angular/trunk/src/app/user-review/ecm-user-review.service.ts

@@ -89,6 +89,21 @@ export class UserReviewService {
             console.log(error.json());
         }); 
     }
+    
+    removeReview(itemCode){
+        let userServiceUrl = '/ecm/service/feeds/review/';
+        let headers = new Headers( { 'Content-Type': 'application/json' });
+        let options = new RequestOptions( { headers: headers });
+        
+        console.log("Deleting Review for...",itemCode);
+        
+        this.http.delete(userServiceUrl+itemCode, options)
+        .subscribe(data => {
+           console.log("Deleted Review");
+        }, error => {
+            console.log(error.json());
+        });
+    }
 
     get itemCode(): string { return this.value; }
 

ecm/Angular/trunk/src/app/user-review/review-manager/review-manager.component.html

@@ -2,23 +2,24 @@
 <!--         <div class="user-review-card"> -->
 <!-- 			<span class="review-card-info">My Reviews</span> -->
 <!-- 		</div> -->
-		<review-screen [editMode] = "editMode" [reviewList]='reviewList' [userReview]="userReview"></review-screen>
 
-		<div class="user-review-edit-button" *ngIf="editMode == 'V' ">
-		<button md-button class="review-card-delete-button" (click)="remove();" >
-			<i class="material-icons review-card-delete-icon">delete</i>
-		</button>
-		<button md-button class="review-edit-button" (click)="edit();" >
-			<i class="material-icons edit-icon-change">edit</i> Edit
-		</button>
-		</div>
+<review-screen [editMode] = "editMode" [isNullReview]="isNullReview" [userReview]="userReview"></review-screen>
+
+<div class="user-review-edit-button" *ngIf="editMode == 'V' && !isNullReview">
+	<button md-button class="review-card-delete-button" (click)="confirmDialog();" >
+		<i class="material-icons review-card-delete-icon">delete</i>
+	</button>
+	<button md-button class="review-edit-button" (click)="edit();" >
+		<i class="material-icons edit-icon-change">edit</i> Edit
+	</button>
+</div>
 		
 
-		<div class="review-save-cancel-button" *ngIf="editMode == 'E' ">
-		<button md-button class="cancel-review-button" (click)="cancel(); " >
-				 Cancel
-		</button>
-		<button md-button class="save-review-button" (click)="save(); " >
-			 Publish
-		</button>
-		</div>
+<div class="review-save-cancel-button" *ngIf="editMode == 'E'">
+	<button md-button class="cancel-review-button" (click)="cancel(); " >
+			 Cancel
+	</button>
+	<button md-button class="save-review-button" (click)="save(); " >
+		 Publish
+	</button>
+</div>

ecm/Angular/trunk/src/app/user-review/review-manager/review-manager.component.ts

 import { Component, OnInit, Output, EventEmitter, ViewEncapsulation, Input, ElementRef } from '@angular/core';
+import { MdDialog } from '@angular/material';
+
 import { Review } from './review.model';
 import { Reviews } from '../../ecm-model/product-review.model';
 import { IScreenEditor } from '../screen-editor';
 import { UserReviewService } from '../ecm-user-review.service';
+import { ECMConfirmDialog } from '../../ecm-view/ecm-cart/ecm-cart.component';
 
 import { Observable } from 'rxjs/Observable';
 
@@ -25,14 +28,12 @@ export class ReviewEditor implements OnInit {
     
     itemCode;
     oldReview : Review;
+    isNullReview: boolean = true;
 
     @Input() userReview: Reviews;
 
-    constructor(private userReviewService:UserReviewService){
-        this.userReview = new Reviews();
-        
-        this.userReview.productRemarks = "";
-        this.userReview.productComments = "";
+    constructor(private userReviewService:UserReviewService, public dialog: MdDialog){
+
     }
 
     ngOnInit() {
@@ -44,20 +45,29 @@ export class ReviewEditor implements OnInit {
                 this.itemCode = 'L2D0140006';
             }
             /* */
+            this.initializeUserReview();
+            
             this.userReviewService.getUserReview(this.itemCode).subscribe(
                    userReview => {
-                       if(userReview && userReview!=null){
+                       
+                       if(Object.keys(userReview).length){
+                           this.isNullReview = false;
                            this.userReview.productRating = userReview.rating;
                            this.userReview.productRemarks = userReview.remarks;
                            this.userReview.productComments = userReview.comments;
                        }
-                       this.userReview.item_code = this.itemCode;
-                       /* Remove */
-                       this.userReview.reviewBy = 'BASE';
                    }
             );        
     }
     
+    initializeUserReview(){
+        this.userReview = new Reviews();
+        
+        this.userReview.productRemarks = "";
+        this.userReview.productComments = "";
+        this.userReview.productRating = 0;
+        this.userReview.item_code = this.itemCode;
+    }
     
     edit() {
         this.oldReview = this.simpleClone( this.reviewList );
@@ -87,6 +97,29 @@ export class ReviewEditor implements OnInit {
     
     simpleClone(obj: any) {
         return Object.assign({}, obj);
-      }
+    }
+    
+    remove() {
+        this.userReviewService.removeReview(this.itemCode);
+        this.initializeUserReview();
+    }
+    
+    confirmDialog() {
+        let dialogRef = this.dialog.open( ECMConfirmDialog,{
+            width:'300px',
+            height:'180px',
+            disableClose: true
+        });
+        dialogRef.componentInstance.dialogTitle = "Remove Review ?";
+        //dialogRef.componentInstance.confirmMsg = "Would you like to remove item from cart?";
+        dialogRef.componentInstance.cancelText = "No";
+        dialogRef.componentInstance.confirmText = "Yes";
+        dialogRef.afterClosed().subscribe( result => {
+            if( result == 'true')
+            {
+                this.remove();
+            }
+        });
+    }
 
 }

ecm/Angular/trunk/src/app/user-review/review-manager/review-screen/review-screen.component.css

@@ -57,3 +57,31 @@ font-size: 14px;
 	      display: none !important;
 	  }
 }
+
+.write-review-button {
+	padding: 15px;
+	display: block;
+    vertical-align: middle;
+    height: 50px;
+    width: 190px;
+/*     max-width: 190px; */
+    text-align: center;
+    line-height: 50px;
+    color: mediumvioletred;
+    cursor: pointer;
+    float: right;
+    box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
+    line-height: 15px;
+    font-size: 15px;
+}
+
+.write-review-text {
+	font-size: 14px;
+    font-weight: bold;
+}
+
+.edit {
+    vertical-align: sub;
+    font-size: 18px;
+}
+

ecm/Angular/trunk/src/app/user-review/review-manager/review-screen/review-screen.component.html

@@ -3,31 +3,40 @@
 
 
 <ng-template #displayTemplate>
-<div class="user-review-info">
-
-<!-- <div class="large-2 columns"> -->
-<!--  <img class="ecm-product-image" src="/ecm/assets/images/items/L2D0100058.png" /> -->
-<!-- </div> -->
-
-<div>
-<!-- <div>  -->
-<!-- 	<span class="category-name">{{reviewList?.itemCategory}}</span> -->
-<!-- </div> -->
-<div> 
-	<rating [rate]="userReview?.productRating"></rating>
-</div>
-<div class="user-review-title"> 
-	<span class="review-title">{{userReview?.productRemarks}}</span>
-</div>
-<!-- <div class="items-seller-info">  -->
-<!-- 	<span class="seller-info">{{reviewList?.sellerInfo}}</span> -->
-<!-- </div> -->
-<div class="item-review"> 
-<!-- 	<span class="item-review">{{reviewList?.itemdescription}}</span> -->
-	 <ecm-readmore [text]="userReview?.productComments" [maxLength]="112"></ecm-readmore>
-</div>
+<div class="user-review-info" *ngIf="!isNullReview">
+
+	<!-- <div class="large-2 columns"> -->
+	<!--  <img class="ecm-product-image" src="/ecm/assets/images/items/L2D0100058.png" /> -->
+	<!-- </div> -->
+	
+	<div>
+	<!-- <div>  -->
+	<!-- 	<span class="category-name">{{reviewList?.itemCategory}}</span> -->
+	<!-- </div> -->
+	<div> 
+		<rating [rate]="userReview?.productRating"></rating>
+	</div>
+	<div class="user-review-title"> 
+		<span class="review-title">{{userReview?.productRemarks}}</span>
+	</div>
+	<!-- <div class="items-seller-info">  -->
+	<!-- 	<span class="seller-info">{{reviewList?.sellerInfo}}</span> -->
+	<!-- </div> -->
+	<div class="item-review"> 
+	<!-- 	<span class="item-review">{{reviewList?.itemdescription}}</span> -->
+		 <ecm-readmore [text]="userReview?.productComments" [maxLength]="112"></ecm-readmore>
+	</div>
+	</div>
 </div>
+
+<div *ngIf="isNullReview">
+	<button md-button class="write-review-button" (click)="showEditMode();">
+		<i class="material-icons edit">&#xE254;</i> 
+		<span md-button class="write-review-text"> Write a Review </span>
+	</button>
 </div>
+
+
 </ng-template>
 
 
@@ -46,7 +55,7 @@
   </div>
   <div class="input-review-title">
   <md-form-field class="review">
-      <textarea mdInput  [placeholder]="'Title'" [(ngModel)]="userReview.productRemarks"></textarea>
+      <input mdInput  [placeholder]="'Title'" [(ngModel)]="userReview.productRemarks">
   </md-form-field>
   <md-form-field class="itemList-review">
       <textarea mdInput [placeholder]="'Review'" [(ngModel)]="userReview.productComments"></textarea>

ecm/Angular/trunk/src/app/user-review/review-manager/review-screen/review-screen.component.ts

@@ -10,13 +10,14 @@ import { Reviews } from '../../../ecm-model/product-review.model';
 export class ReviewScreenComponent implements OnInit {
 
     @Input() editMode: string = 'V';
-    @Input() reviewList: Review;
+//    @Input() reviewList: Review;
     @Input( 'userReview' ) userReview: Reviews;
-
+    @Input( 'isNullReview' ) isNullReview: boolean;
 
     constructor() { }
 
     ngOnInit() {
+        console.log('userReview:',this.userReview,this.isNullReview);
     }
 
     updateRate( updatedRate ) {