Updated

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

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

@@ -18,7 +18,7 @@
   content: "/";
   padding-left: 5px;
   padding-right: 5px;
-  color: mediumvioletred;
+  color: black;
 }
 .ecm-breadcrumbs li:first-child:before {
   content: "";
@@ -27,13 +27,14 @@
 
 .ecm-breadcrumbs li a {
 	background-color: transparent;
-	color: mediumvioletred;
+	color: black;
 	text-decoration: none;
 	cursor: pointer;
 }
 
 .ecm-breadcrumbs li a:hover {
-    color: rgba(199, 21, 133, 0.45);
+    /*color: rgba(199, 21, 133, 0.45);*/
+    color: mediumvioletred;
 }
 
 /*
@@ -51,11 +52,8 @@
 .row.sub-heading[_ngcontent-c19] {
     top: 70px;
     position: relative;
-    background: #ffffff;
-    /* max-width: 100rem; */
     padding-left: 3rem;
-    /* box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1); */
-    background-color: #F2F2F2;
+    margin-top: 5px;
 }
 
 .img-back-32 {
@@ -68,6 +66,7 @@
     padding: 0;
     height: 20px !important;
     width: 20px !important;
+    min-width: 20px !important;
     box-shadow: 0 0 0 3px rgba(0 ,0 ,0, 0.1), inset 0 0 0px 20px rgba(0 ,0, 0, 0.1);
     cursor: pointer;
     border-radius: 100%;
@@ -76,4 +75,11 @@
 
 .ecm-section-info {
 	padding: 8px;
+}
+
+.disabled-link {
+	background-color: transparent;
+    color: gray;
+    text-decoration: none;
+    cursor: default;
 }
\ No newline at end of file

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

 <div class="row sub-heading">
 	<div class="ecm-section-info" >
-		<img class="fixed-header-back img-back-32" (click) = "backClicked();" /> 
+		<img class="fixed-header-back img-back-32 mat-raised-button" (click) = "backClicked();" /> 
 		<ul class="ecm-breadcrumbs">
-		    <li *ngFor="let breadcrumb of breadcrumbs">
-		    	<a [routerLink]="[breadcrumb.url]">{{breadcrumb.label}}</a>
+		    <li *ngFor="let breadcrumb of breadcrumbs; let i = index">
+		    	<a *ngIf="!((i+1) == breadcrumbs.length)" [routerLink]="[breadcrumb.url]">{{breadcrumb.label}}</a>
+		    	<span class="disabled-link" *ngIf="(i+1) == breadcrumbs.length">{{breadcrumb.label}}</span>
 		    </li>
 		</ul>
 	</div>

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

@@ -46,7 +46,14 @@
 	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
 }
 
+.img-mask {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+}
+
 /* ContentPlugin - External Component CSS*/
+
 .contentPopupTitle{
 	color: mediumvioletred;
 }
@@ -60,21 +67,21 @@
 }
 
 .close-button {
-	right: 0;
-	position: absolute;
-	display: inline-block;
-	width: 24px;
-	height: 24px;
-	margin: 15px;
-	background-color: transparent;
-	border: none;
-	cursor: pointer;
-	border-radius: 100%;
-	transition: 0.6s;
-	-webkit-transition: 0.6s;
-	z-index: 4;
-	box-shadow: none;
-    left: auto;
+	right: 0 !important;
+	position: absolute !important;
+	display: inline-block !important;
+	width: 24px !important;
+	height: 24px !important;
+	margin: 15px !important;
+	background-color: transparent !important;
+	border: none !important;
+	cursor: pointer !important;
+	border-radius: 100% !important;
+	transition: 0.6s !important;
+	-webkit-transition: 0.6s !important;
+	z-index: 4 !important;
+	box-shadow: none !important;
+    left: auto !important;
 }
 .close-button:hover {
 	box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px
@@ -100,8 +107,13 @@
 	transform: translateY(-50%) rotate(-45deg) scale(1);
 }
 
-.img-mask {
-	width: 100%;
-	height: 100%;
-	position: absolute;
+.attachedFile {
+    border: none !important;
+}
+
+.thumbnailView {
+	height: calc( 100% - 90px) !important;
+	display: block !important;
+	top: 0 !important;
+	left: 0 !important;
 }

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

@@ -3,12 +3,12 @@
 <ecm-breadcrumbs *ngIf="itemDetail" [pageName]="'DETAIL'" [itemDetail]='itemDetail'></ecm-breadcrumbs>
 
 <div class="row">
-   <ecm-template #ecmTemplateComp *ngIf="ecmTemplate" [ecmTemplate] = "ecmTemplate" (scrollToReviews) = "scrollToReviews();" (doActivity) = "doActivity($event);" >
+   <ecm-template *ngIf="ecmTemplate" [itemDetail] = "itemDetail" [ecmTemplate] = "ecmTemplate" (scrollToReviews) = "scrollToReviews();" (doActivity) = "doActivity($event);" >
    </ecm-template>
 </div>
 
 <div class="row" *ngIf="itemDetail" #reviewsAndRating>
-   <ecm-product-review #ecmProductReviewComp [itemDetail] = "itemDetail"></ecm-product-review>
+   <ecm-product-review [itemDetail] = "itemDetail"></ecm-product-review>
 </div>
 
-<ecm-related-items #ecmRelatedItemsComp *ngIf="itemDetail" [scatCode]="itemDetail.itemSubCategory.scatCode"> </ecm-related-items>
+<ecm-related-items *ngIf="itemDetail" [scatCode]="scatCode"> </ecm-related-items>

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

@@ -35,13 +35,11 @@ export const ECM_TEMPLATES: any = {
 export class EcmProductDetailsComponent implements OnInit {
 
   @ViewChild('reviewsAndRating') reviewsAndRating: ElementRef;
-  @ViewChild('ecmTemplateComp') ecmTemplateComp: EcmTemplateComponent;
-  @ViewChild('ecmProductReviewComp') ecmProductReviewComp: EcmProductReviewComponent;
-  @ViewChild('ecmRelatedItemsComp') ecmRelatedItemsComp: EcmRelatedItemsComponent;
   
-  itemCode:string;
-  ecmTemplate : EcmTemplateItem;
+  itemCode: string;
+  ecmTemplate: EcmTemplateItem;
   itemDetail: ItemDetail;
+  scatCode;
   
   constructor(private route: ActivatedRoute, private router:Router, public subcategoryService: EcmProductDetailService, public snackBar: MdSnackBar, private store: Store<EcmStoreModel>) { }
 
@@ -65,19 +63,16 @@ export class EcmProductDetailsComponent implements OnInit {
               console.log( "getItemDetail ecmTemplateName: " + ecmTemplateName )
               this.ecmTemplate = ECM_TEMPLATES[ecmTemplateName];
               
-              if(this.ecmProductReviewComp && this.ecmRelatedItemsComp && this.itemDetail)
+              if(this.itemDetail)
               {
-                  this.ecmProductReviewComp.loadReviews(this.itemDetail);
-                  this.ecmRelatedItemsComp.getRelatedItems(this.itemDetail.itemSubCategory.scatCode);
+                  this.scatCode = this.itemDetail.itemSubCategory.scatCode;
+                  console.log("Changed scatCode.."+this.scatCode);
               }
               
               if( this.ecmTemplate )
               {
                   this.ecmTemplate.setItemDetail(itemDetail);
-                  if(this.ecmTemplateComp)
-                  {
-                     this.ecmTemplateComp.loadComponent(this.ecmTemplate);
-                  }
+
               }
               else
               {

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

-md-card{
-   	margin: 15px;	
-}
 
 .ecm-tab {
     padding-left: 15px;
@@ -216,7 +213,7 @@ md-card{
 .ecm-review-card {
     /* position: absolute; */
     /* width: calc(100% - 380px); */
-    margin-top: 25px;
+    margin-top: 20px;
     top: 70px;
 }
 
@@ -273,6 +270,14 @@ hr {
 	}
 }
 
+@media screen and (max-width: 640px) {
+  md-card {
+	margin: 15px;
+  }	
+}
 
+.ecm-review-section {
+	padding-right: 10px;
+}
 
 

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

 <div class="row">
-<div class="medium-8 large-8 columns">
+<div class="medium-8 large-8 columns ecm-review-section">
 <md-card class="ecm-review-card">
 	<div class="ecm-review-header">  
 	   <div>
@@ -62,7 +62,7 @@
 	
 	  <md-tab label="Most Helpful">
 
-	    <md-select class="ecm-select" placeholder="Sort By" [(ngModel)]="sortBy" (change)="sort()" name="sort">
+	    <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>

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

-import { Component, OnInit, Input } from '@angular/core';
+import { Component, Input, OnChanges } 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';
@@ -8,7 +8,7 @@ import { ItemDetail } from '../ecm-model/product-detail-model';
     templateUrl: './ecm-product-review.component.html',
     styleUrls: ['./ecm-product-review.component.css']
 })
-export class EcmProductReviewComponent implements OnInit {
+export class EcmProductReviewComponent implements OnChanges {
 
     @Input() itemDetail: ItemDetail;
     solrUrl = '/ecm/service/solr/local2do/';
@@ -34,13 +34,6 @@ export class EcmProductReviewComponent implements OnInit {
 
     constructor( private productreviewService: EcmProductReviewService ) { }
 
-    ngOnInit() {
-        this.itemCode = this.itemDetail.itemCode;
-        this.itemAvgRating = this.itemDetail.itemRatings.AVG_RATING;
-        
-        this.fetchReviews();
-    }
-    
     loadReviews(itemDetail){
         this.itemDetail = itemDetail;
         this.itemCode = this.itemDetail.itemCode;
@@ -141,5 +134,12 @@ export class EcmProductReviewComponent implements OnInit {
         }
         return rating;
     }
+    
+    ngOnChanges(){
+        this.itemCode = this.itemDetail.itemCode;
+        this.itemAvgRating = this.itemDetail.itemRatings.AVG_RATING;
+        
+        this.fetchReviews();
+    }
 
 }

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

-md-card {
+@media screen and (max-width: 640px) {
+  md-card {
 	margin: 15px;
+  }	
 }
 
 .ecm-product-ratings {
 	color: rgb(500, 150, 50);
 	font-size: large;
 	display: block;
+	padding-right: 10px;
 }
 
 .ecm-null-ratings {
@@ -17,32 +20,38 @@ md-card {
     background: #fff;
     color: mediumvioletred;
     border: 1px solid lightgray;
-    width: calc(50% - 10px);
-    height: 50px;
+    max-width: 220px;
+    height: 54px;
     font-size: 15px;
     line-height: 15px;
     text-align: center;
-    border-radius: 2px;
+    /* border-radius: 2px; */
     position: relative;
-    float: left;
+    /* float: left; */
+    width: calc(50% - 40px);
 }
 
 .Buy_now {
     background: mediumvioletred;
     color: #fff;
-    width: calc(50% - 10px);
-    height: 50px;
+    max-width: 220px;
+    height: 54px;
     font-size: 15px;
     line-height: 15px;
     text-align: center;
-    border-radius: 2px;
+    /* border-radius: 2px; */
     position: relative;
-    float: right;
+    /* float: right; */
+    width: calc(50% - 40px);
+    margin-left: 10px;
+    margin-right: 10px;
 }
 
 .link_button {
 	color: mediumvioletred;
 	font-weight: bold;
+	padding-left: 15px;
+    padding-right: 15px;
 }
 
 ul {
@@ -104,7 +113,7 @@ li::before {
 .ecm-payments {
     font-size: 15px;
     color: dimgrey;
-    padding: 15px;
+    padding: 15px 0px 15px 0px;
 }
 
 .ecm-share {
@@ -141,7 +150,7 @@ li::before {
 }
 
 .short-detail {
-	padding-bottom: 20px;
+	padding-bottom: 15px;
 }
 
 .ecm-card {
@@ -149,7 +158,7 @@ li::before {
 	/* max-width: 75rem; */
 	/* margin-left: auto; */
 	/* margin-right: auto; */
-	padding-top: 25px;
+	padding-top: 20px;
 }
 
 .ecm-itemDeatils {
@@ -235,7 +244,8 @@ td {
 }
 
 .data-title {
-	padding: 5px;
+	padding: 5px 0px 5px 0px;
+	color: #444;
 }
 
 .data-title-detail {
@@ -246,6 +256,11 @@ td {
 
 .product-detail-card {
 	margin-top: 15px;	
+	padding: 10px;
+}
+
+.ecm-recent-view {
+	padding-left: 10px;	
 }
 
 @media screen and (max-width: 640px) {
@@ -263,8 +278,8 @@ hr {
 }
 
 .attribute-button{
-   color: mediumvioletred;
-   background-color: white;
+   color: black;
+   background-color: #efecec;
    width: 40px;
    height: 40px;
    min-width: 40px;
@@ -294,11 +309,12 @@ hr {
 	font-size: 1rem;
 	position: relative;
 	display: inline-block;
-	height: 100px;
-	line-height: 100px;
+	height: 60px;
+	line-height: 60px;
 	float: left;
 	margin: 0;
 	padding: 0;
+    font-weight: bold;
 }
 
 .size-title  {
@@ -322,8 +338,8 @@ hr {
 .color-variant {
 	margin-left: 15px;
 	padding: 0;
-	height: 100px;
-	width: 100px;
+	height: 60px;
+	width: 60px;
 	position: relative;
 	display: inline-block;
 	cursor: pointer;
@@ -331,6 +347,7 @@ hr {
 
 .help-icon {
     cursor: pointer;
+    color: black;
 }
 
 .delivery-info {
@@ -338,7 +355,8 @@ hr {
 }
 
 .offers-section {
-	padding-bottom: 30px;
+	padding-bottom: 20px;
+	font-size: 15px;
 }
 
 .seller-name {
@@ -346,8 +364,9 @@ hr {
 	color: mediumvioletred;
 	font-size: 15px;
 	font-weight:bold;
-    padding-left: 10px;
-    padding-right: 10px;
+    padding-left: 2px;
+    padding-right: 2px;
+    cursor: pointer;
 }
 
 .sold-by-title {
@@ -360,14 +379,18 @@ hr {
 .item-descr {
 	display: block; 
 	font-size: 20px;
-	font-weight:bold;
+	font-weight:700;
+    padding-right: 120px;
+    line-height: 25px
 }
 
 .item-shdescr {
 	display: block;
 	color: mediumvioletred;
-	font-size: 14px;
+	font-size: 16px;
 	font-weight: bold;
+    padding-bottom: 12px;
+    cursor: pointer;
 }
 
 .item-descount-rate {
@@ -384,6 +407,10 @@ hr {
 .details-title {
 	font-size: 15px;
 	color: #444;
+    width: 55px;
+    display: inline-block;
+    vertical-align: top;
+    font-weight: bold;
 }
 
 .Available {
@@ -405,8 +432,7 @@ hr {
 }
 
 .buy-cart-button {
-	padding-top: 30px;
-	padding-left: 0px;
+	padding-top: 20px;
 }
 
 .item-discount {
@@ -425,38 +451,20 @@ hr {
 }
 
 .item-descount-rate-section {
-	padding-top: 20px;
+	padding-top: 8px;
 }
 
 .item-detail-1{
 	font-size: 15px;
+    display: inline-block;
 }
 
 .service-detail {
 	font-size: 15px;
 }
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+.review-msg-title {
+	color: #444;
+	font-size: 16px;
+}
 

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

@@ -17,7 +17,7 @@
 			     <i _ngcontent-c30="" class="material-icons share-icon">&#xE80D;</i>
 			     <span _ngcontent-c30="" class="share">Share</span>
 		  </div>
-          <span class="item-shdescr"> {{itemDetail.itemHeader.itemShDescr}} </span>
+          <a [routerLink]="['/products', itemDetail.itemSubCategory.scatCode]" class="item-shdescr"> {{itemDetail.itemSubCategory.shDescr}} </a>
 			
 		  <span class="item-descr"> {{itemDetail.itemHeader.itemDescr}} </span>
 			
@@ -25,7 +25,7 @@
 		  <span class="seller-name">{{itemDetail.itemDetail1.sellerInfo.name}}</span><br>
 			
 		  <a (click)="scrollToReviews.emit();" class="link-reviews">
-		   <span *ngIf="itemDetail.itemRatings.AVG_RATING == 0 && itemDetail.itemRatings.NO_OF_REVIEWS == 0 " style="color: #444; font-size: 18px;">
+		   <span *ngIf="itemDetail.itemRatings.AVG_RATING == 0 && itemDetail.itemRatings.NO_OF_REVIEWS == 0 " class="review-msg-title">
 			 Be the first to Review this product
 		   </span>
 					
@@ -51,24 +51,25 @@
          </div>  
      	 <div class="offers-section">
      	   <span>{{itemDetail.itemDetail1.validity}}</span>
-    	   <button type="button" onclick="()" class="md-button link_button" >More Offers
+    	   <button type="button" onclick="()" class="md-button link_button">
+    	     More Offers
      	     <i class="material-icons arrow ">&#xE313;</i>
      	   </button>
      	 </div> 
-           <div class="row">   
-               <div class="small-6 medium-12 large-6 columns short-detail">
+           <div>   
+               <div class="short-detail">
                  <div class="details-title">Details</div>
                  <div class="item-detail-1">
                    <ul>
                      <li>Material: {{itemDetail.itemDetail1.shortDetails.material}}</li>
                      <li>Crafted By: {{itemDetail.itemDetail1.shortDetails.craftedBy}}</li>
                      <li>Pattern: {{itemDetail.itemDetail1.shortDetails.pattern}}</li>
-                     <li>{{itemDetail.itemDetail1.shortDetails.type}}</li>
                    </ul> 
-                   <button type="button" onclick="()" class="md-button link_button">View More</button>
+                   <button type="button" (click)="scrollToItemDetails()" class="md-button link_button">View More</button>
                  </div>
               </div>
-               
+              
+              <!--  
               <div class="small-6 medium-12 large-6 columns">
                   <div>
                      <div class="Available">Delivery</div>
@@ -95,6 +96,7 @@
                      </div>
                      <br>
               </div>
+               -->
           </div>
          
         <div *ngFor="let itemVariant of itemDetail.itemVariants"> 
@@ -115,14 +117,15 @@
        </div> 
     </div>  
   </md-card-content>
-  <md-card-actions>
+  
+
     <div class="buy-cart-button">
       <button md-raised-button class="button medium-btn Add_to_cart" 
          (click)="doActivity.emit({activity:'ADD_CART', data: itemDetail.itemCode });">Add to cart</button>
       <button md-raised-button class="button medium-btn Buy_now" 
          (click)="doActivity.emit({activity:'BUY_NOW', data: itemDetail.itemCode });">Buy Now</button>
 	</div> 
-  </md-card-actions>
+
 	  <div _ngcontent-c30="" class="medium-12 columns ecm-payments">
 		<i class="material-icons"> &#xE8E8;</i>
 		<span _ngcontent-c30="" class="ecm-Info">Safe and Secure Payments. 100% Authentic products</span>	
@@ -132,7 +135,7 @@
 </md-card>
 	 <!-- ----------------------HANDICRAFT-DETAILS ENDS HERE-------------------------------- -->  
 
-<div class="row ecm-card">
+<div class="row ecm-card" #itemDetails>
   <div class="medium-8 large-8 columns ecm-product-details">
 	<md-card> 
 	 <div> <span class="ecm-itemDeatils">Items Details</span> </div>
@@ -199,7 +202,7 @@
 	</md-card>
   </div>
 			
-  <div class="medium-4 large-4 columns">
+  <div class="medium-4 large-4 columns ecm-recent-view">
 	<ecm-recent-view #recentView> </ecm-recent-view> 
   </div>
 </div> 

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

-import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';
 import { EcmTemplateInterface } from './ecm-template.component';
 import { ItemDetail } from '../../ecm-model/product-detail-model';
 import { Router, ActivatedRoute } from '@angular/router';
@@ -19,6 +19,7 @@ export class EcmHandicraftComponent implements OnInit, EcmTemplateInterface {
     @Output() scrollToReviews = new EventEmitter();
     @Output() doActivity = new EventEmitter();
     @ViewChild( 'recentView' ) recentView: EcmRecentViewComponent;
+    @ViewChild('itemDetails') itemDetails: ElementRef;
     itemCode;
     //isCartItem = false;
     //@Input() itemData: Item;  
@@ -27,7 +28,7 @@ export class EcmHandicraftComponent implements OnInit, EcmTemplateInterface {
 
     Overview = "Champions Yacht Club specializes in offering luxury boating and yachting experiences in Goa with a large fleet of Catamarans, Boats, Cruisers & Yachts in Goa. We do Rocking birthday parties, anniversary bashes, island excursions & barbeques, fishing expeditions, snorkeling, corporate parties and more. We ensure you have a luxury experience in yachts that will leave a memory of a lifetime";
 
-    constructor( private route: ActivatedRoute, private router: Router, private http: Http ) { }
+    constructor( private route: ActivatedRoute, private router: Router, private http: Http) { }
 
     ngOnInit() {
 
@@ -61,8 +62,12 @@ export class EcmHandicraftComponent implements OnInit, EcmTemplateInterface {
          this.router.navigate(['/detail',itemCode]);
      }
     
+    scrollToItemDetails() {
+        let offsetTop = this.itemDetails.nativeElement.offsetTop;
+        window.scrollTo(0, offsetTop + 60); 
+    }
+    
 }
 
 
 
-