Commit 68b0a630 authored by prumde's avatar prumde

Updated


git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174474 ce508802-f39f-4f6c-b175-0d175dae99d5
parent f2a46566
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core'; import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { LocationStrategy, HashLocationStrategy } from '@angular/common'; import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { FormsModule,ReactiveFormsModule } from '@angular/forms'; import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http'; import { HttpModule } from '@angular/http';
...@@ -42,7 +42,7 @@ import { EcmSubCategoryComponent } from './ecm-view/ecm-sub-category/ecm-sub-cat ...@@ -42,7 +42,7 @@ import { EcmSubCategoryComponent } from './ecm-view/ecm-sub-category/ecm-sub-cat
import { EcmProductComponent } from './ecm-view/ecm-product/ecm-product.component'; import { EcmProductComponent } from './ecm-view/ecm-product/ecm-product.component';
import { EcmTrendProductComponent } from './ecm-view/ecm-trend-product/ecm-trend-product.component'; import { EcmTrendProductComponent } from './ecm-view/ecm-trend-product/ecm-trend-product.component';
import { EcmTemplateComponent, EcmTemplateDirective } from './ecm-product-details/ecm-template/ecm-template.component'; import { EcmTemplateComponent, EcmTemplateDirective } from './ecm-product-details/ecm-template/ecm-template.component';
import { EcmCartComponent, ECMConfirmDialog } from './ecm-view/ecm-cart/ecm-cart.component'; import { EcmCartComponent, ECMConfirmDialog, CounterComponent } from './ecm-view/ecm-cart/ecm-cart.component';
import { EcmCartService } from './ecm-view/ecm-cart/ecm-cart.service'; import { EcmCartService } from './ecm-view/ecm-cart/ecm-cart.service';
import { EcmProductReviewService } from './ecm-product-details/ecm-product-review.service'; import { EcmProductReviewService } from './ecm-product-details/ecm-product-review.service';
...@@ -113,6 +113,7 @@ const appRoutes: Routes = [ ...@@ -113,6 +113,7 @@ const appRoutes: Routes = [
EcmRelatedItemsComponent, EcmRelatedItemsComponent,
EcmCheckoutComponent, EcmCheckoutComponent,
ECMConfirmDialog, ECMConfirmDialog,
CounterComponent,
ECMWriteReviewDialog, ECMWriteReviewDialog,
RatingComponent, RatingComponent,
EcmWishListComponent, EcmWishListComponent,
...@@ -164,6 +165,7 @@ const appRoutes: Routes = [ ...@@ -164,6 +165,7 @@ const appRoutes: Routes = [
ECMWriteReviewDialog, ECMWriteReviewDialog,
ECMDialog ECMDialog
], ],
bootstrap: [AppComponent] bootstrap: [AppComponent],
schemas: [NO_ERRORS_SCHEMA]
}) })
export class AppModule { } export class AppModule { }
...@@ -155,7 +155,8 @@ p { ...@@ -155,7 +155,8 @@ p {
#ecm-item { #ecm-item {
cursor: pointer; cursor: pointer;
height: 300px; height: 320px;
margin-top: 5px;
} }
#ecm-item-info { #ecm-item-info {
...@@ -169,6 +170,7 @@ p { ...@@ -169,6 +170,7 @@ p {
line-height: 15px; line-height: 15px;
padding-top: 0px; padding-top: 0px;
display: inline; display: inline;
padding-right: 5px;
} }
#ecm-item-info-subhead { #ecm-item-info-subhead {
...@@ -329,16 +331,17 @@ p { ...@@ -329,16 +331,17 @@ p {
} }
.ecm-discount-rate{ .ecm-discount-rate{
font-weight: bold; font-weight: bold;
padding-left: 5px;
} }
.ecm-discount-off{ .ecm-discount-off{
font-weight: bold; font-weight: bold;
color: forestgreen; color: green;
padding-left: 5px;
} }
.new{ .new{
background: yellow; background: yellow;
font-size: 12px; font-size: 12px;
padding: 2px; padding: 2px 8px;
} }
.ecm-total-ratings{ .ecm-total-ratings{
color: #333; color: #333;
...@@ -347,15 +350,39 @@ p { ...@@ -347,15 +350,39 @@ p {
} }
.ecm-wishlist-button{ .ecm-wishlist-button{
position: absolute; position: absolute;
padding: 8px; /* padding: 8px; */
right: 16px; /* padding: 8px; */
top: 16px; right: 25px;
height: 40px; top: 10px;
width: 40px; /* height: 40px; */
/* width: 40px; */
cursor: pointer; cursor: pointer;
line-height: 8px;
z-index: 1; z-index: 1;
color: darkgray; color: darkgray;
} }
.ecm-wishlist-button:hover { .ecm-wishlist-button:hover {
color: mediumvioletred !important; color: mediumvioletred !important;
} }
.favourite-icon {
color: inherit;
font-size: 28px;
}
.inwishlist {
color: mediumvioletred !important;
}
.product-img-container {
position: relative;
min-height: 230px;
padding: 0;
}
.trend-img-container {
position: relative;
min-height: 310px;
padding: 0;
}
...@@ -47,29 +47,28 @@ ...@@ -47,29 +47,28 @@
</md-button-toggle> </md-button-toggle>
</div> --> </div> -->
<div class="ecm-card" id="ecm-item" (click)="viewItem()"> <div class="ecm-card" id="ecm-item" (click)="viewItem()">
<ecm-image [isThumbnail]="true" [refId]='itemData.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage] = "true" ></ecm-image> <ecm-image [ngClass]="trendImg ? 'trend-img-container' : 'product-img-container'" class="large-12 columns" [isThumbnail]="true" [refId]='itemData.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage] = "true" ></ecm-image>
<div class="ecm-item-footer"> <div class="ecm-item-footer large-12 columns">
<div class="ecm-item-info" id="ecm-item-info"> <div class="ecm-item-info" id="ecm-item-info">
<span id="ecm-item-info-title" class="ecm-card-info-title">{{itemData.shDescr}}</span> <span id="ecm-item-info-title" class="ecm-card-info-title">{{itemData.itemHeader.itemShDescr}}</span>
<span class="new" >New</span> <span class="new" >New</span>
<!-- <!--
<span *ngIf="itemData.cat_sh_descr && itemData.scat_sh_descr" class="ecm-card-info-subhead" id="ecm-item-info-subhead">{{itemData.cat_sh_descr}} - {{itemData.scat_sh_descr}}</span> <span *ngIf="itemData.cat_sh_descr && itemData.scat_sh_descr" class="ecm-card-info-subhead" id="ecm-item-info-subhead">{{itemData.cat_sh_descr}} - {{itemData.scat_sh_descr}}</span>
<span *ngIf="extraParam && !itemData.cat_sh_descr && !itemData.scat_sh_descr" class="ecm-card-info-subhead" id="ecm-item-info-subhead">{{extraParam.catShDesc}} - {{extraParam.scatDesc}}</span> <span *ngIf="extraParam && !itemData.cat_sh_descr && !itemData.scat_sh_descr" class="ecm-card-info-subhead" id="ecm-item-info-subhead">{{extraParam.catShDesc}} - {{extraParam.scatDesc}}</span>
--> -->
</div> </div>
<div class="ecm-card-price"><span class="ecm-rupee"></span><s style="color:lightgray;">Rs. {{itemData.costRate}}</s> <div class="ecm-card-price"><span class="ecm-rupee"></span><s style="color:lightgray;">Rs. {{itemData.itemHeader.itemCostRate}}</s>
<span class="ecm-discount-rate">Rs. 15,000</span> <span class="ecm-discount-rate">Rs.{{itemData.itemHeader.itemDiscountedRate}}</span>
<span class="ecm-discount-off">22% off</span> <span class="ecm-discount-off">{{itemData.itemHeader.itemDiscount}}% off</span>
</div> </div>
<div class="ecm-ratings"> <div class="ecm-ratings">
<rating style="vertical-align: sub;" [rate]="3" [isSmallRatings]=true></rating> <rating style="vertical-align: sub;" [rate]="itemData.itemRatings.AVG_RATING" [isSmallRatings]=true></rating>
<!-- <span *ngFor="let a of createRatings(3);">&#x2605;</span> --> <span class="ecm-total-ratings">({{itemData.itemRatings.NO_OF_RATINGS}})</span>
<span class="ecm-total-ratings">(20,304)</span>
</div> </div>
</div> </div>
</div> </div>
<div class="ecm-wishlist-button"> <div [ngClass]="inWishlist ? 'inwishlist' : ''" class="ecm-wishlist-button">
<md-icon style="color: inherit;" (click)="removeFromWishlist();" >favorite</md-icon> <md-icon class="favourite-icon" (click)="inWishlist ? removeFromWishlist.emit() : addToWishlist.emit()">favorite</md-icon>
</div> </div>
</div> </div>
......
...@@ -11,6 +11,8 @@ import { ItemDetail } from '../ecm-model/product-detail-model'; ...@@ -11,6 +11,8 @@ import { ItemDetail } from '../ecm-model/product-detail-model';
import { Reviews } from '../ecm-model/product-review.model'; import { Reviews } from '../ecm-model/product-review.model';
import { EcmProductReviewService } from '../ecm-product-details/ecm-product-review.service'; import { EcmProductReviewService } from '../ecm-product-details/ecm-product-review.service';
import { Observable } from 'rxjs/Observable';
import { Item } from '../ecm-model/product-model';
@Component({ @Component({
selector: 'ecm-card', selector: 'ecm-card',
...@@ -25,14 +27,29 @@ export class ECMCardComponent implements OnInit { ...@@ -25,14 +27,29 @@ export class ECMCardComponent implements OnInit {
@Input() itemData: ItemDetail; @Input() itemData: ItemDetail;
@Input() extraParam: any; @Input() extraParam: any;
@Input() reviewsData: Reviews; @Input() reviewsData: Reviews;
@Input('trendImg') trendImg: boolean;
inWishlist: boolean;
@Output() storeData = new EventEmitter(); @Output() storeData = new EventEmitter();
@Output() addToWishlist = new EventEmitter();
@Output() removeFromWishlist = new EventEmitter();
wishlistItems: Observable<Item[]>;
constructor(private router: Router, private productReviewService: EcmProductReviewService, private store: Store<AppState>) { constructor(private router: Router, private productReviewService: EcmProductReviewService, private store: Store<AppState>) {
} }
ngOnInit() { ngOnInit() {
if(this.itemData){
this.wishlistItems = this.store.select('wishlistItems');
this.wishlistItems.subscribe( wishlistItems => {
if(wishlistItems.find(x => x.itemCode === this.itemData.itemCode))
this.inWishlist = true;
else
this.inWishlist = false;
} );
}
} }
viewItem(){ viewItem(){
...@@ -101,4 +118,5 @@ export class ECMCardComponent implements OnInit { ...@@ -101,4 +118,5 @@ export class ECMCardComponent implements OnInit {
} }
return isAuthUser; return isAuthUser;
} }
} }
<div class="carousel" [attr.data-flickity]="cardsPerSlide" > <div class="carousel" [attr.data-flickity]="cardsPerSlide" >
<div class="carousel-cell small-12 medium-6 large-4 column end " *ngFor="let cardItem of cardItems"> <div class="carousel-cell small-12 medium-6 large-4 column end " *ngFor="let cardItem of cardItems">
<ecm-card *ngIf='! cardItem.viewAll' [itemData]="cardItem"></ecm-card> <ecm-card *ngIf='! cardItem.viewAll' [itemData]="cardItem" [trendImg]="true"></ecm-card>
<div *ngIf='cardItem.viewAll' class="view-all-card" > <div *ngIf='cardItem.viewAll' class="view-all-card" >
<a md-button class="view-all-link" (click)="viewAll();">{{cardItem.viewAll}}</a> <a md-button class="view-all-link" (click)="viewAll();">{{cardItem.viewAll}}</a>
</div> </div>
......
...@@ -92,6 +92,8 @@ ...@@ -92,6 +92,8 @@
background-color: white; background-color: white;
box-shadow: 0 0px 5px 1px rgba(0,0,0,.1); box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
margin-top: 30px; margin-top: 30px;
width: 100%;
} }
.footer-title { .footer-title {
......
...@@ -54,6 +54,7 @@ ...@@ -54,6 +54,7 @@
.nav-my-profile, .nav-orders, .nav-wishlist { .nav-my-profile, .nav-orders, .nav-wishlist {
padding-bottom: 10px; padding-bottom: 10px;
cursor: pointer;
} }
.help-center-title { .help-center-title {
......
...@@ -35,9 +35,9 @@ ...@@ -35,9 +35,9 @@
<img class="ecm-order-icon" src="/ecm/assets/images/svg/order.svg" /> <img class="ecm-order-icon" src="/ecm/assets/images/svg/order.svg" />
<span class="menu-title">Orders</span> <span class="menu-title">Orders</span>
</div> </div>
<div class="nav-wishlist"> <div class="nav-wishlist" (click)="goToWishlist();">
<img class="ecm-wishlist-icon" src="/ecm/assets/images/svg/wishlist.svg" /> <img class="ecm-wishlist-icon" src="/ecm/assets/images/svg/wishlist.svg" />
<span class="menu-title" (click)="goToWishlist();">Wishlist</span> <span class="menu-title">Wishlist</span>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -106,7 +106,7 @@ export class EcmProductDetailsComponent implements OnInit { ...@@ -106,7 +106,7 @@ export class EcmProductDetailsComponent implements OnInit {
this.ecmTemplate.setItemDetail( this.itemDetail ); this.ecmTemplate.setItemDetail( this.itemDetail );
} }
else { else {
alert( "Sorry, the " + ecmTemplateName + " is not in the system yet!" ); //alert( "Sorry, the " + ecmTemplateName + " is not in the system yet!" );
} }
} }
}); });
......
...@@ -6,8 +6,8 @@ ...@@ -6,8 +6,8 @@
<div class="small-12 medium-6 large-6 columns image"> <div class="small-12 medium-6 large-6 columns image">
<div> <div>
<md-button-toggle class="wishButton"> <md-button-toggle class="wishButton">
<md-icon style="color: mediumvioletred;" *ngIf="!inWishlist" (click)="addToWishlist();">favorite_border</md-icon> <md-icon style="color: mediumvioletred; font-size: 28px;" *ngIf="!inWishlist" (click)="addToWishlist();">favorite_border</md-icon>
<md-icon style="color: mediumvioletred;" *ngIf="inWishlist" (click)="removeFromWishlist();" >favorite</md-icon> <md-icon style="color: mediumvioletred; font-size: 28px;" *ngIf="inWishlist" (click)="removeFromWishlist();" >favorite</md-icon>
</md-button-toggle> </md-button-toggle>
</div> </div>
<div class="md-card-image"> <div class="md-card-image">
......
/************ Cart-Screen ******************/
md-card {
padding: 0;
}
.cart-header {
font-size: 18px;
padding: 15px 25px;
color: #000;
}
.cart-items-section {
width: 100%;
line-height: initial;
top: 60px;
bottom: 50px;
position: relative;
padding-top: 20px;
padding-bottom: 70px;
max-width: 72rem;
}
@media screen and (min-width: 64em)
{
.cart-items-section {
/* width: 75%; */
}
.product-price {
text-align: start !important;
}
.ecm-item-info {
padding-top: 0 !important;
}
.package-content-title {
padding-bottom: 8px !important;
}
.total-cost {
padding-top: 5px !important;
font-size: 18px !important;
text-align: start !important;
}
.discounted-price {
font-size: 14px !important;
}
.location-info[_ngcontent-c1] {
float: inherit !important;
padding-left: 25px !important;
}
.link_button[_ngcontent-c1] {
float: inherit !important;
padding-left: 25px !important;
font-size: 13px;
}
.price-section, .package-chip-list {
padding-left: .625rem !important;
padding-right: .625rem !important;
}
.delivery-offers {
font-size: 14px !important;
}
.seller-name[_ngcontent-c1], .location-name[_ngcontent-c1] {
font-size: 15px;
}
.date-select {
width: 50% !important;
}
}
@media screen and (max-width: 64em) {
.columns {
padding: 0;
}
.ecm-item-container{
padding: 20px 20px !important;
}
.ecm-item-img {
left: calc(50% - 125px) !important;
}
}
.ecm-item-container {
border-top: 1px solid lightgray;
padding: 20px 25px;
margin: 0;
}
.ecm-item-img {
position: relative;
max-height: 250px;
max-width: 250px;
}
.ecm-item-info {
padding-top: 15px;
}
.ecm-item-detail {
padding-left: 0;
}
.price-section {
padding: 0;
}
.package-chip-list {
padding: 0;
}
.venue-section {
padding-top: 25px;
padding-bottom: 25px;
}
.date-select {
width: 100%;
}
.location-icon {
padding-left: 2px;
font-size: 17px;
vertical-align: bottom;
color: mediumvioletred;
}
.mat-basic-chip {
display: inline-flex;
padding: 4px 12px;
margin-right: 10px;
border-radius: 24px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: default;
background-color: #f2f2f2;
color: #000;
outline: none;
}
.time-slot-chip {
border-radius: 5px !important;
padding: 12px 12px !important;
font-weight: 700;
background-color: #f2f2f2;
}
.mat-chip:not(.mat-basic-chip):focus {
background-color: mediumvioletred;
color: white;
}
.seller-title, .location-title {
font-size: 13px;
color: gray;
opacity: 0.6;
font-weight: 700;
}
.seller-name, .location-name {
color: #787878;
font-size: 13px;
}
.seller-info {
display: inline-block;
}
.location-info {
display: inline-block;
float: right;
}
.delivery-offers {
padding-top: 18px;
padding-bottom: 10px;
font-size: 12px;
}
.discounted-price {
display: block;
font-size: 10px;
}
.product-price {
text-align: end;
padding-left: 5px;
}
.discount-rate {
color: green;
padding-left: 5px;
font-weight: 700;
}
.individual-price {
display: block;
font-size: 12px;
}
.total-cost-detail {
padding: 0;
padding-top: 15px;
padding-bottom: 15px;
}
.no-of-individuals {
color: #787878;
font-size: 14px;
}
.total-cost {
font-size: 14px;
font-weight: 700;
padding-top: 0;
text-align: end;
}
.quantity-title {
display: block;
font-size: 15px;
color: gray;
padding-bottom: 10px;
}
.quantity-chg-btn {
display: inline-block;
height: 30px;
width: 30px;
vertical-align: middle;
text-align: center;
border-radius: 100%;
box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
line-height: 30px;
}
.counter{
position: relative;
padding-bottom: 15px;
}
.counter-button{
color: mediumvioletred;
background-color: white;
min-width: 32px;
padding: 0;
margin: 0;
line-height: 32px;
border-radius: 100%;
}
.counter-button.mat-button-ripple.mat-ripple {
border-radius: 100%;
}
.counter-button, .selected {
box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
font-size: 15px;
width: 32px;
height: 32px;
}
.counter-button, .selected, .detail-checkout-button, .continue-shopping {
box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
}
.ecm-textBox {
width: 76px;
position: relative;
margin-left: 8px;
margin-right: 8px;
text-align: center;
height: 36px;
font-size: 17px;
font-weight: 800;
}
.incr-icon, .decr-icon{
font-size: 20px;
}
.more-offers {
float: right;
color: mediumvioletred;
font-weight: 700;
}
.link_button {
color: mediumvioletred;
font-weight: bold;
padding: 0;
float: right;
font-size: 13px;
}
.arrow {
vertical-align: middle;
margin-left: -2px;
font-size: 21px;
}
.move-to-wishlist {
text-align: end;
padding-top: 30px;
}
.move-to-wishlist-btn {
color: #787878;
font-size: 18px;
font-weight: 700;
width: 200px;
height: 50px;
border-radius: 2px;
position: relative;
background: transparent;
}
.cart-remove-icon {
vertical-align: middle;
color: #787878;
cursor: pointer;
}
.time-slot-chips {
padding: 0;
float: inherit;
}
.time-slot-title, .venue-title {
display: block;
font-size: 14px;
padding-bottom: 10px;
color: #787878;
}
.time-slot-section {
padding-top: 25px;
}
.select-date-section {
padding-top: 10px;
}
.venue-name {
font-size: 14px;
}
.package-content-title {
padding-bottom: 0;
color: #787878;
font-size: 14px;
}
.help-btn {
padding: 1px 6px;
border-radius: 100%;
background: #f3f3f3;
cursor: pointer;
}
/***** Old Cart ********/
/* neew*/ /* neew*/
.desc{ .desc{
...@@ -112,7 +485,7 @@ ...@@ -112,7 +485,7 @@
padding: 0px !important; padding: 0px !important;
} }
.ecm-textBox{ .ecm-textBox{
height: 42px !important; width: 60px !important;
} }
.detail-Continue-Shopping-button{ .detail-Continue-Shopping-button{
height: 46px !important; height: 46px !important;
...@@ -137,10 +510,6 @@ ...@@ -137,10 +510,6 @@
.item-image { .item-image {
width: 25% !important; width: 25% !important;
} }
.counter{
position: relative;
padding-top: 18px;
}
.listItems[_ngcontent-c8] { .listItems[_ngcontent-c8] {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
...@@ -157,10 +526,10 @@ ...@@ -157,10 +526,10 @@
.wishList-items,.remove-items{ .wishList-items,.remove-items{
font-size: 16px !important; font-size: 16px !important;
} }
.counter-button{ /* .counter-button{ */
width: 50px !important; /* width: 50px !important; */
height: 50px !important; /* height: 50px !important; */
} /* } */
} }
.change-color .change-color
...@@ -283,10 +652,6 @@ ...@@ -283,10 +652,6 @@
padding-top: 18px; padding-top: 18px;
} }
.counter{
position: relative;
}
.ecm-textBox{ .ecm-textBox{
width: 76px; width: 76px;
position: relative; position: relative;
...@@ -297,18 +662,17 @@ ...@@ -297,18 +662,17 @@
font-size: 17px; font-size: 17px;
font-weight: 800; font-weight: 800;
} }
.counter-button{ /* .counter-button{ */
color: mediumvioletred; /* color: mediumvioletred; */
background-color: white; /* background-color: white; */
width: 40px; /* width: 40px; */
height: 40px; /* height: 40px; */
min-width: 40px; /* min-width: 40px; */
padding: 0; /* padding: 0; */
margin: 0; /* margin: 0; */
line-height: 32px; /* line-height: 32px; */
border-radius: 100%; /* border-radius: 100%; */
/* } */
}
.counter-button.mat-button-ripple.mat-ripple { .counter-button.mat-button-ripple.mat-ripple {
border-radius: 100%; border-radius: 100%;
} }
...@@ -319,8 +683,6 @@ ...@@ -319,8 +683,6 @@
font-weight: bold; font-weight: bold;
line-height: 1; line-height: 1;
text-align: right; text-align: right;
} }
.no-button{ .no-button{
position: relative; position: relative;
...@@ -339,6 +701,7 @@ ...@@ -339,6 +701,7 @@
margin-right: 18px; margin-right: 18px;
height: 46px; height: 46px;
width: 170px; width: 170px;
margin-bottom: 18px;
/* /*
position: inherit; position: inherit;
bottom: 7px; bottom: 7px;
...@@ -351,7 +714,7 @@ ...@@ -351,7 +714,7 @@
.shippingFree{ .shippingFree{
float: right; float: right;
font-weight: 600; font-weight: 600;
color: mediumaquamarine; color: green;
font-size: 13px; font-size: 13px;
} }
.details-of-Cart{ .details-of-Cart{
...@@ -362,7 +725,7 @@ ...@@ -362,7 +725,7 @@
padding-bottom: 70px; padding-bottom: 70px;
max-width: 72rem; max-width: 72rem;
} }
.cartItemsDetails{ .cartItemsDetails {
padding: 0; padding: 0;
} }
.item-shDescr{ .item-shDescr{
...@@ -408,8 +771,8 @@ ...@@ -408,8 +771,8 @@
.counter-button, .selected { .counter-button, .selected {
box-shadow: 0 0px 5px 1px rgba(0,0,0,.1); box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
font-size: 15px; font-size: 15px;
width: 36px; /* width: 36px; */
height: 36px; /* height: 36px; */
} }
.counter-button, .selected, .detail-checkout-button, .continue-shopping { .counter-button, .selected, .detail-checkout-button, .continue-shopping {
...@@ -517,7 +880,6 @@ ...@@ -517,7 +880,6 @@
background: mediumvioletred; background: mediumvioletred;
color: #fff; color: #fff;
/* margin-top: 4px; */ /* margin-top: 4px; */
position: fixed !important; position: fixed !important;
bottom: 0 !important; bottom: 0 !important;
height: 54px !important; height: 54px !important;
...@@ -556,3 +918,12 @@ ...@@ -556,3 +918,12 @@
padding: 50px 20px 20px 20px; padding: 50px 20px 20px 20px;
} }
<div *ngIf="isMiniCart then miniCart; else fullCart;"></div> <div *ngIf="isMiniCart then miniCart; else fullCart;"></div>
<ng-template #miniCart> <ng-template #miniCart>
<div *ngIf="(cartItems | async)?.length == 0" style="text-align: center; margin: 3rem;"> <div *ngIf="(cartItems | async)?.length == 0" style="text-align: center; margin: 3rem;">
<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 <span class="empty-cart-title">Empty Cart</span> <span
class="border-line"></span> <span class="empty-cart-msg">Looks class="border-line"></span> <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>
<!-- <div *ngIf="cartCount > 0"> <!-- <div *ngIf="cartCount > 0">
<div class="cartItemsDetail" <div class="cartItemsDetail"
*ngFor="let item of cartItemsDetail | slice:0:displayItem; let i=index"> *ngFor="let item of cartItemsDetail | slice:0:displayItem; let i=index">
<table style="width: 100%;"> <table style="width: 100%;">
...@@ -34,9 +33,9 @@ ...@@ -34,9 +33,9 @@
<!-- <button md-button class="checkout-button" [routerLink]="['/checkout']">Checkout <!-- <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> -->
<div class="mini-cart-section"> <div class="mini-cart-section">
<div class="scrollMe" #scrollMe *ngIf="(cartItems | async)?.length > 0"> <div class="scrollMe" #scrollMe *ngIf="(cartItems | async)?.length > 0">
<div class="cartItemsDetail" <div class="cartItemsDetail"
*ngFor="let item of cartItems | async"> *ngFor="let item of cartItems | async">
<table style="width: 100%;"> <table style="width: 100%;">
...@@ -48,149 +47,130 @@ ...@@ -48,149 +47,130 @@
<span class="item-descr-span">{{item.itemHeader.itemShDescr}}</span> <span class="item-descr-span">{{item.itemHeader.itemShDescr}}</span>
</td> </td>
<td style="padding: 10px;">Rs. {{item.itemHeader.itemDiscountedRate}}</td> <td style="padding: 10px;">Rs. {{item.itemHeader.itemDiscountedRate}}</td>
<td (click)="confirmDialog(item)" style="cursor: pointer;"><span <td (click)="confirmDialog(item)" style="cursor: pointer;">
class="delete-icon" md-ripple>x</span></td> <span class="delete-icon" md-ripple>x</span>
</td>
</tr> </tr>
</table> </table>
</div> </div>
</div> </div>
<div *ngIf="(cartItems | async)?.length > displayItem" (click)="showTotalCartItems()"> <div *ngIf="(cartItems | async)?.length > displayItem" (click)="showTotalCartItems()">
<a md-button class="edit-cart-button" [routerLink]="['/cart']" <a md-button class="edit-cart-button" [routerLink]="['/cart']"
(click)="closePanel.emit();">Edit Cart</a> (click)="closePanel.emit();">Edit Cart</a>
</div> </div>
</div> </div>
</ng-template> </ng-template>
<!-- ---------================ MiniCart Ends==============================---------------------------- --> <!-- ---------================ MiniCart Ends==============================---------------------------- -->
<!-- ---------================ detailCart start==============================---------------------------- --> <!-- ---------================ detailCart start==============================---------------------------- -->
<ng-template #fullCart> <ng-template #fullCart>
<ecm-header [isFixedHeader]=true> </ecm-header>
<ecm-header #header [isFixedHeader]=true> </ecm-header>
<ecm-breadcrumbs [pageName]="'CART'"></ecm-breadcrumbs> <ecm-breadcrumbs [pageName]="'CART'"></ecm-breadcrumbs>
<div *ngIf="(cartItems | async)?.length == 0"> <div *ngIf="(cartItems | async)?.length == 0" style="min-height: calc(100% - 120px);">
<div class="row"> <div class="row">
<div class="medium-12 large-12 columns" style="text-align: center; margin-top: 120px;"> <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"> <img class="empty-cart-img" src="/ecm/assets/images/svg/Empty Cart.svg">
<span class="empty-cart-title">Empty Cart</span> <span <span class="empty-cart-title">Empty Cart</span> <span
class="border-line"></span> <span class="empty-cart-msg">Looks class="border-line"></span> <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>
</div> </div>
<div style="margin-top: 155px;">
</div> </div>
</div>
<div *ngIf="(cartItems | async)?.length > 0">
<div class="row details-of-Cart">
<md-card class="medium-8 columns cartItemsDetails">
<div class="ecmdetailsItems">
<div class="ecm-headings">
<span class="my-cart-title">( {{(cartItems | async)?.length}} ) My Cart</span>
</div>
<div class="listItems" *ngFor="let item of cartItems | async">
<div class="item-image"> <div *ngIf="(cartItems | async)?.length > 0" class="cart-items-section row" style="min-height: calc(100% - 120px);">
<ecm-image [refId]='item.itemCode' [refSer]="'M-ITEM'" <md-card class="large-8 columns">
[object]="'ITEM'" [isSingleImage]="true" [isThumbnail]="true"></ecm-image>
</div>
<div class="total-description"> <div class="cart-header">
<div class="items-desc"> My Cart ( {{(cartItems | async)?.length}} )
<span class="item-title" (click)="viewItem(item.itemCode)">Handmade
Handicarft</span> <span class="item-shDescr">{{item.itemHeader.itemShDescr}}</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>
<div *ngIf="item.phyAttribId1" class="change-color"> <div *ngFor="let item of cartItems | async" class="ecm-item-container row">
<span class="size-of-item">Size Selected :</span> <div class="large-2 columns ecm-item-img">
<button md-button class="back btn selected">{{item.phyAttribId1}}</button> <ecm-image [refId]='item.itemCode' [refSer]="'M-ITEM'"
<span class="color-change">Change</span> [object]="'ITEM'" [isSingleImage]="true" [isThumbnail]="true"></ecm-image>
</div>
</div> </div>
<div class="counter-screen"> <div class="large-6 columns ecm-item-info">
<div class="counter"> <span style="display: block;font-size: 16px;"> {{item.itemHeader.itemDescr}} </span>
<button md-button [disabled]="checkQantity(item)" <div>
class="counter-button" (click)="decrement(item)"> <span class="seller-info">
<i class="material-icons" style="padding: 0px;">remove</i> <span class="seller-title">Sold By </span> <span class="seller-name">{{item.itemDetail1.sellerInfo.name}}</span>
</button> </span>
<span> <input class="ecm-textBox" type="text" <span *ngIf="item == 'occassion'" class="location-info">
[value]="item.itemQuantity"></span> <span class="location-title">Location:</span> <span class="location-name">{{item.itemDetail1.location}}</span><i class="material-icons location-icon">&#xE0C8;</i>
<button md-button class="counter-button" (click)="increment(item)"> </span>
<i class="material-icons" style="padding: 0px;">add</i> </div>
<div *ngIf="item == 'occassion'" class="select-date-section">
<md-select class="date-select" [required]="false" [placeholder]="'Select Date'" name="option_selection" [(ngModel)]="option_selected">
<md-option [value]="'ind'">25 Sept 2017 - Monday</md-option>
<md-option [value]="'aus'">26 Sept 2017 - Tuesday</md-option>
<md-option [value]="'pak'" [disabled]="true">27 Sept 2017 - Wednesday</md-option>
<md-option [value]="'usa'">28 Sept 2017 - Thursday</md-option>
</md-select>
</div>
<div *ngIf="item == 'occassion'" class="time-slot-section">
<span class="time-slot-title">Time Slot</span>
<md-chip-list class="small-6 large-12 columns time-slot-chips">
<md-chip class="time-slot-chip" *ngFor="let timeslot of timeslots">
{{timeslot}}
</md-chip>
</md-chip-list>
</div>
<div *ngIf="item == 'occassion'" class="venue-section">
<span class="venue-title">Venue</span>
<span class="venue-name">Ghatkoper East, Mumbai, Ghatkoper East, Mumbai, Maharashtra 400705</span>
</div>
<div *ngIf="item.itemCategory.catCode == 'CAT0000004'" class="delivery-offers">
<span>FREE Delivery in 5 to 6 days <span class="help-btn">?</span> </span>
<button type="button" class="md-button link_button">
More Offers
<i class="material-icons arrow ">&#xE313;</i>
</button> </button>
</div> </div>
<div class="items-cost-rate">
<span>Rs. {{item.itemHeader.itemDiscountedRate}}</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>
</div> </div>
<div class="media-object-section" style="width: 500px;"> <counter [quantity]="item.itemQuantity" (decrement)="decrement(item);" (increment)="increment(item);">
<div class="items-desc"> <tags *ngIf="item == 'occassion'">
<span class="item-title" (click)="viewItem(item.itemCode)">Handmade Handicarft</span> <span class="small-6 large-12 columns package-content-title">Package Includes</span>
<span class="item-shDescr">{{item.shDescr}}</span> <md-chip-list class="small-6 large-12 columns package-chip-list">
<span class="item-seller">Sold by</span> <md-chip class="mat-basic-chip" *ngFor="let tag of tags">{{tag}}</md-chip>
<span class="item-sellerInfo">Handmade Handicarfts</span> </md-chip-list>
</div> </tags>
<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"> <price>
<span class="size-of-item">Size Selected</span> <div *ngIf="item.itemCategory.catCode == 'CAT0000004'" class="product-price">
<button md-button class="back btn selected">{{item.phyAttribId1}}</button> <span style="display: block;" class="total-cost">Rs {{item.itemHeader.itemDiscountedRate}}</span>
<span class="color-change">Change</span> <span class="discounted-price"><s>Rs {{item.itemHeader.itemCostRate}}</s> <span class="discount-rate">{{item.itemHeader.itemDiscount}}% Off</span></span>
</div> </div>
<span *ngIf="item == 'occassion'" class="individual-price">Rs 500 per person (Inclusive GST)</span>
</price>
<total *ngIf="item == 'occassion'">
<div class="columns total-cost-detail">
<span class="small-6 large-12 columns no-of-individuals">Tickets x 4</span>
<span class="small-6 large-12 columns total-cost">Rs. 2000</span>
</div> </div>
</total>
</counter>
<div class="media-object-section" style="width: 228px;"> <div class="columns move-to-wishlist">
<div class="counter"> <button md-button class="move-to-wishlist-btn" (click)="moveToWishList(item);">Move to wishlist</button>
<button md-button [disabled]="checkQantity(item)" class="counter-button" (click)="decrement(item)"> <i class="material-icons cart-remove-icon" (click)="confirmDialog(item)">&#xE872;</i>
<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>
</div> </div>
</div>
<div class="detail-Continue-Shopping-button"> <div class="detail-Continue-Shopping-button">
<button md-button class="continue-shopping" [routerLink]="['/home']">Continue <button md-button class="continue-shopping" [routerLink]="['/home']">Continue Shopping</button>
Shopping</button>
</div> </div>
</md-card> </md-card>
<div class="medium-4 columns ecm-productDetails">
<div class="large-4 columns ecm-productDetails">
<md-card class="totalPriceDetails"> <md-card class="totalPriceDetails">
<div <div
style="text-align: center; position: relative; padding: 0px 20px 15px 20px;"> style="text-align: center; position: relative; padding: 0px 20px 15px 20px;">
...@@ -208,13 +188,12 @@ ...@@ -208,13 +188,12 @@
<br> <br>
<div class="total-amount-section"> <div class="total-amount-section">
<div class="amount"> <div class="amount">
<span class="amountPayable">Amount Payable</span> <span <span class="amountPayable">Amount Payable</span>
class="total-amountPrice">Rs. {{totalPrice}}</span> <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> <span <i class="material-icons secure-icon">&#xE8E8;</i>
class="ecm-Info">Safe and Secure Payments. 100% Authentic <span class="ecm-Info">Safe and Secure Payments. 100% Authentic products</span>
products</span>
</div> </div>
<br> <br>
<button md-button class="hide-for-small-only detail-checkout-button" <button md-button class="hide-for-small-only detail-checkout-button"
...@@ -226,11 +205,10 @@ ...@@ -226,11 +205,10 @@
</div> </div>
</md-card> </md-card>
<button md-button class="show-for-small-only new-checkout-button" [routerLink]="['/checkout']"> <button md-button class="show-for-small-only new-checkout-button" [routerLink]="['/checkout']">
Checkout <i class="material-icons" Checkout <i class="material-icons" style="position: relative; left: 8px;">trending_flat</i>
style="position: relative; left: 8px;">trending_flat</i>
</button> </button>
</div> </div>
</div> </div>
</div>
<ecm-footer></ecm-footer> <ecm-footer></ecm-footer>
</ng-template> </ng-template>
\ No newline at end of file
...@@ -5,10 +5,11 @@ import { MdDialog, MdDialogRef } from '@angular/material'; ...@@ -5,10 +5,11 @@ import { MdDialog, MdDialogRef } from '@angular/material';
import { ItemDetail } from '../../ecm-model/product-detail-model'; import { ItemDetail } from '../../ecm-model/product-detail-model';
import { EcmCategoryComponent } from '../ecm-category/ecm-category.component'; import { EcmCategoryComponent } from '../ecm-category/ecm-category.component';
import { Observable } from 'rxjs/Observable'; import { Observable } from 'rxjs/Observable';
import { ECMHeaderComponent } from '../../ecm-header/ecm-header.component';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { AppState } from '../../ecm-store/reducers'; import { AppState } from '../../ecm-store/reducers';
import { CartActions } from '../../ecm-store/actions'; import { CartActions, WishListActions } from '../../ecm-store/actions';
import { Item } from '../../ecm-model/product-model'; import { Item } from '../../ecm-model/product-model';
import { EcmCartService } from './ecm-cart.service'; import { EcmCartService } from './ecm-cart.service';
...@@ -36,8 +37,9 @@ export class EcmCartComponent implements OnInit, AfterViewChecked { ...@@ -36,8 +37,9 @@ export class EcmCartComponent implements OnInit, AfterViewChecked {
@Output() doActivity = new EventEmitter(); @Output() doActivity = new EventEmitter();
@ViewChild('scrollMe') private myScrollContainer: ElementRef; @ViewChild('scrollMe') private myScrollContainer: ElementRef;
@ViewChild('header') header: ECMHeaderComponent;
constructor( private route: ActivatedRoute, public dialog: MdDialog, private router: Router, public cartService: EcmCartService, public snackBar: MdSnackBar, private http: Http, private store: Store<AppState>, private cartAction: CartActions) { } constructor( private route: ActivatedRoute, public dialog: MdDialog, private router: Router, public cartService: EcmCartService, public snackBar: MdSnackBar, private http: Http, private store: Store<AppState>, private cartAction: CartActions, private wishListAction:WishListActions) { }
ngOnInit() { ngOnInit() {
this.getCartItem(); this.getCartItem();
...@@ -104,8 +106,18 @@ export class EcmCartComponent implements OnInit, AfterViewChecked { ...@@ -104,8 +106,18 @@ export class EcmCartComponent implements OnInit, AfterViewChecked {
return false; return false;
} }
wishList() { moveToWishList(item) {
this.openSnackBar('Item Added to your Wishlist' );
if(this.checkUser() !== 'undefined' && this.checkUser() !== null && this.checkUser() !== 'null')
{
this.store.dispatch(this.cartAction.deleteCartItem(item));
this.store.dispatch(this.wishListAction.addToWishlistSuccess(item));
this.openSnackBar('Item Added to your Wishlist');
}
else
{
this.header.userAction();
}
} }
openSnackBar( message: string ) { openSnackBar( message: string ) {
...@@ -142,6 +154,17 @@ export class EcmCartComponent implements OnInit, AfterViewChecked { ...@@ -142,6 +154,17 @@ export class EcmCartComponent implements OnInit, AfterViewChecked {
} catch(err) { } } catch(err) { }
} }
checkUser(){
var userInfo = localStorage.getItem( 'userInfo' );
if ( userInfo !== 'undefined' && userInfo !== null && userInfo !== 'null' )
{
return userInfo;
}
else
{
return userInfo;
}
}
} }
@Component( { @Component( {
...@@ -157,8 +180,17 @@ export class ECMConfirmDialog { ...@@ -157,8 +180,17 @@ export class ECMConfirmDialog {
@Input() confirmText : any; @Input() confirmText : any;
constructor( public dialogRef: MdDialogRef<ECMConfirmDialog>) { } constructor( public dialogRef: MdDialogRef<ECMConfirmDialog>) { }
} }
@Component({
selector: 'counter',
templateUrl: './counter.html',
styleUrls: ['./ecm-cart.component.css']
})
export class CounterComponent{
@Input('quantity') quantity: number;
@Output() increment = new EventEmitter();
@Output() decrement = new EventEmitter();
}
.categories-section { .categories-section {
padding: 0; padding: 40px 0 0 0;
margin: 0; margin: 0;
background-color: #f2f2f2 !important; background-color: #f2f2f2 !important;
} }
......
<ecm-header [isFixedHeader]=true> </ecm-header> <ecm-header #header [isFixedHeader]=true> </ecm-header>
<span *ngIf="items"> <span *ngIf="items">
<ecm-breadcrumbs [pageName]="'ITEMS'"> </ecm-breadcrumbs> <ecm-breadcrumbs [pageName]="'ITEMS'"> </ecm-breadcrumbs>
...@@ -29,7 +29,6 @@ ...@@ -29,7 +29,6 @@
<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"> <div class="amount-range">
...@@ -44,7 +43,6 @@ ...@@ -44,7 +43,6 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
...@@ -59,14 +57,14 @@ ...@@ -59,14 +57,14 @@
<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 class="small-12 medium-6 large-4 column end item-card"
*ngFor="let _item of items | async"> *ngFor="let _item of items | async">
<div class="item-card-overlay" (click)="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 ) ? 'Add to Cart' : 'Enroll Now'}} {{ (_item.itemCode.indexOf('L2D014') == 0 ) ? (isInCart(_item.itemCode) ? 'Go To Cart' : 'Add to Cart') : 'Enroll Now'}}
</span> </span>
</div> </div>
<!--<ecm-item-caption [itemData]="_item"></ecm-item-caption> --> <!--<ecm-item-caption [itemData]="_item"></ecm-item-caption> -->
<ecm-card (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>
</div> </div>
......
import { Component, OnInit,HostListener } from '@angular/core'; import { Component, OnInit, HostListener, ViewChild } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router'; import { Router, ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs/Observable'; import { Observable } from 'rxjs/Observable';
import { MdSnackBar } from '@angular/material';
import { AppState } from '../../ecm-store/reducers'; import { AppState } from '../../ecm-store/reducers';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { ItemActions, CartActions } from '../../ecm-store/actions'; import { ItemActions, CartActions, WishListActions } from '../../ecm-store/actions';
import { Category } from '../../ecm-model/category-model'; import { Category } from '../../ecm-model/category-model';
import { SubCategory } from '../../ecm-model/subcategory-model'; import { SubCategory } from '../../ecm-model/subcategory-model';
import { Item } from '../../ecm-model/product-model'; import { Item } from '../../ecm-model/product-model';
import { ItemDetail } from '../../ecm-model/product-detail-model'; import { ItemDetail } from '../../ecm-model/product-detail-model';
import { ECMHeaderComponent } from '../../ecm-header/ecm-header.component';
import { ScrollService } from '../../scroll.service'; import { ScrollService } from '../../scroll.service';
@Component({ @Component( {
selector: 'ecm-product', selector: 'ecm-product',
templateUrl: './ecm-product.component.html', templateUrl: './ecm-product.component.html',
styleUrls: ['./ecm-product.component.css'] styleUrls: ['./ecm-product.component.css']
}) })
export class EcmProductComponent implements OnInit { export class EcmProductComponent implements OnInit {
position=0; position = 0;
isCatItems = 'false'; isCatItems = 'false';
show = false; show = false;
minVal = 500; minVal = 500;
maxVal = 35000; maxVal = 35000;
@HostListener("window:scroll", []) @HostListener( "window:scroll", [] )
onWindowScroll() { onWindowScroll() {
this.position=window.pageYOffset; this.position = window.pageYOffset;
} }
@ViewChild('header') header: ECMHeaderComponent;
cartItems: Observable<ItemDetail[]>;
Items = 0; Items = 0;
private items: Observable<ItemDetail[]>; private items: Observable<ItemDetail[]>;
private extra_param= { "catCode":'', "catShDesc":'',scatDesc:'' }; private extra_param = { "catCode": '', "catShDesc": '', scatDesc: '' };
private category; private category;
private subcategory; private subcategory;
...@@ -41,63 +45,112 @@ export class EcmProductComponent implements OnInit { ...@@ -41,63 +45,112 @@ export class EcmProductComponent implements OnInit {
attribVal; attribVal;
attribCode; attribCode;
constructor( private route: ActivatedRoute, private router: Router, private scroll_service: ScrollService, private store: Store<AppState>, private itemAction: ItemActions, private cartAction: CartActions, private wishlistAction: WishListActions, public snackBar: MdSnackBar) { }
constructor(private route: ActivatedRoute, private router:Router, private scroll_service: ScrollService, private store: Store<AppState>, private itemAction: ItemActions, private cartAction: CartActions) { }
ngOnInit() { ngOnInit() {
window.scrollTo(0,0); window.scrollTo( 0, 0 );
this.route.params.subscribe( params => { this.route.params.subscribe( params => {
//let id: number = +params['id']; // (+) converts string 'id' to a number //let id: number = +params['id']; // (+) converts string 'id' to a number
// In a real app: dispatch action to load the details here. // In a real app: dispatch action to load the details here.
let scatCode = params['scatCode']; let scatCode = params['scatCode'];
console.log( 'ngOnInit scatCode[' + scatCode + ']' ); console.log( 'ngOnInit scatCode[' + scatCode + ']' );
console.log("Viewtype OpenView"); console.log( "Viewtype OpenView" );
window.scrollTo(0,0); window.scrollTo( 0, 0 );
//this.getSubCategory( viewKey ); //this.getSubCategory( viewKey );
this.fetchStore('SubCategory'); this.fetchStore( 'SubCategory' );
this.getItems(scatCode); this.getItems( scatCode );
}); });
this.cartItems = this.store.select('cartItems');
} }
getItems( scatCode: string ) { getItems( scatCode: string ) {
this.items = this.store.select('items'); this.items = this.store.select( 'items' );
} }
storeItem(selectedItem){ storeItem( selectedItem ) {
this.store.dispatch( this.itemAction.getItemSuccess(selectedItem) ); this.store.dispatch( this.itemAction.getItemSuccess( selectedItem ) );
} }
fetchStore( viewType: string){ fetchStore( viewType: string ) {
if(viewType == 'Category') if ( viewType == 'Category' ) {
{ this.store.select( 'category' )
this.store.select('category')
.subscribe( category => this.category = category ); .subscribe( category => this.category = category );
} }
if(viewType == 'SubCategory') if ( viewType == 'SubCategory' ) {
{ this.store.select( 'subcategory' )
this.store.select('subcategory')
.subscribe( subcategory => this.subcategory = subcategory ); .subscribe( subcategory => this.subcategory = subcategory );
} }
} }
addToCart(item) { addToCart( item: ItemDetail ) {
let cartData = new Item; item.itemQuantity = 1;
cartData.itemCode = item.itemCode; this.store.dispatch( this.cartAction.addToCartSuccess( item ) );
cartData.itemQuantity = 1; }
addToWishlist( item ) {
if(this.isAuthUser())
{
this.store.dispatch( this.wishlistAction.addToWishlistSuccess( item ) );
this.openSnackBar('Item Added to your Wishlist');
}
else
{
this.header.userAction();
}
}
this.store.dispatch(this.cartAction.addToCartSuccess(item)); removeFromWishlist( item ){
this.store.dispatch( this.wishlistAction.deleteWishlistItemSuccess( item ) );
this.openSnackBar('Item Deleted from your Wishlist');
} }
showHide(){ showHide() {
if(this.show) if ( this.show )
this.show = false; this.show = false;
else else
this.show = true; this.show = true;
} }
onInputChange(event: any){ onInputChange( event: any ) {
this.maxVal = event.value; this.maxVal = event.value;
} }
openSnackBar( message: string ) {
this.snackBar.open( message, '', {
duration: 2000,
});
}
isInCart(itemCode): boolean {
var incart;
this.cartItems.subscribe( cartItems => {
if(cartItems.find(x => x.itemCode === itemCode))
incart = true;
else
incart = false;
} );
return incart;
}
goToCart(){
this.router.navigate(['/cart']);
}
isAuthUser(){
var isAuthUser;
var userInfo = localStorage.getItem( 'userInfo' );
if ( userInfo !== 'undefined' && userInfo !== null && userInfo !== 'null' )
{
isAuthUser = true;
}
else
{
isAuthUser = false;
}
return isAuthUser;
}
} }
...@@ -4,7 +4,7 @@ import { Observable } from 'rxjs/Observable'; ...@@ -4,7 +4,7 @@ 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 { Item } from '../../ecm-model/product-model'; import { ItemDetail } from '../../ecm-model/product-detail-model';
@Injectable() @Injectable()
export class EcmRelatedItemService { export class EcmRelatedItemService {
...@@ -13,20 +13,69 @@ export class EcmRelatedItemService { ...@@ -13,20 +13,69 @@ export class EcmRelatedItemService {
constructor (private http: Http) {} constructor (private http: Http) {}
getRelatedItems(scatCode): Observable<Item[]> { getRelatedItems(scatCode): Observable<ItemDetail[]> {
let headers = new Headers( { 'Content-Type': 'application/json' }); let headers = new Headers( { 'Content-Type': 'application/json' });
let options = new RequestOptions( { headers: headers }); let options = new RequestOptions( { headers: headers });
let URL = this.trendsUrl + '/' +scatCode; let URL = this.trendsUrl + '/' +scatCode;
return this.http.get( URL, options ) return this.http.get( URL, options )
.map( this.extractData ) .map( (res) => this.extractData(res) )
.catch( this.handleError ); .catch( this.handleError );
} }
private extractData(res: Response) { private extractData(res: Response) {
let body = res.json(); let respJson = res.json();
console.log('extractData[' + JSON.stringify(body) + ']'); console.log('extracData',respJson);
return body || { }; if(respJson != null)
{
for( let key of Object.keys( respJson ) )
{
console.log( "getItemDetail itemDetail ==> key: " + key )
let data = respJson[key];
try
{
respJson[key] = JSON.parse( data );
console.log( "getItemDetail itemDetail try : " + respJson[key] );
}
catch(e)
{
console.log( "getItemDetail itemDetail ==> key: " ,data, typeof data === 'object')
if(typeof data === 'object')
respJson[key] = this.formatObject(data);
else
respJson[key] = data;
console.log( "getItemDetail itemDetail catch : " + respJson[key] );
}
}
console.log('extractData[' + JSON.stringify(respJson) + ']');
}
return respJson || { };
}
formatObject(respJson: any) {
console.log('formatObject',respJson);
if(respJson != null)
{
for( let key of Object.keys( respJson ) )
{
console.log( "formatObject itemDetail ==> key: " + key )
let data = respJson[key];
try
{
respJson[key] = JSON.parse( data );
console.log( "formatObject itemDetail try : " + respJson[key] );
}
catch(e)
{
respJson[key] = data;
console.log( "formatObject itemDetail catch : " + respJson[key] );
}
}
console.log('formatObject[' + JSON.stringify(respJson) + ']');
}
return respJson || { };
} }
private handleError (error: Response | any) { private handleError (error: Response | any) {
......
...@@ -17,7 +17,7 @@ export class EcmRelatedItemsComponent implements OnChanges { ...@@ -17,7 +17,7 @@ export class EcmRelatedItemsComponent implements OnChanges {
@Input() scatCode; @Input() scatCode;
relatedItems: Item[]; relatedItems: ItemDetail[];
errorMessage: string; errorMessage: string;
constructor(private relatedItemService:EcmRelatedItemService) { } constructor(private relatedItemService:EcmRelatedItemService) { }
......
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
</div> </div>
</div> </div>
<div *ngIf="subcategories"> <div *ngIf="subcategories" style="min-height: calc(100% - 120px);">
<section class="subcategories-section"> <section class="subcategories-section">
<div class="row row-subcategory"> <div class="row row-subcategory">
<div class="ecm-section-info"> <div class="ecm-section-info">
......
.trending-section { .trending-section {
padding-top: 50px; padding-top: 50px;
height: 580px; /* height: 580px; */
background-color: #F2F2F2; background-color: #F2F2F2;
} }
......
<div *ngIf="(wishListItems | async)?.length == 0"> <div *ngIf="(wishListItems | async)?.length == 0" style="min-height: calc(100% - 120px);">
<ecm-header [isFixedHeader]=true> </ecm-header> <ecm-header [isFixedHeader]=true> </ecm-header>
<ecm-breadcrumbs [pageName]="'WISHLIST'"></ecm-breadcrumbs> <ecm-breadcrumbs [pageName]="'WISHLIST'"></ecm-breadcrumbs>
<div class="row"> <div class="row">
...@@ -9,13 +9,11 @@ ...@@ -9,13 +9,11 @@
like you haven't made your choice yet...</span> like you haven't made your choice yet...</span>
</div> </div>
</div> </div>
<div style="margin-top: 155px;">
</div>
<ecm-footer></ecm-footer> <ecm-footer></ecm-footer>
</div> </div>
<div *ngIf="(wishListItems | async)?.length > 0"> <div *ngIf="(wishListItems | async)?.length > 0" style="min-height: calc(100% - 120px);">
<ecm-header [isFixedHeader]=true> </ecm-header> <ecm-header [isFixedHeader]=true> </ecm-header>
<ecm-breadcrumbs [pageName]="'WISHLIST'"></ecm-breadcrumbs> <ecm-breadcrumbs [pageName]="'WISHLIST'"></ecm-breadcrumbs>
<div class="row details-of-Cart"> <div class="row details-of-Cart">
......
...@@ -41,7 +41,7 @@ export class EcmWishListService { ...@@ -41,7 +41,7 @@ export class EcmWishListService {
let headers = new Headers( { 'Content-Type': 'application/json' }); let headers = new Headers( { 'Content-Type': 'application/json' });
let options = new RequestOptions( { headers: headers }); let options = new RequestOptions( { headers: headers });
return this.http.post( '/ecm/service/feeds/wishlist'+itemCode , options) return this.http.post( '/ecm/service/feeds/wishlist/'+itemCode , options)
.map( (res) => this.extractData(res) ); .map( (res) => this.extractData(res) );
} }
......
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