Updated

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

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

@@ -64,7 +64,7 @@ ecm-search{
 .square-button {
     height: 60px !important;
     width: 60px !important; 
-    padding: 0 !important;
+/*     padding: 0 !important; */
     min-width: 60px !important;
     vertical-align: middle !important;
 }
@@ -386,26 +386,19 @@ ecm-search{
 	width: 60px;	
 }
 
-.user-nav-menu {
-	cursor: pointer;
-    padding: 13px 0px;
-    height: 60px;
-    min-width: 60px !important;
-}
-
 .ecm-menu-icon1 {
-    height: 3px;
-    width: 28px;
+    height: 2px;
+    width: 25px;
 }
 
 .ecm-menu-icon2 {
-    height: 3px;
+    height: 2px;
     width: 22px;
 }
 
 .ecm-menu-icon3 {
     height: 2px;
-    width: 28px;
+    width: 25px;
 }
 
 .onSelect {

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

@@ -57,7 +57,7 @@ Overlay End -->
 
 <ng-template #fixedHeaderLarge>
 	<md-toolbar color="primary">
-		<button [ngClass]="{onSelect: selectedOption === 'MENU'}" md-button (click)="menuAction();" class="user-nav-menu">
+		<button [ngClass]="{onSelect: selectedOption === 'MENU'}" md-button (click)="menuAction();" class="square-button">
 			<span class="ecm-menu-icon ecm-menu-icon1"></span>
 			<span class="ecm-menu-icon ecm-menu-icon2"></span>
 			<span class="ecm-menu-icon ecm-menu-icon3"></span>

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

@@ -220,13 +220,6 @@ export class ECMHeaderComponent implements OnInit, OnDestroy {
             {
                 //show sidepanel with user-option
                 this.ecmPanel.open({ type: 'inplace', option: 'USER_OPT', top:'65px', left: '', 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' });
-            }
-            
                 if(this.selectedOption){
                     this.selectedOption = null;
                     this.closeMenu();
@@ -235,6 +228,13 @@ export class ECMHeaderComponent implements OnInit, OnDestroy {
                     this.selectedOption = "USER";
                 }
             }
+            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' });
+            }
+            
+        }        
     }
 
     cartAction() {

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

@@ -28,6 +28,15 @@
 	width: 51px;
 }
 
+.ecm-small-image-icon {
+	float: left;
+	/*background-color: mediumvioletred;*/
+	border: none;
+	border-radius: 100%;
+	height: 38px;
+	width: 42px;
+}
+
 .img-loading {
 	width: 20px;
 	height: 20px;

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

@@ -4,5 +4,5 @@
  <div *ngIf="!attachType" class="ecm-image" #targetAttachImage></div>
  
  <img *ngIf="attachType == 'Image'" class="ecm-image" #targetImage />
- <img *ngIf="attachType == 'Icon'" class="ecm-image-icon" #targetImage />
+ <img *ngIf="attachType == 'Icon'" [ngClass]="isSmallIcon ? 'ecm-small-image-icon' : 'ecm-image-icon'" #targetImage />
  
\ No newline at end of file

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

@@ -19,6 +19,7 @@ export class EcmImageComponent implements OnInit, AfterViewChecked {
     @Input() height : string;
     @Input() width : any;
     @Input() isThumbnail: boolean = false;
+    @Input() isSmallIcon: boolean = false;
     
     @ViewChild('targetAttachImage') targetDiv:ElementRef;
     @ViewChild('targetImage') targetImg:ElementRef;

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

 
 .category-list-container {
-	padding-top: 40px;
+    padding-top: 10px;
     padding-left: 20px;
     padding-bottom: 25px;
     border-bottom: 1px solid #f2f2f2;
@@ -17,20 +17,18 @@
 }
 
 .category-title {
-    line-height: 47px;
-    font-size: 1.2rem;
+    line-height: 38px;
+    font-size: 1rem;
     padding-left: 10px;
 }
 
-.top-category {
-	height: 60px;
-}
-
 .view-all-button {
-    padding-left: 60px;
+    padding-left: 52px;
+    padding-top: 5px;
     color: mediumvioletred;
     font-weight: bold;
-    font-size: 1.1rem;
+    font-size: 1rem;
+    cursor: pointer;
 }
 
 .my-menu-container {
@@ -39,17 +37,19 @@
 }
 
 .my-menu-list {
-	padding-top: 20px;
+	padding-top: 10px;
 }
 
 .menu-title {
-	font-size: 1.2rem;
+    font-size: 1rem;
     padding-left: 10px;
+    line-height: 36px;
+    cursor: pointer;
 }
 
 .ecm-user-icon, .ecm-order-icon, .ecm-wishlist-icon {
-	height: 40px;
-    width: 40px;
+	height: 36px;
+    width: 36px;
 }
 
 .nav-my-profile, .nav-orders, .nav-wishlist {
@@ -57,11 +57,77 @@
 }
 
 .help-center-title {
+	width: 100%;
     bottom: 0;
-    position: fixed;
+    position: absolute;
     padding: 10px;
     padding-left: 20px;
-    font-size: 1.2rem;
-    width: 80%;
+    font-size: 1rem;
+    /* width: 80%; */
     border-top: 1px solid #f2f2f2;
 }
+
+.category-products-tab {
+    width: 40%;
+    height: 70%;
+    left: 296px;
+    top: 64px;
+    position: fixed;
+    background: white;
+    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+    overflow: hidden;
+    overflow-y: scroll;
+    display: none;
+    padding: 10px 0px;
+}
+.category-box {
+    padding: 5px 0px;
+   	cursor: pointer;
+}
+.category-box:HOVER {
+    background: rgba(200, 191, 191, 0.16);
+    color: mediumvioletred;
+    border-right: 5px solid mediumvioletred;
+}
+
+.category-box:HOVER > .category-products-tab {
+	display: block;
+}
+
+.category_product {
+	height: 150px;
+	padding-top: 10px;
+}
+
+.sub-cat-descr {
+	display: block;
+	color: black;
+    padding-bottom: 5px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.ecm-item {
+    display: block;
+    color: #787878;
+    font-size: 14px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.ecm-item:hover {
+	color: mediumvioletred;
+}
+
+.view-all {
+	color: mediumvioletred;
+    font-weight: bold;	
+    font-size: 14px;
+    cursor: pointer;
+}
+
+
+
+

ecm/Angular/ProteusECM/trunk/src/app/ecm-nav-menu/ecm-nav-menu.component.html

-
 <div class="category-list-container">
 	<div class="top-categories-title">Top Categories</div>
 	<div class="category-list">
-		<div *ngFor="let _category of categories | async" class="top-category" (click)="viewCategory(_category);">
-			<ecm-image [refId]='_category.catCode' [refSer]="'ECMCAT'" [object]="'ECM_CATEGORY'" [attachType]="'Icon'"></ecm-image>
+		<div *ngFor="let _category of categoryList" class="category-box" (click)="viewAllSubCategory(_category);" on-mouseover="showSubcategories(_category.catCode);">
+			<ecm-image [refId]='_category.catCode' [refSer]="'ECMCAT'" [object]="'ECM_CATEGORY'" [attachType]="'Icon'" [isSmallIcon]="true"></ecm-image>
 			<span class="category-title">{{_category.shDescr}}</span>
+			<div class="row category-products-tab">
+			<div *ngFor="let _subcategory of subcategories" class="small-12 medium-6 large-4 column category_product">
+				<span class="sub-cat-descr">{{_subcategory.shDescr}}</span>
+				<div *ngFor="let _item of _subcategory.items | slice:0:4;">
+					<a (click)="viewItem(_item.itemCode)" class="ecm-item">
+						{{_item.descr}}
+					</a>
+				</div>
+				<div *ngIf="_subcategory.items.length > 4">
+					<span class="view-all" (click)="viewAllProducts(_subcategory);">View All</span>
+				</div>
+			</div>
+			</div>
 		</div>
 	</div>
 	<div class="view-all-button">

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

 import { Component, OnInit, Output, EventEmitter } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 
-import { Category } from '../ecm-model/category-model';
 import { Store } from '@ngrx/store';
 import { AppState } from '../ecm-store/reducers';
-import { CategoryActions, SubCategoryActions } from '../ecm-store/actions';
+import { CategoryActions, SubCategoryActions, ItemActions } from '../ecm-store/actions';
 
 import { Observable } from 'rxjs/Observable';
 
@@ -16,38 +15,73 @@ import { Observable } from 'rxjs/Observable';
 export class ECMNavMenuComponent implements OnInit {
  
   @Output() closePanel = new EventEmitter();  
-  categories: Observable<Category[]>;  
+  categoryList;
+  subcategoryList;
+  subcategories;
   userData;
+  showProducts: boolean = false;
+  menu: Observable<any>;
 
-  constructor(private store: Store<AppState>, private categoryAction:CategoryActions, private subCategoryAction: SubCategoryActions, private router: Router, private route: ActivatedRoute) { }
+  constructor(private store: Store<AppState>, private categoryAction:CategoryActions, private subCategoryAction: SubCategoryActions, private router: Router, private route: ActivatedRoute, private itemAction: ItemActions) { }
   ngOnInit() {
       this.getCategories();
       this.createUserData();
   }
   
   getCategories() {
-      this.categories = this.store.select('categories');
+      this.menu = this.store.select('menuList');
+      this.menu.subscribe( menuList => this.categoryList = menuList.catList);
   }
   
-  viewCategory(category){
+  viewAllSubCategory(category) {
       this.store.dispatch( this.subCategoryAction.resetSubCategoryList() );
       this.store.dispatch( this.subCategoryAction.loadSubCategories( category.catCode ) );
       this.store.dispatch(this.categoryAction.getCategorySuccess(category));    
+      this.closePanel.emit();
       this.router.navigate([ '/categories', category.catCode]);
   }
   
-  viewAllCategories(){
+  showSubcategories(catCode) {
+      this.menu.subscribe( menuList => this.subcategoryList = menuList.subCatList);
+      this.subcategories = this.subcategoryList.filter( subcategory => subcategory.catCode === catCode);
+      console.log("this.showProducts Before"+this.showProducts);
+      this.showProducts = true;
+      console.log("this.showProducts After"+this.showProducts);
+  }
+  
+  viewAllCategories() {
       let openRoutePath = this.route.snapshot.url[0].path;
-      if(openRoutePath !== 'home')
+      this.closePanel.emit();
+      if ( openRoutePath !== 'home' )
       {
-          this.router.navigate(['/home']);
-      }else {
+          this.router.navigate( ['/home'] );
+      }
+      else
+      {
+          window.scrollTo( 0, 1100 );
+      }
+  }
+  
+  viewAllProducts(subcategory) {
+      this.closePanel.emit();
+      this.store.dispatch( this.itemAction.resetItemList() );
+      this.store.dispatch( this.itemAction.loadItems( subcategory.scatCode ) );
+      this.store.dispatch( this.subCategoryAction.getSubCategorySuccess(subcategory) );
+      
+      let category = this.categoryList.find( category => category.catCode === subcategory.catCode);
+      this.store.dispatch(this.categoryAction.getCategorySuccess(category));
       this.closePanel.emit();
-          window.scrollTo(0,600);
+      this.router.navigate( ['/products', subcategory.scatCode] );
   }
+  
+  viewItem(itemCode) {
+      this.closePanel.emit();
+      this.store.dispatch( this.itemAction.getItem(itemCode) );
+      this.router.navigate( ['/detail', itemCode] );
   }
   
-  goToWishlist(){
+  goToWishlist() {
+      this.closePanel.emit();
       this.router.navigate(['/wishlist']);
   }
   

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

@@ -7,10 +7,14 @@
    </ecm-template>
 </div>
 
+<ecm-panel #ecmPanel>
+
+</ecm-panel>
+
 <div class="row" *ngIf="noOfReviews != 0" #reviewsAndRating>
    <ecm-product-review [itemDetail] = "itemDetail" (doActivity) = "doActivity($event);"></ecm-product-review>
 </div>
 
-<ecm-related-items *ngIf="itemDetail" [scatCode]="scatCode"> </ecm-related-items>
+<ecm-related-items *ngIf="scatCode" [scatCode]="scatCode"> </ecm-related-items>
 
 <ecm-footer></ecm-footer>
\ No newline at end of file

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

@@ -3,6 +3,7 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { MdSnackBar } from '@angular/material';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';
+import { RESIZE_EVENT } from '../ecm-store/ecm-resize';
 
 import { AppState } from '../ecm-store/reducers';
 import { CartActions, ItemActions, WishListActions } from '../ecm-store/actions';
@@ -25,6 +26,7 @@ import { ECMHeaderComponent } from '../ecm-header/ecm-header.component';
 import { Reviews } from '../ecm-model/product-review.model';
 import { MdDialog, MdDialogRef, MdDialogConfig, MD_DIALOG_DATA } from '@angular/material';
 import { ECMWriteReviewDialog } from './ecm-product-review.component';
+import { EcmPanelComponent } from '../ecm-view/ecm-panel/ecm-panel.component';
 
 export const ECM_TEMPLATES: any = {
                                    'ecm-outing' : new EcmTemplateItem(EcmOutingComponent), 
@@ -43,6 +45,8 @@ export class EcmProductDetailsComponent implements OnInit {
 
   @ViewChild('reviewsAndRating') reviewsAndRating: ElementRef;
   @ViewChild('header') header: ECMHeaderComponent;
+  @ViewChild( 'ecmPanel' ) ecmPanel: EcmPanelComponent;
+  clientWidth: any;
   
   itemCode: string;
   ecmTemplate: EcmTemplateItem;
@@ -56,6 +60,11 @@ export class EcmProductDetailsComponent implements OnInit {
   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.clientWidth = document.documentElement.clientWidth;
+          RESIZE_EVENT.subscribe(data => {
+              this.clientWidth = data;
+        });
+      
 	    this.route.params.subscribe( params => {
            //let id: number = +params['id']; // (+) converts string 'id' to a number
            // In a real app: dispatch action to load the details here.
@@ -187,12 +196,15 @@ export class EcmProductDetailsComponent implements OnInit {
         {   
             if(data.firstReview)
             {
-                let dialogRef = this.dialog.open( ECMWriteReviewDialog, {
-                    data: {
-                      detail: this.itemDetail,
-                      userId: JSON.parse(this.checkUser()).LOGIN_CODE
+                if( this.clientWidth < 640 )
+                {
+                        this.ecmPanel.open({ type: 'overlay', option: 'WRITE_REVIEW_OPT', top:'0px', left: '0px', width:'100%', height: '100%', data: { detail: this.itemDetail,userId: JSON.parse(this.checkUser()).LOGIN_CODE } });
                 }
-                  });
+                else 
+                {
+                        this.ecmPanel.open({ type: 'overlay', option: 'WRITE_REVIEW_OPT', hideClose: true, top:'100px', left: '20%', width:'60%', height: '535px', data: { detail: this.itemDetail,userId: JSON.parse(this.checkUser()).LOGIN_CODE } });
+                }   
+                
             }
             else
             {
@@ -280,13 +292,15 @@ export class EcmProductDetailsComponent implements OnInit {
   
   openReviewDialog(userInfo){
       console.log("Complete Fecth Review");
-      let dialogRef = this.dialog.open( ECMWriteReviewDialog, {
-          data: {
-            detail: this.itemDetail,
-            userReview: this.userReview,
-            userId: JSON.parse(userInfo).LOGIN_CODE
+
+      if( this.clientWidth < 640 )
+      {
+              this.ecmPanel.open({ type: 'overlay', option: 'WRITE_REVIEW_OPT', top:'0px', left: '0px', width:'100%', height: '100%', data: { detail: this.itemDetail,userId: JSON.parse(this.checkUser()).LOGIN_CODE, userReview: this.userReview} });
+      }
+      else 
+      {
+              this.ecmPanel.open({ type: 'overlay', option: 'WRITE_REVIEW_OPT', top:'100px', left: '20%', width:'60%', height: '535px', data: { detail: this.itemDetail,userId: JSON.parse(this.checkUser()).LOGIN_CODE, userReview: this.userReview} });
       }  
-        });
   }  
   
   getAttributeType(itemCode){

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

@@ -160,11 +160,14 @@ export class EcmProductReviewComponent implements OnChanges {
 export class ECMWriteReviewDialog {
     
     @Input() public detail: ItemDetail;
+    @Input() public data;
+    @Output() closePanel = new EventEmitter();
+    
     @ViewChild('reviewForm') currentForm: NgForm;
     public reviewData: Reviews;
     public userReview;
     
-    constructor( @Inject(MD_DIALOG_DATA) private data: { detail: ItemDetail, userReview: Reviews, userId: string }, public dialogRef: MdDialogRef<ECMWriteReviewDialog>, private productreviewService: EcmProductReviewService)
+    constructor(private productreviewService: EcmProductReviewService)
     {
         this.reviewData = new Reviews();
     }
@@ -197,6 +200,6 @@ export class ECMWriteReviewDialog {
     
     submitReview() {
         this.productreviewService.submitReview(this.reviewData);
-        this.dialogRef.close();
+        this.closePanel.emit();
     }
 }

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

@@ -133,12 +133,20 @@
 			
 				<div class="ecm-returnsPolicy">
 					<span class="ecm-other-title">Cancellation Policy</span>
-					<span class="ecm-other-detail">{{itemDetailpath.cancellationPollicy}}</span>
+					<span class="ecm-other-detail">
+						Cancellation 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 cancellation 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">{{itemDetailpath.termsAndCondition}}</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>
 				
 			</md-card>

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

@@ -113,12 +113,18 @@
 				</div> -->
 				<div class="ecm-returnsPolicy">
 					<span class="ecm-other-title">Cancellation Policy</span>
-					<span class="ecm-other-detail">{{itemDetailpath.cancellationPollicy}}</span>
+					<span class="ecm-other-detail">Cancellation 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 cancellation 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">{{itemDetailpath.termsAndCondition}}</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>
 				
 			</md-card>

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

@@ -562,10 +562,10 @@ md-card {
     position: fixed !important;
     bottom: 0 !important;
     height: 65px !important;
-    margin-left: -31px !important;
     background: #fff;
     z-index: 2;
     width: 100%;
+    right: 0%;
 }
 
 .mobi-buy-cart-button > .Add_to_cart{

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

@@ -223,13 +223,21 @@
 			</div>
 
 			<div class="ecm-returnsPolicy">
-				<span class="ecm-other-title">Return Policy</span> <span
-					class="ecm-other-detail">{{itemDetail.itemDetail2.returnPolicy}}</span>
+				<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">{{itemDetail.itemDetail2.termsAndCondition}}</span>
+				<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>

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

@@ -146,12 +146,20 @@
 			
 				<div class="ecm-returnsPolicy">
 					<span class="ecm-other-title">Cancellation Policy</span>
-					<span class="ecm-other-detail">{{itemDetailpath.cancellationPollicy}}</span>
+					<span class="ecm-other-detail">
+					    Cancellation 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 cancellation 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">{{itemDetailpath.termsAndCondition}}</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>
 				
 			</md-card>

ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-write-review-dialog.html

@@ -25,4 +25,4 @@
 	</div>
 	<button type="submit" md-button class="submit-review-btn" [disabled]="reviewData.productRating == 0">Submit</button>
 </form>
-<button md-button class="cancel-review-btn" (click)="dialogRef.close();">Cancel</button>
+<button md-button class="cancel-review-btn" (click)="closePanel.emit();">Cancel</button>
\ No newline at end of file

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

@@ -21,6 +21,7 @@
 	padding: 15px 25px 10px 35px;
 	font-size: 14pt;
 	width: 100%;
+    line-height: 25px;
 }
 .locate-handle:hover {
 	background-color: lightblue;

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

@@ -7,7 +7,7 @@
 	</md-autocomplete>
 	    	
  	<span class="search-which-border">
-		<div class="locate-me">{{ userLocation ? userLocation.city : 'Locate Me' }}</div>
+		<div class="locate-me">{{ userLocation.city ? userLocation.city : 'Locate Me' }}</div>
 		<div class="locate-handle" (click)="loacteMe();" ></div> 
 		<img class="img-locate" title="Locate Me" src="locate_20_20.png"/> 
 	</span>
@@ -25,8 +25,7 @@
 			
 		<div md-ripple class="location" (click)="loacteMe();">
 			<img class="location-img-32" src="location_32_32.svg"/> 
-			<span class="location-text">{{ userLocation ? userLocation.address : 'Locate Me' }}</span>
-			<i class="material-icons location-arrow">keyboard_arrow_down</i>
+			<span class="location-text">{{ userLocation.address ? userLocation.address : 'Locate Me' }}</span>
 		</div>
     	<input class="sb-search-submit" type="submit" (click)="search(myInput.value)">	
 				

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

@@ -149,12 +149,17 @@ h6
  
 }
 
-.statusError{
-	position: relative;
-    font-size: 75%;
-    top: 100%;
-    width: 65%;
-    margin-top: -1.2em;
-    line-height: 1.2em;
-    overflow: hidden;
+.statusError {
+position: absolute;
+font-size: 75%;
+width: 50%;
+margin-top: -1.2em;
+line-height: 1.2em;
+overflow: hidden;
+}
+.successForm{
+	position: absolute;
+    left: calc( ( 100% / 2 ) - 110px );
+    top: 40%;
+    color: mediumvioletred;
 }

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

@@ -12,8 +12,8 @@
 		<div  *ngIf="activeForm == 'changePassForm'" >
 			<ng-container *ngTemplateOutlet="changePassForm"></ng-container>
 		</div>
-		<div  *ngIf="activeForm == 'successForm'" >
-			
+		<div class="successForm"  *ngIf="activeForm == 'successForm'" >
+		<span>Password change successfully</span>	
 		</div>
     </div>
 </div>

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

@@ -125,7 +125,7 @@ export class EcmSigninComponent implements OnInit {
                 console.log( 'comp result.results.indexOf [' + result.Response.results.indexOf('{') + ']' );
                 this.statusPending = false;
                 this.statusErrorMsg = null;
-                if( result.Response.status == 'success' )
+                if( result.Response.status == 'Success' )
                 {
                 	alert(result.Response.results);
                 	this.activeForm = 'changePassForm';

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

@@ -4,6 +4,7 @@ import { SubCategoryActions } from './subcategory';
 import { ItemActions } from './item';
 import { WishListActions } from './wishlist';
 import { LocationActions } from './location';
+import { MenuActions } from './menu';
 
 export {
     CartActions,
@@ -11,7 +12,8 @@ export {
     SubCategoryActions,
     ItemActions,
     LocationActions,
-    WishListActions
+    WishListActions,
+    MenuActions
 };
 
 export default [
@@ -20,5 +22,6 @@ export default [
     SubCategoryActions,
     ItemActions,
     LocationActions,
-    WishListActions
+    WishListActions,
+    MenuActions
 ];
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/app/ecm-store/actions/menu.ts

+import {Injectable} from '@angular/core';
+import {Action} from '@ngrx/store';
+
+@Injectable()
+export class MenuActions {
+    static LOAD_MENU = '[MENU] Load MENU';
+    loadMenu(): Action {
+        return {
+            type: MenuActions.LOAD_MENU
+        };
+    }
+    
+    static LOAD_MENU_SUCCESS = '[MENU] Load MENU Success';
+    loadMenuSuccess(sideoptions): Action {
+        return {
+            type: MenuActions.LOAD_MENU_SUCCESS,
+            payload: sideoptions
+        };
+        
+    }
+    
+    static RESET_MENU = '[MENU] Reset MENU';
+    resetMenu(): Action {
+        return {
+            type: MenuActions.RESET_MENU
+        };
+    }
+    
+}
\ No newline at end of file

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

@@ -3,13 +3,15 @@ import { CategoryEffects } from './category';
 import { SubCategoryEffects } from './subcategory';
 import { ItemEffects } from './item';
 import { WishlistEffects } from './wishlist';
+import { MenuEffects } from './menu';
 
 export {
     CartEffects,
     CategoryEffects,
     SubCategoryEffects,
     ItemEffects,
-    WishlistEffects
+    WishlistEffects,
+    MenuEffects
 };
 
 export default [
@@ -17,5 +19,6 @@ export default [
     CategoryEffects,
     SubCategoryEffects,
     ItemEffects,
-    WishlistEffects
+    WishlistEffects,
+    MenuEffects
 ];
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/app/ecm-store/effects/menu.ts

+import { Injectable } from '@angular/core';
+import { Effect, Actions } from '@ngrx/effects';
+
+import { AppState } from '../reducers';
+import { MenuActions } from '../actions';
+import { EcmCategoryService } from '../../ecm-view/ecm-category/ecm-category.service';
+
+@Injectable()
+export class MenuEffects {
+    constructor (
+        private update$: Actions,
+        private menuActions: MenuActions,
+        private svc: EcmCategoryService,
+    ) {}
+
+    @Effect() loadCategories$ = this.update$
+        .ofType(MenuActions.LOAD_MENU)
+        .switchMap(() => this.svc.getSideOptions())
+        .map(categories => this.menuActions.loadMenuSuccess(categories));
+    
+}

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

 import '@ngrx/core/add/operator/select';
 import {compose} from '@ngrx/core/compose';
 import {combineReducers} from '@ngrx/store';
-//import {storeLogger} from 'ngrx-store-logger';
+import {storeLogger} from 'ngrx-store-logger';
 
 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 menuReducer, * as fromMenu from './menu';
 
 import categoryReducer, * as fromCategory from './category';
 import subCategoryReducer, * as fromSubCategory from './subcategory';
 import itemReducer, * as fromItem from './item';
 import locationReducer, * as fromLocation from './location';
 
+
 export interface AppState {
     cartItems: fromCartList.CartListState;
     categories: fromCategoryList.CategoryListState;
     subcategories: fromSubCategoryList.SubCategoryListState;
     items: fromItemList.ItemListState;
     wishlistItems: fromWishList.WishListState;
+    menuList: fromMenu.MenuState;
     
     category: fromCategory.CategoryState;
     subcategory: fromSubCategory.SubCategoryState;
@@ -27,13 +30,14 @@ export interface AppState {
     location: fromLocation.LocationState;
 };
 
-//export default compose(storeLogger(),combineReducers)({
-export default compose(combineReducers)({
+export default compose(storeLogger(),combineReducers)({
+//export default compose(combineReducers)({
     cartItems: cartListReducer,
     categories: categoryListReducer,
     subcategories: subCategoryListReducer,
     items: itemListReducer,
     wishlistItems: wishListReducer,
+    menuList: menuReducer,
     
     category: categoryReducer,
     subcategory: subCategoryReducer,

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

+import {Action} from '@ngrx/store';
+import {Observable} from 'rxjs/Observable';
+
+import {MenuActions} from '../actions';
+import * as _ from 'lodash';
+
+export type MenuState = any[];
+
+const initialState: MenuState = [];
+
+export default function (state = initialState, action: Action): MenuState {
+    switch (action.type){
+        case MenuActions.LOAD_MENU_SUCCESS: {
+            return action.payload;
+        }
+        case MenuActions.RESET_MENU: {
+            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

@@ -52,8 +52,8 @@
 }
 
 .user-profile-image{
-    width: 200px;
-    height: 200px;
+    width: 170px;
+    height: 170px;
     position: relative;
     padding: 0;
     margin: 0;
@@ -65,8 +65,8 @@
     margin-left: calc( 50% - 200px / 2 );
 }
 .profile-image-128{
-    width: 200px;
-    height: 200px;
+    width: 170px;
+    height: 170px;
 }
 .profile-image {
     position: absolute;
@@ -206,16 +206,16 @@
 }
 
 .user-info-section {
-	height: 320px;
+	height: 280px;
     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;
+    padding: 15px 0px;
 }
 
 .user-profile-location {
@@ -262,8 +262,8 @@
     width: 35px;
     background-color: mediumvioletred;
     border-radius: 100%;
-    margin-left: calc(50% + 30px);
-    top: 180px;
+    margin-left: calc(50% + 14px);
+    top: 155px;
     cursor: pointer;
 }
 

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

@@ -51,7 +51,6 @@
 				<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>

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

@@ -99,12 +99,6 @@
 	 */
 }
 
-@media screen and (max-width: 640px) {
-  md-card {
-    margin: 0px 15px;
-  }	
-}
-
 @media screen and (max-width: 750px){
 
   .total-description {

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

@@ -35,8 +35,8 @@
 			<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="mini-cart-section scrollMe">
+<div #scrollMe  *ngIf="(cartItems | async)?.length > 0">
 	<div class="cartItemsDetail"
 		*ngFor="let item of cartItems | async">
 		<table style="width: 100%;">

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

@@ -5,7 +5,7 @@
 				<span class="ecm-section-info-title">Categories</span> 
 				<span class="ecm-section-info-subhead">Explore top Authentic Regional Foods, Outings, Celebrations around {{selectedPlace}}</span>
 			</div>
-			<div class="small-12 medium-6 large-4 column end "*ngFor="let _category of categories | async">
+			<div class="small-12 medium-6 large-4 column end " *ngFor="let _category of categories | async">
 				<ecm-card (storeData)="storeCategory(_category)" [category]="_category"></ecm-card>
 			</div>
 			<div></div>

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

@@ -43,9 +43,7 @@ export class EcmCategoryComponent implements OnInit {
     }
     
     getCategories() {
-        
         this.categories = this.store.select('categories');
-        
         /*   
           this.categoryService.getCategories().subscribe(
             categories => {

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

@@ -34,6 +34,15 @@ export class EcmCategoryService {
                       .catch(this.handleError);
     }
     
+    getSideOptions(): Observable<any> {
+        let headers = new Headers( { 'Content-Type': 'application/json' });
+        let options = new RequestOptions( { headers: headers });
+
+        return this.http.get( this.SERVICE_URL + '/sideoptions', options )
+            .map( this.extractData )
+            .catch( this.handleError );
+    }
+
 
     private extractData(res: Response) {
       let body = res.json();

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

@@ -15,11 +15,13 @@
 <!-- </div> -->
 
 <div [ngSwitch]="dialogData.option">
-		<span (click)="dialogRef.close();" class="hide-button"></span>
+		<span *ngIf="!dialogData.hideClose" class="hide-button" (click)="dialogRef.close();"></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>
 		<ecm-nav-menu *ngSwitchCase="'MENU_OPT'" (closePanel)="dialogRef.close();"> </ecm-nav-menu>
+		<ecm-write-review-dialog *ngSwitchCase="'WRITE_REVIEW_OPT'" [data]="dialogData.data" (closePanel)="dialogRef.close();"> </ecm-write-review-dialog>
+		
 		<div *ngSwitchCase="'SEARCH_OPT'">
 			<span style="float:left;">
 				<button md-button class="square-button" (click)="dialogRef.close()" >

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

@@ -33,7 +33,7 @@
     position: fixed;
     right: 5px;
 /*  top: 40px; */
-    top: 60px;
+    top: 64px;
     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;

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

@@ -82,16 +82,34 @@ export class EcmPanelComponent implements OnInit {
   private showSidePanel() {
       this.openTime = new Date();
       this.rightSlidePanel.nativeElement.style.display = "block";
+      this.rightSlidePanel.nativeElement.style.width = this.panelData.width;
+      this.rightSlidePanel.nativeElement.style.height = this.panelData.height;
+      this.rightSlidePanel.nativeElement.style.left = this.panelData.left;
+      if(this.panelData.option == 'MENU_OPT')
+          this.rightSlidePanel.nativeElement.style.borderRadius = "0px";
+      else 
+          this.rightSlidePanel.nativeElement.style.borderRadius = "5px";
   }
 
   private hideSidePanel() {
       this.rightSlidePanel.nativeElement.style.display = "none";
+      var el = document.querySelectorAll(".square-button");
+      console.log('Query-Selector',el);
+      if(this.panelData.option == 'MENU_OPT')
+          el[0].classList.remove('onSelect');
+      if(this.panelData.option == 'CART_OPT')
+          el[1].classList.remove('onSelect');
+      if(this.panelData.option == 'USER_OPT')
+          el[2].classList.remove('onSelect');
   }
 
   private showOverlayPanel() {
       this.overlayPanel.nativeElement.style.display = "block";
       this.overlayPanel.nativeElement.style.width = this.panelData.width;
+      this.overlayPanel.nativeElement.style.height = this.panelData.height;
+      this.overlayPanel.nativeElement.style.left = this.panelData.left;
       this.bgGlass.nativeElement.style.display = "block";
+            
       //document.body.style.overflow = "hidden";
       disableScroll();
   }

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

@@ -5,19 +5,17 @@
 	padding-top: 70px;
 }
 .ecm-section-info {
-	padding: 10px;
-	border: 2px solid ghostwhite;
+	padding: 10px 15px;
+    border: 1px solid #f2f2f2;
     border-top: 0px;
     border-right: 0px;
-    border-bottom: 1px;
+    height: 60px;
 }
 .ecm-section-info-title {
- /*	font-size: 26px;
-	color: #444;
-	display: block; */
-	font-size: 18px;
-    color: #441;
-   display: inline;
+	font-size: 20px;
+    color: black;
+    line-height: 40px;
+    font-weight: 700;
 }
 .ecm-section-info-subhead {
 	font-size: 16px;
@@ -26,7 +24,7 @@
 	display: inline
 }
 .end {
-	padding-top: 15px;
+/* 	padding-top: 15px; */
 	padding-bottom: 15px;
 }
 .row.row-subcategory {
@@ -185,6 +183,7 @@
 
 .product-list-card{
     display: inline-block;
+    padding: 0;
 } 
 @media screen and (max-width: 640px){
   .filter-pane{
@@ -221,21 +220,24 @@
 }
 
 .ecm-total-items{
-	font-size: 12px;
+    font-size: 13px;
     color: dimgray;
     font-weight: 600;
+    padding-left: 4px;
+}
+.ecm-items-details {
+/* 	margin-top: -39px; */
 }
-.ecm-items-details{
-	margin-top: -39px;
-	}
 .ecm-item-card-detail{
 	 border: 2px solid ghostwhite;
 	 display: inline-block;
 	 border-right: 0px;
 	 border-bottom: 0px;
+     padding-top: 20px;
 }	
 .ecm-filter-details{
- margin-top: -24px;
+/*  margin-top: -24px; */
+	padding: 0;
 }
 
 .ecm-items-section {
@@ -247,6 +249,7 @@
     padding-top: 20px;
     padding-bottom: 16px;
     border-bottom: 1px solid #f2f2f2;
+    height: 60px;
 }
 
 .filter-hader-title {
@@ -294,19 +297,19 @@
     font-size: 0.8rem;
 }
 
-.min-val-input {
-	width: 90px;
+.min-val-input, .max-val-input {
+	width: 80px;
     height: 35px;
-    margin-left: 20px;
     display: inline-block;
     padding-left: 10px;
 }
 
+.min-val-input {
+   margin-left: 20px;
+}
+
 .max-val-input {
-    width: 90px;
-    height: 35px;
     margin-right: 20px;
-    padding-left: 10px;    
 }
 
 .find-button {