Skip to content

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

Updated for Filter Data on Product Detail Listing 


git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174499 ce508802-f39f-4f6c-b175-0d175dae99d5
parent 660d2fb7
Hide whitespace changes
Inline Side-by-side
Showing with 147 additions and 47 deletions
ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-product/ecm-product.component.css
View file @ 9277d254
...@@ -264,14 +264,14 @@ ...@@ -264,14 +264,14 @@
} }
.price-title { .price-title {
padding-left: 25px; /* padding-left: 25px;*/
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
/*Background Image*/ /*Background Image*/
background-image: url("../../../assets/images/down_arrow.png"); /* background-image: url("../../../assets/images/down_arrow.png");*/
background-position: right 14px; background-position: right 14px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 16px 16px; background-size: 16px 16px;
...@@ -280,7 +280,7 @@ ...@@ -280,7 +280,7 @@
.price-slider { .price-slider {
height: 48px !important; height: 48px !important;
min-width: 250px !important; min-width: 252px !important;
} }
.amount-range { .amount-range {
...@@ -289,25 +289,26 @@ ...@@ -289,25 +289,26 @@
.min-value { .min-value {
float: left; float: left;
padding-left: 20px; padding-left: 2px;
font-size: 0.8rem; font-size: 0.8rem;
} }
.max-value { .max-value {
float: right; float: right;
padding-right: 20px; /* padding-right: 20px;*/
padding-right: 10px;
font-size: 0.8rem; font-size: 0.8rem;
} }
.min-val-input, .max-val-input { .min-val-input, .max-val-input {
width: 80px; width: 65px;
height: 35px; height: 35px;
display: inline-block; display: inline-block;
padding-left: 10px; padding-left: 8px;
} }
.min-val-input { .min-val-input {
margin-left: 20px; margin-left: -5px;
} }
.max-val-input { .max-val-input {
...@@ -336,3 +337,38 @@ ...@@ -336,3 +337,38 @@
border-bottom: 1px solid #f2f2f2; border-bottom: 1px solid #f2f2f2;
} }
.check-text
{
font-size: 15px;
text-align: left;
width: 70%;
display: inline-block;
float: left;
/*padding-left: 25px;*/
padding-left: 0px;
}
.variant-container
{
display : block;
}
.variant-count
{
width: 30%;
display: inline-block;
font-size: 15px;
line-height: 28px;
}
.check-value
{
padding-left: 180px;
font-size: 15px;
}
.circle:before {
content: ' \25CF';
font-size: 25px;
padding-right: 6px;
}
ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-product/ecm-product.component.html
View file @ 9277d254
...@@ -20,56 +20,97 @@ ...@@ -20,56 +20,97 @@
<div *ngIf="items?.length > 0"> <div *ngIf="items?.length > 0">
<section class="subcategories-section"> <section class="subcategories-section">
<div class="row"> <div class="row">
<md-card class="product-list-card"> <md-card class="product-list-card">
<div class="small-12 medium-3 large-3 column ecm-filter-details"> <div class="small-12 medium-3 large-3 column ecm-filter-details">
<div class = "filter-pane"> <div class="filter-pane">
<div class="filter-header"> <div class="filter-header">
<span class="filter-hader-title">Filter By</span> <span class="filter-hader-title">Filter By</span>
</div> </div>
<!--
<div class="container"> <div class="container">
<div class="price-title" (click)="showHide();">Price</div> <div class="price-title" (click)="showHide();">Price</div>
<div *ngIf="show"> <div *ngIf="show">
<md-slider min="500" max="35000" class="price-slider" (input)="onInputChange($event);"></md-slider> <md-slider min="500" max="35000" class="price-slider" (input)="onInputChange($event);"></md-slider>
<div class="amount-range">
<span class="min-value">Rs. {{minVal}}</span>
<span class="max-value">Rs. {{maxVal}}</span>
</div>
<div class="ecm-input-container">
<input type="text" class="min-val-input" placeholder="500" [(ngModel)]="minVal">
<span class="value-divider">-</span>
<input type="text" class="max-val-input" placeholder="35000" [(ngModel)]="maxVal">
<button md-button class="find-button">Find</button>
</div>
</div>
</div>
-->
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
<div class="price-title">Price</div>
</mat-panel-title>
</mat-expansion-panel-header>
<!-- TODO Range Component -->
<md-slider class="price-slider" min="500" max="35000" (input)="onInputChange($event);"></md-slider>
<div class="amount-range"> <div class="amount-range">
<span class="min-value">Rs. {{minVal}}</span> <span class="min-value">Rs. {{minVal}}</span>
<span class="max-value">Rs. {{maxVal}}</span> <span class="max-value">Rs. {{maxVal}}</span>
</div> </div>
<div class="ecm-input-container"> <div class="ecm-input-container">
<input type="text" class="min-val-input" placeholder="500" [(ngModel)]="minVal"> <input type="text" class="min-val-input" placeholder="500" [(ngModel)]="minVal">
<span class="value-divider">-</span> <span class="value-divider">-</span>
<input type="text" class="max-val-input" placeholder="35000" [(ngModel)]="maxVal"> <input type="text" class="max-val-input" placeholder="35000" [(ngModel)]="maxVal">
<button md-button class="find-button">Find</button> <button md-button class="find-button">Find</button>
</div> </div>
</div> </mat-expansion-panel>
<mat-expansion-panel *ngFor="let filterOption of filterOptions.filterOptions">
<mat-expansion-panel-header>
<mat-panel-title>
<div class="price-title">{{filterOption.label}}</div>
</mat-panel-title>
</mat-expansion-panel-header>
<span class="variant-container" *ngFor="let filterOptionVal of filterOption.facetData; let i = index ">
<span *ngIf=" i%2 == 0 ">
<bb-checkbox class="check-text">
<span [ngClass]=" filterOption.label === 'Color' ? 'circle' : ''" [ngStyle]="{'color':getColor(filterOptionVal)}"></span>
<span>{{filterOptionVal}}</span>
</bb-checkbox>
<span class="variant-count"> {{filterOption.facetData[i+1]}} </span>
</span>
</span>
</mat-expansion-panel>
</div> </div>
</div> </div>
</div>
<div class="small-12 medium-9 large-9 column end ecm-items-details"> <div class="small-12 medium-9 large-9 column end ecm-items-details">
<div class="row"> <div class="row">
<div class="ecm-section-info"> <div class="ecm-section-info">
<span class="ecm-section-info-title">{{subcategory?.shDescr}}</span> <span class="ecm-section-info-title">{{subcategory?.shDescr}}</span>
<span class="ecm-total-items">( {{items?.length}} Items )</span> <span class="ecm-total-items">( {{items?.length - 1}} Items )</span>
<!-- <span class="ecm-section-info-subhead">{{subcategory?.descr}}</span> -->
</div> </div>
<div class="ecm-item-card-detail"> <div class="ecm-item-card-detail">
<div class="small-12 medium-6 large-4 column end item-card" <div *ngFor="let _item of items | slice:0:show;" class="small-12 medium-6 large-4 column end item-card" >
*ngFor="let _item of items">
<div class="item-card-overlay" (click)="isInCart(_item.itemCode) ? goToCart() : addToCart(_item) "> <div class="item-card-overlay" (click)="isInCart(_item.itemCode) ? goToCart() : addToCart(_item) ">
<span class="item-card-overlay-action" > <span class="item-card-overlay-action">
<i class="material-icons">shopping_cart</i> <i class="material-icons">shopping_cart</i>
{{ (_item.itemCode.indexOf('L2D014') == 0 ) ? (isInCart(_item.itemCode) ? 'Go To Cart' : 'Add to Cart') : 'Enroll Now'}} {{ (_item.itemCode.indexOf('L2D014') == 0 ) ?
</span> ( isInCart(_item.itemCode) ? 'Go To Cart' : 'Add to Cart') :
'Enroll Now'
}}
</span>
</div> </div>
<!--<ecm-item-caption [itemData]="_item"></ecm-item-caption> --> <ecm-card (addToWishlist)="addToWishlist(_item);"
<ecm-card (addToWishlist)="addToWishlist(_item);" (removeFromWishlist)="removeFromWishlist(_item);" (storeData)="storeItem(_item)" [itemData]="_item" [extraParam]="extra_param"></ecm-card> (removeFromWishlist)="removeFromWishlist(_item);"
(storeData)="storeItem(_item)"
[itemData]="_item"
[extraParam]="extra_param">
</ecm-card>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</md-card> </md-card>
</div> </div>
</section> </section>
</div> </div>
......
ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-product/ecm-product.component.ts
View file @ 9277d254
...@@ -25,10 +25,9 @@ export class EcmProductComponent implements OnInit { ...@@ -25,10 +25,9 @@ export class EcmProductComponent implements OnInit {
position = 0; position = 0;
isCatItems = 'false'; isCatItems = 'false';
show = false;
minVal = 500; minVal = 500;
maxVal = 35000; maxVal = 35000;
show = 0;
@HostListener( "window:scroll", [] ) @HostListener( "window:scroll", [] )
onWindowScroll() { onWindowScroll() {
this.position = window.pageYOffset; this.position = window.pageYOffset;
...@@ -38,6 +37,7 @@ export class EcmProductComponent implements OnInit { ...@@ -38,6 +37,7 @@ export class EcmProductComponent implements OnInit {
Items = 0; Items = 0;
private items; private items;
private filterOptions;
private extra_param = { "catCode": '', "catShDesc": '', scatDesc: '' }; private extra_param = { "catCode": '', "catShDesc": '', scatDesc: '' };
private category; private category;
...@@ -68,6 +68,13 @@ export class EcmProductComponent implements OnInit { ...@@ -68,6 +68,13 @@ export class EcmProductComponent implements OnInit {
this.store.select( 'items' ).subscribe( this.store.select( 'items' ).subscribe(
items => { items => {
this.items = items; this.items = items;
if(this.items)
{
this.show = this.items.length - 1;
this.filterOptions = this.items[this.show];
console.log("this.items -->",this.items , this.items.length);
console.log("this.items.length -->", this.filterOptions);
}
if(this.items[0]){ if(this.items[0]){
console.log('Items:[',this.items[0]); console.log('Items:[',this.items[0]);
let breadcrumb; let breadcrumb;
...@@ -82,7 +89,7 @@ export class EcmProductComponent implements OnInit { ...@@ -82,7 +89,7 @@ export class EcmProductComponent implements OnInit {
} }
storeItem( selectedItem ) { storeItem( selectedItem ) {
//this.store.dispatch( this.itemAction.getItemSuccess( selectedItem ) ); this.store.dispatch( this.itemAction.getItemSuccess( selectedItem ) );
} }
fetchStore( viewType: string ) { fetchStore( viewType: string ) {
...@@ -118,14 +125,7 @@ export class EcmProductComponent implements OnInit { ...@@ -118,14 +125,7 @@ export class EcmProductComponent implements OnInit {
this.store.dispatch( this.wishlistAction.deleteWishlistItemSuccess( item ) ); this.store.dispatch( this.wishlistAction.deleteWishlistItemSuccess( item ) );
this.openSnackBar('Item Deleted from your Wishlist'); this.openSnackBar('Item Deleted from your Wishlist');
} }
showHide() {
if ( this.show )
this.show = false;
else
this.show = true;
}
onInputChange( event: any ) { onInputChange( event: any ) {
this.maxVal = event.value; this.maxVal = event.value;
} }
...@@ -167,4 +167,27 @@ export class EcmProductComponent implements OnInit { ...@@ -167,4 +167,27 @@ export class EcmProductComponent implements OnInit {
return isAuthUser; return isAuthUser;
} }
//"RED", "WHITE", "BLU_WH", "BLUE", "RED_WH", "PEACH", "BLACK", "YELLOW", "BLK_WH", "BROWN"
getColor( color )
{
switch ( color )
{
case 'RED':
return 'red';
case 'WHITE':
return 'white';
case 'BLUE':
return 'blue';
case 'PEACH':
return 'peach';
case 'BLACK':
return 'black';
case 'YELLOW':
return 'yellow';
case 'BROWN':
return 'brown';
default:
return 'black';
}
}
} }
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