Skip to content

B
business-java
Commit dd67b0cc authored by prumde's avatar prumde
Browse files
Options

Updated 


git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174432 ce508802-f39f-4f6c-b175-0d175dae99d5
parent c3cba8c7
Hide whitespace changes
Inline Side-by-side
Showing with 585 additions and 173 deletions
ecm/Angular/ProteusECM/trunk/src/app/ecm-header/ecm-header.component.ts
View file @ dd67b0cc
...@@ -193,10 +193,16 @@ export class ECMHeaderComponent implements OnInit, OnDestroy, AfterViewChecked { ...@@ -193,10 +193,16 @@ export class ECMHeaderComponent implements OnInit, OnDestroy, AfterViewChecked {
} }
cartAction() { 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 ) { showSidePanel( opt: any ) {
this.openTime = new Date();
console.log( 'ShowSidePanel : ' + opt ); console.log( 'ShowSidePanel : ' + opt );
this.rightSlidePanel.nativeElement.style.display = "block"; this.rightSlidePanel.nativeElement.style.display = "block";
this.sideOption = opt; this.sideOption = opt;
...@@ -251,6 +257,19 @@ export class ECMHeaderComponent implements OnInit, OnDestroy, AfterViewChecked { ...@@ -251,6 +257,19 @@ export class ECMHeaderComponent implements OnInit, OnDestroy, AfterViewChecked {
this.selectedOption = result; this.selectedOption = result;
}); });
} }
@HostListener('document:click', ['$event'])
clickout(event) {
let isVisible = this.rightSlidePanel.nativeElement.style.display == 'block';
if( isVisible ) {
let diff = new Date().getMilliseconds() - this.openTime.getMilliseconds();
if( diff > 300 || diff < 0 ) {
if( ! this.rightSlidePanel.nativeElement.contains(event.target)) {
this.hideSidePanel();
}
}
}
}
} }
@Component({ @Component({
......
ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-product-details.component.html
View file @ dd67b0cc
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
</ecm-template> </ecm-template>
</div> </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> <ecm-product-review [itemDetail] = "itemDetail" (showSignInPanel) = "showSignInPanel();"></ecm-product-review>
</div> </div>
......
ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-product-details.component.ts
View file @ dd67b0cc
...@@ -42,6 +42,7 @@ export class EcmProductDetailsComponent implements OnInit { ...@@ -42,6 +42,7 @@ export class EcmProductDetailsComponent implements OnInit {
ecmTemplate: EcmTemplateItem; ecmTemplate: EcmTemplateItem;
itemDetail: ItemDetail; itemDetail: ItemDetail;
scatCode; scatCode;
noOfReviews;
constructor(private route: ActivatedRoute, private router:Router, public subcategoryService: EcmProductDetailService, public snackBar: MdSnackBar, private store: Store<EcmStoreModel>) { } 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 { ...@@ -69,6 +70,8 @@ export class EcmProductDetailsComponent implements OnInit {
console.log( "getItemDetail ecmTemplateName: " + ecmTemplateName ) console.log( "getItemDetail ecmTemplateName: " + ecmTemplateName )
this.ecmTemplate = ECM_TEMPLATES[ecmTemplateName]; this.ecmTemplate = ECM_TEMPLATES[ecmTemplateName];
this.scatCode = this.itemDetail.itemSubCategory.scatCode; this.scatCode = this.itemDetail.itemSubCategory.scatCode;
this.noOfReviews = this.itemDetail.itemRatings.NO_OF_REVIEWS;
console.log("Changed scatCode.."+this.scatCode); console.log("Changed scatCode.."+this.scatCode);
if( this.ecmTemplate ) if( this.ecmTemplate )
......
ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-product-review.component.css
View file @ dd67b0cc
...@@ -9,10 +9,10 @@ ...@@ -9,10 +9,10 @@
} }
.ecm-select { .ecm-select {
float: right; float: right;
padding-left: 25px; padding-left: 25px;
font-size: 12px; font-size: 12px;
padding-top: 20px; padding-top: 20px;
} }
.ecm-options { .ecm-options {
...@@ -168,7 +168,7 @@ ...@@ -168,7 +168,7 @@
.ecm-write-review { .ecm-write-review {
position: absolute; position: absolute;
bottom: 0; /*bottom: 0;*/
right: 0; right: 0;
} }
......
ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-product-review.component.html
View file @ dd67b0cc
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<div class="ratings-section"> <div class="ratings-section">
<div class="row header-content"> <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="ecm-avg-rating"> {{itemAvgRating}} </span>
<span class="star-rating-block"> <span class="star-rating-block">
<rating [rate]="itemAvgRating"></rating> <rating [rate]="itemAvgRating"></rating>
...@@ -16,8 +16,10 @@ ...@@ -16,8 +16,10 @@
<span class="ecm-total-ratings" *ngIf="itemAvgRating"> {{itemAvgRating}} Ratings </span> <span class="ecm-total-ratings" *ngIf="itemAvgRating"> {{itemAvgRating}} Ratings </span>
<span class="ecm-total-ratings" *ngIf="!itemAvgRating"> 0 Ratings </span> <span class="ecm-total-ratings" *ngIf="!itemAvgRating"> 0 Ratings </span>
</div> </div>
<div *ngIf="itemDetail" class="large-6 columns">
<div class="medium-5 medium-4 columns ecm-write-review"> <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();"> <button md-button class="write-review-button" (click)="checkUser();">
<i class="material-icons edit">&#xE254;</i> <i class="material-icons edit">&#xE254;</i>
<span md-button class="write-review-text"> Write a Review </span> <span md-button class="write-review-text"> Write a Review </span>
...@@ -30,13 +32,16 @@ ...@@ -30,13 +32,16 @@
<md-tab-group class="ecm-tab medium-12 col-sm-9" (selectChange)="onSelectChange($event)" > <md-tab-group class="ecm-tab medium-12 col-sm-9" (selectChange)="onSelectChange($event)" >
<md-tab label="Most Recent"> <md-tab label="Most Recent">
<!--
<md-select class="ecm-select" placeholder="Filter 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"> <md-option class="ecm-options" *ngFor="let type of sortTypes" [value]="type.value">
{{type.viewValue}} {{type.viewValue}}
</md-option> </md-option>
</md-select> </md-select>
-->
<div class="rating-details-section">
<div class="rating-details-section">
<div *ngIf="numFound==0" class="ecm-null-data-descr"> <div *ngIf="numFound==0" class="ecm-null-data-descr">
No reviews to display No reviews to display
</div> </div>
...@@ -58,19 +63,20 @@ ...@@ -58,19 +63,20 @@
</md-tab> </md-tab>
<md-tab label="Most Helpful"> <md-tab label="Most Helpful">
<!--
<md-select class="ecm-select" placeholder="Filter 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"> <md-option class="ecm-options" *ngFor="let type of sortTypes" [value]="type.value">
{{type.viewValue}} {{type.viewValue}}
</md-option> </md-option>
</md-select> </md-select>
-->
<div class="rating-details-section"> <div class="rating-details-section">
<div *ngIf="numFound==0" class="ecm-null-data-descr"> <div *ngIf="numFound==0" class="ecm-null-data-descr">
No reviews to display No reviews to display
</div> </div>
<div *ngIf="reviews && numFound!=0" class="reviews-content"> <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>
<div *ngIf="reviews && numFound!=0 && pageCount!=1" class="ecm-pagination-section"> <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
View file @ dd67b0cc
...@@ -26,6 +26,7 @@ export class EcmProductReviewComponent implements OnChanges { ...@@ -26,6 +26,7 @@ export class EcmProductReviewComponent implements OnChanges {
numFound; numFound;
itemAvgRating; itemAvgRating;
itemCode; itemCode;
userReview: Reviews;
sortTypes = [ sortTypes = [
{ value: 'productRating:[5 TO 5]', viewValue: '5 Stars' }, { value: 'productRating:[5 TO 5]', viewValue: '5 Stars' },
...@@ -67,7 +68,9 @@ export class EcmProductReviewComponent implements OnChanges { ...@@ -67,7 +68,9 @@ export class EcmProductReviewComponent implements OnChanges {
this.fetchReviews(); this.fetchReviews();
} }
filter() { filter(filterVal) {
console.log(filterVal+'filterVal--');
this.sortBy = "productRating:["+filterVal+" TO "+filterVal+"]";
this.fetchReviews(); this.fetchReviews();
} }
...@@ -139,9 +142,11 @@ export class EcmProductReviewComponent implements OnChanges { ...@@ -139,9 +142,11 @@ export class EcmProductReviewComponent implements OnChanges {
} }
ngOnChanges(){ ngOnChanges(){
this.itemCode = this.itemDetail.itemCode; if(this.itemDetail)
this.itemAvgRating = this.itemDetail.itemRatings.AVG_RATING; {
this.itemCode = this.itemDetail.itemCode;
this.itemAvgRating = this.itemDetail.itemRatings.AVG_RATING;
}
this.fetchReviews(); this.fetchReviews();
} }
...@@ -149,24 +154,29 @@ export class EcmProductReviewComponent implements OnChanges { ...@@ -149,24 +154,29 @@ export class EcmProductReviewComponent implements OnChanges {
var userInfo = localStorage.getItem( 'userInfo' ); var userInfo = localStorage.getItem( 'userInfo' );
if ( userInfo !== 'undefined' && userInfo !== null && userInfo !== 'null' ) if ( userInfo !== 'undefined' && userInfo !== null && userInfo !== 'null' )
{ {
let dialogRef = this.dialog.open( ECMWriteReviewDialog, { this.productreviewService.getUserReview(this.itemDetail.itemCode).subscribe(
data: { userReview => {
detail: this.itemDetail, this.userReview = userReview;
userId: JSON.parse(userInfo).LOGIN_CODE if(this.userReview)
} this.openReviewDialog(userInfo);
}); });
} }
else else
{ {
console.log("checkUser-else");
this.showSignInPanel.emit(); this.showSignInPanel.emit();
} }
} }
public showSignIn() { openReviewDialog(userInfo){
console.log("*********"); console.log("Complete Fecth Review");
this.showSignInPanel.emit(); 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 { ...@@ -180,19 +190,32 @@ export class ECMWriteReviewDialog {
@Input() public detail: ItemDetail; @Input() public detail: ItemDetail;
@ViewChild('reviewForm') currentForm: NgForm; @ViewChild('reviewForm') currentForm: NgForm;
public reviewData: Reviews; 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(); this.reviewData = new Reviews();
} }
public ngOnInit() { public ngOnInit() {
console.log(this.data.userId + 'User ID of Reviwer');
this.detail = this.data.detail; 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.item_code = this.detail.itemCode;
this.reviewData.reviewBy = this.data.userId; this.reviewData.reviewBy = this.data.userId;
this.reviewData.productRating = 0;
} }
updateRate(updatedRate) { updateRate(updatedRate) {
...@@ -201,10 +224,7 @@ export class ECMWriteReviewDialog { ...@@ -201,10 +224,7 @@ export class ECMWriteReviewDialog {
} }
submitReview() { submitReview() {
this.dialogRef.close(this.reviewData);
console.log("=========");
console.log(JSON.stringify(this.reviewData));
this.productreviewService.submitReview(this.reviewData); this.productreviewService.submitReview(this.reviewData);
this.dialogRef.close();
} }
} }
ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-product-review.service.ts
View file @ dd67b0cc
...@@ -4,6 +4,8 @@ import { Observable } from 'rxjs/Observable'; ...@@ -4,6 +4,8 @@ import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch'; import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map'; import 'rxjs/add/operator/map';
import { Reviews } from '../ecm-model/product-review.model';
@Injectable() @Injectable()
export class EcmProductReviewService { export class EcmProductReviewService {
...@@ -53,6 +55,19 @@ 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) { private extractData(res: Response) {
let body = res.json(); let body = res.json();
console.log('extractData[' + JSON.stringify(body) + ']'); console.log('extractData[' + JSON.stringify(body) + ']');
......
ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-template/ecm-handicraft.component.css
View file @ dd67b0cc
...@@ -243,7 +243,7 @@ li::before { ...@@ -243,7 +243,7 @@ li::before {
color: black; color: black;
padding: 5px; padding: 5px;
font-weight: inherit; font-weight: inherit;
padding: 20px; padding: 15px;
} }
.product-detail-card { .product-detail-card {
...@@ -523,7 +523,7 @@ li::BEFORE { ...@@ -523,7 +523,7 @@ li::BEFORE {
max-height: 600px; max-height: 600px;
position: relative; position: relative;
display: block; display: block;
height: 600px; /* height: 600px; */
width: 100%; width: 100%;
} }
...@@ -535,12 +535,14 @@ li::BEFORE { ...@@ -535,12 +535,14 @@ li::BEFORE {
color: black; color: black;
padding-right: 5px; padding-right: 5px;
padding-left: 5px; padding-left: 5px;
line-height: 24px;
} }
.ecm-itemNumOfReviews { .ecm-itemNumOfReviews {
padding-left: 5px; padding-left: 5px;
color: black; color: black;
border-left: 1px solid #f3f3f3; border-left: 1px solid #f3f3f3;
line-height: 24px;
} }
md-card { md-card {
......
ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-template/ecm-handicraft.component.html
View file @ dd67b0cc
...@@ -29,10 +29,11 @@ ...@@ -29,10 +29,11 @@
Be the first to Review this product Be the first to Review this product
</span> </span>
<span (click)="scrollToReviews.emit();" *ngIf="itemDetail.itemRatings.AVG_RATING > 0 || itemDetail.itemRatings.NO_OF_REVIEWS > 0 " style="display: inline-flex;" > <span (click)="scrollToReviews.emit();" *ngIf="itemDetail.itemRatings.AVG_RATING > 0 || itemDetail.itemRatings.NO_OF_REVIEWS > 0 " style="display: inline-flex; cursor: pointer;" >
<span class="ecm-ratingStars" *ngFor="let a of createRatings(itemDetail.itemRatings.AVG_RATING)">&#x2605;</span> <rating [rate]="itemDetail.itemRatings.AVG_RATING"></rating>
<span class="ecm-itemAvgRating">{{itemDetail.itemRatings.AVG_RATING}} Ratings</span> <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> </span>
</a> </a>
......
ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-write-review-dialog.html
View file @ dd67b0cc
...@@ -9,20 +9,20 @@ ...@@ -9,20 +9,20 @@
<div class="write-review-section"> <div class="write-review-section">
<div> <div>
<span class="product-rating-title">Product rating</span> <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> </div>
<md-input-container class="review-title-box"> <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-error *ngIf="titleRef.errors && titleRef.dirty">Review title required</md-error>
</md-input-container> </md-input-container>
<md-input-container class="descr-box"> <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-error *ngIf="dscrRef.errors && dscrRef.dirty">Description required</md-error>
</md-input-container> </md-input-container>
</div> </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> </form>
<button md-button class="cancel-review-btn" (click)="dialogRef.close();">Cancel</button> <button md-button class="cancel-review-btn" (click)="dialogRef.close();">Cancel</button>
\ No newline at end of file
ecm/Angular/ProteusECM/trunk/src/app/ecm-search/ecm-search-result/search.service.ts
View file @ dd67b0cc
import { Injectable } from '@angular/core'; 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'; import 'rxjs/add/operator/map';
@Injectable() @Injectable()
export class SearchService { export class SearchService {
val; val;
constructor() { } constructor(private http:Http) { }
setSearch(value){ setSearch(value){
console.log('Set Query:['+value+']');
this.val=value; this.val=value;
} }
getSearch(){ getSearch(){
console.log('Set Query:['+this.val+']');
return 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/ProteusECM/trunk/src/app/ecm-view/ecm-cart/ecm-cart.component.css
View file @ dd67b0cc
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
border: 2px solid ghostwhite; border: 2px solid ghostwhite;
border-left: none; border-left: none;
border-right: none; border-right: none;
padding: 30px 30px 0 30px; padding: 20px;
} }
.ViewAll{ .ViewAll{
...@@ -69,18 +69,18 @@ ...@@ -69,18 +69,18 @@
font-size: 18px; font-size: 18px;
} }
.checkout-button, .viewAll-button .edit-cart-button, .viewAll-button
{ {
/* width: 320px; */ /* width: 320px; */
width: 304px; width: 304px;
height: 50px; height: 50px;
font-size: 15px; font-size: 16px;
line-height: 15px; line-height: 46px;
text-align: center; text-align: center;
border-radius: 2px; border-radius: 2px;
position: relative; position: relative;
padding: 0; padding: 0;
margin: 5px 0 5px 0; margin: 38px 0 0px 0;
} }
.viewAll-button{ .viewAll-button{
...@@ -89,33 +89,79 @@ ...@@ -89,33 +89,79 @@
line-height: 44px; line-height: 44px;
} }
.checkout-button .edit-cart-button
{ {
background: mediumvioletred; background: mediumvioletred;
color:#fff; color: #fff;
} }
@media screen and (max-width:30em) .edit-cart-button:hover {
{ color: #fff;
}
.listItems
{ @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; margin: 0px;
padding: 0px; padding: 0px;
} }
.color-change .ecm-productDetails{
{ margin-top: 6px !important;
position: relative;
left: 10px;
font-size: 16px;
color: mediumvioletred;
cursor: pointer;
bottom: 4px;
} }
} .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 .counter
{ {
padding: 0px; position: inherit;
} }
.change-color .change-color
...@@ -127,14 +173,6 @@ ...@@ -127,14 +173,6 @@
{ {
padding: 20px; padding: 20px;
} }
.continue-shopping
{
width: 100%;
margin-right: 15px;
margin-left: 15px;
}
.ecm-payments{ .ecm-payments{
display: flex; display: flex;
position: relative; position: relative;
...@@ -191,9 +229,14 @@ ...@@ -191,9 +229,14 @@
margin-bottom: 15px; margin-bottom: 15px;
} }
.item-image{ .item-image{
width: 140px; /* width: 140px;
padding-top: 16px; padding-top: 16px;
position: relative; */
width: 16%;
display: inline-block;
position: relative; position: relative;
bottom: 16px;
} }
.change-color{ .change-color{
padding-top: 16px; padding-top: 16px;
...@@ -220,7 +263,6 @@ ...@@ -220,7 +263,6 @@
} }
.color-change{ .color-change{
position: relative; position: relative;
left: 10px;
font-size: 13px; font-size: 13px;
color: mediumvioletred; color: mediumvioletred;
cursor: pointer; cursor: pointer;
...@@ -242,10 +284,8 @@ ...@@ -242,10 +284,8 @@
cursor: pointer; cursor: pointer;
} }
.wish-remove-dipslay{ .wish-remove-dipslay{
display: inline-block; position: inherit;
padding-bottom: 16px; padding-top: 18px;
position: relative;
left: 26px;
} }
.counter{ .counter{
...@@ -279,15 +319,12 @@ ...@@ -279,15 +319,12 @@
border-radius: 100%; border-radius: 100%;
} }
.items-cost-rate{ .items-cost-rate{
position: relative; position: inherit;
float: right; padding-top: 25px;
padding-top: 35px;
padding-bottom: 35px;
top: 5px;
padding-right: 37px;
font-size: 25px; font-size: 25px;
font-weight: bold; font-weight: bold;
line-height: 1; line-height: 1;
text-align: right;
} }
...@@ -308,6 +345,8 @@ ...@@ -308,6 +345,8 @@
margin-right: 18px; margin-right: 18px;
height: 46px; height: 46px;
width: 170px; width: 170px;
position: inherit;
bottom: 7px;
} }
.items-desc{ .items-desc{
padding-top: 18px; padding-top: 18px;
...@@ -440,12 +479,6 @@ ...@@ -440,12 +479,6 @@
margin-left: 17px; margin-left: 17px;
} }
@media screen and (max-width: 640px) {
md-card {
margin: 15px;
}
}
/* attribute colors */ /* attribute colors */
.BLACK, .BLK_WH{ .BLACK, .BLK_WH{
background-color: black; background-color: black;
...@@ -468,3 +501,53 @@ ...@@ -468,3 +501,53 @@
.YELLOW{ .YELLOW{
background-color: 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/ProteusECM/trunk/src/app/ecm-view/ecm-cart/ecm-cart.component.html
View file @ dd67b0cc
...@@ -2,41 +2,83 @@ ...@@ -2,41 +2,83 @@
<div *ngIf="isMiniCart then miniCart; else fullCart;"></div> <div *ngIf="isMiniCart then miniCart; else fullCart;"></div>
<ng-template #miniCart> <ng-template #miniCart>
<div *ngIf="cartCount == 0" style="text-align: center;"> <div *ngIf="cartCount == 0" style="text-align: center;">
<img class="empty-cart-img" src="/ecm/assets/images/svg/Empty Cart.svg"> <img class="empty-cart-img" src="/ecm/assets/images/svg/Empty Cart.svg">
<span class="empty-cart-title">Empty Cart</span> <span class="empty-cart-title">Empty Cart</span> <span
<span class="border-line"></span> class="border-line"></span> <span class="empty-cart-msg">Looks
<span class="empty-cart-msg">Looks like you haven't made your choice yet...</span> like you haven't made your choice yet...</span>
</div>
<!-- <div *ngIf="cartCount > 0">
<div class="cartItemsDetail"
*ngFor="let item of cartItemsDetail | slice:0:displayItem; let i=index">
<table style="width: 100%;">
<tr>
<td class="itemImage"><ecm-image [refId]='item.itemCode'
[refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage]="true"
[isThumbnail]="true"></ecm-image></td>
<td class="itemdescription" (click)="closePanel.emit(viewItem(item.itemCode))">
<span class="item-descr-span">{{item.descr}}</span>
</td>
<td style="padding: 10px;">Rs. {{item.costRate}}</td>
<td (click)="confirmDialog(item)" style="cursor: pointer;"><span
class="delete-icon" md-ripple>x</span></td>
</tr>
</table>
</div> </div>
<div *ngIf="cartCount > displayItem" (click)="showTotalCartItems()">
<div *ngIf="cartCount > 0"> <a md-button class="checkout-button" [routerLink]="['/cart']"
<div class="cartItemsDetail" *ngFor="let item of cartItemsDetail | slice:0:displayItem; let i=index"> (click)="closePanel.emit();">( {{cartCount}} ) My Cart</a>
<table style="width: 100%;"> </div>
<tr> <!-- <button md-button class="checkout-button" [routerLink]="['/checkout']">Checkout</button>
<td class="itemImage"><ecm-image [refId]='item.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage]="true" [isThumbnail]="true"></ecm-image></td> <!-- <button md-button class="checkout-button" [routerLink]="['/checkout']">Checkout
<td class="itemdescription" (click)="viewItem(item.itemCode)">
<span class="item-descr-span">{{item.descr}}</span>
</td>
<td style="padding: 10px;">Rs. {{item.costRate}}</td>
<td (click)="confirmDialog(item)" style="cursor: pointer;"><span class="delete-icon" md-ripple >x</span></td>
</tr>
</table>
</div>
<div class="ViewAll" *ngIf="cartCount > displayItem" (click)="showTotalCartItems()">
<a md-button class="viewAll-button" [routerLink]="['/cart']" (click)="closePanel.emit();"> View All ( {{cartCount}} )</a>
</div>
<!-- <button md-button class="checkout-button" [routerLink]="['/checkout']">Checkout</button> -->
<button md-button class="checkout-button" [routerLink]="['/checkout']">Checkout
<i class="material-icons" style="position: relative; left: 8px;">trending_flat</i> <i class="material-icons" style="position: relative; left: 8px;">trending_flat</i>
</button> </button>
</div> -->
<div class="scrollMe" #scrollMe *ngIf="cartCount > 0">
<div class="cartItemsDetail"
*ngFor="let item of cartItemsDetail">
<table style="width: 100%;">
<tr>
<td class="itemImage"><ecm-image [refId]='item.itemCode'
[refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage]="true"
[isThumbnail]="true"></ecm-image></td>
<td class="itemdescription" (click)="closePanel.emit(viewItem(item.itemCode))">
<span class="item-descr-span">{{item.descr}}</span>
</td>
<td style="padding: 10px;">Rs. {{item.costRate}}</td>
<td (click)="confirmDialog(item)" style="cursor: pointer;"><span
class="delete-icon" md-ripple>x</span></td>
</tr>
</table>
</div> </div>
</div>
<div *ngIf="cartCount > displayItem" (click)="showTotalCartItems()">
<a md-button class="edit-cart-button" [routerLink]="['/cart']"
(click)="closePanel.emit();">Edit Cart</a>
</div>
</ng-template> </ng-template>
<!-- ---------================ MiniCart Ends==============================---------------------------- --> <!-- ---------================ MiniCart Ends==============================---------------------------- -->
<!-- ---------================ detailCart start==============================---------------------------- --> <!-- ---------================ detailCart start==============================---------------------------- -->
<ng-template #fullCart> <ng-template #fullCart>
<div *ngIf="cartItemsDetail"> <div *ngIf="cartCount == 0">
<ecm-header [isFixedHeader]=false> </ecm-header>
<ecm-breadcrumbs [pageName]="'CART'"></ecm-breadcrumbs>
<div class="row">
<div class="medium-12 large-12 columns" style="text-align: center; margin-top: 120px;">
<img class="empty-cart-img" src="/ecm/assets/images/svg/Empty Cart.svg">
<span class="empty-cart-title">Empty Cart</span> <span
class="border-line"></span> <span class="empty-cart-msg">Looks
like you haven't made your choice yet...</span>
</div>
</div>
<div style="margin-top: 155px;">
<ecm-footer></ecm-footer>
</div>
</div>
<div *ngIf="cartCount > 0 && cartItemsDetail">
<ecm-header [isFixedHeader]=false> </ecm-header> <ecm-header [isFixedHeader]=false> </ecm-header>
<ecm-breadcrumbs [pageName]="'CART'"></ecm-breadcrumbs> <ecm-breadcrumbs [pageName]="'CART'"></ecm-breadcrumbs>
<div class="row details-of-Cart"> <div class="row details-of-Cart">
...@@ -47,7 +89,55 @@ ...@@ -47,7 +89,55 @@
</div> </div>
<div class="listItems" *ngFor="let item of cartItemsDetail"> <div class="listItems" *ngFor="let item of cartItemsDetail">
<div class="media-object-section item-image"> <div class="item-image">
<ecm-image [refId]='item.itemCode' [refSer]="'M-ITEM'"
[object]="'ITEM'" [isSingleImage]="true" [isThumbnail]="true"></ecm-image>
</div>
<div class="total-description">
<div class="items-desc">
<span class="item-title" (click)="viewItem(item.itemCode)">Handmade
Handicarft</span> <span class="item-shDescr">{{item.shDescr}}</span> <span
class="item-seller">Sold by</span> <span class="item-sellerInfo">Handmade
Handicarfts</span>
</div>
<div *ngIf="item.phyAttribId3" class="change-color">
<span class="size-of-item">Color Selected</span>
<button [ngClass]="item.phyAttribId3" md-button
class="back btn selected"></button>
<span class="color-change">Change</span>
</div>
<div *ngIf="item.phyAttribId1" class="change-color">
<span class="size-of-item">Size Selected</span>
<button md-button class="back btn selected">{{item.phyAttribId1}}</button>
<span class="color-change">Change</span>
</div>
</div>
<div class="counter-screen">
<div class="counter">
<button md-button [disabled]="checkQantity(item)"
class="counter-button" (click)="decrement(item)">
<i class="material-icons" style="padding: 0px;">remove</i>
</button>
<span> <input class="ecm-textBox" type="text"
[value]="item.itemQuantity"></span>
<button md-button class="counter-button" (click)="increment(item)">
<i class="material-icons" style="padding: 0px;">add</i>
</button>
</div>
<div class="items-cost-rate">
<span>Rs. {{item.costRate}}</span>
</div>
<div class="wish-remove-dipslay">
<span class="wishList-items" (click)="wishList()">Add to
Wishlist</span>
<!-- <span class="remove-items" (click)=" confirmDialog(item)" style="cursor: pointer;">Remove</span> -->
<span class="remove-items" (click)="confirmDialog(item)">Remove</span>
</div>
</div>
<!-- <div class="media-object-section item-image">
<ecm-image [refId]='item.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage]="true" [isThumbnail]="true"></ecm-image> <ecm-image [refId]='item.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage]="true" [isThumbnail]="true"></ecm-image>
</div> </div>
...@@ -88,21 +178,23 @@ ...@@ -88,21 +178,23 @@
</div> </div>
<div class="wish-remove-dipslay"> <div class="wish-remove-dipslay">
<span class="wishList-items" (click)="wishList()">Add to Wishlist</span> <span class="wishList-items" (click)="wishList()">Add to Wishlist</span>
<!-- <span class="remove-items" (click)=" confirmDialog(item)" style="cursor: pointer;">Remove</span> --> <!-- <span class="remove-items" (click)=" confirmDialog(item)" style="cursor: pointer;">Remove</span>
<span class="remove-items" (click)="confirmDialog(item)">Remove</span> <span class="remove-items" (click)="confirmDialog(item)">Remove</span>
</div> </div>
</div> </div> -->
</div> </div>
</div> </div>
<div class="detail-Continue-Shopping-button"> <div class="detail-Continue-Shopping-button">
<button md-button class="continue-shopping" [routerLink]="['/home']">Continue Shopping</button> <button md-button class="continue-shopping" [routerLink]="['/home']">Continue
Shopping</button>
</div> </div>
</md-card> </md-card>
<div class="medium-4 columns ecm-productDetails"> <div class="medium-4 columns ecm-productDetails">
<md-card class="totalPriceDetails"> <md-card class="totalPriceDetails">
<div style="text-align: center; position: relative; padding: 0px 20px 15px 20px;"> <div
style="text-align: center; position: relative; padding: 0px 20px 15px 20px;">
<span class="priceDetails">Price Details</span> <span class="priceDetails">Price Details</span>
</div> </div>
<div class="totalProductsInfo"> <div class="totalProductsInfo">
...@@ -112,30 +204,36 @@ ...@@ -112,30 +204,36 @@
</div> </div>
<br> <br>
<div class="shipping"> <div class="shipping">
<span style="font-size: 15px;">Shipping</span> <span style="font-size: 15px;">Shipping</span> <span
<span class="shippingFree">FREE</span> class="shippingFree">FREE</span>
</div> </div>
<br> <br>
<div> <div>
<hr style="border: dotted; color: dimgray; border-width: thin;"> <hr style="border: dotted; color: dimgray; border-width: thin;">
<div class="amount"> <div class="amount">
<span class="amountPayable">Amount Payable</span> <span class="amountPayable">Amount Payable</span> <span
<span class="total-amountPrice">Rs. {{totalPrice}}</span> class="total-amountPrice">Rs. {{totalPrice}}</span>
</div> </div>
<div class="ecm-payments"> <div class="ecm-payments">
<i class="material-icons secure-icon">&#xE8E8;</i> <i class="material-icons secure-icon">&#xE8E8;</i> <span
<span class="ecm-Info">Safe and Secure Payments. 100% Authentic products</span> class="ecm-Info">Safe and Secure Payments. 100% Authentic
products</span>
</div> </div>
<br> <br>
<button md-button class="detail-checkout-button" [routerLink]="['/checkout']"> <button md-button class="hide-for-small-only detail-checkout-button"
Checkout [routerLink]="['/checkout']">
<i class="material-icons" style="position: relative; left: 8px;">trending_flat</i> Checkout <i class="material-icons"
style="position: relative; left: 8px;">trending_flat</i>
</button> </button>
</div> </div>
</div> </div>
</md-card> </md-card>
<button md-button class="show-for-small-only new-checkout-button" [routerLink]="['/checkout']">
Checkout <i class="material-icons"
style="position: relative; left: 8px;">trending_flat</i>
</button>
</div> </div>
</div> </div>
<ecm-footer> </ecm-footer> <ecm-footer></ecm-footer>
</div> </div>
</ng-template> </ng-template>
ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-cart/ecm-cart.component.ts
View file @ dd67b0cc
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 { Http, Response, Headers, RequestOptions, URLSearchParams } from '@angular/http'
import { MdSnackBar } from '@angular/material'; import { MdSnackBar } from '@angular/material';
import { MdDialog, MdDialogRef } from '@angular/material'; import { MdDialog, MdDialogRef } from '@angular/material';
...@@ -24,22 +24,32 @@ import { Router, ActivatedRoute } from '@angular/router'; ...@@ -24,22 +24,32 @@ import { Router, ActivatedRoute } from '@angular/router';
styleUrls: ['./ecm-cart.component.css'], styleUrls: ['./ecm-cart.component.css'],
providers: [EcmProductDetailService] providers: [EcmProductDetailService]
}) })
export class EcmCartComponent implements OnInit { export class EcmCartComponent implements OnInit, AfterViewChecked {
cartItemsDetail: Item[]; cartItemsDetail: Item[];
cartCount = 0; cartCount = 0;
catCode; catCode;
displayItem = 3; displayItem = 3;
totalPrice: number = 0; totalPrice: number = 0;
disableScrollDown = false
@Input() isMiniCart: boolean = false; @Input() isMiniCart: boolean = false;
@Output() closePanel = new EventEmitter(); @Output() closePanel = new EventEmitter();
@Output() doActivity = 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> ) { } 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() { ngOnInit() {
this.getCartItem(); this.getCartItem();
this.scrollToBottom();
} }
ngAfterViewChecked() {
this.scrollToBottom();
}
getCartItem() { getCartItem() {
this.cartService.getCartItems().subscribe( this.cartService.getCartItems().subscribe(
...@@ -51,6 +61,7 @@ export class EcmCartComponent implements OnInit { ...@@ -51,6 +61,7 @@ export class EcmCartComponent implements OnInit {
console.log( 'comp cartItemsDetail[' + this.cartItemsDetail + '] \n this.cartItemsDetail[' + this.cartItemsDetail.length + ']' ); console.log( 'comp cartItemsDetail[' + this.cartItemsDetail + '] \n this.cartItemsDetail[' + this.cartItemsDetail.length + ']' );
if ( this.cartItemsDetail ) { if ( this.cartItemsDetail ) {
this.getTotalPrice(); this.getTotalPrice();
console.log( "the total Price is" + this.totalPrice ); console.log( "the total Price is" + this.totalPrice );
} }
} }
...@@ -91,8 +102,10 @@ export class EcmCartComponent implements OnInit { ...@@ -91,8 +102,10 @@ export class EcmCartComponent implements OnInit {
getTotalPrice() { getTotalPrice() {
this.cartItemsDetail.forEach(( item, i ) => { this.cartItemsDetail.forEach(( item, i ) => {
this.totalPrice = this.totalPrice + parseFloat( item.costRate );
item.itemQuantity = 1; 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 { ...@@ -110,6 +123,8 @@ export class EcmCartComponent implements OnInit {
let cartData = new ECMCart; let cartData = new ECMCart;
cartData.itemCode = data.itemCode; cartData.itemCode = data.itemCode;
cartData.quantity = data.itemQuantity; cartData.quantity = data.itemQuantity;
cartData.itemCost = parseFloat( data.costRate );
// cartData.totalAmount = (cartData.quantity)* (cartData.itemCost);
this.store.dispatch({ type: INCREMENT, payload: cartData }); this.store.dispatch({ type: INCREMENT, payload: cartData });
this.subcategoryService.addToCart(cartData); this.subcategoryService.addToCart(cartData);
...@@ -120,6 +135,7 @@ export class EcmCartComponent implements OnInit { ...@@ -120,6 +135,7 @@ export class EcmCartComponent implements OnInit {
data.itemQuantity--; data.itemQuantity--;
let cartData = new ECMCart; let cartData = new ECMCart;
cartData.itemCode = data.itemCode; cartData.itemCode = data.itemCode;
this.store.dispatch({ type: DECREMENT, payload: cartData }); this.store.dispatch({ type: DECREMENT, payload: cartData });
this.openSnackBar( data.shDescr + ' Removed from your Cart' ); this.openSnackBar( data.shDescr + ' Removed from your Cart' );
} }
...@@ -164,6 +180,13 @@ export class EcmCartComponent implements OnInit { ...@@ -164,6 +180,13 @@ export class EcmCartComponent implements OnInit {
viewItem( itemCode ) { viewItem( itemCode ) {
this.router.navigate( ['/detail', itemCode] ); this.router.navigate( ['/detail', itemCode] );
} }
scrollToBottom(): void {
try {
this.myScrollContainer.nativeElement.scrollBottom = this.myScrollContainer.nativeElement.scrollHeight;
} catch(err) { }
}
} }
......
ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-checkout/ecm-checkout.component.css
View file @ dd67b0cc
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
margin-top: 70px; margin-top: 70px;
} }
.medium-btn{ .medium-btn {
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
border: 2px solid mediumvioletred; border: 2px solid mediumvioletred;
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
top: 140px; top: 140px;
} }
.head{ .head {
font-size: 18px; font-size: 18px;
display: block; display: block;
padding-left: 20px; padding-left: 20px;
...@@ -35,17 +35,17 @@ ...@@ -35,17 +35,17 @@
color: white; color: white;
} }
.head-Shipping{ .head-Shipping {
font-size: 18px; font-size: 18px;
display: block; display: block;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
} }
.shippingaddress{ .shippingaddress {
position: relative; position: relative;
top: 9px; top: 9px;
} }
.Country{ .Country {
position: relative; position: relative;
top: 8px; top: 8px;
} }
...@@ -55,20 +55,20 @@ ...@@ -55,20 +55,20 @@
margin: 20px 20px 20px 25px; margin: 20px 20px 20px 25px;
} }
.billingAddress{ .billingAddress {
} }
.countryValue{ .countryValue {
font-size: 18px; font-size: 18px;
display: block; display: block;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
} }
.orderSummary{ .orderSummary {
} }
.order{ .order {
display: block; display: block;
font-size: 18px; font-size: 18px;
padding: 10px; padding: 10px;
...@@ -85,7 +85,6 @@ ...@@ -85,7 +85,6 @@
} }
.expiryDetails{ .expiryDetails{
font-size: 18px; font-size: 18px;
} }
.payment { .payment {
...@@ -117,45 +116,46 @@ ...@@ -117,45 +116,46 @@
vertical-align: bottom; vertical-align: bottom;
padding-top: 10px; padding-top: 10px;
} }
.userEmail{ .userEmail {
display: block; display: block;
margin-left: 20px; margin-left: 20px;
margin-right: 20px; margin-right: 20px;
} }
.userInfo{ .userInfo {
display: block; display: block;
margin-left: 20px; margin-left: 20px;
margin-right: 20px; margin-right: 20px;
} }
.userAdress{ .userAdress {
display: block; display: block;
margin-left: 20px; margin-left: 20px;
margin-right: 20px; margin-right: 20px;
} }
.userCity{ .userCity {
display: block; display: block;
margin-left: 20px; margin-left: 20px;
margin-right: 20px; margin-right: 20px;
} }
.userState{ .userState {
display: block; display: block;
margin-left: 20px; margin-left: 20px;
margin-right: 20px; margin-right: 20px;
} }
.userPostal{ .userPostal {
display: block; display: block;
} }
.Cardholder{ .Cardholder {
margin-left: 20px; margin-left: 20px;
margin-right: 20px; margin-right: 20px;
} }
.CardNumber{ .CardNumber {
margin-left: 20px; margin-left: 20px;
margin-right: 20px; margin-right: 20px;
} }
.expiry-title { .expiry-title {
padding-left: 20px; padding-left: 20px;
padding-bottom: 20px;
} }
.months { .months {
...@@ -181,7 +181,7 @@ ...@@ -181,7 +181,7 @@
margin-right: 20px; margin-right: 20px;
} }
.place-order-button{ .place-order-button {
width: 100%; width: 100%;
height: 50px; height: 50px;
font-size: 15px; font-size: 15px;
...@@ -191,8 +191,7 @@ ...@@ -191,8 +191,7 @@
margin-top: 20px; margin-top: 20px;
} }
.place-order-button[disabled] .place-order-button[disabled] {
{
background: #e0e0e0; background: #e0e0e0;
color: #fff; color: #fff;
} }
...@@ -218,8 +217,8 @@ ...@@ -218,8 +217,8 @@
.item-cost{ .item-cost{
width: 40%; width: 40%;
} }
md-error{ md-error {
padding-top: 12px; padding-top: 12px;
} }
...@@ -245,11 +244,10 @@ md-error{ ...@@ -245,11 +244,10 @@ md-error{
} }
.ecm-input:focus .ecm-input:focus
{ {
outline:none;
outline:none;
border:none; border:none;
box-shadow: none; box-shadow: none;
} }
/* LABEL ======================================= */ /* LABEL ======================================= */
.ecm-label .ecm-label
...@@ -383,9 +381,10 @@ select:focus ~ label ...@@ -383,9 +381,10 @@ select:focus ~ label
color:#5264AE; color:#5264AE;
} }
.bar-select { position:relative; display:block; .bar-select {
/* width:300px; */ position:relative;
display:block;
/*width:300px;*/
} }
.bar-select:before, .bar-select:after { .bar-select:before, .bar-select:after {
content:''; content:'';
......
ecm/Angular/ProteusECM/trunk/src/app/ecm-view/rating/rating.component.css
View file @ dd67b0cc
...@@ -8,7 +8,11 @@ ...@@ -8,7 +8,11 @@
} }
.fixed-rating { .fixed-rating {
cursor: default;
}
.resp-star {
cursor: pointer;
} }
.resp-rating { .resp-rating {
...@@ -25,4 +29,74 @@ ...@@ -25,4 +29,74 @@
.star-ratings { .star-ratings {
color: lightgray; 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/ProteusECM/trunk/src/app/ecm-view/rating/rating.component.html
View file @ dd67b0cc
<span *ngIf="rate >= 0">
<span [ngClass]="isResponsive ? 'resp-rating' : 'fixed-rating'"> <span [ngClass]="isResponsive ? 'resp-rating' : 'fixed-rating'">
<span *ngFor="let a of range; let i = index" class="star-ratings"> <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 resp-star" (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" [ngClass]="i < rate ? 'star-rating' : 'empty-star-rating'"> &#xE885; </i>
</span> </span>
</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/ProteusECM/trunk/src/app/ecm-view/rating/rating.component.ts
View file @ dd67b0cc
...@@ -8,14 +8,27 @@ import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core'; ...@@ -8,14 +8,27 @@ import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core';
export class RatingComponent implements OnInit { export class RatingComponent implements OnInit {
private range:Array<number> = [5,4,3,2,1]; private range:Array<number> = [5,4,3,2,1];
private overallRatings:Array<number> = [25,10,7,3,1];
@Input() rate:number; @Input() rate:number;
@Input() isResponsive = false; @Input() isResponsive = false;
@Input() ratingDetail;
@Output() updateRate= new EventEmitter(); @Output() updateRate= new EventEmitter();
@Output() filterBy= new EventEmitter();
totalRatings = 0;
keys;
constructor() { } constructor() { }
ngOnInit() { ngOnInit() {
console.log('Rating: ' +this.rate); console.log('Rating: ' +this.rate);
if(this.ratingDetail)
{
this.overallRatings.forEach(( rating, i ) => {
this.totalRatings = this.totalRatings + rating;
});
}
} }
update(value) { update(value) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment