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 @@
}
.price-title {
padding-left: 25px;
/* padding-left: 25px;*/
padding-top: 10px;
padding-bottom: 10px;
text-align: left;
cursor: pointer;
/*Background Image*/
background-image: url("../../../assets/images/down_arrow.png");
/* background-image: url("../../../assets/images/down_arrow.png");*/
background-position: right 14px;
background-repeat: no-repeat;
background-size: 16px 16px;
......@@ -280,7 +280,7 @@
.price-slider {
height: 48px !important;
min-width: 250px !important;
min-width: 252px !important;
}
.amount-range {
......@@ -289,25 +289,26 @@
.min-value {
float: left;
padding-left: 20px;
padding-left: 2px;
font-size: 0.8rem;
}
.max-value {
float: right;
padding-right: 20px;
/* padding-right: 20px;*/
padding-right: 10px;
font-size: 0.8rem;
}
.min-val-input, .max-val-input {
width: 80px;
width: 65px;
height: 35px;
display: inline-block;
padding-left: 10px;
padding-left: 8px;
}
.min-val-input {
margin-left: 20px;
margin-left: -5px;
}
.max-val-input {
......@@ -336,3 +337,38 @@
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 @@
<div *ngIf="items?.length > 0">
<section class="subcategories-section">
<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 = "filter-pane">
<div class="filter-header">
<span class="filter-hader-title">Filter By</span>
</div>
<div class="container">
<div class="price-title" (click)="showHide();">Price</div>
<div *ngIf="show">
<md-slider min="500" max="35000" class="price-slider" (input)="onInputChange($event);"></md-slider>
<div class="filter-pane">
<div class="filter-header">
<span class="filter-hader-title">Filter By</span>
</div>
<!--
<div class="container">
<div class="price-title" (click)="showHide();">Price</div>
<div *ngIf="show">
<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">
<span class="min-value">Rs. {{minVal}}</span>
<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">
<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">
<input type="text" class="max-val-input" placeholder="35000" [(ngModel)]="maxVal">
<button md-button class="find-button">Find</button>
</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 class="small-12 medium-9 large-9 column end ecm-items-details">
<div class="row">
<div class="ecm-section-info">
<span class="ecm-section-info-title">{{subcategory?.shDescr}}</span>
<span class="ecm-total-items">( {{items?.length}} Items )</span>
<!-- <span class="ecm-section-info-subhead">{{subcategory?.descr}}</span> -->
<span class="ecm-total-items">( {{items?.length - 1}} Items )</span>
</div>
<div class="ecm-item-card-detail">
<div class="small-12 medium-6 large-4 column end item-card"
*ngFor="let _item of items">
<div *ngFor="let _item of items | slice:0:show;" class="small-12 medium-6 large-4 column end item-card" >
<div class="item-card-overlay" (click)="isInCart(_item.itemCode) ? goToCart() : addToCart(_item) ">
<span class="item-card-overlay-action" >
<i class="material-icons">shopping_cart</i>
{{ (_item.itemCode.indexOf('L2D014') == 0 ) ? (isInCart(_item.itemCode) ? 'Go To Cart' : 'Add to Cart') : 'Enroll Now'}}
</span>
<span class="item-card-overlay-action">
<i class="material-icons">shopping_cart</i>
{{ (_item.itemCode.indexOf('L2D014') == 0 ) ?
( isInCart(_item.itemCode) ? 'Go To Cart' : 'Add to Cart') :
'Enroll Now'
}}
</span>
</div>
<!--<ecm-item-caption [itemData]="_item"></ecm-item-caption> -->
<ecm-card (addToWishlist)="addToWishlist(_item);" (removeFromWishlist)="removeFromWishlist(_item);" (storeData)="storeItem(_item)" [itemData]="_item" [extraParam]="extra_param"></ecm-card>
<ecm-card (addToWishlist)="addToWishlist(_item);"
(removeFromWishlist)="removeFromWishlist(_item);"
(storeData)="storeItem(_item)"
[itemData]="_item"
[extraParam]="extra_param">
</ecm-card>
</div>
</div>
</div>
</div>
</md-card>
</md-card>
</div>
</section>
</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 {
position = 0;
isCatItems = 'false';
show = false;
minVal = 500;
maxVal = 35000;
show = 0;
@HostListener( "window:scroll", [] )
onWindowScroll() {
this.position = window.pageYOffset;
......@@ -38,6 +37,7 @@ export class EcmProductComponent implements OnInit {
Items = 0;
private items;
private filterOptions;
private extra_param = { "catCode": '', "catShDesc": '', scatDesc: '' };
private category;
......@@ -68,6 +68,13 @@ export class EcmProductComponent implements OnInit {
this.store.select( 'items' ).subscribe(
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]){
console.log('Items:[',this.items[0]);
let breadcrumb;
......@@ -82,7 +89,7 @@ export class EcmProductComponent implements OnInit {
}
storeItem( selectedItem ) {
//this.store.dispatch( this.itemAction.getItemSuccess( selectedItem ) );
this.store.dispatch( this.itemAction.getItemSuccess( selectedItem ) );
}
fetchStore( viewType: string ) {
......@@ -118,14 +125,7 @@ export class EcmProductComponent implements OnInit {
this.store.dispatch( this.wishlistAction.deleteWishlistItemSuccess( item ) );
this.openSnackBar('Item Deleted from your Wishlist');
}
showHide() {
if ( this.show )
this.show = false;
else
this.show = true;
}
onInputChange( event: any ) {
this.maxVal = event.value;
}
......@@ -167,4 +167,27 @@ export class EcmProductComponent implements OnInit {
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