Commit b4225c45 authored by prumde's avatar prumde

Updated


git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174404 ce508802-f39f-4f6c-b175-0d175dae99d5
parent 3416efd4
...@@ -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 } from './ecm-view/ecm-cart/ecm-cart.component'; import { EcmCartComponent, DialogOverviewExampleDialog } 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';
...@@ -97,7 +97,8 @@ const appRoutes: Routes = [ ...@@ -97,7 +97,8 @@ const appRoutes: Routes = [
EcmRecentViewComponent, EcmRecentViewComponent,
EcmReadmoreComponent, EcmReadmoreComponent,
EcmRelatedItemsComponent, EcmRelatedItemsComponent,
EcmCheckoutComponent EcmCheckoutComponent,
DialogOverviewExampleDialog
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
...@@ -120,7 +121,8 @@ const appRoutes: Routes = [ ...@@ -120,7 +121,8 @@ const appRoutes: Routes = [
EcmOutingComponent, EcmOutingComponent,
EcmFoodComponent, EcmFoodComponent,
EcmHandicraftComponent, EcmHandicraftComponent,
EcmCelebrationComponent EcmCelebrationComponent,
DialogOverviewExampleDialog
], ],
bootstrap: [AppComponent] bootstrap: [AppComponent]
}) })
......
...@@ -22,8 +22,9 @@ ...@@ -22,8 +22,9 @@
.itemdescription .itemdescription
{ {
font-size: 14px; font-size: 12px;
width: 42%; width: 42%;
cursor: pointer;
} }
.ecm-itemdescription{ .ecm-itemdescription{
...@@ -43,7 +44,9 @@ ...@@ -43,7 +44,9 @@
font-size: 18px; font-size: 18px;
} }
.listItems{ .listItems{
border: 2px solid ghostwhite; border: 2px solid ghostwhite;
border-left: none;
border-right: none;
} }
.ViewAll{ .ViewAll{
...@@ -130,22 +133,28 @@ ...@@ -130,22 +133,28 @@
cursor: pointer; cursor: pointer;
bottom: 4px; bottom: 4px;
} }
.counter{
padding: 0px;
}
.change-color{ .change-color{
display: flex; display: flex;
} }
.size-of-item{
display: table;
}
.selected { .selected {
position: relative; position: relative;
left: 5px; left: 5px;
width: 32px; width: 32px;
height: 32px; height: 32px;
bottom: 7px; bottom: 7px;
background-color: mediumvioletred;
} }
.totalPriceDetails{ .totalPriceDetails{
margin-top: 10px; margin-top: 10px;
} }
.continue-shopping{
width: 100%;
margin-right: 0px;
}
} }
.ecm-payments{ .ecm-payments{
display: flex; display: flex;
...@@ -157,7 +166,7 @@ ...@@ -157,7 +166,7 @@
.ecm-Info{ .ecm-Info{
position: relative; position: relative;
left: 8px; left: 8px;
font-size: 17px; font-size: 15px;
} }
.detail-checkout-button{ .detail-checkout-button{
width: 100%; width: 100%;
...@@ -179,6 +188,7 @@ ...@@ -179,6 +188,7 @@
/* width: 160px; */ /* width: 160px; */
line-height: 40px; line-height: 40px;
border-bottom: thin solid mediumvioletred; border-bottom: thin solid mediumvioletred;
font-size: 14px;
} }
.image{ .image{
width: 100px; width: 100px;
...@@ -197,74 +207,172 @@ ...@@ -197,74 +207,172 @@
position: relative; position: relative;
float: right; float: right;
width: 100%; width: 100%;
margin-top: 10px;
} }
.item-image{ .item-image{
width: 140px; width: 140px;
padding-top: 16px; padding-top: 16px;
} }
.change-color{ .change-color{
padding-top: 24px; padding-top: 16px;
padding-bottom: 35px;
} }
.size-of-item{ .size-of-item{
font-size: 14px; font-size: 12px;
color: dimgray; color: dimgray;
font-weight: 600;
} }
.selected{ .selected{
position: relative; position: relative;
left: 5px; left: 5px;
width: 32px; width: 38px;
height: 32px; height: 36px;
font-size: 19px;
margin-left: 8px;
background-color: mediumvioletred;
} }
.color-change{ .color-change{
position: relative; position: relative;
left: 10px; left: 10px;
font-size: 16px; font-size: 13px;
color: mediumvioletred; color: mediumvioletred;
cursor: pointer; cursor: pointer;
font-weight: 600;
padding-left: 8px;
} }
.wishList-items{ .wishList-items{
font-size: 16px; font-size: 12px;
color: mediumvioletred; color: mediumvioletred;
cursor: pointer; cursor: pointer;
font-weight: 600;
} }
.remove-items{ .remove-items{
font-size: 16px; font-size: 12px;
color: dimgray; color: dimgray;
padding-left: 31px padding-left: 31px;
font-weight: 600;
cursor: pointer;
} }
.wish-remove-dipslay{ .wish-remove-dipslay{
display: inline-block; display: inline-block;
position: relative; padding-bottom: 16px;
top: 100px; position: relative;
} left: 26px;
.ecm-textBox{
text-align: center;
} }
.counter{ .counter{
position: relative; position: relative;
top: 12px; padding-top: 18px;
padding-left: 58px;
}
.ecm-decre{
background-color: white;
color: red;
width: 40px;
height: 35px;
} }
.ecm-textBox{ .ecm-textBox{
width: 56px; width: 76px;
position: relative;
margin-left: 8px;
margin-right: 8px;
text-align: center;
height: 36px;
font-size: 17px;
} }
.ecm-incre{ .counter-button{
color: mediumvioletred; color: mediumvioletred;
background-color: white; background-color: white;
width: 36px; width: 40px;
height: 32px; height: 40px;
position: relative; min-width: 40px;
padding: 0;
margin: 0;
line-height: 32px;
border-radius: 100%;
}
.counter-button.mat-button-ripple.mat-ripple {
border-radius: 100%;
} }
.items-cost-rate{ .items-cost-rate{
padding-bottom: 32px;
position: relative; position: relative;
top: 78px; font-size: 20px;
float: right;
padding-top: 35px;
padding-bottom: 35px;
font-weight: 600;
top: 5px;
padding-right: 37px;
}
.no-button{
position: relative;
left: 50px;
border-style: groove;
background-color: ghostwhite;
}
.delete-cartitems-button{
padding-bottom: 20px;
padding-top: 36px;
}
.continue-shopping{
float: right;
border: 2px solid ghostwhite;
margin-right: 18px;
height: 46px;
width: 170px;
}
.items-desc{
padding-top: 18px;
}
.shippingFree{
float: right;
font-weight: 600;
color: mediumaquamarine;
font-size: 13px;
}
.details-of-Cart{
top: 60px;
margin-bottom: 50px;
position: relative;
margin-top: 50px;
}
.cartItemsDetails{
padding-right: 0px;
padding-left: 0px;
}
.item-shDescr{
display: block;
font-size: 18px;
padding-top: 10px;
font-weight: 600;
}
.item-title{
font-size: 14px;
color: mediumvioletred;
font-weight: 600;
cursor: pointer;
}
.item-seller{
font-size: 12px;
color: dimgray;
font-weight: 600;
}
.item-sellerInfo{
font-size: 14px;
color: mediumvioletred;
font-weight: 600;
}
.price-info{
float: right;
font-weight: 600;
font-size: 14px;
}
.total-amountPrice{
float: right;
font-weight: 600;
font-size: 20px;
}
.ecm-headings{
font-size: 15px;
padding-left: 14px;
} }
\ No newline at end of file
<div *ngIf="isMiniCart then miniCart; else fullCart;"></div>
<div *ngIf="isMiniCart then miniCart; else fullCart;"></div>
<!-- --<div *ngIf="cartItemsDetail && miniView">------ --> <!-- --<div *ngIf="cartItemsDetail && miniView">------ -->
<ng-template #miniCart> <ng-template #miniCart>
<div *ngIf="cartItemsDetail"> <div *ngIf="cartItemsDetail">
<div class="cartItemsDetail" *ngFor="let item of cartItemsDetail | slice:0:show; let i=index"> <div class="cartItemsDetail"
<table style="border: 2px solid ghostwhite; width: 100%;"> *ngFor="let item of cartItemsDetail | slice:0:show; let i=index">
<tr> <table style="border: 2px solid ghostwhite; width: 100%;">
<td class="itemImage"><ecm-image [refId]='item.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage] = "true"></ecm-image></td> <tr>
<td class="itemdescription">{{item.descr}}</td> <td class="itemImage"><ecm-image [refId]='item.itemCode'
<td style="padding: 10px;">₹ {{item.costRate}}</td> [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage]="true"></ecm-image></td>
<td (click)="deleteCartItem(item.itemCode)" style="cursor: pointer;"><i class="material-icons" style="color: mediumvioletred; font-size: 20px;">&#xE872;</i></td> <td class="itemdescription" (click)="viewItem(item.itemCode)">{{item.descr}}</td>
</tr> <td style="padding: 10px;">₹ {{item.costRate}}</td>
</table> <td (click)="deleteCartItem(item.itemCode)" style="cursor: pointer;"><i
class="material-icons"
style="color: mediumvioletred; font-size: 20px;">&#xE872;</i></td>
</tr>
</table>
</div>
<!-- <div class="ViewAll" *ngIf="cartItemsDetail.length > 3 && show == 3" (click)="show = cartItemsDetail.length"> -->
<div class="ViewAll" *ngIf="cartItemsDetail.length > 3 && show == 3"
(click)="showTotalCartItems()">
<a md-button class="viewAll-button" [routerLink]="['/cart']"
(click)="closePanel.emit();"> View All (
{{cartItemsDetail.length}} )</a>
<!-- <span class="ecm-View" style="cursor: pointer;position: absolute;">ViewAll ( {{cartItemsDetail.length}} )</span> -->
</div> </div>
<!-- <div class="ViewAll" *ngIf="cartItemsDetail.length > 3 && show == 3" (click)="show = cartItemsDetail.length"> --> <!-- <button md-raised-button class="button medium-btn-checkout" style="background: mediumvioletred; color:#fff;" >Checkout</button> -->
<button md-button class="checkout-button" [routerLink]="['/check-out']">Checkout</button>
<div class="ViewAll" *ngIf="cartItemsDetail.length > 3 && show == 3" (click)="showTotalCartItems()">
<a md-button class="viewAll-button" [routerLink]="['/cart']" (click)="closePanel.emit();" > View All ( {{cartItemsDetail.length}} )</a>
<!-- <span class="ecm-View" style="cursor: pointer;position: absolute;">ViewAll ( {{cartItemsDetail.length}} )</span> -->
</div>
<!-- <button md-raised-button class="button medium-btn-checkout" style="background: mediumvioletred; color:#fff;" >Checkout</button> -->
<button md-button class="checkout-button">Checkout</button>
</div> </div>
</ng-template> </ng-template>
...@@ -33,110 +40,99 @@ ...@@ -33,110 +40,99 @@
<ng-template #fullCart> <ng-template #fullCart>
<div *ngIf="cartItemsDetail"> <div *ngIf="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" style="margin-top: 84px;">
<md-card class="medium-7 columns cartItemsDetails"> <div class="row details-of-Cart">
<div class="ecmdetailsItems"> <md-card class="medium-8 columns cartItemsDetails">
<div class="ecm-headings" style="font-size: 15px;padding-left: 14px"> <div class="ecmdetailsItems">
<span>({{cartItems}}) My Cart</span> <div class="ecm-headings">
</div> <span>({{cartItems}}) My Cart</span>
<hr> </div>
<div class="listItems" *ngFor="let item of cartItemsDetail"> <hr>
<div class="media-object-section item-image"> <div class="listItems" *ngFor="let item of cartItemsDetail">
<ecm-image [refId]='item.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage] = "true"></ecm-image>
</div> <div class="media-object-section item-image">
<ecm-image [refId]='item.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage]="true"></ecm-image>
<div class="media-object-section" style="width: 325px;"> </div>
<div class="items-desc">
<span style="font-size: 16px; color: mediumvioletred">Handmade Cusine Handicarft</span> <div class="media-object-section" style="width: 500px;">
<span class="item-descr" style="display: block;font-size: 16px;padding-top: 16px;">{{item.descr}}</span> <div class="items-desc">
<span style="font-size: 14px; color: dimgray">Sold by</span> <span class="item-title" (click)="viewItem(item.itemCode)">Handmade Handicarft</span>
<span style="font-size: 16px; color: mediumvioletred">Handmade Cusine Handicarft</span> <span class="item-shDescr">{{item.shDescr}}</span>
</div> <span class="item-seller">Sold by</span>
<div class="change-color"> <span class="item-sellerInfo">Handmade Handicarfts</span>
<span class="size-of-item">Size Selected :</span> </div>
<button md-mini-fab class="back btn selected" >L</button> <div class="change-color">
<span class="color-change">Change</span> <span class="size-of-item">Size Selected :</span>
</div> <button md-mini-fab class="back btn selected">L</button>
</div> <span class="color-change">Change</span>
</div>
<div class="media-object-section" style="width: 206px;"> </div>
<div class="counter">
<button md-mini-fab [disabled]="disable()" class="ecm-decre" (click)="decrement(item.itemCode)">-</button> <div class="media-object-section" style="width: 228px;">
<span> <div class="counter">
<input class="ecm-textBox" type="text" [value]="counterValue"> <button md-raised-button [disabled]="disable()" class="counter-button" (click)="decrement()">
</span> <i class="material-icons" style="padding: 0px;">remove</i>
<button md-mini-fab class="ecm-incre" (click)="increment(item.itemCode)">+</button> </button>
</div> <span> <input class="ecm-textBox" type="text" [value]="counterValue"></span>
<div class="items-cost-rate"> <button md-raised-button class="counter-button" (click)="increment()">
<span style="font-size: 16px;float: right;">₹ {{item.costRate}}</span> <i class="material-icons" style="padding: 0px;">add</i>
</div> </button>
<div class="wish-remove-dipslay"> </div>
<span class="wishList-items" (click)="wishList()">Add to Wishlist</span> <div class="items-cost-rate">
<span class="remove-items" (click)="deleteCartItem(item.itemCode)" style="cursor: pointer;">Remove</span> <span>₹ {{item.costRate}}</span>
</div> </div>
</div> <div class="wish-remove-dipslay">
<span class="wishList-items" (click)="wishList()">Add to Wishlist</span>
</div> <!-- <span class="remove-items" (click)=" openDialog(item.itemCode)" style="cursor: pointer;">Remove</span> -->
</div> <span class="remove-items"(click)="deleteCartItem(item.itemCode) ">Remove</span>
<div class="detail-Continue-Shopping-button" > </div>
<button md-button style="line-height: 3;float: right;border: 2px solid ghostwhite;" >Continue Shopping</button> </div>
</div>
</div> </div>
<!-- <div class="ecmdetailsItems" style="margin: 5px;">
<div class="ecm-headings" style="font-size: 15px;color: dimgray;padding-left: 14px">
<span>Items</span>
<span style="position: absolute;left: 118px;">Items Description</span>
<span style="position: absolute;left: 386px;">Price</span>
<span style="position: absolute;left: 519px;">Remove</span>
</div>
<div class="listItems" *ngFor="let item of cartItemsDetail">
<table style="border: 2px solid ghostwhite; width: 100%;">
<tr>
<td class="itemImage"><img style="height: inherit;" src="../assets/images/items/{{item.itemCode}}.png"></td>
<td class="ecm-itemdescription">{{item.descr}}</td>
<td class="itemcostRate" style="padding: 10px;width: 26%;">₹ {{item.costRate}}</td>
<td class="itemRemove" (click)="deleteCartItem(item.itemCode)" style="cursor: pointer;"><i class="material-icons" style="color: mediumvioletred; font-size: 20px;">&#xE872;</i></td>
</tr>
</table>
</div>
</div> -->
</md-card>
<div class="medium-5 columns ecm-productDetails">
<md-card class="totalPriceDetails">
<div style="text-align: center;position: relative;bottom: 22px;">
<span style="font-size: 15px;" class="priceDetails">PRICE DETAILS</span>
</div>
<div class="totalProductsInfo">
<div class="priceItems">
<span style="font-size: 15px;">Price ( {{cartItems}} Items )</span>
<span style="float: right;">₹ {{totalPrice}}</span>
</div>
<br>
<div class="shipping">
<span style="font-size: 15px;">Shipping</span>
<span style="float: right;color: darkgreen">FREE</span>
</div>
<br>
<div>
<hr style="border: dotted;color: dimgray;border-width: thin;">
<div class="amount">
<span class="amountPayable">Amount Payable</span>
<span style="float: right; font-weight: 600;font-size: 16px;">₹ {{totalPrice}}</span>
</div>
<div class="ecm-payments">
<i class="material-icons">&#xE8E8;</i>
<span class="ecm-Info">Safe and Secure Payments. 100% Authentic products</span>
</div>
<br>
<button md-button class="detail-checkout-button" [routerLink]="['/checkout']">Checkout<i class="material-icons" style="position: relative;left: 8px;">trending_flat</i></button>
</div>
</div>
</md-card>
</div>
</div>
<div class="detail-Continue-Shopping-button">
<button md-raised-button class="continue-shopping" [routerLink]="['/home']">Continue Shopping</button>
</div>
</md-card>
<div class="medium-4 columns ecm-productDetails">
<md-card class="totalPriceDetails">
<div style="text-align: center; position: relative; bottom: 22px;">
<span class="priceDetails">Price Details</span>
</div>
<div class="totalProductsInfo">
<div class="priceItems">
<span style="font-size: 15px;">Price ( {{cartItems}} Items )</span>
<span class="price-info">₹ {{totalPrice}}</span>
</div>
<br>
<div class="shipping">
<span style="font-size: 15px;">Shipping</span>
<span class="shippingFree">FREE</span>
</div>
<br>
<div>
<hr style="border: dotted; color: dimgray; border-width: thin;">
<div class="amount">
<span class="amountPayable">Amount Payable</span>
<span class="total-amountPrice">₹ {{totalPrice}}</span>
</div>
<div class="ecm-payments">
<i class="material-icons">&#xE8E8;</i>
<span class="ecm-Info">Safe and Secure Payments. 100% Authentic products</span>
</div>
<br>
<button md-button class="detail-checkout-button" [routerLink]="['/checkout']">
Checkout
<i class="material-icons" style="position: relative; left: 8px;">trending_flat</i>
</button>
</div>
</div>
</md-card>
</div>
</div>
</div> </div>
</ng-template> </ng-template>
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; import { Component, 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 { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { EcmStoreModel } from '../../ecm-store/ecm-store.model'; import { EcmStoreModel } from '../../ecm-store/ecm-store.model';
import { INCREMENT, DECREMENT, RESET, REMOVE } from '../../ecm-store/ecm-store'; import { INCREMENT, DECREMENT, RESET } from '../../ecm-store/ecm-store';
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';
...@@ -30,8 +31,8 @@ export class EcmCartComponent implements OnInit { ...@@ -30,8 +31,8 @@ export class EcmCartComponent implements OnInit {
@Input() isMiniCart: boolean = false; @Input() isMiniCart: boolean = false;
@Output() closePanel = new EventEmitter(); @Output() closePanel = new EventEmitter();
@Output() doActivity = new EventEmitter(); @Output() doActivity = new EventEmitter();
selectedOption: string;
constructor( private route: ActivatedRoute, private router: Router, public cartService: EcmCartService, public snackBar: MdSnackBar, private http: Http, private store: Store<EcmStoreModel> ) { } constructor( private route: ActivatedRoute, public dialog: MdDialog, private router: Router, public cartService: EcmCartService, public snackBar: MdSnackBar, private http: Http, private store: Store<EcmStoreModel> ) { }
ngOnInit() { ngOnInit() {
this.getCartItem(); this.getCartItem();
...@@ -53,7 +54,7 @@ export class EcmCartComponent implements OnInit { ...@@ -53,7 +54,7 @@ export class EcmCartComponent implements OnInit {
console.log( 'comp errorMessage[' + errorMessage + ']' ); console.log( 'comp errorMessage[' + errorMessage + ']' );
}); });
} }
userActionUrl = '/ecm/service/feeds/cart'; userActionUrl = '/ecm/service/feeds/cart';
deleteCartItem( itemCode ) { deleteCartItem( itemCode ) {
...@@ -66,11 +67,9 @@ export class EcmCartComponent implements OnInit { ...@@ -66,11 +67,9 @@ export class EcmCartComponent implements OnInit {
}); });
this.getCartItem(); this.getCartItem();
this.decreasePrice(); this.decreasePrice();
let cartData = new ECMCart; let cartData = new ECMCart;
cartData.itemCode = itemCode; cartData.itemCode = itemCode;
this.store.dispatch( { type: REMOVE, payload: cartData }); this.store.dispatch({ type: DECREMENT, payload: cartData });
this.openSnackBar( "Item in the Cart", "Deleted" ); this.openSnackBar( "Item in the Cart", "Deleted" );
} }
...@@ -81,6 +80,7 @@ export class EcmCartComponent implements OnInit { ...@@ -81,6 +80,7 @@ export class EcmCartComponent implements OnInit {
} }
showTotalCartItems() { showTotalCartItems() {
this.show = this.cartItemsDetail.length; this.show = this.cartItemsDetail.length;
this.getTotalPrice(); this.getTotalPrice();
this.router.navigate( ['/cart'] ); this.router.navigate( ['/cart'] );
...@@ -97,25 +97,18 @@ export class EcmCartComponent implements OnInit { ...@@ -97,25 +97,18 @@ export class EcmCartComponent implements OnInit {
this.totalPrice = this.totalPrice - parseFloat( item.costRate ); this.totalPrice = this.totalPrice - parseFloat( item.costRate );
}); });
} }
increment(itemCode) { increment() {
this.counterValue += 1; this.counterValue += 1;
this.total = this.counterValue * this.total; this.total = this.counterValue * this.total;
let cartData = new ECMCart;
cartData.itemCode = itemCode;
this.store.dispatch( { type: INCREMENT, payload: cartData });
} }
decrement(itemCode) { decrement() {
this.counterValue -= 1; this.counterValue -= 1;
this.total = this.total - this.total; this.total = this.total - this.total;
let cartData = new ECMCart;
cartData.itemCode = itemCode;
this.store.dispatch( { type: DECREMENT, payload: cartData });
} }
disable() { disable() {
console.log( this.counterValue );
if ( this.counterValue == 1 ) if ( this.counterValue == 1 )
return true; return true;
else else
...@@ -124,10 +117,45 @@ export class EcmCartComponent implements OnInit { ...@@ -124,10 +117,45 @@ export class EcmCartComponent implements OnInit {
wishList() { wishList() {
alert( "item is added in a wishList" ); alert( "item is added in a wishList" );
} }
openDialog( itemCode ) {
this.cartService.setItemCode( itemCode );
let dialogRef = this.dialog.open( DialogOverviewExampleDialog );
dialogRef.afterClosed().subscribe( result => {
this.selectedOption = result;
});
}
viewItem( itemCode ) {
//this.productDetailComponent.getItemDetail(itemCode);
//this.setItemDetail.next(itemCode);
this.router.navigate( ['/detail', itemCode] );
}
} }
@Component( {
selector: 'dialog-overview-example-dialog',
templateUrl: 'dialog-overview-example-dialog.html',
styleUrls: ['./ecm-cart.component.css'],
providers: [EcmCartComponent]
})
export class DialogOverviewExampleDialog {
itemCode;
constructor( public dialogRef: MdDialogRef<DialogOverviewExampleDialog>, private route: ActivatedRoute, private router: Router, public cartService: EcmCartService, private http: Http, private store: Store<EcmStoreModel>, private cartComp:EcmCartComponent) { }
userActionUrl = '/ecm/service/feeds/cart';
deleteCartItem() {
console.log( "deleteCartItem Called" );
this.itemCode = this.cartService.getItemCode();
console.log( "the cart deleted " + this.itemCode);
this.cartComp.deleteCartItem(this.itemCode);
}
}
...@@ -9,8 +9,8 @@ import { Item } from '../../ecm-model/product-model'; ...@@ -9,8 +9,8 @@ import { Item } from '../../ecm-model/product-model';
export class EcmCartService { export class EcmCartService {
private userActionUrl = '/ecm/service/feeds/cart'; private userActionUrl = '/ecm/service/feeds/cart';
itemNo; public itemCode;
constructor(private http: Http) { } constructor(private http: Http) { }
getCartItems(): Observable<Item[]> { getCartItems(): Observable<Item[]> {
...@@ -44,11 +44,14 @@ private userActionUrl = '/ecm/service/feeds/cart'; ...@@ -44,11 +44,14 @@ private userActionUrl = '/ecm/service/feeds/cart';
return Observable.throw(errMsg); return Observable.throw(errMsg);
} }
getItemNo () { getItemCode() {
return this.itemNo; console.log("getItems"+this.itemCode);
return this.itemCode;
} }
setItemNo(value) { setItemCode(itemCode) {
this.itemNo = value;
this.itemCode = itemCode;
console.log("setItems"+this.itemCode);
} }
} }
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
.select-country { .select-country {
width: calc(100% - 20px); width: calc(100% - 20px);
margin: 20px; margin: 20px 20px 20px 25px;
} }
.billingAddress{ .billingAddress{
...@@ -173,7 +173,7 @@ ...@@ -173,7 +173,7 @@
} }
.cvv-input { .cvv-input {
width: 50px;
} }
.diff-bill-chkbox { .diff-bill-chkbox {
...@@ -191,17 +191,24 @@ ...@@ -191,17 +191,24 @@
margin-top: 20px; margin-top: 20px;
} }
.place-order-button[disabled]
{
background: #e0e0e0;
color: #fff;
}
.error-msg { .error-msg {
color: red; color: red;
padding-left: 25px; padding-left: 25px;
} }
.item-name, .item-cost, .order-summary-title, .total, .total-price { .item-name, .item-cost, .order-summary-title, .total, .total-price {
padding: 10px; padding: 20px;
} }
.order-summary-title { .order-summary-title {
text-align: left; text-align: left;
padding-left: 20px;
} }
.total { .total {
...@@ -209,12 +216,11 @@ ...@@ -209,12 +216,11 @@
} }
.item-cost{ .item-cost{
width: 25%; width: 30%;
padding-top: 25px;
} }
md-error{ md-error{
padding-left: 20px; padding-top: 12px;
} }
...@@ -438,4 +444,3 @@ select:focus ~ .highlight-select { ...@@ -438,4 +444,3 @@ select:focus ~ .highlight-select {
md-card { md-card {
margin: 20px; margin: 20px;
} }
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
<span> <span>
<md-input-container class="userCity"> <md-input-container class="userCity">
<input required mdInput placeholder="City" #cityRef="ngModel" [(ngModel)]="city" name="city"> <input required mdInput placeholder="City" #cityRef="ngModel" [(ngModel)]="shippingCity" name="city">
<md-error *ngIf="cityRef.errors && cityRef.dirty" class="">City required</md-error> <md-error *ngIf="cityRef.errors && cityRef.dirty" class="">City required</md-error>
</md-input-container></span></span></table> </md-input-container></span></span></table>
</div> </div>
...@@ -51,11 +51,11 @@ ...@@ -51,11 +51,11 @@
<table class="example-full-width" cellspacing="5" width="100%"><tr> <table class="example-full-width" cellspacing="5" width="100%"><tr>
<td> <td>
<md-input-container class="userState"> <md-input-container class="userState">
<input mdInput placeholder="State/Province" required #stateRef="ngModel" [(ngModel)]="state" name="state"> <input mdInput placeholder="State/Province" required #stateRef="ngModel" [(ngModel)]="shippingState" name="state">
<md-error *ngIf="stateRef.errors && stateRef.dirty" class="">State required</md-error> <md-error *ngIf="stateRef.errors && stateRef.dirty" class="">State required</md-error>
</md-input-container></td> </md-input-container></td>
<td><md-input-container class="userPostal"> <td><md-input-container class="userPostal">
<input required minlength="6" maxlength="6" type="number" mdInput placeholder="Zip/Postalcode" #zipcodeRef="ngModel" [(ngModel)]="zipCode" name="zipCode"> <input required minlength="6" maxlength="6" type="number" mdInput placeholder="Zip/Postalcode" #zipcodeRef="ngModel" [(ngModel)]="shippingZipCode" name="zipCode">
<md-error *ngIf="zipcodeRef.errors && zipcodeRef.dirty" class="">Zip/Postalcode required</md-error> <md-error *ngIf="zipcodeRef.errors && zipcodeRef.dirty" class="">Zip/Postalcode required</md-error>
</md-input-container></td> </md-input-container></td>
</tr> </tr>
...@@ -63,8 +63,7 @@ ...@@ -63,8 +63,7 @@
</div> </div>
<div class="billingCountry"> <div class="billingCountry">
<span class="countryValue">Country</span> <md-select class="select-country" placeholder="Country" [(ngModel)]="shippingCountry" name="countries">
<md-select class="select-country" placeholder="Country" [(ngModel)]="selectedCountry" name="countries">
<md-option *ngFor="let countries of countries" [value]="countries.viewValue"> <md-option *ngFor="let countries of countries" [value]="countries.viewValue">
{{countries.viewValue}} {{countries.viewValue}}
</md-option> </md-option>
...@@ -86,34 +85,34 @@ ...@@ -86,34 +85,34 @@
<table class="example-full-width" cellspacing="5" width="100%"><span> <table class="example-full-width" cellspacing="5" width="100%"><span>
<span> <span>
<md-input-container class="userAdress"> <md-input-container class="userAdress">
<input required minlength="10" maxlength="100" mdInput placeholder="Address" #billaddressRef="ngModel" [(ngModel)]="billAddress" name="billAddress"> <input required minlength="10" maxlength="100" mdInput placeholder="Address" [(ngModel)]="billAddress" #addressRef="ngModel" name="billAddress">
<md-error *ngIf="billaddressRef.errors && billaddressRef.dirty" class="">Address required</md-error> <md-error *ngIf="addressRef.errors && addressRef.dirty" class="">Address required</md-error>
</md-input-container></span> </md-input-container></span>
<span> <span>
<md-input-container class="userCity"> <md-input-container class="userCity">
<input required mdInput placeholder="City" #cityRef="ngModel" [(ngModel)]="city" name="city"> <input required mdInput placeholder="City" #cityRef="ngModel" [(ngModel)]="billingCity" name="city">
<md-error *ngIf="cityRef.errors && cityRef.dirty" class="">City required</md-error> <md-error *ngIf="cityRef.errors && cityRef.dirty" class="">City required</md-error>
</md-input-container></span></span></table> </md-input-container></span></span></table>
</div> </div>
<div class="billinguserState"> <div class="billinguserState">
<table class="example-full-width" cellspacing="5" width="100%"><tr> <table class="example-full-width" cellspacing="5" width="100%"><tr>
<td> <td>
<md-input-container class="userState"> <md-input-container class="userState">
<input mdInput placeholder="State/Province" #stateRef="ngModel" [(ngModel)]="state" name="state"> <input mdInput placeholder="State/Province" required #stateRef="ngModel" [(ngModel)]="billingState" name="state">
<md-error *ngIf="stateRef.errors && stateRef.dirty" class="">State required</md-error> <md-error *ngIf="stateRef.errors && stateRef.dirty" class="">State required</md-error>
</md-input-container></td> </md-input-container></td>
<td> <td><md-input-container class="userPostal">
<md-input-container class="userPostal"> <input required minlength="6" maxlength="6" type="number" mdInput placeholder="Zip/Postalcode" #zipcodeRef="ngModel" [(ngModel)]="billingZipCode" name="zipCode">
<input required minlength="6" maxlength="6" type="number" mdInput placeholder="Zip/Postalcode" #zipcodeRef="ngModel" [(ngModel)]="zipCode" name="zipCode"> <md-error *ngIf="zipcodeRef.errors && zipcodeRef.dirty" class="">Zip/Postalcode required</md-error>
<md-error *ngIf="zipcodeRef.errors && zipcodeRef.dirty" class="">Zip/Postalcode required</md-error> </md-input-container></td>
</md-input-container></td></tr> </tr>
</table> </table>
</div> </div>
<div class="billingCountry"> <div class="billingCountry">
<span class="countryValue">Country</span> <md-select class="select-country" placeholder="Country" [(ngModel)]="billingCountry" name="countries">
<md-select class="select-country" placeholder="Country" [(ngModel)]="selectedCountry" name="countries">
<md-option *ngFor="let countries of countries" [value]="countries.viewValue"> <md-option *ngFor="let countries of countries" [value]="countries.viewValue">
{{countries.viewValue}} {{countries.viewValue}}
</md-option> </md-option>
......
...@@ -12,21 +12,26 @@ export class EcmCheckoutComponent implements OnInit { ...@@ -12,21 +12,26 @@ export class EcmCheckoutComponent implements OnInit {
@ViewChild('userForm') currentForm: NgForm; @ViewChild('userForm') currentForm: NgForm;
userForm: NgForm; userForm: NgForm;
selectedCountry; shippingCountry;
selectedMonth; shippingAddress;
selectedYear: string; shippingCity;
checked = false; shippingState;
shippingZipCode;
billingCountry;
billAddress;
billingCity;
billingState;
billingZipCode;
checked = false;
selectedMonth;
selectedYear;
phone; phone;
email; email;
shipAddress;
billAddress;
city;
zipCode;
cardHolder; cardHolder;
cardNumber; cardNumber;
cvv; cvv;
state;
countries; countries;
months; months;
......
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