Updated

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

ecm/Angular/ProteusECM/trunk/src/app/ecm-header/ecm-header.component.css

@@ -354,6 +354,7 @@ ecm-search{
 */
 .mat-dialog-container {
 	padding: 0px !important;
+	max-width: 100%  !important;
 }
         
 .mobile-search{
@@ -368,3 +369,8 @@ ecm-search{
 	color: #fff;
 	background-color: mediumvioletred; 
 }
+
+.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
+    opacity: 1 !important;
+    background: none !important;
+}

ecm/Angular/ProteusECM/trunk/src/app/ecm-header/ecm-header.component.html

 <ecm-nav-menu class="fixed-header-nav"> </ecm-nav-menu>
 
-<!-- Overlay Start -->
+<!-- Overlay Start 
 <div #bgGlass class="ecm-bgGlass"></div>
 <div #overlayPanel class="overlayPanel" >
 	<span (click)="hideOverlayPanel();" class="hide-button"></span>
 	<ecm-signin *ngIf="sideOption=='USER_OPT'" (closePanel)="hideOverlayPanel(); createUserData();" ></ecm-signin>
 </div>
-<!-- Overlay End -->
+Overlay End -->
 
-<!-- SlidePanel Start -->
+<!-- SlidePanel Start 
 <div #rightSlidePanel class="rightSlidePanel" [ngClass]="{'width-300': ( sideOption=='CART_OPT' && (cartItems | async)?.length == 0 ) }" >
 	<span (click)="hideSidePanel();" class="hide-button"></span>
 	<ecm-user-option *ngIf="sideOption=='USER_OPT'" (closePanel)="hideSidePanel(); createUserData();" (updateProfileImages) = "updateProfileImages();" ></ecm-user-option>
@@ -16,10 +16,15 @@
 		<ecm-cart [isMiniCart] = 'true' (closePanel)="hideSidePanel();" ></ecm-cart>	
 	</div>
 </div>
-<!-- SlidePanel End -->
-<div *ngIf="isFixedHeader; then floatHeader " ></div>
+ SlidePanel End -->
 
-<section *ngIf="!isFixedHeader" class="fixed-header-section" style="opacity: 1; display: block;">
+<ecm-panel #ecmPanel>
+
+</ecm-panel>
+
+<div *ngIf="!isFixedHeader; then floatHeader " ></div>
+
+<section *ngIf="isFixedHeader" class="fixed-header-section" style="opacity: 1; display: block;">
 	<ng-container *ngTemplateOutlet="fixedHeader"></ng-container>
 </section>
 
@@ -27,8 +32,8 @@
 	<section class="header-section visible">
 		<div class="input-container-bg" [@fadeState]="headerFadeState"></div>
 		<div class="input-container">
-			<img *ngIf="userData" mdTooltip="Click here to Manage Account" [mdTooltipPosition]="'below'" [src]="profileImageLink" onerror="this.src = '/ecm/assets/images/w_user_128_128.png'; " class="user-adj user-image-128" title= "{{userData.name}}" (click)="showSidePanel('USER_OPT');" [@userState]="headerFadeState" /> 
-			<img *ngIf="!userData" mdTooltip="Click here for Login" [mdTooltipPosition]="'below'" (click)="showOverlayPanel('USER_OPT');" class="img-user user-adj" [@userState]="headerFadeState" src="w_user_128_128.png"/>
+			<img *ngIf="userData" mdTooltip="Click here to Manage Account" [mdTooltipPosition]="'below'" (click)="userAction();" [src]="profileImageLink" onerror="this.src = '/ecm/assets/images/w_user_128_128.png'; " class="user-adj user-image-128" title= "{{userData.name}}" [@userState]="headerFadeState" /> 
+			<img *ngIf="!userData" mdTooltip="Click here for Login" [mdTooltipPosition]="'below'" (click)="userAction();" class="img-user user-adj" [@userState]="headerFadeState" src="w_user_128_128.png"/>
 			<div class="row">
 				<div class="small-12 medium-10 large-10 medium-centered column">
 					<img class="img-logo logo-adj" [@l2dLogoTrans]="headerFadeState" src="logo.png" />
@@ -53,10 +58,14 @@
 
 <ng-template #fixedHeaderLarge>
 	<md-toolbar color="primary">
+		<span class="ecm-menu-icon"></span>
+		<span class="ecm-menu-icon"></span>
+		<span class="ecm-menu-icon"></span>
+		
 	    <img class="fixed-header-logo img-logo-32" src="logo_32_32.svg" /> 
 	    <span class="siteHeading">{{siteHeading}}</span>
 	    <ecm-search [compFadeState]="headerFadeState" [headerState]="'fixed'"></ecm-search>
-	    <span [ngClass]="{'cart-span': sideOption=='CART_OPT'}" (click)="cartAction();" >
+	    <span (click)="cartAction();" >
 			<button md-button class="square-button">
 				<span *ngIf="(cartItems | async)?.length!=0" class="fixed-header-badge">{{(cartItems | async)?.length}}</span>
 				<img  mdTooltip="Show Cart" [mdTooltipPosition]="'below'" class="fixed-header-cart img-cart-32" src="cart_32_32.svg"/> 
@@ -64,7 +73,7 @@
 				<!--<md-icon  class="example-icon">shopping_cart</md-icon>-->
 			</button>
 	    </span> 
-	    <span [ngClass]="{'user-span': userData && sideOption=='USER_OPT'}" (click)="userAction();" >
+	    <span (click)="userAction();" >
 			<button md-button class="square-button">
 				<img *ngIf="userData" mdTooltip="Click here to Manage Account" [mdTooltipPosition]="'below'" [src]="profileImageLink" onerror="this.src = '/ecm/assets/images/svg/user_32_32.svg'; this.className = 'fixed-header-no-user'"  title="{{userData.name}}" [ngClass]="( userImage.src.indexOf('/ibase/') > 0 ) ? 'fixed-header-user' : 'fixed-header-no-user' " #userImage/>
 				<img *ngIf="!userData" mdTooltip="Click here for Login" [mdTooltipPosition]="'below'" class="fixed-header-no-user img-user-32" src="user_32_32.svg"/>
@@ -80,11 +89,11 @@
      	<span class="siteHeading">{{siteHeading}}</span>
      	<span class="toolbar-spacer"></span>
 	    <span>
-			<button md-button class="square-button" (click)="openDialog($event);" style="position: inherit;">
+			<button md-button class="square-button" (click)="searchAction();" style="position: inherit;">
 				 <i class="material-icons mobile-search">search</i>
  			</button>
 	    </span>
-	    <span [ngClass]="{'cart-span': sideOption=='CART_OPT'}" (click)="cartAction();" >
+	    <span (click)="cartAction();" >
 			<button md-button class="square-button">
 				<span *ngIf="cartCounter > 0" class="fixed-header-badge">{{ cartCounter }}</span>
 				<img  mdTooltip="Show Cart" [mdTooltipPosition]="'below'" class="fixed-header-cart img-cart-32" src="cart_32_32.svg"/> 
@@ -92,7 +101,7 @@
 				<!--<md-icon  class="example-icon">shopping_cart</md-icon>-->
 			</button>
 	    </span> 
-	    <span [ngClass]="{'user-span': userData && sideOption=='USER_OPT'}" (click)="userAction();" >
+	    <span (click)="userAction();" >
 			<button md-button class="square-button">
 				<img *ngIf="userData" mdTooltip="Click here to Manage Account" [mdTooltipPosition]="'below'" [src]="profileImageLink" onerror="this.src = '/ecm/assets/images/svg/user_32_32.svg'; this.className = 'fixed-header-no-user'"  title="{{userData.name}}" [ngClass]="( userImage.src.indexOf('/ibase/') > 0 ) ? 'fixed-header-user' : 'fixed-header-no-user' " #userImage/>
 				<img *ngIf="!userData" mdTooltip="Click here for Login" [mdTooltipPosition]="'below'" class="fixed-header-no-user img-user-32" src="user_32_32.svg"/>

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

 import { Component, Input, Output, Inject, OnInit, OnDestroy, ViewEncapsulation, HostListener, ElementRef, ViewChild, trigger, state, animate, transition, style } from '@angular/core';
 import { DOCUMENT } from '@angular/platform-browser';
 import { ActivatedRoute, Router,ActivatedRouteSnapshot,RoutesRecognized } from '@angular/router';
-import { MdDialog, MdDialogRef } from '@angular/material';
 
 import { Observable } from 'rxjs/Observable';
 import { Store } from '@ngrx/store';
 import { AppState } from '../ecm-store/reducers';
 import { Item } from '../ecm-model/product-model';
 import { RESIZE_EVENT } from '../ecm-store/ecm-resize';
+import { EcmPanelComponent } from '../ecm-view/ecm-panel/ecm-panel.component';
 
 import { ScrollService } from '../scroll.service';
 import { EcmCartService } from '../ecm-view/ecm-cart/ecm-cart.service';
@@ -80,16 +80,12 @@ declare var enableScroll: any;
 })
 
 export class ECMHeaderComponent implements OnInit, OnDestroy {
-
-    @ViewChild( 'rightSlidePanel' ) rightSlidePanel: ElementRef;
-    @ViewChild( 'overlayPanel' ) overlayPanel: ElementRef;
-    @ViewChild( 'bgGlass' ) bgGlass: ElementRef;
     @Input() siteHeading: any = 'Local2do';
-    @Input() isFixedHeader: boolean = true;
+    @Input() isFixedHeader: boolean = false;
     @Input() headerFadeState = 'false';
     @ViewChild( 'userImage' ) userImage: ElementRef; 
+    @ViewChild( 'ecmPanel' ) ecmPanel: EcmPanelComponent;
 
-    dialogRef:any;
     selectedOption: string;
     userData: any;
     sideOption: any;
@@ -97,7 +93,7 @@ export class ECMHeaderComponent implements OnInit, OnDestroy {
     cartCounter: number;
     profileImageLink : string;
     clientWidth: any;
-    constructor( @Inject( DOCUMENT ) private document: Document, private route: ActivatedRoute, private router: Router, private scroll_service: ScrollService, private store: Store<AppState>, public dialog: MdDialog, public cartService: EcmCartService) { }
+    constructor( @Inject( DOCUMENT ) private document: Document, private route: ActivatedRoute, private router: Router, private scroll_service: ScrollService, private store: Store<AppState>, public cartService: EcmCartService) { }
 
     ngOnInit() {
         console.log( 'ECMHeaderComponent onInit' );
@@ -138,7 +134,7 @@ export class ECMHeaderComponent implements OnInit, OnDestroy {
             scrollTop = window.scrollY;
         }
 
-        if ( this.isFixedHeader ) {
+        if ( ! this.isFixedHeader ) {
             if ( scrollTop > 10 && scrollTop < 50 ) {
                 this.headerFadeState = 'true';
             } else if ( scrollTop > 50 && scrollTop < 150 ) {
@@ -178,49 +174,92 @@ export class ECMHeaderComponent implements OnInit, OnDestroy {
     }
     
     userAction() {
-      if( this.userData ){
-        this.showSidePanel('USER_OPT');
+        this.createUserData();
+
+//        if ( this.userData )
+//            this.ecmPanel.open('USER_OPT');
+//        else
+//            this.ecmPanel.open('SIGNIN_OPT');
+//            
+//        if( this.clientWidth < 640 )
+//        {
+//            //show overlay  with user-option
+//            this.ecmPanel.updatePosition({ top:'0px', left: '0px' });
+//            this.ecmPanel.updateSize({ width:'100%', height: '100%' });
+//        }
+//        else 
+//        {
+//            if ( this.userData )
+//            {
+//                //show sidepanel with user-option
+//                this.ecmPanel.updatePosition({ top:'65px', right: '20px' });
+//                this.ecmPanel.updateSize({ width:'300px', height: '400px' });
+//            }
+//            else {
+//                //show overlay with sign-in-option
+//                this.ecmPanel.updatePosition({ top:'100px', left: 'calc( 50% - 375px / 2 )' });
+//                this.ecmPanel.updateSize({ width:'375px', height: '535px' });
+//            }
+//        }
+
+        if( this.clientWidth < 640 )
+        {
+            //show overlay  with user-option
+            if ( this.userData )
+            {
+                this.ecmPanel.open({ type: 'overlay', option: 'USER_OPT', top:'0px', left: '0px', width:'100%', height: '100%' });
+            }
+            else
+            {
+                this.ecmPanel.open({ type: 'overlay', option: 'SIGNIN_OPT', top:'0px', left: '0px', width:'100%', height: '100%' });
+            }
+        }
+        else 
+        {
+            if ( this.userData )
+            {
+                //show sidepanel with user-option
+                this.ecmPanel.open({ type: 'inplace', option: 'USER_OPT', top:'65px', right: '20px', width:'300px', height: '400px' });
+            }
+            else
+            {
+                //show overlay with sign-in-option
+                this.ecmPanel.open({ type: 'overlay', option: 'SIGNIN_OPT', top:'100px', left: 'calc( 50% - 375px / 2 )', width:'375px', height: '535px' });
             }
-      else{
-        this.showOverlayPanel('USER_OPT');
         }        
     }
 
     cartAction() {
         let openRoutePath = this.route.snapshot.url[0].path;
+        this.cartItems.subscribe(items => this.cartCounter = items.length);
+        
         if(openRoutePath !== 'cart')
         {
-            this.showSidePanel('CART_OPT');
+            if( this.clientWidth < 640 )
+            {
+              this.router.navigate(['/cart']);
             }
+            else
+            {
+               //show sidepanel with cart-option
+               if(this.cartCounter == 0)
+               {
+                   this.ecmPanel.open({ type: 'inplace', option: 'CART_OPT', top:'65px', right: '75px', width:'300px' });
                }
-
-    openTime:any;
-    showSidePanel( opt: any ) {
-        this.openTime = new Date();
-        console.log( 'ShowSidePanel : ' + opt );
-        this.rightSlidePanel.nativeElement.style.display = "block";
-        this.sideOption = opt;
+               else
+               {
+                   this.ecmPanel.open({ type: 'inplace', option: 'CART_OPT', top:'65px', right: '75px', width:'360px', height: '400px' });
                }
-
-    hideSidePanel() {
-        this.rightSlidePanel.nativeElement.style.display = "none";
-        this.sideOption = null;
             }
-
-    showOverlayPanel( opt: any ) {
-        this.overlayPanel.nativeElement.style.display = "block";
-        this.bgGlass.nativeElement.style.display = "block";
-        //document.body.style.overflow = "hidden";
-	      disableScroll();
-        this.sideOption = opt;
         }
+    }
+    
+    searchAction() {
+        //show overlay(height:60px) with ecm-search
+        this.ecmPanel.open('SEARCH_OPT');
+        this.ecmPanel.updatePosition({ top:'0px', left: '0px' });
+        this.ecmPanel.updateSize({ width:'100%', height: '60px' });
         
-    hideOverlayPanel() {
-        this.overlayPanel.nativeElement.style.display = "none";
-        this.bgGlass.nativeElement.style.display = "none";
-        document.body.style.overflow = "visible";
-	      enableScroll();
-        this.sideOption = null;
     }
 
     updateProfileImages() {
@@ -239,56 +278,6 @@ export class ECMHeaderComponent implements OnInit, OnDestroy {
         console.log(this.userImage.nativeElement.src.indexOf('/ecm/'));
     }
     
-    openDialog(event) {
-        console.log('in open dialog event');
-        let dialogRef = this.dialog.open(ECMSearchDialog,{
-        	width:'100%',
-        	height:'60px',
-        	disableClose: true
-    	});
-      	dialogRef.updatePosition({ top:'0px', left: '0px' });
-      	dialogRef.afterClosed().subscribe(result => {
-      		this.selectedOption = result;
-    	});
-  	}
-    
-    @HostListener('document:click', ['$event'])
-    clickout(event) {
-      let isVisible = this.rightSlidePanel.nativeElement.style.display == 'block';
-      if( isVisible ) {
-        let diff = new Date().getMilliseconds() - this.openTime.getMilliseconds();
-        if( diff > 300 || diff < 0 )  {
-            if( ! this.rightSlidePanel.nativeElement.contains(event.target)) {
-              this.hideSidePanel();  
-            }
-        }
-      }
-    }
 }
 
-@Component({
-  selector: 'ecm-search-dialog',
-  templateUrl: './ecm-search-dialog.html',
-  styleUrls: ['./ecm-header.component.css'],
-})
-export class ECMSearchDialog {
-    
-    constructor(public dialogRef: MdDialogRef<ECMSearchDialog>) {}
-    
-    ngAfterViewChecked()
-    {   
-        let widthScreen = document.documentElement.clientWidth;
-        console.log('document client width: '+widthScreen);
-        if( widthScreen > 639)
-        {
-            this.dialogRef.close();
-        }
-    }
-    
-    closePanel()
-    {
-        console.log('Inside closePanel to hide dialogRef');
-        this.dialogRef.close();
-    }
 
-} 

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

 
-<ecm-header #header [isFixedHeader]=false> </ecm-header>
+<ecm-header #header [isFixedHeader]=true> </ecm-header>
 <ecm-breadcrumbs *ngIf="itemDetail" [pageName]="'DETAIL'" [itemDetail]='itemDetail'></ecm-breadcrumbs>
 
 <div class="row">

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

@@ -5,7 +5,7 @@ import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';
 
 import { AppState } from '../ecm-store/reducers';
-import { CartActions } from '../ecm-store/actions';
+import { CartActions, ItemActions, WishListActions } from '../ecm-store/actions';
 
 import { EcmProductDetailService } from './ecm-product-detail.service';
 import { ScrollService } from '../scroll.service';
@@ -53,7 +53,7 @@ export class EcmProductDetailsComponent implements OnInit {
   attribVal;
   attribCode;
   
-  constructor(private route: ActivatedRoute, private router:Router, public productDetailService: EcmProductDetailService, public snackBar: MdSnackBar, private store: Store<AppState>,  private productreviewService: EcmProductReviewService, public dialog: MdDialog, private cartActions: CartActions) { }
+  constructor(private route: ActivatedRoute, private router:Router, public productDetailService: EcmProductDetailService, public snackBar: MdSnackBar, private store: Store<AppState>,  private productreviewService: EcmProductReviewService, public dialog: MdDialog, private cartActions: CartActions, private itemAction:ItemActions, private wishListAction:WishListActions) { }
 
   ngOnInit() {
 	    this.route.params.subscribe( params => {
@@ -62,10 +62,21 @@ export class EcmProductDetailsComponent implements OnInit {
           this.itemCode = params['itemCode'];
            console.log( 'ngOnInit itemCode[' + this.itemCode + ']' );
            window.scrollTo(0,0);
+           this.getItemFromStore();
            this.getItemDetail(this.itemCode);
        });
   }
   
+  getItemFromStore(){
+      let items: Observable<Item[]> = this.store.select('items');
+      let item;
+  
+      items.subscribe( items => {
+          item = items.find(x => x.itemCode === this.itemCode);
+          this.store.dispatch( this.itemAction.getItemSuccess(item) );
+      });
+  }
+  
   getItemDetail( itemCode: string ) {
       
       this.store.select('item')
@@ -148,7 +159,7 @@ export class EcmProductDetailsComponent implements OnInit {
        
         if(this.checkUser() !== 'undefined' && this.checkUser() !== null && this.checkUser() !== 'null')
         {
-            this.addToWishlist(data.itemCode);
+            this.addToWishlist(data.item);
             $event.caller[$event.callBack]();
             this.showSnackbar('Item Added to your Wishlist');
         }
@@ -158,7 +169,7 @@ export class EcmProductDetailsComponent implements OnInit {
         }
     }
     else if( activity == 'REMOVE_WISHLIST' ) {
-            this.removeFromWishlist(data.itemCode);
+            this.removeFromWishlist(data.item);
             this.showSnackbar('Item Removed from your Wishlist');
     }
     else if( activity == 'BOOK_NOW' ) {
@@ -216,37 +227,20 @@ export class EcmProductDetailsComponent implements OnInit {
         cartData.phyAttribId1 = this.attribVal;
     }
     */
-    
+    item.itemQuantity = 1;
     this.store.dispatch(this.cartActions.addToCartSuccess(item));
     //this.store.dispatch({ type: ADD_TO_CART, payload: cartData });
     //this.productDetailService.addToCart(cartData);
-    
-    //Check Store data
-    this.store.select('cartItems').forEach(
-      value => { 
-          console.log('Cart Items----');
-          console.log(value);
   }
-    );
-
-  }
-
-  addToWishlist( itemCode ) {
-    let cartData = new Item;
-    cartData.itemCode = itemCode;
-    cartData.costRate = this.itemDetail.itemHeader.itemDiscountedRate;
-    cartData.descr = this.itemDetail.itemHeader.itemDescr;
-    cartData.shDescr = this.itemDetail.itemHeader.itemShDescr;
 
-    //this.store.dispatch({ type: ADD_TO_WISHLIST, payload: cartData });
-    this.productDetailService.addToWishlist( itemCode );      
+  addToWishlist( item ) {
+    this.store.dispatch(this.wishListAction.addToWishlistSuccess(item));
+    this.productDetailService.addToWishlist( item.itemCode );   
   }
 
-  removeFromWishlist( itemCode ) {
-      let cartData = new Item;
-      cartData.itemCode = itemCode;
-      //this.store.dispatch({ type: REMOVE_WISLIST, payload: cartData });
-      this.productDetailService.removeFromWishlist( itemCode );
+  removeFromWishlist( item ) {
+      this.store.dispatch(this.wishListAction.deleteWishlistItemSuccess(item));
+      this.productDetailService.removeFromWishlist( item.itemCode );
   }
 
   showSnackbar( message ) {
@@ -269,7 +263,7 @@ export class EcmProductDetailsComponent implements OnInit {
   showSignInPanel()
   {
       console.log('showSignin');
-      this.header.showOverlayPanel('USER_OPT');
+      this.header.userAction();
   }
   
   checkUser(){

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

@@ -41,7 +41,7 @@ export class EcmHandicraftComponent implements OnInit, EcmTemplateInterface {
 
     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";
 
-    constructor( private route: ActivatedRoute, private router: Router, private http: Http, public dialog: MdDialog, private store: Store<AppState> ) { }
+    constructor( private route: ActivatedRoute, private router: Router, private http: Http, public dialog: MdDialog, private store: Store<AppState>) { }
 
     ngOnInit() {
         
@@ -64,7 +64,7 @@ export class EcmHandicraftComponent implements OnInit, EcmTemplateInterface {
                 this.isAddToCart = false;
         } );
 
-        this.wishlistItems = this.store.select('wishlist');
+        this.wishlistItems = this.store.select('wishlistItems');
         this.wishlistItems.subscribe( wishlistItems => {
             if(wishlistItems.find(x => x.itemCode === this.itemDetail.itemCode))
                 this.inWishlist = true;
@@ -92,7 +92,6 @@ export class EcmHandicraftComponent implements OnInit, EcmTemplateInterface {
     }
     
     viewItem(itemCode) {      
-        // this.recentviewService.storeRecentViewItem(this.itemData.itemCode);      
          this.router.navigate(['/detail',itemCode]);
      }
     
@@ -102,12 +101,12 @@ export class EcmHandicraftComponent implements OnInit, EcmTemplateInterface {
     }
     
     addToWishlist() {
-        this.doActivity.emit( { activity: 'ADD_WISHLIST', data: { 'itemCode': this.itemDetail.itemCode }, 'caller': this, 'callBack': 'changeStatus' });
+        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: { 'itemCode': this.itemDetail.itemCode } });
+        this.doActivity.emit( { activity: 'REMOVE_WISHLIST', data: { 'item': this.itemDetail } });
     }
 
     changeStatus() {

ecm/Angular/ProteusECM/trunk/src/app/ecm-search/ecm-search-result/ecm-search-result.component.html

-<ecm-header [isFixedHeader]=false> </ecm-header>
+<ecm-header [isFixedHeader]=true> </ecm-header>
 
 <ecm-breadcrumbs [pageName]="'SEARCH'"> </ecm-breadcrumbs>
 

ecm/Angular/ProteusECM/trunk/src/app/ecm-search/ecm-search.component.html

@@ -26,7 +26,6 @@
 		<div md-ripple class="location" (click)="loacteMe();">
 			<img class="location-img-32" src="location_32_32.svg"/> 
 			<span class="location-text">{{ userLocation.address ? userLocation.address : 'Locate Me' }}</span>
-			<i class="material-icons location-arrow">keyboard_arrow_down</i>
 		</div>
     	<input class="sb-search-submit" type="submit" (click)="search(myInput.value)">	
 				

ecm/Angular/ProteusECM/trunk/src/app/ecm-search/ecm-search.component.ts

@@ -29,8 +29,7 @@ import { FormControl } from '@angular/forms';
        state('fade600', style({ transform : ' translateY(-250px) scale(0.35)' })),
        transition('* <=> *', animate('.3s'))
     ])
-   ],
-   providers: [EcmLocationService]
+   ]
 })
 export class ECMSearchComponent implements OnInit {
 

ecm/Angular/ProteusECM/trunk/src/app/ecm-signin/ecm-signin.component.css

@@ -27,7 +27,9 @@ h6
 	padding-bottom: 1px;
 }
 
-.signin-form
+.signin-form,
+.verifyForm-form,
+.changePass-form
 {
     position: relative;
 /*     left: calc( ( 100% / 2 ) - 200px ); */
@@ -67,7 +69,7 @@ h6
 	
 	.logo-adj {
 		padding: 25px;	
-		padding-top: 100px;	
+		padding-top: 50px;	
 	}
 
 	.signin-button,
@@ -146,3 +148,13 @@ h6
 .signin-progress-bar {
  
 }
+
+.statusError{
+	position: relative;
+    font-size: 75%;
+    top: 100%;
+    width: 65%;
+    margin-top: -1.2em;
+    line-height: 1.2em;
+    overflow: hidden;
+}

ecm/Angular/ProteusECM/trunk/src/app/ecm-signin/ecm-signin.component.html

@@ -3,45 +3,100 @@
 	    <div class="signin-form-adj" >
 			<img class="img-logo logo-adj" src="logo.png" />
 	    </div>
+		<div *ngIf="activeForm == 'signInForm'" >
+			<ng-container *ngTemplateOutlet="signInForm"></ng-container>
+		</div>
+		<div  *ngIf="activeForm == 'verifyForm'" >
+			<ng-container *ngTemplateOutlet="verifyForm"></ng-container>
+		</div>
+		<div  *ngIf="activeForm == 'changePassForm'" >
+			<ng-container *ngTemplateOutlet="changePassForm"></ng-container>
+		</div>
+		<div  *ngIf="activeForm == 'successForm'" >
+			
+		</div>
+    </div>
+</div>
+
+<ng-template #signInForm >
 	<div class="signin-form">
 	    <h4>Login to continue</h4>   
-		    <form #signin="ngForm"  (ngSubmit)="login();" novalidate autocomplete="off">
+	    <form #signin="ngForm" (ngSubmit)="login(signin);" novalidate autocomplete="off">
 			<md-input-container class="username-input-container" [hideRequiredMarker] = "true">
-			 	     <input mdInput class="username-input" placeholder="User Name" required name="username" [(ngModel)]="_username" #username="ngModel" (keydown)=" loginErrorMsg = null;" />
+		 	     <input mdInput class="username-input" placeholder="User Name" required name="username" 
+		 	     #username="ngModel" [(ngModel)]="_username" (keydown)="clearTimer();"  type = 'text' 
+		 	     #usernameElem (focus) = "scrollIntoView(usernameElem);" />
 			     <md-error *ngIf="username.errors && username.dirty" class="">User Name required</md-error> 
     		</md-input-container>
     		<md-input-container class="password-input-container" [hideRequiredMarker] = "true">
-				     <input mdInput class="username-input" placeholder="Password" required name="password" [(ngModel)]="_password" #password="ngModel" (keydown)=" loginErrorMsg = null;"
-				     	[type]="showPass ? 'text' : 'password'"  /> 
+			     <input mdInput class="username-input" placeholder="Password" required name="password" 
+			     #password="ngModel" [(ngModel)]="_password" (keydown)="clearTimer();" type = 'password' 
+			     #passwordElem (focus) = "scrollIntoView(passwordElem);" /> 
 			     <md-error *ngIf="password.errors && password.dirty" class="">Password required</md-error> 
-				     <md-error *ngIf="loginErrorMsg">{{loginErrorMsg}}</md-error> 
-					<!--
-					    <button md-icon-button mdSuffix (click)= "showPass= !showPass;" >
-						<md-icon class="material-icons">mode_edit</md-icon> 
-					    </button> 
-					-->
     		</md-input-container>
-			    <a md-button class="forgot-password" (click)="forgot();">Forgot Password? </a>
+		    <md-error class="statusError" *ngIf="statusErrorMsg">{{statusErrorMsg}}</md-error> 
+		    <a md-button class="forgot-password" (click)="forgot(signin);">Forgot Password? </a>
 			<button md-button class="signin-button" type="submit"  [disabled]="!signin.form.valid">Login</button>
     	</form>
 		<button md-button class="register-button" (click)="register();">Don't have an account ? Register here</button>
-			 <!-- 
-			 <md-progress-spinner  
-			 	  class="example-margin" 
-			 	  [color]="color" 
-			 	  [mode]="mode" 
-			 	  [value]="value">
-			 </md-progress-spinner>
-			 -->
-			 <md-progress-bar *ngIf="loginPending"
+		 <md-progress-bar *ngIf="statusPending"
 	          class="signin-progress-bar"
-		          [color]="primary"
-		          [mode]="mode"
-		          [value]="value"
-		          [bufferValue]="bufferValue">
+	          [color]="'primary'"
+	          [mode]="'indeterminate'"
+	          [value]="50">
 	     </md-progress-bar>
-
     </div>
+</ng-template>
+
+<ng-template #verifyForm >
+	<div class="verifyForm-form">
+	    <h4>Password Reset</h4>   
+	    <form #verifyForm="ngForm" (ngSubmit)="verify(verifyForm);" novalidate autocomplete="off">
+			<md-input-container class="username-input-container" [hideRequiredMarker] = "true">
+		 	     <input mdInput class="username-input" placeholder="Verification Code" required name="verifycode" 
+		 	     #verifycode="ngModel" [(ngModel)]="_verifycode" (keydown)="clearTimer();"  type = 'text' 
+		 	     #verifycodeElem (focus) = "scrollIntoView(verifycodeElem);" />
+			     <md-error *ngIf="verifycode.errors && verifycode.dirty" class="">Verification Code required</md-error> 
+    		</md-input-container>
+    		<md-error class="statusError" *ngIf="statusErrorMsg">{{statusErrorMsg}}</md-error> 
+			<button md-button class="signin-button" type="submit"  [disabled]="!verifyForm.form.valid">Verify</button>
+    	</form>
+		<button md-button class="register-button" [disabled]="verifying" (click)="forgot(verifyForm);">
+			{{verifying ? 'Pending ' + vCounter + ' ...': 'Resend Code'}}
+		</button>
+		<md-progress-bar *ngIf="statusPending"
+	          class="signin-progress-bar"
+	          [color]="'primary'"
+	          [mode]="'indeterminate'"
+	          [value]="50">
+	     </md-progress-bar>
     </div>
-</div>
+</ng-template>
 
+
+
+<ng-template #changePassForm >
+	<div class="changePass-form">
+	    <h4>Change Password</h4>   
+	    <form #changePass="ngForm" (ngSubmit)="changePassword(changePass);" novalidate autocomplete="off">
+			<md-input-container class="password-input-container" [hideRequiredMarker] = "true">
+			     <input mdInput class="username-input" placeholder="New Password" required name="npassword" [(ngModel)]="_npassword" #npassword="ngModel" (keydown)="clearTimer();" type = 'password' 
+			     #npasswordElem (focus) = "scrollIntoView(npasswordElem);" /> 
+			     <md-error *ngIf="npassword.errors && npassword.dirty" class="">Enter your password</md-error> 
+    		</md-input-container>
+    		<md-input-container class="password-input-container" [hideRequiredMarker] = "true">
+			     <input mdInput class="username-input" placeholder="Confirm Password" required name="confirm_password" [(ngModel)]="_confirm_password" #confirm_password="ngModel" (keydown)="clearTimer();" type = 'password' 
+			     #confirm_passwordElem (focus) = "scrollIntoView(confirm_passwordElem);" /> 
+			     <md-error *ngIf="confirm_password.errors && confirm_password.dirty" class="">Enter your password again</md-error> 
+    		</md-input-container>
+    		<md-error class="statusError" *ngIf="statusErrorMsg">{{statusErrorMsg}}</md-error> 
+			<button md-button class="signin-button" type="submit"  [disabled]="!changePass.form.valid">Change Password</button>
+    	</form>
+		 <md-progress-bar *ngIf="statusPending"
+	          class="signin-progress-bar"
+	          [color]="'primary'"
+	          [mode]="'indeterminate'"
+	          [value]="50">
+	     </md-progress-bar>
+    </div>
+</ng-template>

ecm/Angular/ProteusECM/trunk/src/app/ecm-signin/ecm-signin.component.ts

@@ -5,7 +5,7 @@ import 'rxjs/add/operator/catch';
 import 'rxjs/add/operator/map';
 import { Store } from '@ngrx/store';
 import { AppState } from '../ecm-store/reducers';
-import { CartActions } from '../ecm-store/actions';
+import { CartActions, WishListActions } from '../ecm-store/actions';
 
 import { ECMSigninService } from './ecm-signin.service';
 import { EcmCartService } from '../ecm-view/ecm-cart/ecm-cart.service';
@@ -21,31 +21,159 @@ declare var encPwd: any;
 })
 export class EcmSigninComponent implements OnInit {
     
-    @ViewChild('signin') signinFrom: NgForm;
-    @ViewChild('password') passwordRef: NgModel;
+    @Output() closePanel = new EventEmitter();
+    timer : any;
     userData : any;
     showPass : boolean = false;
+ 
+    //@ViewChild('signin') signinFrom: NgForm;
+    //@ViewChild('password') passwordRef: NgModel;
     _username : string;
     _password : string;
-    loginPending: boolean = false;
-    loginErrorMsg: string;
-    @Output() closePanel = new EventEmitter();
+    _npassword: string;
+    _confirm_password: string;
+
+    //@ViewChild('verifyForm') verifyForm: NgForm;
+    _verifycode : string;
+    verifying: boolean = false;
+    vCounter: number = 1;  // verifier counter 
+    verifyTimeout: number = 30;
+    verifyInterval : any; // default upto verifyTimeout seconds 
+
+    _changepassword1 : string;
+    _changepassword2 : string;
 
-    constructor(public signinService: ECMSigninService, private store: Store<AppState>, private cartActions:CartActions,  public cartService: EcmCartService, public wishListService: EcmWishListService) { }
+    statusPending: boolean = false;
+    statusErrorMsg: string;
+
+    constructor(public signinService: ECMSigninService, private store: Store<EcmStoreModel>,  public cartService: EcmCartService, public wishListService: EcmWishListService) { }
+
+    activeForm: any = 'signInForm';
+	activeNGForm: NgForm;
 
     ngOnInit() {
     }
 
+    scrollIntoView(formChildElement){
+        console.log('formChildElement' , formChildElement);
+        clearTimeout(this.timer);
+        this.timer = setTimeout(() => {
+            formChildElement.scrollIntoView(true);
+        }, 500);
+    }
+
+    clearTimer() {
+    	clearTimeout(this.timer);
+    	this.statusErrorMsg = null;
+    }
+
     register() {
         window.open("/ibase/E12Registration/jsp/Registration.jsp");
     }
     
-    forgot() {
-        console.log( "Not Implemented Yet" ); 
+    forgot(signinForm) {
+
+    	this.activeNGForm = signinForm;
+		this.statusPending = true;
+    
+        this.signinService.forgot( this._username ).subscribe(
+            result => {
+                console.log( 'comp results[' + result.Response.results + ']status[' + result.Response.status + ']' );
+                console.log( 'comp result.results.indexOf [' + result.Response.results.indexOf('{') + ']' );
+                this.statusPending = false;
+                this.statusErrorMsg = null;
+                if( result.Response.status == 'success' )
+                {
+                	alert(result.Response.results);
+                	this.activeForm = 'verifyForm';
+                	this.startVerifier();
+                }
+                else if( result.Response.status == 'error' )
+                {
+                    this.activeNGForm.resetForm();
+                    this.statusErrorMsg = result.Response.results;
+                }
+            },
+            error => {
+                let errorMessage = <any>error;
+                console.log( 'comp errorMessage[' + errorMessage + ']' );
+            }
+        );            
+    }
+
+    startVerifier(){
+    	this.verifying = true;
+    	this.verifyInterval = setInterval(() => {
+    		if( this.vCounter < this.verifyTimeout ){
+    			this.vCounter++;
+    		}
+    		else{
+    			this.verifying = false;
+    			clearInterval(this.verifyInterval);
+    			this.vCounter = 1;
+    		}
+        }, 1000);
+    }
+
+    verify(verifyForm) {
+    	this.activeNGForm = verifyForm;
+    	this.statusPending = true;
+        
+        this.signinService.verify( this._username, this._verifycode ).subscribe(
+            result => {
+                console.log( 'comp results[' + result.Response.results + ']status[' + result.Response.status + ']' );
+                console.log( 'comp result.results.indexOf [' + result.Response.results.indexOf('{') + ']' );
+                this.statusPending = false;
+                this.statusErrorMsg = null;
+                if( result.Response.status == 'success' )
+                {
+                	alert(result.Response.results);
+                	this.activeForm = 'changePassForm';
+                }
+                else if( result.Response.status == 'error' )
+                {
+                    this.activeNGForm.resetForm();
+                    this.statusErrorMsg = result.Response.results;
+                }
+            },
+            error => {
+                let errorMessage = <any>error;
+                console.log( 'comp errorMessage[' + errorMessage + ']' );
+            }
+        );
+    }
+
+    changePassword(changePassForm) {
+        this.activeNGForm = changePassForm;
+        this.statusPending = true;
+
+        this.signinService.changePassword( this._username, this._npassword ).subscribe(
+            result => {
+                console.log( 'comp results[' + result.Response.results + ']status[' + result.Response.status + ']' );
+                console.log( 'comp result.results.indexOf [' + result.Response.results.indexOf('{') + ']' );
+                this.statusPending = false;
+                this.statusErrorMsg = null;
+                if( result.Response.status == 'success')
+                {
+                     this.activeForm = 'successForm';
+                }
+                else if( result.Response.status == 'error' )
+                {
+                    this.statusErrorMsg = result.Response.results;
+                    this.activeNGForm.resetForm();
+                }
+            },
+            error => {
+                let errorMessage = <any>error;
+                console.log( 'comp errorMessage[' + errorMessage + ']' );
+            }
+        );
+
     }
     
-    login() {
-        this.loginPending = true;
+    login(signinForm) {
+    	this.activeNGForm = signinForm;
+        this.statusPending = true;
         console.log( "login [" + this._username + "][" + this._password + "]"); 
         this.convertIntoSHA256();
         console.log( "login [" + this._username + "][" + this._password + "]"); 
@@ -68,8 +196,8 @@ export class EcmSigninComponent implements OnInit {
             result => {
                 console.log( 'comp results[' + result.Response.results + ']status[' + result.Response.status + ']' );
                 console.log( 'comp result.results.indexOf [' + result.Response.results.indexOf('{') + ']' );
-                this.loginPending = false;
-                this.loginErrorMsg = null;
+                this.statusPending = false;
+                this.statusErrorMsg = null;
                 if( result.Response.status == 'success' )
                 {
                     if( result.Response.results && result.Response.results.indexOf('{') != -1 )
@@ -83,7 +211,7 @@ export class EcmSigninComponent implements OnInit {
                                     console.log('response[' + response + ']');
                                     if(response){
                                         this.store.dispatch(this.cartActions.loadCartItems());
-                                        //this.wishListService.setWishlistItems();
+                                        this.store.dispatch(this.wishListAction.loadWishlistItems());
                                     }
                                 });
                         
@@ -94,13 +222,13 @@ export class EcmSigninComponent implements OnInit {
                 }
                 else if( result.Response.status == 'error' )
                 {
-                    this.loginErrorMsg = result.Response.results;
+                    this.statusErrorMsg = result.Response.results;
                     localStorage.removeItem('userInfo');
-                    this.signinFrom.resetForm();
-                    console.log( "passwordRef" + Object.keys( this.passwordRef.control.errors ) + "]"); 
-                    if( this.passwordRef.control ) 
+                    this.activeNGForm.resetForm();
+                    //console.log( "passwordRef" + Object.keys( this.passwordRef.control.errors ) + "]"); 
+                    //if( this.passwordRef.control ) 
                     {
-                        this.passwordRef.control.markAsTouched();
+                    //    this.passwordRef.control.markAsTouched();
                     }
                 }
             },

ecm/Angular/ProteusECM/trunk/src/app/ecm-signin/ecm-signin.service.ts

@@ -53,6 +53,73 @@ export class ECMSigninService {
                         .catch(this.handleError);
     }
          
+    forgot(_username: string): Observable<any> {
+        
+        let authUrl = '/ecm/service/sys/auth/forgot';  // URL to web service
+        let _urlParams = new URLSearchParams();
+        _urlParams.append('username', _username);
+        console.log( "forgot 1...." + _urlParams.toString() ); 
+        let headers = new Headers({ 'Content-Type': 'application/json' });
+        let options = new RequestOptions({ headers: headers });
+        authUrl = authUrl + '?' + _urlParams.toString();
+        console.log( "forgot 2...." + authUrl); 
+        return this.http.get( authUrl, options )
+                        .map(this.extractData)
+                        .catch(this.handleError);
+    }
+
+    verify(_username: string, _varcode: string): Observable<any> {
+        
+        let authUrl = '/ecm/service/sys/auth/verify';  // URL to web service
+        let _urlParams = new URLSearchParams();
+        _urlParams.append('username', _username);
+        _urlParams.append('varcode', _varcode);
+        console.log( "verify 1...." + _urlParams.toString() ); 
+        let headers = new Headers({ 'Content-Type': 'application/json' });
+        let options = new RequestOptions({ headers: headers });
+        authUrl = authUrl + '?' + _urlParams.toString();
+        console.log( "verify 2...." + authUrl); 
+        return this.http.get( authUrl, options )
+                        .map(this.extractData)
+                        .catch(this.handleError);
+    }
+
+    /*Called from SIGNIN OPTION Forgot Password Request to Change Password*/
+    changePassword(_username: string, _npassword: string): Observable<any> {
+        
+        let authUrl = '/ecm/service/sys/auth/changePassword';  // URL to web service
+        let _urlParams = new URLSearchParams();
+        _urlParams.append('username', _username);
+        _urlParams.append('npassword', _npassword);
+        console.log( "changePassword 1...." + _urlParams.toString() ); 
+        let headers = new Headers({ 'Content-Type': 'application/json' });
+        let options = new RequestOptions({ headers: headers });
+        authUrl = authUrl + '?' + _urlParams.toString();
+        console.log( "changePassword 2...." + authUrl); 
+        return this.http.get( authUrl, options )
+                        .map(this.extractData)
+                        .catch(this.handleError);
+    }
+
+    /*Called from USER OPTION Change Password Request*/
+    changeCurrentPassword(_username: string, _npassword: string, _cpassword: string, _tokenid: string): Observable<any> {
+        
+        let authUrl = '/ecm/service/sys/auth/changePassword';  // URL to web service
+        let _urlParams = new URLSearchParams();
+        _urlParams.append('username', _username);
+        _urlParams.append('npassword', _npassword);
+        _urlParams.append('cpassword', _cpassword);    
+        _urlParams.append('tokenid', _tokenid);        
+        console.log( "changePassword 1...." + _urlParams.toString() ); 
+        let headers = new Headers({ 'Content-Type': 'application/json' });
+        let options = new RequestOptions({ headers: headers });
+        authUrl = authUrl + '?' + _urlParams.toString();
+        console.log( "changePassword 2...." + authUrl); 
+        return this.http.get( authUrl, options )
+                        .map(this.extractData)
+                        .catch(this.handleError);
+    }
+         
     private extractData(res: Response) {
       let body = res.json();
       console.log('extractData[' + JSON.stringify(body) + ']');

ecm/Angular/ProteusECM/trunk/src/app/ecm-store/reducers/category-list.ts

@@ -14,6 +14,9 @@ export default function (state = initialState, action: Action): CategoryListStat
         case CategoryActions.LOAD_CATEGORY_SUCCESS: {
             return action.payload;
         }
+        case CategoryActions.RESET_CATEGORY_LIST: {
+            return initialState;
+        }
         default: {
             return state;
         }

ecm/Angular/ProteusECM/trunk/src/app/ecm-store/reducers/index.ts

@@ -7,6 +7,7 @@ import cartListReducer, * as fromCartList from './cart-list';
 import categoryListReducer, * as fromCategoryList from './category-list';
 import subCategoryListReducer, * as fromSubCategoryList from './subcategory-list';
 import itemListReducer, * as fromItemList from './item-list';
+import wishListReducer, * as fromWishList from './wish-list';
 
 import categoryReducer, * as fromCategory from './category';
 import subCategoryReducer, * as fromSubCategory from './subcategory';
@@ -18,6 +19,7 @@ export interface AppState {
     categories: fromCategoryList.CategoryListState;
     subcategories: fromSubCategoryList.SubCategoryListState;
     items: fromItemList.ItemListState;
+    wishlistItems: fromWishList.WishListState;
     
     category: fromCategory.CategoryState;
     subcategory: fromSubCategory.SubCategoryState;
@@ -31,6 +33,7 @@ export default compose(combineReducers)({
     categories: categoryListReducer,
     subcategories: subCategoryListReducer,
     items: itemListReducer,
+    wishlistItems: wishListReducer,
     
     category: categoryReducer,
     subcategory: subCategoryReducer,

ecm/Angular/ProteusECM/trunk/src/app/ecm-store/reducers/item-list.ts

@@ -14,6 +14,9 @@ export default function (state = initialState, action: Action): ItemListState {
         case ItemActions.LOAD_ITEM_SUCCESS: {
             return action.payload;
         }
+        case ItemActions.RESET_ITEM_LIST: {
+            return initialState;
+        }
         default: {
             return state;
         }

ecm/Angular/ProteusECM/trunk/src/app/ecm-store/reducers/subcategory-list.ts

@@ -14,6 +14,9 @@ export default function (state = initialState, action: Action): SubCategoryListS
         case SubCategoryActions.LOAD_SUBCATEGORY_SUCCESS: {
             return action.payload;
         }
+        case SubCategoryActions.RESET_SUBCATEGORY_LIST: {
+            return initialState;
+        }
         default: {
             return state;
         }

ecm/Angular/ProteusECM/trunk/src/app/ecm-store/reducers/wish-list.ts

+import {Action} from '@ngrx/store';
+import {Observable} from 'rxjs/Observable';
+
+import {ItemDetail} from '../../ecm-model/product-detail-model';
+import {WishListActions} from '../actions';
+import * as _ from 'lodash';
+
+export type WishListState = ItemDetail[];
+
+const initialState: WishListState = [];
+
+export default function (state = initialState, action: Action): WishListState {
+    switch (action.type){
+        case WishListActions.LOAD_WISHLIST_ITEMS_SUCCESS: {
+            return action.payload;
+        }
+        case WishListActions.ADD_TO_WISHLIST_SUCCESS: {
+            return [...state, action.payload];
+        }
+        case WishListActions.DELETE_WISHLIST_ITEM_SUCCESS: {
+            return state.filter(item => {
+                return item.itemCode !== action.payload.itemCode;
+            });
+        }
+        case WishListActions.RESET_WISHLIST: {
+            return initialState;
+        }
+        default: {
+            return state;
+        }
+    }
+}
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/app/ecm-user-option/ecm-user-option.component.css

 .content-panel
 {
 	display: block;
-	margin: 15px;
 	min-height: 150px;
 	position: relative;
 }
@@ -53,8 +52,8 @@
 }
 
 .user-profile-image{
-    width: 115px;
-    height: 115px;
+    width: 200px;
+    height: 200px;
     position: relative;
     padding: 0;
     margin: 0;
@@ -62,12 +61,12 @@
     -webkit-filter: contrast(100%) brightness(85%);
     filter: contrast(100%) brightness(85%);
     border-radius: 100%;
-    display: inline-block;
     overflow:hidden;
+    margin-left: calc( 50% - 200px / 2 );
 }
 .profile-image-128{
-    width: 128px;
-    height: 128px;
+    width: 200px;
+    height: 200px;
 }
 .profile-image {
     position: absolute;
@@ -115,19 +114,33 @@
     position: relative;
 }
 
-.logout-button
+.logout-button, .chg-pwd-button
 {
-    width: 320px;
+    width: 100%;
     height: 50px;
     font-size: 15px;
     line-height: 15px;
     text-align: center;
-    background: mediumvioletred;
     border-radius: 2px;
     position: relative;
     padding: 0;
     margin: 5px 0 5px 0;
+    font-weight: bold;
+    box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
+}
+
+.logout-button {
+    background: mediumvioletred;
     color: #fff;
+    background-image: url(../../assets/images/svg/logout.svg);
+    background-repeat: no-repeat;
+    background-position: calc(50% - 42px) 8px;
+    background-size: 35px 35px;
+}
+
+.chg-pwd-button {
+	background: #fff;
+    color: mediumvioletred;
 }
     
 @media screen and (max-width:30em) {
@@ -191,3 +204,247 @@
 .close-button:after {
 	transform: translateY(-50%) rotate(-45deg) scale(1);
 }
+
+.user-info-section {
+	height: 320px;
+    width: 100%;
+    border-bottom: 1px solid #f2f2f2;
+    padding-top: 35px;
+}
+
+.user-profile-location-section {
+    padding: 80px 20px;
+    text-align: center;
+    border-bottom: 1px solid #f2f2f2;
+}
+
+.user-profile-location {
+		
+}
+
+.user-profile-buttons {
+    padding: 10px 40px;
+}
+
+.update-location-link {
+    display: inline-block;
+    color: mediumvioletred;
+    line-height: 24px;
+    vertical-align: super;
+   	cursor: pointer;
+}
+
+.update-location-container {
+	padding-top: 10px;
+}
+
+.user-prof-name {
+	display: block;
+    text-align: center;
+}
+
+.user-prof-email {
+	display: block;
+    text-align: center;
+    font-size: 16px;
+    color: gray;
+}
+
+.ecm-location-icon {
+    color: mediumvioletred;
+    display: inline-block;
+}
+
+.image-edit-icon {
+	content: url(../../assets/images/svg/edit.svg);
+	position: absolute;
+	height: 35px;
+    width: 35px;
+    background-color: mediumvioletred;
+    border-radius: 100%;
+    margin-left: calc(50% + 30px);
+    top: 180px;
+    cursor: pointer;
+}
+
+
+/* For desktop */
+
+@media screen and (min-width: 640px){
+	
+.user-profile-image {
+    width: 100px;
+    height: 100px;
+    margin-left: calc( 50% - 100px / 2 );
+}
+
+.profile-image-128 {
+    width: 100px;
+    height: 100px;
+}
+
+.user-info-section {
+	height: 190px;	
+}
+
+.image-edit-icon {
+    height: 25px;
+    width: 25px;
+    margin-left: calc(50% + 20px);
+    top: 100px;
+}
+
+.user-prof-email {
+    font-size: 14px;
+}
+
+.user-profile-location-section {
+	padding: 0;
+}
+
+.user-profile-buttons {
+    padding: 20px 10px 0px 15px;
+}
+
+.user-profile-location {
+    font-size: 0.7rem;
+    padding: 5px 10px;
+}
+
+.logout-button, .chg-pwd-button {
+	height: 40px;
+}
+
+.logout-button {
+    background-position: calc(50% - 42px) 3px;
+}
+	
+}
+
+
+/* Change Password */
+
+h4
+{
+	text-align: center;
+	padding-bottom: 5px;
+	font-size: 26px;
+    font-weight: normal;
+}
+h6
+{
+    color: mediumvioletred;
+}
+
+.signin-form
+{
+    position: relative;
+/*     left: calc( ( 100% / 2 ) - 200px ); */
+	left: calc( ( 100% / 2 ) - 187.5px );
+    margin: 0;
+/*     width: 400px; */
+	width: 375px;
+    padding: 0 40px 0 40px;
+/*     color: rgb(199, 21, 133); */
+/*     top: -110px; */
+}
+.signin-form-adj
+{
+	width: 50%;
+	float: none;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+
+@media screen and (max-width:30em) {
+
+	h4 {
+		top: -35px;
+    	position: relative;
+	}
+	
+	.signin-form {
+		/*
+		bottom: 0px;
+		top:0px;
+		position: absolute;
+   		bottom: 5%;
+		*/
+   		padding-bottom: 40px;
+	}
+
+	.signin-button,
+	.register-button {
+	    font-size: 15px;
+	    line-height: 15px;
+	}			
+
+	.example-full-width {
+	    font-size: 18px;
+	    line-height: 18px;
+	    margin: 18px 0 0 0;
+	}		
+}
+
+.signin-button,
+.register-button
+{
+/*     width: 320px; */
+	width: 100%;
+    height: 50px;
+    font-size: 15px;
+    line-height: 15px;
+    text-align: center;
+    border-radius: 2px;
+    position: relative;
+    padding: 0;
+    margin: 5px 0 5px 0;
+}
+.signin-button
+{
+	background: mediumvioletred;
+	color: #fff;
+}
+.signin-button[disabled]
+{
+	background: #e0e0e0;
+    color: #fff;
+}
+
+.username-input-container,
+.password-input-container {
+/*     width: 320px; */
+	width: 100%;
+    font-size: 15px;
+    line-height: 15px;
+    margin: 0 0 10px 0;
+    padding: 0;
+}
+
+.username-input,
+.password-input {
+	height:20px;
+}
+
+.changePass-form {
+	padding: 0px 20px;
+    padding-top: 40px;
+}
+/* Change Password End */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

ecm/Angular/ProteusECM/trunk/src/app/ecm-user-option/ecm-user-option.component.html

-<div class="user-option">
+<!-- <div class="user-option">
 	<div *ngIf="userData" class="content">
 		<div class="header"></div>
 		<div class="content-panel">
@@ -18,4 +18,75 @@
 			<button md-button class="logout-button" (click)="logout(); closePanel.emit();">Logout</button>
 		</div>
 	</div>
+</div> -->
+
+<div *ngIf="activeScreen == 'userInfoScreen'" >
+	<ng-container *ngTemplateOutlet="userInfoScreen"></ng-container>
+</div>
+<div  *ngIf="activeScreen == 'changePwdScreen'" >
+	<ng-container *ngTemplateOutlet="changePwdScreen"></ng-container>
+</div>
+
+<ng-template #userInfoScreen>
+<div class="user-option">
+	<div *ngIf="userData" class="content">
+		<div class="content-panel">
+			<div class="user-info-section">
+			<div>
+				<div class="user-profile-image" titile="Profile">
+					<img [src]="userData.profileImageLink" onerror="this.src = '/ecm/assets/images/w_user_128_128.png'; " class="profile-image profile-image-128" title="{{userData.name}}" /> 
+				</div>
+				<i class="image-edit-icon" (click)="openDialog();"></i>
+			</div>
+			<span class="user-prof-name"> {{userData.EMP_NAME}}</span>
+			<span class="user-prof-email"> {{userData.EMAIL_ID_OFF}} </span>
+			</div>
+			<div class="user-profile-location-section">
+				<div class="user-profile-location" *ngIf="userLocation.address">{{userLocation.address}}</div>
+				<div class="update-location-container">
+					<i class="material-icons ecm-location-icon">&#xE0C8;</i> <span (click)="updateLocation();" class="update-location-link"> Update Location </span>
+				</div>
+			</div>
+			<div class="user-profile-buttons">
+				<button md-button class="chg-pwd-button" (click)="activeScreen = 'changePwdScreen';" >Change Password</button>
+				<button md-button class="logout-button" (click)="logout(); closePanel.emit();">Logout</button>
+			</div>
+			
+		</div>
+	</div>
 </div>
+</ng-template>
+
+
+<ng-template #changePwdScreen>
+	<div class="changePass-form">
+	    <h4>Change Password</h4>   
+	    <form #changePass="ngForm" (ngSubmit)="changePassword(changePass);" novalidate autocomplete="off">
+			<md-input-container class="password-input-container" [hideRequiredMarker] = "true">
+			     <input mdInput class="username-input" placeholder="Current Password" required name="cpassword" [(ngModel)]="_current_password" #current_password="ngModel" (keydown)="clearTimer();" type = 'password' 
+			     #curPassElem (focus) = "scrollIntoView(curPassElem);" /> 
+			     <md-error *ngIf="current_password.errors && current_password.dirty" class="">Password required</md-error> 
+    		</md-input-container>
+			<md-input-container class="password-input-container" [hideRequiredMarker] = "true">
+			     <input mdInput class="username-input" placeholder="New Password" required name="npassword" [(ngModel)]="_new_password" #new_password="ngModel" (keydown)="clearTimer();" type = 'password' 
+			     #newPassElem (focus) = "scrollIntoView(newPassElem);" /> 
+			     <md-error *ngIf="new_password.errors && new_password.dirty" class="">Password required</md-error> 
+    		</md-input-container>
+    		<md-input-container class="password-input-container" [hideRequiredMarker] = "true">
+			     <input mdInput class="username-input" placeholder="Confirm Password" required name="cfpassword" [(ngModel)]="_confirm_password" #confirm_password="ngModel" (keydown)="clearTimer();" type = 'password' 
+			     #confPassElem (focus) = "scrollIntoView(confPassElem);" /> 
+			     <md-error *ngIf="confirm_password.errors && confirm_password.dirty" class="">Password required</md-error> 
+    		</md-input-container>
+    		<md-error class="statusError" *ngIf="statusErrorMsg">{{statusErrorMsg}}</md-error> 
+			<button md-button class="signin-button" type="submit"  [disabled]="!changePass.form.valid">Change Password</button>
+    	</form>
+		 <md-progress-bar *ngIf="statusPending"
+	          class="signin-progress-bar"
+	          [color]="'primary'"
+	          [mode]="'indeterminate'"
+	          [value]="50">
+	     </md-progress-bar>
+		 <button md-button class="chg-pwd-button" (click)="activeScreen = 'userInfoScreen';" >Cancel</button>
+    </div>
+</ng-template>
+

ecm/Angular/ProteusECM/trunk/src/app/ecm-user-option/ecm-user-option.component.ts

-import { Component, OnInit, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, ViewEncapsulation, ViewChild } from '@angular/core';
 import { ECMSigninService } from '../ecm-signin/ecm-signin.service';
 import { EcmCartService } from '../ecm-view/ecm-cart/ecm-cart.service';
+import { EcmLocationService } from '../ecm-search/ecm-location.service';
+import { FormGroupDirective, NgControl, NgForm, NgModel } from '@angular/forms';
 
 import { Store } from '@ngrx/store';
 import { AppState } from '../ecm-store/reducers';
 import { CartActions } from '../ecm-store/actions';
+import { Observable } from 'rxjs/Observable';
+import { EcmLocation } from '../ecm-search/ecm-location';
 
 declare var getContentPlugin: any;
 
@@ -20,18 +24,31 @@ export class EcmUserOptionComponent implements OnInit {
     @Output() closePanel = new EventEmitter();
     @Output() updateProfileImages = new EventEmitter();
     
+    public storeUserLocation :  Observable<EcmLocation>;
+    public userLocation : EcmLocation;
+
     selectedOption: string;
     contentPluginViewUI: any;
     userData: any;
-    //profileImageLink : string;
+    activeScreen : string = 'userInfoScreen';
+    _current_password: string;
+    _new_password: string;
+    _confirm_password: string;
     
-    constructor( public signinService: ECMSigninService, private store: Store<AppState>, public cartService: EcmCartService, private cartAction: CartActions) { }
+    constructor( public signinService: ECMSigninService, private store: Store<AppState>, public cartService: EcmCartService, private cartAction: CartActions, private locationService: EcmLocationService) { }
 
     ngOnInit() {
         var userInfo = localStorage.getItem( 'userInfo' );
         console.log( 'EcmUserOptionComponent getUserInfo ::' + userInfo );
         if ( userInfo !== 'undefined' && userInfo !== null && userInfo !== 'null' ) {
             this.userData = JSON.parse( userInfo );
+            
+            this.storeUserLocation = this.store.select('location');
+            this.storeUserLocation.subscribe( userLocation => {
+                  //console.log( 'ngOnInit >' + userLocation );
+                  this.userLocation = userLocation;
+            });
+            
             //this.profileImageLink = "/ibase/resource/images/users/" + this.userData.jti + ".png";
         }
     }
@@ -107,4 +124,30 @@ export class EcmUserOptionComponent implements OnInit {
         this.store.dispatch(this.cartAction.loadCartItems());
     }
     
+    updateLocation() {
+        this.locationService.getGeoLocation();
+    }
+
+    changePassword(chgForm: NgForm) {
+                
+        this.signinService.changeCurrentPassword( this.userData.jti, this._current_password, this._new_password, this.userData.TOKEN_ID ).subscribe(
+                result => {
+                    console.log( 'comp result.results.indexOf [' + result.Response.results.indexOf( '{' ) + ']' );
+                    if ( result.Response.status == 'success' ) {
+                        console.log( 'Logging Out' );
+                        alert(result.Response.results);
+                        this.userData = null;
+                        //TODO Load Login Screen
+                        this.closePanel.emit();
+                    }
+                    else if ( result.Response.status == 'error' ) {
+                        chgForm.resetForm();
+                    }
+                },
+                error => {
+                    let errorMessage = <any>error;
+                    console.log( 'comp errorMessage[' + errorMessage + ']' );
+                }
+          );
+    }
 }

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

@@ -72,7 +72,7 @@
 .edit-cart-button, .viewAll-button
 {
 /*     width: 320px; */
-	width: 304px;
+	width: 100%;
     height: 50px;
     font-size: 16px;
     line-height: 46px;
@@ -81,6 +81,8 @@
     position: relative;
     padding: 0;
     margin: 38px 0 0px 0;
+    background: mediumvioletred; 
+	color: #fff !important;
 }
 
 .viewAll-button{
@@ -91,12 +93,10 @@
 
 .edit-cart-button
 {
+	/*
 	 background: mediumvioletred; 
 	 color: #fff;
-}
-
-.edit-cart-button:hover { 
-       color: #fff;
+	 */
 }
 
 @media screen and (max-width: 640px) {
@@ -237,6 +237,7 @@
     vertical-align: top;
     top: 30px;
     width: 110px;
+    top: 0;
 }
 .change-color{
 	padding-top: 16px;
@@ -559,3 +560,7 @@
     padding-top: 15px;
 }
 
+.mini-cart-section {
+	padding: 50px 20px 20px 20px;
+}
+        
\ No newline at end of file

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

@@ -2,7 +2,7 @@
 <div *ngIf="isMiniCart then miniCart; else fullCart;"></div>
 
 <ng-template #miniCart>
-<div *ngIf="(cartItems | async)?.length == 0" style="text-align: center;">
+<div *ngIf="(cartItems | async)?.length == 0" style="text-align: center; margin: 3rem;">
 	<img class="empty-cart-img" src="/ecm/assets/images/svg/Empty Cart.svg">
 	<span class="empty-cart-title">Empty Cart</span> <span
 		class="border-line"></span> <span class="empty-cart-msg">Looks
@@ -35,6 +35,7 @@
 			<i class="material-icons" style="position: relative; left: 8px;">trending_flat</i>
 		  </button> 
 </div>  -->
+<div class="mini-cart-section">
 <div class="scrollMe" #scrollMe  *ngIf="(cartItems | async)?.length > 0">
 	<div class="cartItemsDetail"
 		*ngFor="let item of cartItems | async">
@@ -57,15 +58,16 @@
 		<a md-button class="edit-cart-button" [routerLink]="['/cart']"
 			(click)="closePanel.emit();">Edit Cart</a>
 </div>
+</div>
 </ng-template>
 <!-- ---------================ MiniCart Ends==============================---------------------------- -->
 
 <!-- ---------================ detailCart start==============================---------------------------- -->
 
 <ng-template #fullCart>
-<div *ngIf="(cartItems | async)?.length == 0">
-    <ecm-header [isFixedHeader]=false> </ecm-header>
+    <ecm-header [isFixedHeader]=true> </ecm-header>
 	<ecm-breadcrumbs [pageName]="'CART'"></ecm-breadcrumbs>
+<div *ngIf="(cartItems | async)?.length == 0">
 	<div class="row">
 	<div class="medium-12 large-12 columns"  style="text-align: center; margin-top: 120px;">
 	<img class="empty-cart-img" src="/ecm/assets/images/svg/Empty Cart.svg">
@@ -75,12 +77,9 @@
 	</div>	
 	</div>
 	<div style="margin-top: 155px;">
-	<ecm-footer></ecm-footer>
 	</div>
 </div>
 <div  *ngIf="(cartItems | async)?.length > 0">
-	<ecm-header [isFixedHeader]=false> </ecm-header>
-	<ecm-breadcrumbs [pageName]="'CART'"></ecm-breadcrumbs>
 	<div class="row details-of-Cart">
 		<md-card class="medium-8 columns cartItemsDetails">
 		<div class="ecmdetailsItems">
@@ -232,6 +231,6 @@
 			</button>
 		</div>
 	</div>
-	<ecm-footer></ecm-footer>
 </div>
+	<ecm-footer></ecm-footer>
 </ng-template>

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

@@ -64,6 +64,7 @@ export class EcmCategoryComponent implements OnInit {
       //this.store.dispatch({type: 'CLEAR_CATEGORY', payload: selectedCategory});
       //this.store.dispatch({type: 'CATEGORY', payload: selectedCategory});
       
+      this.store.dispatch( this.subCategoryAction.resetSubCategoryList() );
       this.store.dispatch( this.subCategoryAction.loadSubCategories( selectedCategory.catCode ) );
       this.store.dispatch(this.categoryAction.getCategorySuccess(selectedCategory));
     }

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

 
-<ecm-header [isFixedHeader]=false> </ecm-header>
+<ecm-header [isFixedHeader]=true> </ecm-header>
 <ecm-breadcrumbs [pageName]="'CHECKOUT'"></ecm-breadcrumbs>
 
 <div class="row checkout-page">
@@ -170,8 +170,8 @@
 						<th class="order-summary-title">Order Summary</th>
 					</tr>
 					<tr *ngFor="let item of cartItems | async">
-						<td class="item-name">{{item.shDescr}}</td>
-						<td class="item-cost">Rs. {{item.costRate}}</td>
+						<td class="item-name">{{item.itemHeader.itemShDescr}} ({{item.itemQuantity}})</td>
+						<td class="item-cost">Rs. {{item.itemHeader.itemDiscountedRate}}</td>
 					</tr>
 					<tr>
 						<td class="total">Total</td>

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

 import { Component, OnInit, ViewChild, ElementRef, Input, Output, EventEmitter } from '@angular/core';
 import { FormBuilder, Validators,NgForm } from '@angular/forms';
 import { EcmCartService } from '../ecm-cart/ecm-cart.service';
-import { Item } from '../../ecm-model/product-model';
+import { ItemDetail } from '../../ecm-model/product-detail-model';
 import { Observable } from 'rxjs/Observable';
 
 import { Store } from '@ngrx/store';
@@ -18,12 +18,12 @@ export class EcmCheckoutComponent implements OnInit {
     @ViewChild('userForm') currentForm: NgForm;
     userForm: NgForm;
     checked = false;
-    cartItemsDetail: Item[];
+    cartItemsDetail: ItemDetail[];
     totalPrice:number = 0;
     countries;
     months;
     years;
-    cartItems: Observable<Item[]>;
+    cartItems: Observable<ItemDetail[]>;
     
     constructor(private formBuilder: FormBuilder, public cartService: EcmCartService, private store: Store<AppState>) {
                  this.countries = [
@@ -73,7 +73,7 @@ export class EcmCheckoutComponent implements OnInit {
             this.totalPrice = 0;
             cartItems.forEach(
                     item => { 
-                        this.totalPrice = this.totalPrice + (parseFloat( item.costRate ) * item.itemQuantity);
+                        this.totalPrice = this.totalPrice + (parseFloat( item.itemHeader.itemDiscountedRate ) * item.itemQuantity);
                     }
             );
         });

ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-panel/ecm-dialog.html

+
+<!-- <div [ngSwitch]="data.option" *ngIf="data.option != 'SEARCH_OPT'"> -->
+<!-- 		<span (click)="dialogRef.close();" class="hide-button"></span> -->
+<!-- 		<ecm-signin *ngSwitchCase="'SIGNIN_OPT'" (closePanel)="dialogRef.close();" ></ecm-signin> -->
+<!-- 		<ecm-cart *ngSwitchCase="'CART_OPT'" [isMiniCart] = 'true' (closePanel)="dialogRef.close();" ></ecm-cart> -->
+<!-- 		<ecm-user-option *ngSwitchCase="'USER_OPT'" (closePanel)="dialogRef.close();" (updateProfileImages) = "updateProfileImages();" ></ecm-user-option> -->
+<!-- 		<div *ngSwitchCase="'SEARCH_OPT'"> -->
+<!-- 			<span style="float:left;"> -->
+<!-- 				<button md-button class="square-button" (click)="dialogRef.close()" > -->
+<!-- 				 	<i class="material-icons back-search">keyboard_backspace</i> -->
+<!-- 				</button> -->
+<!-- 			</span> -->
+<!-- 			<ecm-search  [compFadeState]="headerFadeState" [headerState]="'mobile'"  (closePanel)="dialogRef.close();"></ecm-search> -->
+<!-- 		</div> -->
+<!-- </div> -->
+
+<div [ngSwitch]="dialogData.option">
+		<span (click)="dialogRef.close();" class="hide-button"></span>
+		<ecm-signin *ngSwitchCase="'SIGNIN_OPT'" (closePanel)="dialogRef.close();" ></ecm-signin>
+		<ecm-cart *ngSwitchCase="'CART_OPT'" [isMiniCart] = 'true' (closePanel)="dialogRef.close();" ></ecm-cart>
+		<ecm-user-option *ngSwitchCase="'USER_OPT'" (closePanel)="dialogRef.close();" (updateProfileImages) = "updateProfileImages();" ></ecm-user-option>
+		<div *ngSwitchCase="'SEARCH_OPT'">
+			<span style="float:left;">
+				<button md-button class="square-button" (click)="dialogRef.close()" >
+				 	<i class="material-icons back-search">keyboard_backspace</i>
+				</button>
+			</span>
+			<ecm-search  [compFadeState]="headerFadeState" [headerState]="'mobile'"  (closePanel)="dialogRef.close();"></ecm-search>
+		</div>
+</div>
+

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

+
+/*Right Slide Panel*/
+
+.ecm-bgGlass {
+	background-color: gray;
+	opacity: 0.5;
+	z-index: 4;
+	position: fixed;
+	left: 0px;
+	top: 0px;
+	display: none;
+	width: 100%;
+	height: 100%;
+}
+.overlayPanel {
+/*     width: 400px; */
+/*     height: 509px; */
+    width : 375px;
+    height : 500px;
+    position: fixed;
+    top: calc( 50% - 500px / 2 );
+    left: calc( 50% - 375px / 2 );
+    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+    z-index: 4;
+    display: none;
+    border-radius: 2px;
+    background: #fff;
+}
+
+.rightSlidePanel {
+    width: 400px;
+    max-height: calc( 100% - 60px );
+    position: fixed;
+    right: 5px;
+/*  top: 40px; */
+    top: 60px;
+    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+    z-index: 4;
+    display: none;
+    border-radius: 5px;
+    background: #fff;
+}
+
+@media screen and (max-width:30em) 
+{
+	.overlayPanel 
+	{
+	    width: 100%;
+	    height: 100%;
+	    top: 0;
+	    left: 0;
+	}
+	
+	.siteHeading{
+		display : none;	
+	}
+}
+
+/* Toggle button */
+.hide-button {
+	top: 0;
+	right: 0;
+	position: absolute;
+	display: inline-block;
+	width: 24px;
+	height: 24px;
+	margin: 15px;
+	background-color: transparent;
+	border: none;
+	cursor: pointer;
+	border-radius: 100%;
+	transition: 0.6s;
+	-webkit-transition: 0.6s;
+	z-index: 4;
+}
+.hide-button:hover {
+	box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px
+		rgba(0, 0, 0, 0.1);
+}
+.hide-button:before, .hide-button:after {
+	position: absolute;
+	content: '';
+	top: 50%;
+	left: 0;
+	width: 100%;
+	height: 2px;
+	background-color: #EC7263;
+	background-color: mediumvioletred;
+	border-radius: 5px;
+	transition: 0.5s;
+}
+.hide-button:before {
+	transform: translateY(-50%) rotate(45deg) scale(1);
+}
+.hide-button:after {
+	transform: translateY(-50%) rotate(-45deg) scale(1);
+}
+.width-300{
+	width: 300px;
+}
+
+.mat-dialog-container {
+	max-width: 100% !important;	
+}
+
+.mobile-search{
+	color: #fff;
+}
+
+.back-search{
+	color: mediumvioletred;
+}
+
+.back-search: hover{
+	color: #fff;
+	background-color: mediumvioletred; 
+}
+
+.square-button {
+    height: 60px !important;
+    width: 60px !important; 
+    padding: 0 !important;
+    min-width: 60px !important;
+    vertical-align: middle !important;
+}

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

+<!-- Overlay Start  -->
+<div #bgGlass class="ecm-bgGlass"></div>
+<div #overlayPanel class="overlayPanel" >
+	<ecm-dialog  *ngIf="panelData" [dialogData]= 'panelData' ></ecm-dialog>
+</div>
+<!--  Overlay End -->
+
+
+
+
+
+<!-- SlidePanel Start  -->
+<div #rightSlidePanel class="rightSlidePanel" >
+	<ecm-dialog  *ngIf="panelData" [dialogData]= 'panelData' ></ecm-dialog>
+</div>
+<!--  SlidePanel End  -->
+
+

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

+import { Component, OnInit, Input, Output, ViewChild, ElementRef, Inject, HostListener } from '@angular/core';
+import { MdDialog, MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+
+declare var disableScroll: any;
+declare var enableScroll: any;
+
+@Component({
+  selector: 'ecm-panel',
+  templateUrl: './ecm-panel.component.html',
+  styleUrls: ['./ecm-panel.component.css']
+})
+export class EcmPanelComponent implements OnInit {
+
+    
+    @ViewChild( 'rightSlidePanel' ) rightSlidePanel: ElementRef;
+    @ViewChild( 'overlayPanel' ) overlayPanel: ElementRef;
+    @ViewChild( 'bgGlass' ) bgGlass: ElementRef;
+    panelData:any;
+    panelType:any;
+//  dialogRef: MdDialogRef<ECMDialog>;
+  
+  constructor(/* public dialog: MdDialog */) { }
+
+  ngOnInit() {
+  }
+  
+  openTime:any;
+  
+  open(panelData){
+      console.log('in open dialog event' , panelData); 
+      this.panelData = panelData;
+      this.panelType = panelData.type;
+      if( this.panelType == 'overlay' )
+      {
+          this.showOverlayPanel();
+      }
+      else if ( this.panelType == 'inplace' )
+      {
+          this.showSidePanel();
+      }
+      else
+      {
+          
+      }
+//      this.dialogRef = this.dialog.open(ECMDialog,{
+//          data: {
+//              option: sideOption
+//            }
+//          });
+//      this.updatePosition({ top:'0px', left: '0px' });
+//      
+//      this.dialogRef.afterClosed().subscribe(result => {
+//
+//      }); 
+  }
+  
+  close(){
+//      this.dialogRef.close();
+      if( this.panelType == 'overlay' )
+      {
+          this.hideOverlayPanel();
+      }
+      else if ( this.panelType == 'inplace' )
+      {
+          this.hideSidePanel();
+      }
+      else
+      {
+          
+      }
+  }
+  
+  updatePosition(dialogPos){
+//      this.dialogRef.updatePosition(dialogPos);
+  }
+  
+  
+  updateSize(dialogSize){
+//      this.dialogRef.updateSize(dialogSize.width, dialogSize.height);
+  }
+
+  private showSidePanel() {
+      this.openTime = new Date();
+      this.rightSlidePanel.nativeElement.style.display = "block";
+  }
+
+  private hideSidePanel() {
+      this.rightSlidePanel.nativeElement.style.display = "none";
+  }
+
+  private showOverlayPanel() {
+      this.overlayPanel.nativeElement.style.display = "block";
+      this.bgGlass.nativeElement.style.display = "block";
+      //document.body.style.overflow = "hidden";
+      disableScroll();
+  }
+
+  private hideOverlayPanel() {
+      this.overlayPanel.nativeElement.style.display = "none";
+      this.bgGlass.nativeElement.style.display = "none";
+      document.body.style.overflow = "visible";
+      enableScroll();
+  }
+  
+  @HostListener('document:click', ['$event'])
+  clickout(event) {
+    let isVisible = this.rightSlidePanel.nativeElement.style.display == 'block';
+    if( isVisible ) {
+      let diff = new Date().getMilliseconds() - this.openTime.getMilliseconds();
+      if( diff > 300 || diff < 0 )  {
+          if( ! this.rightSlidePanel.nativeElement.contains(event.target)) {
+            this.hideSidePanel();  
+          }
+      }
+    }
+  }
+
+}
+
+
+@Component({
+    selector: 'ecm-dialog',
+    templateUrl: './ecm-dialog.html',
+    styleUrls: ['./ecm-panel.component.css'],
+  })
+  export class ECMDialog {
+        @Input() dialogData : any;
+//      constructor(@Inject(MD_DIALOG_DATA) private data: { option: string  }, public dialogRef: EcmPanelComponent) {}
+        constructor(public dialogRef: EcmPanelComponent){}
+        
+  } 

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

 
-<ecm-header [isFixedHeader]=false> </ecm-header>
+<ecm-header [isFixedHeader]=true> </ecm-header>
 
 <span *ngIf="items">
  <ecm-breadcrumbs [pageName]="'ITEMS'"> </ecm-breadcrumbs>
 </span>
 
-<div class="loading" *ngIf="!items">
+<div class="loading" *ngIf="(items | async)?.length == 0">
  <div class="ecm-progress-bar">
   <div class="ecm-progress-title"> Loading </div>
   <md-progress-spinner
@@ -17,7 +17,7 @@
  </div> 
 </div>
 
-<div *ngIf="items">
+<div *ngIf="(items | async)?.length > 0">
 	<section class="subcategories-section">
 		<div class="row">
 		<md-card class="ecm-items-section">

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

@@ -39,8 +39,8 @@ export class EcmProductComponent implements OnInit {
    private items: Observable<ItemDetail[]>;
    private extra_param= { "catCode":'', "catShDesc":'',scatDesc:'' };
    
-   private category : Category;
-   private subcategory : SubCategory;
+   private category;
+   private subcategory;
    itemDetail: ItemDetail; 
    attribVal;
    attribCode; 
@@ -89,20 +89,14 @@ export class EcmProductComponent implements OnInit {
    fetchStore( viewType: string){
      if(viewType == 'Category')
      {
-       let storeCategory;    
-       this.store.select('CATEGORY').forEach(
-         value => storeCategory=value
-       );
-       this.category = storeCategory;   
+         this.store.select('category')
+         .subscribe( category => this.category = category );  
      }
      
      if(viewType == 'SubCategory')   
      {
-       let storeSubCategory;    
-       this.store.select('SUBCATEGORY').forEach(
-         value => { storeSubCategory=value; console.log(value);}
-       );
-       this.subcategory = storeSubCategory;     
+         this.store.select('subcategory')
+         .subscribe( subcategory => this.subcategory = subcategory );    
      }              
    }
     

ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-sub-category/ecm-sub-category.component.html

 
-<ecm-header [isFixedHeader]=false> </ecm-header>
+<ecm-header [isFixedHeader]=true> </ecm-header>
 
 <span *ngIf="subcategories">
  <ecm-breadcrumbs [pageName]="'SUB_CATEGORY'"></ecm-breadcrumbs>

ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-sub-category/ecm-sub-category.component.ts

@@ -83,6 +83,7 @@ export class EcmSubCategoryComponent implements OnInit {
         //this.store.dispatch({type: 'CLEAR_SUB_CATEGORY', payload: selectedSubCategory});
         //this.store.dispatch({type: 'SUB_CATEGORY', payload: selectedSubCategory});
         
+        this.store.dispatch( this.itemAction.resetItemList() );
         this.store.dispatch( this.itemAction.loadItems( selectedSubCategory.scatCode ) );
         this.store.dispatch( this.subCategoryAction.getSubCategorySuccess( selectedSubCategory ) );
     }

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

 import { Component, OnInit } from '@angular/core';
 
 import { EcmTrendProductService } from './ecm-trend-product.service';
-import { Item } from '../../ecm-model/product-model';
+import { ItemDetail } from '../../ecm-model/product-detail-model';
 
 declare var reinitFlickity: any;
 
@@ -13,7 +13,7 @@ declare var reinitFlickity: any;
 })
 export class EcmTrendProductComponent implements OnInit {
     
-    trendingItems: Item[];
+    trendingItems: ItemDetail[];
     errorMessage: string;
 
     constructor(public trendingService: EcmTrendProductService) { }

ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-trend-product/ecm-trend-product.service.ts

@@ -4,7 +4,7 @@ import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/catch';
 import 'rxjs/add/operator/map';
 
-import { Item } from '../../ecm-model/product-model';
+import { ItemDetail } from '../../ecm-model/product-detail-model';
 
 @Injectable()
 export class EcmTrendProductService {
@@ -13,19 +13,68 @@ export class EcmTrendProductService {
     
     constructor (private http: Http) {}
 
-    getTrending(): Observable<Item[]> {
+    getTrending(): Observable<ItemDetail[]> {
         let headers = new Headers( { 'Content-Type': 'application/json' });
         let options = new RequestOptions( { headers: headers });
 
         return this.http.get( this.trendsUrl, options )
-            .map( this.extractData )
+            .map( (res) => this.extractData(res) )
             .catch( this.handleError );
     }
 
     private extractData(res: Response) {
-      let body = res.json();
-      console.log('extractData[' + JSON.stringify(body) + ']');
-      return body || { };
+        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 || { };
+     }
+    
+     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) {

ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-wish-list/ecm-wish-list.component.html

-<div *ngIf="(wishListItems | async)?.length == 0">
-	  <ecm-header [isFixedHeader]=false> </ecm-header>
+	<ecm-header [isFixedHeader]=true> </ecm-header>
 	<ecm-breadcrumbs [pageName]="'WISHLIST'"></ecm-breadcrumbs>
+<div *ngIf="(wishListItems | async)?.length == 0">
 	<div class="row">
 	<div class="medium-12 large-12 columns"  style="text-align: center; margin-top: 120px;">
 	<img class="empty-cart-img" src="/ecm/assets/images/svg/Empty Cart.svg">
@@ -10,14 +10,11 @@
 	</div>	
 	</div>
 	<div style="margin-top: 155px;">
-	<ecm-footer></ecm-footer>
 	</div>
 </div>
 
 
 <div *ngIf="(wishListItems | async)?.length > 0">
-	<ecm-header [isFixedHeader]=false> </ecm-header>
-	<ecm-breadcrumbs [pageName]="'WISHLIST'"></ecm-breadcrumbs>
 	<div class="row details-of-Cart">
 		<md-card class="medium-12 columns cartItemsDetails">
 		<div class="ecmdetailsItems">
@@ -57,5 +54,5 @@
 		</div>
 		</md-card>
 	</div>
-	<ecm-footer></ecm-footer>
 </div>
+	<ecm-footer></ecm-footer>

ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-wish-list/ecm-wish-list.service.ts

@@ -37,6 +37,22 @@ export class EcmWishListService {
             .catch( this.handleError );
     }
     
+    addToWishlist(itemCode) {
+        let headers = new Headers( { 'Content-Type': 'application/json' });
+        let options = new RequestOptions( { headers: headers });
+        
+       return this.http.post( '/ecm/service/feeds/wishlist'+itemCode , options)
+                   .map( (res) => this.extractData(res) );
+    }
+    
+    deleteWishlistItem(itemCode) {
+        let headers = new Headers( { 'Content-Type': 'application/json' });
+        let options = new RequestOptions( { headers: headers });
+        
+        return this.http.delete( '/ecm/service/feeds/wishlist/'+itemCode, options)
+                    .map( (res) => this.extractData(res) );
+    }
+
     private extractData( res: Response ) {
         let body = res.json();
         console.log( 'extractData[' + JSON.stringify( body ) + ']' );