Updated

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

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

 export class Reviews {
-    constructor(
-        public item_code: string = '',
-        public productComments: string = '',
-        public productNotUsfulCnt: number,
-        public productRating: number,
-        public productRemarks: string = '',
-        public productUsfulCnt: number,
-        public userId: string = '',
-        public reviewBy: string = '',
-        public reviewDate: string = '',
-        public site_code: string = ''
-    ) { }
+    
+        public item_code: string = '';
+        public productComments: string = '';
+        public productNotUsfulCnt: number;
+        public productRating: number;
+        public productRemarks: string = '';
+        public productUsfulCnt: number;
+        public userId: string = '';
+        public reviewBy: string = '';
+        public reviewDate: string = '';
+        public site_code: string = '';
+    
 }

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

 
-<ecm-header [isFixedHeader]=false> </ecm-header>
+<ecm-header #header [isFixedHeader]=false> </ecm-header>
 <ecm-breadcrumbs *ngIf="itemDetail" [pageName]="'DETAIL'" [itemDetail]='itemDetail'></ecm-breadcrumbs>
 
 <div class="row">
-   <ecm-template *ngIf="ecmTemplate" [itemDetail] = "itemDetail" [ecmTemplate] = "ecmTemplate" (scrollToReviews) = "scrollToReviews();" (doActivity) = "doActivity($event);" >
+   <ecm-template *ngIf="ecmTemplate" [itemDetail] = "itemDetail" [ecmTemplate] = "ecmTemplate" (scrollToReviews)="scrollToReviews();" (showSignInPanel) = "showSignInPanel();" (doActivity) = "doActivity($event);">
    </ecm-template>
 </div>
 
 <div class="row" *ngIf="itemDetail.itemRatings.NO_OF_REVIEWS != 0" #reviewsAndRating>
-   <ecm-product-review [itemDetail] = "itemDetail"></ecm-product-review>
+   <ecm-product-review [itemDetail] = "itemDetail" (showSignInPanel) = "showSignInPanel();"></ecm-product-review>
 </div>
 
 <ecm-related-items *ngIf="itemDetail" [scatCode]="scatCode"> </ecm-related-items>

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

@@ -18,6 +18,7 @@ import { EcmHandicraftComponent } from './ecm-template/ecm-handicraft.component'
 import { EcmProductReviewComponent } from './ecm-product-review.component';
 import { EcmRelatedItemsComponent } from '../ecm-view/ecm-related-items/ecm-related-items.component';
 import { ECMCart } from '../ecm-model/cart-model';
+import { ECMHeaderComponent } from '../ecm-header/ecm-header.component';
 
 export const ECM_TEMPLATES: any = {
                                    'ecm-outing' : new EcmTemplateItem(EcmOutingComponent), 
@@ -35,6 +36,7 @@ export const ECM_TEMPLATES: any = {
 export class EcmProductDetailsComponent implements OnInit {
 
   @ViewChild('reviewsAndRating') reviewsAndRating: ElementRef;
+  @ViewChild('header') header: ECMHeaderComponent;
   
   itemCode: string;
   ecmTemplate: EcmTemplateItem;
@@ -96,8 +98,13 @@ export class EcmProductDetailsComponent implements OnInit {
   performActivity(activity: string, data: any) {
     console.log( 'doActivity > > ' , activity, data );
     if( activity == 'ADD_CART' ) {
-        this.addToCart(data);
-        this.showSnackbar('Item Added to your Cart');
+        if( data.isAddToCart ) { //GO TO CART
+            this.router.navigate(['/checkout']);
+        }
+        else {                  //ADD TO CART
+            this.addToCart(data.itemCode);
+            this.showSnackbar('Item Added to your Cart');
+        }
     }
     else if( activity == 'ADD_WISHLIST' ) {
         this.addToWishlist();
@@ -107,7 +114,13 @@ export class EcmProductDetailsComponent implements OnInit {
         this.showSnackbar('Book Now - Redirect to Checkout');
     }
     else if( activity == 'BUY_NOW' ) {
-        this.showSnackbar('Buy Now - Redirect to Checkout');
+        if( !data.isAddToCart ) { //ADD TO CART
+            this.addToCart(data.itemCode);
+            this.showSnackbar('Item Added to your Cart');
+        }
+        //Redirect to Checkout
+        //this.showSnackbar('Buy Now - Redirect to Checkout');
+        this.router.navigate(['/checkout']);
     }
   }
 
@@ -141,5 +154,11 @@ export class EcmProductDetailsComponent implements OnInit {
           this.store.dispatch({type: 'SUB_CATEGORY', payload: subCategory});  
       }
   }
+  
+  showSignInPanel()
+  {
+      console.log('showSignin');
+      this.header.userAction();
+  }
 
 }

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

@@ -307,7 +307,7 @@ md-card {
 	box-shadow: 0 0px 16px -3px rgba(0,0,0,.1) !important;
 }
 
-.submit-review-btn {
+.submit-review-btn, .cancel-review-btn {
     background: #fff;
     color: mediumvioletred;
     max-width: 190px;
@@ -322,8 +322,8 @@ md-card {
     font-weight: 700;
     box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
     border-radius: 3px;
-    float: right;
     margin: 20px;
+    float: right;
 }
 
 .write-review-title {
@@ -413,6 +413,7 @@ md-card {
 	padding: 20px;
     display: block;
     font-size: 1rem;
+    max-width: 450px;
 }
 
 .review-title-block {

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

@@ -10,20 +10,15 @@
 	    <div class="row header-content">
 		<div class="medium-5 medium-4 columns ecm-total-reviews">
 			<span class="ecm-avg-rating"> {{itemAvgRating}} </span>
-			  <span class="ecm-ratings" *ngFor="let a of createRatings(itemAvgRating);">
-			    &#x2605;
-			  </span>
-			  
-			  <span class="ecm-null-ratings" *ngIf="!itemAvgRating">
-			    &#x2605;
-			  </span>
-			  
+			  <span class="star-rating-block">
+    			  <rating [rate]="itemAvgRating"></rating>
+ 			  </span>
 			<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">
-			<button md-button class="write-review-button">
+			<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>
 			</button>
@@ -75,7 +70,7 @@
 	    </div>
 	               	    
 	    <div *ngIf="reviews && numFound!=0" class="reviews-content">
-	    	<ecm-card *ngFor="let review of reviews" [reviewsData]="review"> </ecm-card>
+	    	<ecm-card *ngFor="let review of reviews" [reviewsData]="review" (showSignIn)="showSignIn();"> </ecm-card>
 	    </div>
 	     
 	     <div *ngIf="reviews && numFound!=0 && pageCount!=1" class="ecm-pagination-section">  

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

-import { Component, Input, OnChanges } from '@angular/core';
+import { Component, Input, OnChanges, Inject, Output, EventEmitter, ViewChild } from '@angular/core';
 import { Reviews } from '../ecm-model/product-review.model';
 import { EcmProductReviewService } from './ecm-product-review.service';
 import { ItemDetail } from '../ecm-model/product-detail-model';
+import {MdDialog, MdDialogRef, MdDialogConfig, MD_DIALOG_DATA} from '@angular/material';
+import { FormBuilder, Validators,NgForm } from '@angular/forms';
 
 @Component( {
     selector: 'ecm-product-review',
@@ -11,6 +13,7 @@ import { ItemDetail } from '../ecm-model/product-detail-model';
 export class EcmProductReviewComponent implements OnChanges {
 
     @Input() itemDetail: ItemDetail;
+    @Output() showSignInPanel = new EventEmitter();
     solrUrl = '/ecm/service/solr/local2do/';
     reviews: Reviews[];
     tabSort: string = "reviewDate desc";
@@ -32,7 +35,7 @@ export class EcmProductReviewComponent implements OnChanges {
         { value: 'productRating:[1 TO 1]', viewValue: '1 Star' }
     ];
 
-    constructor( private productreviewService: EcmProductReviewService ) { }
+    constructor( private productreviewService: EcmProductReviewService, public dialog: MdDialog ) { }
 
     loadReviews(itemDetail){
         this.itemDetail = itemDetail;
@@ -141,5 +144,67 @@ export class EcmProductReviewComponent implements OnChanges {
         
         this.fetchReviews();
     }
+    
+    checkUser() {
+        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
+                }
+              });
+        }
+        else
+        {
+            console.log("checkUser-else");
+            this.showSignInPanel.emit();
+        }
+    }
+    
+    public showSignIn() {
+        console.log("*********");
+        this.showSignInPanel.emit();
+    }
 
 }
+
+@Component( {
+    selector: 'ecm-write-review-dialog',
+    templateUrl: 'ecm-write-review-dialog.html',
+    styleUrls: ['./ecm-product-review.component.css']
+})
+export class ECMWriteReviewDialog {
+    
+    @Input() public detail: ItemDetail;
+    @ViewChild('reviewForm') currentForm: NgForm;
+    public reviewData: Reviews;
+    
+    constructor( @Inject(MD_DIALOG_DATA) private data: { detail: ItemDetail, 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.item_code = this.detail.itemCode;
+        this.reviewData.reviewBy = this.data.userId;
+        this.reviewData.productRating = 0;
+    }
+    
+    updateRate(updatedRate) {
+        console.log('Updated Rate: '+updatedRate);
+        this.reviewData.productRating = updatedRate;
+    }
+    
+    submitReview() {
+        this.dialogRef.close(this.reviewData);
+        console.log("=========");
+        console.log(JSON.stringify(this.reviewData));
+        
+        this.productreviewService.submitReview(this.reviewData);
+    }
+}

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

@@ -15,6 +15,7 @@ export class EcmCelebrationComponent implements OnInit, EcmTemplateInterface {
     @Input() itemDetail: ItemDetail;
     @Output() scrollToReviews = new EventEmitter();
     @Output() doActivity = new EventEmitter();
+    @Output() showSignInPanel = new EventEmitter();
     @ViewChild( 'recentView' ) recentView: EcmRecentViewComponent;
 
     userActionUrl = '/ecm/service/feeds/cart';
@@ -29,7 +30,7 @@ export class EcmCelebrationComponent implements OnInit, EcmTemplateInterface {
     constructor( private route: ActivatedRoute, private router: Router, private http: Http ) { }
 
     ngOnInit() {
-
+    
         console.log( "ngOnInit EcmCelebrationComponent Object Keys : " + Object.keys( this.itemDetail ) )
         console.log( this.itemDetail );
         this.route.params.subscribe( params => {

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

@@ -18,7 +18,7 @@ export class EcmFoodComponent implements OnInit, EcmTemplateInterface {
     @Input() itemDetail: ItemDetail;
     @Output() scrollToReviews = new EventEmitter();
     @Output() doActivity = new EventEmitter();
-    @Input() itemData: Item;
+    @Output() showSignInPanel = new EventEmitter();
     @ViewChild( 'recentView' ) recentView: EcmRecentViewComponent;
 
     userActionUrl = '/ecm/service/feeds/cart';

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

@@ -546,4 +546,49 @@ li::BEFORE {
 md-card {
 	border-radius: 3px !important;
 	box-shadow: 0 0px 16px -3px rgba(0,0,0,.1) !important;
+}
+
+/* Mobile View*/
+.mobi-buy-cart-button{
+    position: fixed !important;
+    bottom: 0 !important;
+    height: 65px !important;
+    margin-left: -31px !important;
+    background: #fff;
+    z-index: 2;
+    width: 100%;
+}
+
+.mobi-buy-cart-button > .Add_to_cart{
+	background: #fff;
+    color: mediumvioletred;
+    height: 50px;
+    font-size: 15px;
+    line-height: 15px;
+    text-align: center;
+    position: relative;
+    width: calc(50% - 40px);
+    font-weight: 700;
+    box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
+    border-radius: 3px;
+    margin-left: 40px;
+    margin-right: 18px;
+    margin-top: -7px;
+}
+.mobi-buy-cart-button > .Buy_now{
+	background: mediumvioletred;
+    color: #fff;
+    max-width: 190px;
+    height: 50px;
+    font-size: 15px;
+    line-height: 15px;
+    text-align: center;
+    position: relative;
+    width: calc(50% - 40px);
+    font-weight: bold;
+    box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
+    border-radius: 3px;
+    margin-top: -7px;
+    margin-left: -7px;
+    margin-right: 29px;
 }
\ No newline at end of file

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

@@ -5,8 +5,11 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { Http } from '@angular/http';
 import { EcmCartComponent } from '../../ecm-view/ecm-cart/ecm-cart.component';
 import { Item } from '../../ecm-model/product-model';
+import {MdDialog, MdDialogRef, MdDialogConfig, MD_DIALOG_DATA} from '@angular/material';
+import { RESIZE_EVENT } from '../../ecm-store/ecm-resize';
 
 import { EcmRecentViewComponent } from '../../ecm-view/ecm-recent-view/ecm-recent-view.component';
+import { ECMWriteReviewDialog } from '../ecm-product-review.component';
 
 @Component( {
     selector: 'ecm-handicraft',
@@ -18,8 +21,11 @@ export class EcmHandicraftComponent implements OnInit, EcmTemplateInterface {
     @Input() itemDetail: ItemDetail;
     @Output() scrollToReviews = new EventEmitter();
     @Output() doActivity = new EventEmitter();
+    @Output() showSignInPanel = new EventEmitter();
     @ViewChild( 'recentView' ) recentView: EcmRecentViewComponent;
     @ViewChild('itemDetails') itemDetails: ElementRef;
+    @Input() isAddToCart: boolean = false;
+    clientWidth: any;
     itemCode;
     //isCartItem = false;
     //@Input() itemData: Item;  
@@ -28,16 +34,28 @@ 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) { }
+    constructor( private route: ActivatedRoute, private router: Router, private http: Http, public dialog: MdDialog) { }
 
     ngOnInit() {
-
+        
         console.log( "Item data in handicraft " + JSON.stringify(this.itemDetail) );
         console.log( "ngOnInit EcmHandicraftComponent Object Keys : " + Object.keys( this.itemDetail ) )
         console.log( this.itemDetail );
         this.route.params.subscribe( params => {
             this.itemCode = params['key'];
         });
+        this.clientWidth = document.documentElement.clientWidth;
+        RESIZE_EVENT.subscribe(data => {
+            this.clientWidth = data;
+        });
+        if(this.itemDetail.productStatus.inCart == "Y")
+        {
+            this.isAddToCart = true;
+        }
+        else if(this.itemDetail.productStatus.inCart == "N")
+        {
+            this.isAddToCart = false;
+        }
     }
 
     ngAfterViewInit() {
@@ -67,6 +85,24 @@ export class EcmHandicraftComponent implements OnInit, EcmTemplateInterface {
         window.scrollTo(0, offsetTop + 60); 
     }
     
+    checkUser() {
+        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
+                }
+              });
+        }
+        else
+        {
+            console.log("checkUser-else");
+            this.showSignInPanel.emit();
+        }
+    }
+    
 }
 
 

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

@@ -2,7 +2,6 @@ import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angu
 import { Router,ActivatedRoute } from '@angular/router';
 import { Http } from '@angular/http';
 
-
 import { ItemDetail } from '../../ecm-model/product-detail-model';
 import { EcmTemplateInterface } from './ecm-template.component';
 import { EcmRecentViewComponent } from '../../ecm-view/ecm-recent-view/ecm-recent-view.component';
@@ -19,8 +18,9 @@ export class EcmOutingComponent implements OnInit, EcmTemplateInterface {
     
     @Input() itemDetail: ItemDetail;
     @Output() scrollToReviews = new EventEmitter();
-    @Output() doActivity = new EventEmitter();  
-    @ViewChild('recentView') recentView: EcmRecentViewComponent;
+    @Output() doActivity = new EventEmitter();
+    @Output() showSignInPanel = new EventEmitter();
+    @ViewChild( 'recentView' ) recentView: EcmRecentViewComponent;
 
     counterValue = 1;
     itemPrice = 1000;

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

@@ -22,6 +22,7 @@ export interface EcmTemplateInterface {
     itemDetail: ItemDetail;
     scrollToReviews: any;
     doActivity: any;
+    showSignInPanel: any;
 }
 
 @Component({
@@ -33,6 +34,7 @@ export class EcmTemplateComponent implements OnChanges {
     
     @Output() scrollToReviews = new EventEmitter();
     @Output() doActivity = new EventEmitter();
+    @Output() showSignInPanel = new EventEmitter();
     
     @Input('ecmTemplate') ecmTemplate: EcmTemplateItem;
     @Input('itemDetail') itemDetail:ItemDetail;
@@ -56,7 +58,8 @@ export class EcmTemplateComponent implements OnChanges {
         console.log("ecmTemplateItem.itemDetail in template"+ecmTemplateItem.itemDetail);
         (<EcmTemplateInterface>componentRef.instance).itemDetail = ecmTemplateItem.itemDetail;
         (<EcmTemplateInterface>componentRef.instance).scrollToReviews = this.scrollToReviews;
-        (<EcmTemplateInterface>componentRef.instance).doActivity = this.doActivity;  
+        (<EcmTemplateInterface>componentRef.instance).doActivity = this.doActivity;
+        (<EcmTemplateInterface>componentRef.instance).showSignInPanel = this.showSignInPanel;
     }
     
     ngOnChanges(){

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

+
+.star-rating {
+	color: rgb(500, 150, 50);
+}
+
+.empty-star-rating {
+	/*color: lightgray;*/
+}
+
+.fixed-rating {
+	cursor: default;
+}
+
+.resp-rating {
+   direction: rtl;
+   cursor: pointer;
+   position: absolute;
+   padding-left: 10px;
+}
+
+.resp-rating > span:hover,
+.resp-rating > span:hover ~ span {
+  color: rgb(500, 150, 50);
+}
+
+.star-ratings {
+	color: lightgray;
+}

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

+
+ <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>
+   </span>
+ </span>
+ 
+ 

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

+import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'rating',
+  templateUrl: './rating.component.html',
+  styleUrls: ['./rating.component.css']
+})
+export class RatingComponent implements OnInit {
+
+    private range:Array<number> = [5,4,3,2,1];
+    @Input() rate:number;
+    @Input() isResponsive = false;
+    @Output() updateRate= new EventEmitter();
+
+    constructor() { }
+
+    ngOnInit() {
+        console.log('Rating: ' +this.rate);
+    }
+    
+    update(value) {
+        this.rate = value;
+        this.updateRate.next(value);
+    }
+}