Updated

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

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

@@ -193,10 +193,16 @@ export class ECMHeaderComponent implements OnInit, OnDestroy, AfterViewChecked {
     }
 
     cartAction() {
-      this.showSidePanel('CART_OPT');
+        let openRoutePath = this.route.snapshot.url[0].path;
+        if(openRoutePath !== 'cart')
+        {
+            this.showSidePanel('CART_OPT');
+        }
     }
 
+    openTime:any;
     showSidePanel( opt: any ) {
+        this.openTime = new Date();
         console.log( 'ShowSidePanel : ' + opt );
         this.rightSlidePanel.nativeElement.style.display = "block";
         this.sideOption = opt;
@@ -251,6 +257,19 @@ export class ECMHeaderComponent implements OnInit, OnDestroy, AfterViewChecked {
       		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({

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

@@ -7,7 +7,7 @@
    </ecm-template>
 </div>
 
-<div class="row" *ngIf="itemDetail.itemRatings.NO_OF_REVIEWS != 0" #reviewsAndRating>
+<div class="row" *ngIf="noOfReviews != 0" #reviewsAndRating>
    <ecm-product-review [itemDetail] = "itemDetail" (showSignInPanel) = "showSignInPanel();"></ecm-product-review>
 </div>
 

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

@@ -42,6 +42,7 @@ export class EcmProductDetailsComponent implements OnInit {
   ecmTemplate: EcmTemplateItem;
   itemDetail: ItemDetail;
   scatCode;
+  noOfReviews;
   
   constructor(private route: ActivatedRoute, private router:Router, public subcategoryService: EcmProductDetailService, public snackBar: MdSnackBar, private store: Store<EcmStoreModel>) { }
 
@@ -69,6 +70,8 @@ export class EcmProductDetailsComponent implements OnInit {
                   console.log( "getItemDetail ecmTemplateName: " + ecmTemplateName )
                   this.ecmTemplate = ECM_TEMPLATES[ecmTemplateName];
                   this.scatCode = this.itemDetail.itemSubCategory.scatCode;
+                  this.noOfReviews = this.itemDetail.itemRatings.NO_OF_REVIEWS;
+                  
                   console.log("Changed scatCode.."+this.scatCode);
                   
                   if( this.ecmTemplate )

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

@@ -9,10 +9,10 @@
 }
 
 .ecm-select {
- float: right;
- padding-left: 25px;	
- font-size: 12px;
- padding-top: 20px;
+ 	float: right;
+	padding-left: 25px;	
+	font-size: 12px;
+	padding-top: 20px;
 }
 
 .ecm-options {
@@ -168,7 +168,7 @@
 
 .ecm-write-review {
 	position: absolute;
-	bottom: 0;
+	/*bottom: 0;*/
 	right: 0;
 }
 

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

@@ -8,7 +8,7 @@
  
 	  <div class="ratings-section"> 
 	    <div class="row header-content">
-		<div class="medium-5 medium-4 columns ecm-total-reviews">
+		<div class="large-3 columns ecm-total-reviews">
 			<span class="ecm-avg-rating"> {{itemAvgRating}} </span>
 			  <span class="star-rating-block">
     			  <rating [rate]="itemAvgRating"></rating>
@@ -16,8 +16,10 @@
 			<span class="ecm-total-ratings" *ngIf="itemAvgRating"> {{itemAvgRating}} Ratings </span>
 			<span class="ecm-total-ratings" *ngIf="!itemAvgRating"> 0 Ratings </span>
 		</div>
-		
-		<div class="medium-5 medium-4 columns ecm-write-review">
+		<div *ngIf="itemDetail" class="large-6 columns">
+		  <rating [ratingDetail]="itemDetail.itemRatings" (filterBy)="filter($event);"></rating>
+		</div>
+		<div class="large-3 columns ecm-write-review">
 			<button md-button class="write-review-button" (click)="checkUser();">
 				<i class="material-icons edit">&#xE254;</i> 
 				<span md-button class="write-review-text"> Write a Review </span>
@@ -30,13 +32,16 @@
 	<md-tab-group class="ecm-tab medium-12 col-sm-9" (selectChange)="onSelectChange($event)" > 
 	  <md-tab label="Most Recent">
 	    
+	    <!-- 
 	    <md-select class="ecm-select" placeholder="Filter By" [(ngModel)]="sortBy" (change)="sort()" name="sort">
             <md-option class="ecm-options" *ngFor="let type of sortTypes" [value]="type.value">
                  {{type.viewValue}}
             </md-option>
         </md-select>
+	     -->
+	     
+	   <div class="rating-details-section">
 	    
-	   <div class="rating-details-section"> 
 	    <div *ngIf="numFound==0" class="ecm-null-data-descr">
 	      No reviews to display
 	    </div>
@@ -58,19 +63,20 @@
 	  </md-tab>
 	
 	  <md-tab label="Most Helpful">
-
+		<!-- 
 	    <md-select class="ecm-select" placeholder="Filter By" [(ngModel)]="sortBy" (change)="sort()" name="sort">
             <md-option class="ecm-options" *ngFor="let type of sortTypes" [value]="type.value">
                  {{type.viewValue}}
             </md-option>
         </md-select>
+         -->
 	  <div class="rating-details-section"> 
 	    <div *ngIf="numFound==0" class="ecm-null-data-descr">
 	      No reviews to display
 	    </div>
 	               	    
 	    <div *ngIf="reviews && numFound!=0" class="reviews-content">
-	    	<ecm-card *ngFor="let review of reviews" [reviewsData]="review" (showSignIn)="showSignIn();"> </ecm-card>
+	    	<ecm-card *ngFor="let review of reviews" [reviewsData]="review"> </ecm-card>
 	    </div>
 	     
 	     <div *ngIf="reviews && numFound!=0 && pageCount!=1" class="ecm-pagination-section">  

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

@@ -26,6 +26,7 @@ export class EcmProductReviewComponent implements OnChanges {
     numFound;
     itemAvgRating;
     itemCode;
+    userReview: Reviews;
     
     sortTypes = [
         { value: 'productRating:[5 TO 5]', viewValue: '5 Stars' },
@@ -67,7 +68,9 @@ export class EcmProductReviewComponent implements OnChanges {
         this.fetchReviews();
     }
 
-    filter() {
+    filter(filterVal) {
+        console.log(filterVal+'filterVal--');
+        this.sortBy = "productRating:["+filterVal+" TO "+filterVal+"]";
         this.fetchReviews();
     }
 
@@ -139,9 +142,11 @@ export class EcmProductReviewComponent implements OnChanges {
     }
     
     ngOnChanges(){
-        this.itemCode = this.itemDetail.itemCode;
-        this.itemAvgRating = this.itemDetail.itemRatings.AVG_RATING;
-        
+        if(this.itemDetail)
+        {    
+            this.itemCode = this.itemDetail.itemCode;
+            this.itemAvgRating = this.itemDetail.itemRatings.AVG_RATING;
+        }
         this.fetchReviews();
     }
     
@@ -149,24 +154,29 @@ export class EcmProductReviewComponent implements OnChanges {
         var userInfo = localStorage.getItem( 'userInfo' );
         if ( userInfo !== 'undefined' && userInfo !== null && userInfo !== 'null' ) 
         {
-            let dialogRef = this.dialog.open( ECMWriteReviewDialog, {
-                data: {
-                  detail: this.itemDetail,
-                  userId: JSON.parse(userInfo).LOGIN_CODE
-                }
-              });
+            this.productreviewService.getUserReview(this.itemDetail.itemCode).subscribe(
+                    userReview => {
+                        this.userReview = userReview;
+                        if(this.userReview)
+                         this.openReviewDialog(userInfo);
+                    });
         }
         else
         {
-            console.log("checkUser-else");
             this.showSignInPanel.emit();
         }
     }
     
-    public showSignIn() {
-        console.log("*********");
-        this.showSignInPanel.emit();
-    }
+  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
+          }
+        });
+  }  
 
 }
 
@@ -180,19 +190,32 @@ export class ECMWriteReviewDialog {
     @Input() public detail: ItemDetail;
     @ViewChild('reviewForm') currentForm: NgForm;
     public reviewData: Reviews;
+    public userReview;
     
-    constructor( @Inject(MD_DIALOG_DATA) private data: { detail: ItemDetail, userId: string }, public dialogRef: MdDialogRef<ECMWriteReviewDialog>, private productreviewService: EcmProductReviewService)
+    constructor( @Inject(MD_DIALOG_DATA) private data: { detail: ItemDetail, userReview: Reviews, userId: string }, public dialogRef: MdDialogRef<ECMWriteReviewDialog>, private productreviewService: EcmProductReviewService)
     {
         this.reviewData = new Reviews();
     }
     
     public ngOnInit() {
-        console.log(this.data.userId + 'User ID of Reviwer');
        
         this.detail = this.data.detail;
+        this.reviewData.productRating = 0;
+        this.reviewData.productRemarks = "";
+        this.reviewData.productComments = "";
+        
+        this.userReview = this.data.userReview;
+        console.log(this.userReview+'User Review');
+        if(this.userReview)
+        {
+            this.reviewData.productRating = this.userReview.rating;
+            this.reviewData.productRemarks = this.userReview.remarks;
+            this.reviewData.productComments = this.userReview.comments;
+            
+        }
+        
         this.reviewData.item_code = this.detail.itemCode;
         this.reviewData.reviewBy = this.data.userId;
-        this.reviewData.productRating = 0;
     }
     
     updateRate(updatedRate) {
@@ -201,10 +224,7 @@ export class ECMWriteReviewDialog {
     }
     
     submitReview() {
-        this.dialogRef.close(this.reviewData);
-        console.log("=========");
-        console.log(JSON.stringify(this.reviewData));
-        
         this.productreviewService.submitReview(this.reviewData);
+        this.dialogRef.close();
     }
 }

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

@@ -4,6 +4,8 @@ import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/catch';
 import 'rxjs/add/operator/map';
 
+import { Reviews } from '../ecm-model/product-review.model';
+
 @Injectable()
 export class EcmProductReviewService {
   
@@ -53,6 +55,19 @@ export class EcmProductReviewService {
       }); 
   }
   
+  getUserReview(itemCode){
+      let getUserReviewUrl = '/ecm/service/feeds/review/';
+      getUserReviewUrl = getUserReviewUrl + itemCode;
+      console.log("URL: " +getUserReviewUrl);
+      
+      let headers = new Headers( { 'Content-Type': 'application/json' });
+      let options = new RequestOptions( { headers: headers });
+      
+      return this.http.get( getUserReviewUrl, options )
+      .map( this.extractData )
+      .catch( this.handleError );
+  }
+  
   private extractData(res: Response) {
       let body = res.json();
       console.log('extractData[' + JSON.stringify(body) + ']');

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

@@ -243,7 +243,7 @@ li::before {
 	color: black;
 	padding: 5px;
 	font-weight: inherit;
-	padding: 20px;
+	padding: 15px;
 }
 
 .product-detail-card {
@@ -523,7 +523,7 @@ li::BEFORE {
 	max-height: 600px;
 	position: relative;
 	display: block;
-	height: 600px;
+	/* height: 600px; */
 	width: 100%;
 }
 
@@ -535,12 +535,14 @@ li::BEFORE {
 	color: black;
     padding-right: 5px;
     padding-left: 5px;	
+    line-height: 24px;
 }
 
 .ecm-itemNumOfReviews {
 	padding-left: 5px;
     color: black;
     border-left: 1px solid #f3f3f3;
+    line-height: 24px;
 }
 
 md-card {

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

@@ -29,10 +29,11 @@
 			 Be the first to Review this product
 		   </span>
 					
-		   <span (click)="scrollToReviews.emit();" *ngIf="itemDetail.itemRatings.AVG_RATING > 0 || itemDetail.itemRatings.NO_OF_REVIEWS > 0 " style="display: inline-flex;" >
-				<span class="ecm-ratingStars" *ngFor="let a of createRatings(itemDetail.itemRatings.AVG_RATING)">&#x2605;</span>
+		   <span (click)="scrollToReviews.emit();" *ngIf="itemDetail.itemRatings.AVG_RATING > 0 || itemDetail.itemRatings.NO_OF_REVIEWS > 0 " style="display: inline-flex; cursor: pointer;" >
+				<rating [rate]="itemDetail.itemRatings.AVG_RATING"></rating>
 				<span class="ecm-itemAvgRating">{{itemDetail.itemRatings.AVG_RATING}} Ratings</span>
-				<span class="ecm-itemNumOfReviews">{{itemDetail.itemRatings.NO_OF_REVIEWS}} Reviews</span>
+				<span *ngIf="itemDetail.itemRatings.NO_OF_REVIEWS != 0" class="ecm-itemNumOfReviews">{{itemDetail.itemRatings.NO_OF_REVIEWS}} Reviews</span>
+				<span *ngIf="itemDetail.itemRatings.NO_OF_REVIEWS == 0" class="ecm-itemNumOfReviews" (click)="checkUser();">Be the first to Review this product</span>
 		   </span>
 		  </a>
            

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

@@ -9,20 +9,20 @@
 	<div class="write-review-section">
 	  <div>	
 	   <span class="product-rating-title">Product rating</span>	
-	   <rating [isResponsive]="true" (updateRate)="updateRate($event)" [rate]="0"></rating>
+	   <rating [isResponsive]="true" (updateRate)="updateRate($event)" [rate]="reviewData.productRating"></rating>
 	  </div>
 		
 	  <md-input-container class="review-title-box">
-	    <input #titleRef="ngModel" [(ngModel)]="reviewData.productRemarks" required mdInput placeholder="Review title" name="title" class="review-title-input">
+	    <input #titleRef="ngModel" [(ngModel)]="reviewData.productRemarks" mdInput placeholder="Review title" name="title" class="review-title-input">
 	  	<md-error *ngIf="titleRef.errors && titleRef.dirty">Review title required</md-error>
 	  </md-input-container>
 	
 	  <md-input-container class="descr-box">
-	    <textarea #dscrRef [(ngModel)]="reviewData.productComments" required mdInput placeholder="Description" name="dscr" rows="3" cols="40" class="descr-input"> </textarea>
+	    <textarea #dscrRef [(ngModel)]="reviewData.productComments" mdInput placeholder="Description" name="dscr" rows="3" cols="40" class="descr-input"> </textarea>
 	  	<md-error *ngIf="dscrRef.errors && dscrRef.dirty">Description required</md-error>
 	  </md-input-container>
 		  
 	</div>
-	<button type="submit" md-button class="submit-review-btn" [disabled]="!reviewForm.valid">Submit</button>
+	<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>
\ No newline at end of file

ecm/Angular/trunk/src/app/ecm-search/ecm-search-result/search.service.ts

 import { Injectable } from '@angular/core';
-import {Http, Response, Headers} from '@angular/http';
+import {Http, Response, Headers, RequestOptions} from '@angular/http';
 
+import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
 
 @Injectable()
 export class SearchService {
   
   val;
-  constructor() { }
+  constructor(private http:Http) { }
   
   setSearch(value){
+   console.log('Set Query:['+value+']');
    this.val=value;            
   }
   
   getSearch(){
+   console.log('Set Query:['+this.val+']');
    return this.val;
   }
+  
+  getSuggestions(value) {
+      console.log('Query:['+value+']');
+      let solrUrl = '/ecm/service/solr/local2do/';
+      solrUrl = solrUrl+value+'/json';
+      
+      let headers = new Headers( { 'Content-Type': 'application/json' });
+      let options = new RequestOptions( { headers: headers });
+      
+      return this.http.get( solrUrl, options )
+      .map( this.extractData )
+      .catch( this.handleError );
+      
+  }
+  
+  private extractData(res: Response) {
+      let body = res.json();
+      console.log('extractData[' + JSON.stringify(body) + ']');
+      return body || { };
+    }
+
+    private handleError (error: Response | any) {
+      // In a real world app, we might use a remote logging infrastructure
+      let errMsg: string;
+      if (error instanceof Response) {
+        const body = error.json() || '';
+        const err = body.error || JSON.stringify(body);
+        errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
+      } else {
+        errMsg = error.message ? error.message : error.toString();
+      }
+      console.error('Service handleError:' + errMsg);
+      return Observable.throw(errMsg);
+    }
 }

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

@@ -55,7 +55,7 @@
 	border: 2px solid ghostwhite;
     border-left: none;
     border-right: none;
-    padding: 30px 30px 0 30px;
+    padding: 20px;
 }
 
 .ViewAll{
@@ -69,18 +69,18 @@
     font-size: 18px;
 }
 
-.checkout-button, .viewAll-button
+.edit-cart-button, .viewAll-button
 {
 /*     width: 320px; */
 	width: 304px;
     height: 50px;
-    font-size: 15px;
-    line-height: 15px;
+    font-size: 16px;
+    line-height: 46px;
     text-align: center;
     border-radius: 2px;
     position: relative;
     padding: 0;
-    margin: 5px 0 5px 0;
+    margin: 38px 0 0px 0;
 }
 
 .viewAll-button{
@@ -89,33 +89,79 @@
 	line-height: 44px; 
 }
 
-.checkout-button
+.edit-cart-button
 {
 	 background: mediumvioletred; 
-	 color:#fff;
+	 color: #fff;
 }
 
-@media screen and (max-width:30em)
-{
-	
-  .listItems
-  {
+.edit-cart-button:hover { 
+       color: #fff;
+}
+
+@media screen and (max-width: 750px){
+
+  .total-description {
+    width: 70%;
+  }
+  .ecm-productDetails{
+     padding: 0px !important;
+  }
+  .ecm-textBox{
+       height: 42px !important;
+  }
+  .detail-Continue-Shopping-button{
+    height: 46px !important;
+    margin-top: 30px !important;
+    margin-bottom: 15px !important;
+  } 
+   .counter-screen{
+    float: inherit !important;
+    display: block !important;
+    position: relative !important;
+    padding: 20px;
+    padding-left: 25%;
+ }
+  .items-cost-rate {
+    text-align: left !important;
+    padding-top: 40px !important;
+   }
+  .wish-remove-dipslay{
+    text-align: right;
+    padding-top: 36px !important;
+  }
+  .item-image {
+    width: 25% !important;
+  }
+  .counter{
+    position: relative;
+    padding-top: 18px;
+ }
+ .listItems[_ngcontent-c8] {
     margin: 0px;
     padding: 0px;
   }
-  .color-change
-  {
-    position: relative;
-    left: 10px;
-    font-size: 16px;
-    color: mediumvioletred;
-    cursor: pointer;
-    bottom: 4px;
+  .ecm-productDetails{
+     margin-top: 6px !important;
   }
-}
+  .continue-shopping{
+    width: 89% !important;
+    margin-right: 20px !important;
+    margin-top: -8px !important;
+    bottom: 0px !important;
+  }
+  .wishList-items,.remove-items{
+    font-size: 16px !important;
+  }
+  .counter-button{
+    width: 50px !important;
+    height: 50px !important;
+  }
+}	
+
 .counter
 {
-     padding: 0px;
+    position: inherit;
 }
 
 .change-color
@@ -127,14 +173,6 @@
 {
    padding: 20px;
 }
-
-.continue-shopping
-{
-    width: 100%;
-	margin-right: 15px;
-    margin-left: 15px;
-}
-
 .ecm-payments{
 	display: flex;
     position: relative;
@@ -191,9 +229,14 @@
     margin-bottom: 15px;
 }
 .item-image{
-	width: 140px;
+/*	width: 140px;
 	padding-top: 16px; 
+    position: relative; */
+    width: 16%;
+    display: inline-block;
     position: relative;
+    bottom: 16px;
+   
 }
 .change-color{
 	padding-top: 16px;
@@ -220,7 +263,6 @@
 }
 .color-change{
 	position: relative;
-    left: 10px;
     font-size: 13px;
     color: mediumvioletred;
     cursor: pointer;
@@ -242,10 +284,8 @@
     cursor: pointer;
 }
 .wish-remove-dipslay{
-	display: inline-block;
-    padding-bottom: 16px;
-    position: relative;
-    left: 26px;
+	position: inherit;
+    padding-top: 18px;
 }
 
 .counter{
@@ -279,15 +319,12 @@
     border-radius: 100%;
 }
 .items-cost-rate{
-	position: relative;
-    float: right;
-    padding-top: 35px;
-    padding-bottom: 35px;
-    top: 5px;
-    padding-right: 37px;
+	position: inherit;
+    padding-top: 25px;
     font-size: 25px;
     font-weight: bold;
     line-height: 1;
+    text-align: right;
     
     
 }
@@ -308,6 +345,8 @@
     margin-right: 18px;
     height: 46px;
     width: 170px;
+    position: inherit;
+    bottom: 7px;
 }
 .items-desc{
      padding-top: 18px;
@@ -440,12 +479,6 @@
     margin-left: 17px;
 }
 
-@media screen and (max-width: 640px) {
-  md-card {
-	margin: 15px;
-  }	
-}
-
 /* attribute colors */
 .BLACK, .BLK_WH{
   background-color: black;
@@ -468,3 +501,53 @@
 .YELLOW{
   background-color: yellow;
 }
+.total-description{
+	display: inline-block;
+    position: inherit;
+   
+}
+.counter-screen{
+	display: inline-block;
+    position: inherit;
+    float: right;
+  /*  padding: 20px; */
+	
+}
+.new-checkout-button{
+	width: 100%;
+  /*  height: 45px; */
+    font-size: 15px;
+    line-height: 15px;
+    border-radius: 2px;
+    background: mediumvioletred;
+    color: #fff;
+  /*    margin-top: 4px; */
+    
+    position: fixed !important;
+    bottom: 0 !important;
+    height: 54px !important;
+    
+}
+.scrollMe{
+	overflow: hidden;
+	max-height: 350px;
+}
+.scrollMe:hover {
+    overflow: auto;
+ }
+ 
+ ::-webkit-scrollbar {
+    width: 7px;
+    -webkit-appearance: none;
+    
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: rgba(199, 21, 133,.5);
+    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
+    display: none;
+    
+}
+
+        
\ No newline at end of file

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

-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Component,AfterViewChecked, ElementRef, ViewChild, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { Http, Response, Headers, RequestOptions, URLSearchParams } from '@angular/http'
 import { MdSnackBar } from '@angular/material';
 import { MdDialog, MdDialogRef } from '@angular/material';
@@ -24,22 +24,32 @@ import { Router, ActivatedRoute } from '@angular/router';
     styleUrls: ['./ecm-cart.component.css'],
     providers: [EcmProductDetailService]
 })
-export class EcmCartComponent implements OnInit {
+export class EcmCartComponent implements OnInit, AfterViewChecked  {
     cartItemsDetail: Item[];
     cartCount = 0;
     catCode;
     displayItem = 3;
     totalPrice: number = 0;
+    
+    disableScrollDown = false
+    
 
     @Input() isMiniCart: boolean = false;
     @Output() closePanel = new EventEmitter();
     @Output() doActivity = new EventEmitter();
     
+    @ViewChild('scrollMe') private myScrollContainer: ElementRef;
+    
     constructor( private route: ActivatedRoute, public dialog: MdDialog, private router: Router,public subcategoryService: EcmProductDetailService, public cartService: EcmCartService, public snackBar: MdSnackBar, private http: Http, private store: Store<EcmStoreModel> ) { }
 
     ngOnInit() {
         this.getCartItem();
+        this.scrollToBottom();
     }
+    
+     ngAfterViewChecked() {        
+        this.scrollToBottom();        
+    } 
 
     getCartItem() {
         this.cartService.getCartItems().subscribe(
@@ -51,6 +61,7 @@ export class EcmCartComponent implements OnInit {
                     console.log( 'comp cartItemsDetail[' + this.cartItemsDetail  + '] \n this.cartItemsDetail[' + this.cartItemsDetail.length + ']' );
                     if ( this.cartItemsDetail ) {
                         this.getTotalPrice();
+                       
                         console.log( "the total Price is" + this.totalPrice );
                     }
                 }
@@ -91,8 +102,10 @@ export class EcmCartComponent implements OnInit {
 
     getTotalPrice() {
         this.cartItemsDetail.forEach(( item, i ) => {
-            this.totalPrice = this.totalPrice + parseFloat( item.costRate );
             item.itemQuantity = 1;
+            this.totalPrice = this.totalPrice + parseFloat( item.costRate ) ;
+            //  this.totalPrice = this.totalPrice + item.totalAmount ;
+            
         });
     }
 
@@ -110,6 +123,8 @@ export class EcmCartComponent implements OnInit {
         let cartData = new ECMCart;
         cartData.itemCode = data.itemCode;
         cartData.quantity = data.itemQuantity;
+        cartData.itemCost = parseFloat( data.costRate );
+       // cartData.totalAmount = (cartData.quantity)* (cartData.itemCost);
         
         this.store.dispatch({ type: INCREMENT, payload: cartData });
         this.subcategoryService.addToCart(cartData);
@@ -120,6 +135,7 @@ export class EcmCartComponent implements OnInit {
         data.itemQuantity--;
         let cartData = new ECMCart;
         cartData.itemCode = data.itemCode;
+        
         this.store.dispatch({ type: DECREMENT, payload: cartData });
         this.openSnackBar( data.shDescr + ' Removed from your Cart' );
     }
@@ -164,6 +180,13 @@ export class EcmCartComponent implements OnInit {
     viewItem( itemCode ) {
         this.router.navigate( ['/detail', itemCode] );
     }
+    
+    scrollToBottom(): void {
+        try {
+            this.myScrollContainer.nativeElement.scrollBottom = this.myScrollContainer.nativeElement.scrollHeight;
+        } catch(err) { }                 
+    } 
+    
 }
 
 

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

@@ -2,7 +2,7 @@
 	margin-top: 70px;
 }
 
-.medium-btn{
+.medium-btn {
    display: inline-block;
     box-sizing: border-box;
     border: 2px solid mediumvioletred;
@@ -23,7 +23,7 @@
     top: 140px;
 }
 
-.head{
+.head {
 	font-size: 18px;
 	display: block;
 	padding-left: 20px;
@@ -35,17 +35,17 @@
     color: white;
 }
 
-.head-Shipping{
+.head-Shipping {
 	font-size: 18px;
 	display: block;
 	padding-left: 20px;
 	padding-right: 20px;
 }
-.shippingaddress{
+.shippingaddress {
 	position: relative;
     top: 9px;
 }
-.Country{
+.Country {
 	position: relative;
     top: 8px;
 }
@@ -55,20 +55,20 @@
     margin: 20px 20px 20px 25px;
 }
 
-.billingAddress{
+.billingAddress {
 
 }
 
-.countryValue{
+.countryValue {
     font-size: 18px;
     display: block;
 	padding-left: 20px;
 	padding-right: 20px;
 }
-.orderSummary{
+.orderSummary {
 	
 }
-.order{
+.order {
 	display: block;
     font-size: 18px;
     padding: 10px;
@@ -85,7 +85,6 @@
 }
 
 .expiryDetails{
-	
     font-size: 18px;
 }
 .payment {
@@ -117,45 +116,46 @@
     vertical-align: bottom;
     padding-top: 10px;
 }
-.userEmail{
+.userEmail {
 	display: block;
 	margin-left: 20px;
 	margin-right: 20px;	
 }
-.userInfo{
+.userInfo {
 	display: block;
 	margin-left: 20px;
 	margin-right: 20px;	
 }
-.userAdress{
+.userAdress {
 	display: block;
 	margin-left: 20px;
 	margin-right: 20px;	
 }
-.userCity{
+.userCity {
 	display: block;
 	margin-left: 20px;
 	margin-right: 20px;	
 }
-.userState{
+.userState {
 	display: block;
 	margin-left: 20px;
 	margin-right: 20px;	
 }
-.userPostal{
+.userPostal {
 	display: block;
 }
-.Cardholder{
+.Cardholder {
 	margin-left: 20px;
 	margin-right: 20px;	
 }
-.CardNumber{
+.CardNumber {
 	margin-left: 20px;
 	margin-right: 20px;	
 }
 
 .expiry-title {
 	padding-left: 20px;
+    padding-bottom: 20px;
 }
 
 .months {
@@ -181,7 +181,7 @@
 	margin-right: 20px;		
 }
 
-.place-order-button{
+.place-order-button {
 	width: 100%;
     height: 50px;
     font-size: 15px;
@@ -191,8 +191,7 @@
 	margin-top: 20px;
 }
 
-.place-order-button[disabled]
-{
+.place-order-button[disabled] {
 	background: #e0e0e0;
     color: #fff;
 }
@@ -218,8 +217,8 @@
 .item-cost{
 	width: 40%;
 }
-
-md-error{
+ 
+md-error {
 	padding-top: 12px;
 }
 
@@ -245,11 +244,10 @@ md-error{
 }
 .ecm-input:focus 		
 { 
-	
-	outline:none; 
+	 outline:none; 
 	 border:none;
 	 box-shadow: none;
-	}
+}
 	
 /* LABEL ======================================= */
 .ecm-label 				 
@@ -383,9 +381,10 @@ select:focus ~ label
   color:#5264AE;
 }
 
-.bar-select 	{ position:relative; display:block; 
-/*   width:300px;  */
-  
+.bar-select { 
+	position:relative;
+	display:block; 
+    /*width:300px;*/
 }
 .bar-select:before, .bar-select:after 	{
   content:'';

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

@@ -8,7 +8,11 @@
 }
 
 .fixed-rating {
-	cursor: default;
+	
+}
+
+.resp-star {
+	cursor: pointer;
 }
 
 .resp-rating {
@@ -25,4 +29,74 @@
 
 .star-ratings {
 	color: lightgray;
+    display: inline-grid;
+}
+
+.rating-chart-container {
+	padding-left: 40px;	
+}
+
+.rating-full-bar {
+	cursor: pointer;
+}
+
+.chart-star {
+	font-size: 16px;
+    color: #444;
+}
+
+.rating-no {
+	font-size: 18px;
+    vertical-align: bottom;
+}
+
+.rating-container {
+	width: 150px;
+    padding-bottom: 3px!important;
+}
+
+.rating-bar {
+	display: block;
+	height: 10px;
+	border-radius: 2px;
+	box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
+}
+
+.avg-rating-bar {
+	display: block;
+	height: 10px;
+	border-radius: 2px;
+	background-color: #a1c900!important;
+}
+
+.rating-count {
+    font-size: 15px;
+    padding-left: 8px;
+    line-height: 28px;
+    float: right;
+}
+
+.star-count-container {
+    padding-bottom: 3px;
+    width: 40px;
 }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

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

-
- <span  [ngClass]="isResponsive ? 'resp-rating' : 'fixed-rating'">
+<span *ngIf="rate >= 0">
+ <span [ngClass]="isResponsive ? 'resp-rating' : 'fixed-rating'">
    <span *ngFor="let a of range; let i = index" class="star-ratings">
-     <i *ngIf="isResponsive" class="material-icons" (click)="update(a)" [ngClass]="a <= rate ? 'star-rating' : 'empty-star-rating'"> &#xE885; </i>
-     <i *ngIf="!isResponsive" class="material-icons" (click)="update(a)" [ngClass]="i < rate ? 'star-rating' : 'empty-star-rating'"> &#xE885; </i>
+     <i *ngIf="isResponsive" class="material-icons resp-star" (click)="update(a)" [ngClass]="a <= rate ? 'star-rating' : 'empty-star-rating'"> &#xE885; </i>
+     <i *ngIf="!isResponsive" class="material-icons" [ngClass]="i < rate ? 'star-rating' : 'empty-star-rating'"> &#xE885; </i>
    </span>
  </span>
+</span>
+ 
+ <div *ngIf="ratingDetail">
+ 	<table class="rating-chart-container">
+	 	<tr *ngFor="let a of range; let i = index" class="rating-full-bar" (click)="filterBy.emit(a)">
+		 	<td class="star-count-container">
+		 		<span class="rating-no">{{a}}</span> <i class="material-icons chart-star"> &#xE885; </i>
+		 	</td>
+		 	<td class="rating-container">
+			 	<span class="rating-bar">
+			 		<span [ngStyle]="{'width.%': (overallRatings[i]/totalRatings)*100}" class="avg-rating-bar"></span>
+			 	</span>
+		 	</td>
+		 	<td class="rating-count">
+		 		{{overallRatings[i]}}
+		 	</td>
+	 	</tr>
+ 	</table>
+ </div>
  
  

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

@@ -8,14 +8,27 @@ import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core';
 export class RatingComponent implements OnInit {
 
     private range:Array<number> = [5,4,3,2,1];
+    private overallRatings:Array<number> = [25,10,7,3,1];
     @Input() rate:number;
     @Input() isResponsive = false;
+    @Input() ratingDetail;
     @Output() updateRate= new EventEmitter();
-
+    @Output() filterBy= new EventEmitter();
+    totalRatings = 0;
+    keys;
+    
     constructor() { }
 
     ngOnInit() {
         console.log('Rating: ' +this.rate);
+        
+        if(this.ratingDetail)
+        {
+            this.overallRatings.forEach(( rating, i ) => {
+                this.totalRatings = this.totalRatings + rating;
+            });   
+        }
+        
     }
     
     update(value) {