Skip to content

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

Updated 


git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174400 ce508802-f39f-4f6c-b175-0d175dae99d5
parent d93744a4
Hide whitespace changes
Inline Side-by-side
Showing with 1123 additions and 114 deletions
ecm/Angular/ProteusECM/trunk/src/app/app.module.ts
View file @ f47c748d
...@@ -48,6 +48,8 @@ import { EcmCartService } from './ecm-view/ecm-cart/ecm-cart.service'; ...@@ -48,6 +48,8 @@ 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';
import { EcmRecentViewComponent } from './ecm-view/ecm-recent-view/ecm-recent-view.component'; import { EcmRecentViewComponent } from './ecm-view/ecm-recent-view/ecm-recent-view.component';
import { EcmReadmoreComponent } from './ecm-view/ecm-readmore/ecm-readmore.component'; import { EcmReadmoreComponent } from './ecm-view/ecm-readmore/ecm-readmore.component';
import { EcmCheckoutComponent } from './ecm-view/ecm-checkout/ecm-checkout.component';
import { EcmRelatedItemsComponent } from './ecm-view/ecm-related-items/ecm-related-items.component';
//Changes by Prajyot //Changes by Prajyot
const appRoutes: Routes = [ const appRoutes: Routes = [
...@@ -59,7 +61,8 @@ const appRoutes: Routes = [ ...@@ -59,7 +61,8 @@ const appRoutes: Routes = [
{ path: 'share/:itemCode', component: ShareComponent}, { path: 'share/:itemCode', component: ShareComponent},
{ path: 'signin', component: EcmSigninComponent}, { path: 'signin', component: EcmSigninComponent},
{ path: 'search/:value', component: EcmSearchResultComponent}, { path: 'search/:value', component: EcmSearchResultComponent},
{ path: 'cart', component: EcmCartComponent} { path: 'cart', component: EcmCartComponent},
{ path: 'checkout', component: EcmCheckoutComponent}
]; ];
@NgModule({ @NgModule({
declarations: [ declarations: [
...@@ -92,7 +95,9 @@ const appRoutes: Routes = [ ...@@ -92,7 +95,9 @@ const appRoutes: Routes = [
EcmTemplateDirective, EcmTemplateDirective,
EcmCartComponent, EcmCartComponent,
EcmRecentViewComponent, EcmRecentViewComponent,
EcmReadmoreComponent EcmReadmoreComponent,
EcmRelatedItemsComponent,
EcmCheckoutComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
......
ecm/Angular/ProteusECM/trunk/src/app/ecm-breadcrumbs/ecm-breadcrumbs.component.ts
View file @ f47c748d
...@@ -131,6 +131,20 @@ export class EcmBreadcrumbsComponent implements OnInit { ...@@ -131,6 +131,20 @@ export class EcmBreadcrumbsComponent implements OnInit {
}); });
} }
if ( this.pageName == 'CHECKOUT' ) {
this.breadcrumbs = [];
this.breadcrumbs.push( {
label: 'Home',
url: '/home'
});
this.breadcrumbs.push( {
label: 'Checkout',
url: 'javascript:void(0)'
});
}
} }
......
ecm/Angular/ProteusECM/trunk/src/app/ecm-model/product-model.ts
View file @ f47c748d
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
export class Item { export class Item {
public itemCode: string = ''; public itemCode: string = '';
public descr: string = ''; public descr: string = '';
public costRate: number; public costRate: string;
public rating: number; public rating: number;
public scat_sh_descr: string = ''; public scat_sh_descr: string = '';
public scat_descr: string = ''; public scat_descr: string = '';
......
ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-product-details.component.ts
View file @ f47c748d
...@@ -131,7 +131,7 @@ export class EcmProductDetailsComponent implements OnInit { ...@@ -131,7 +131,7 @@ export class EcmProductDetailsComponent implements OnInit {
} }
showSnackbar(message) { showSnackbar(message) {
this.snackBar.open(message, '', {duration: 500}); this.snackBar.open(message, '', {duration: 2000});
} }
} }
ecm/Angular/ProteusECM/trunk/src/app/ecm-store/ecm-store.ts
View file @ f47c748d
...@@ -56,7 +56,7 @@ export function ECM_LOCATION (state: any = null, {type, payload}) { ...@@ -56,7 +56,7 @@ export function ECM_LOCATION (state: any = null, {type, payload}) {
export const INCREMENT = 'INCREMENT'; export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT'; export const DECREMENT = 'DECREMENT';
export const RESET = 'RESET'; export const RESET = 'RESET';
export const REMOVE = 'REMOVE';
const cartInitState = { const cartInitState = {
cartItems : [] cartItems : []
...@@ -105,20 +105,27 @@ export function CART_COUNTER(state: any = cartInitState, action: Action) { ...@@ -105,20 +105,27 @@ export function CART_COUNTER(state: any = cartInitState, action: Action) {
case DECREMENT: case DECREMENT:
if( payloadExist ) if( payloadExist )
{ {
let i; cartInitState.cartItems[payloadIdx].quantity--;
for( i = cartInitState.cartItems.length - 1; i >= 0; i--) console.log('Quantity = '+ cartInitState.cartItems[payloadIdx].quantity);
{
if( cartInitState.cartItems[i].itemCode == action.payload.itemCode)
{
cartInitState.cartItems.splice(i,1);
}
}
//let removed = cartInitState.cartItems.splice(payloadIdx) //let removed = cartInitState.cartItems.splice(payloadIdx)
//console.log('cartItems after splice >>' + removed + '>> ' + cartInitState.cartItems); //console.log('cartItems after splice >>' + removed + '>> ' + cartInitState.cartItems);
} }
return cartInitState.cartItems.length; return cartInitState.cartItems.length;
case REMOVE:
if( payloadExist )
{
let i ;
for( i = cartInitState.cartItems.length - 1; i >= 0; i--)
{
if( cartInitState.cartItems[i].itemCode == action.payload.itemCode)
{
cartInitState.cartItems.splice(i,1);
}
}
}
return cartInitState.cartItems.length;
case RESET: case RESET:
return 0; return 0;
......
ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-cart/ecm-cart.component.css
View file @ f47c748d
...@@ -18,51 +18,45 @@ ...@@ -18,51 +18,45 @@
padding-right: 13px; padding-right: 13px;
} }
.table {
width: 100%;
}
.itemdescription .itemdescription
{ {
padding-left: 10px; font-size: 14px;
width : 140px; width: 42%;
}
.ecm-itemdescription{
font-size: 18px;
position: relative;
top: 22px;
}
.itemcostRate{
font-size: 18px;
position: relative;
bottom: 58px;
float: right;
}
.itemRemove{
padding: 10px;
font-size: 18px;
} }
th{ .listItems{
padding-bottom: 22px; border: 2px solid ghostwhite;
text-align: left
} }
.ViewAll{ .ViewAll{
font-size: 16px; font-size: 16px;
color: mediumvioletred; color: mediumvioletred;
} }
.cartItemsDetails{
margin: 5px;
position: absolute;
width: 50%;
margin-top: 24px;
}
.ecm-productDetails{
position: absolute;
width: 30%;
left: 58%;
}
.PriceDetails{
font-size: 15px;
color: dimgray;
}
.amountPayable{ .amountPayable{
padding-top: 30px; padding-top: 30px;
font-weight: 600; font-weight: 600;
font-size: 18px; font-size: 18px;
margin: 10px;
}
.totalPriceDetails{
margin: 5px;
margin-top: 24px;
} }
/*.medium-btn-ecm-View{ /*.medium-btn-ecm-View{
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
...@@ -99,7 +93,7 @@ th{ ...@@ -99,7 +93,7 @@ th{
.viewAll-button .viewAll-button
{ {
/* width: 320px; */ /* width: 320px; */
width: 295px; width: 304px;
height: 50px; height: 50px;
font-size: 15px; font-size: 15px;
line-height: 15px; line-height: 15px;
...@@ -108,4 +102,169 @@ th{ ...@@ -108,4 +102,169 @@ th{
position: relative; position: relative;
padding: 0; padding: 0;
margin: 5px 0 5px 0; margin: 5px 0 5px 0;
}
.viewAll-button{
background: transparent;
color: mediumvioletred;
line-height: 44px;
}
.checkout-button{
background: mediumvioletred;
color:#fff;
}
@media screen and (max-width:30em) {
.listItems{
margin: 0px;
padding: 0px;
}
.color-change {
position: relative;
left: 10px;
font-size: 16px;
color: mediumvioletred;
cursor: pointer;
bottom: 4px;
}
.change-color{
display: flex;
}
.size-of-item{
display: table;
}
.selected {
position: relative;
left: 5px;
width: 32px;
height: 32px;
bottom: 7px;
}
.totalPriceDetails{
margin-top: 10px;
}
}
.ecm-payments{
display: flex;
position: relative;
left: 15px;
color: dimgray;
padding-top: 36px;
}
.ecm-Info{
position: relative;
left: 8px;
font-size: 17px;
}
.detail-checkout-button{
width: 100%;
height: 50px;
font-size: 15px;
line-height: 15px;
border-radius: 2px;
background: mediumvioletred;
color:#fff;
}
.shipping{
position: relative;
top: 15px;
}
.priceDetails{
text-align: center;
height: 40px;
/* width: 160px; */
line-height: 40px;
border-bottom: thin solid mediumvioletred;
}
.image{
width: 100px;
height: 100px;
}
.info{
display: flex;
}
.detail-Continue-Shopping-button {
height: 46px;
font-size: 15px;
line-height: 15px;
border-radius: 2px;
background: white;
color: mediumvioletred;
position: relative;
float: right;
width: 100%;
}
.item-image{
width: 140px;
padding-top: 16px;
}
.change-color{
padding-top: 24px;
padding-bottom: 35px;
}
.size-of-item{
font-size: 14px;
color: dimgray;
}
.selected{
position: relative;
left: 5px;
width: 32px;
height: 32px;
}
.color-change{
position: relative;
left: 10px;
font-size: 16px;
color: mediumvioletred;
cursor: pointer;
}
.wishList-items{
font-size: 16px;
color: mediumvioletred;
cursor: pointer;
}
.remove-items{
font-size: 16px;
color: dimgray;
padding-left: 31px
}
.wish-remove-dipslay{
display: inline-block;
position: relative;
top: 100px;
}
.ecm-textBox{
text-align: center;
}
.counter{
position: relative;
top: 12px;
padding-left: 58px;
}
.ecm-decre{
background-color: white;
color: red;
width: 40px;
height: 35px;
}
.ecm-textBox{
width: 56px;
}
.ecm-incre{
color: mediumvioletred;
background-color: white;
width: 36px;
height: 32px;
position: relative;
}
.items-cost-rate{
padding-bottom: 32px;
position: relative;
top: 78px;
} }
\ No newline at end of file
ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-cart/ecm-cart.component.html
View file @ f47c748d
<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 && cartItemsDetail.length "> <div *ngIf="cartItemsDetail">
<div class="cartItemsDetail" *ngFor="let item of cartItemsDetail | slice:0:show; let i=index"> <div class="cartItemsDetail" *ngFor="let item of cartItemsDetail | slice:0:show; let i=index">
<table style="border: 2px solid ghostwhite; width: 100%;"> <table style="border: 2px solid ghostwhite; width: 100%;">
<tr> <tr>
<td class="itemImage"><img style="height: inherit;" src="../assets/images/items/{{item.itemCode}}.png"></td> <td class="itemImage"><ecm-image [refId]='item.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage] = "true"></ecm-image></td>
<td class="itemdescription">{{item.descr}}</td> <td class="itemdescription">{{item.descr}}</td>
<td style="padding: 10px;">₹ {{item.costRate}}</td> <td style="padding: 10px;">₹ {{item.costRate}}</td>
<td (click)="deleteCartItem(item.itemCode)" style="cursor: pointer;"><i class="material-icons" style="color: mediumvioletred; font-size: 20px;">&#xE872;</i></td> <td (click)="deleteCartItem(item.itemCode)" style="cursor: pointer;"><i class="material-icons" style="color: mediumvioletred; font-size: 20px;">&#xE872;</i></td>
...@@ -18,12 +18,12 @@ ...@@ -18,12 +18,12 @@
<div class="ViewAll" *ngIf="cartItemsDetail.length > 3 && show == 3" (click)="showTotalCartItems()"> <div class="ViewAll" *ngIf="cartItemsDetail.length > 3 && show == 3" (click)="showTotalCartItems()">
<a md-button class="viewAll-button" [routerLink]="['/cart']" (click)="closePanel.emit();" style="background: transparent;color: mediumvioletred;line-height: 44px;" > View All ( {{cartItemsDetail.length}} )</a> <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> --> <!-- <span class="ecm-View" style="cursor: pointer;position: absolute;">ViewAll ( {{cartItemsDetail.length}} )</span> -->
</div> </div>
<!-- <button md-raised-button class="button medium-btn-checkout" style="background: mediumvioletred; color:#fff;" >Checkout</button> --> <!-- <button md-raised-button class="button medium-btn-checkout" style="background: mediumvioletred; color:#fff;" >Checkout</button> -->
<button md-button class="checkout-button" style="background: mediumvioletred; color:#fff;" >Checkout</button> <button md-button class="checkout-button">Checkout</button>
</div> </div>
</ng-template> </ng-template>
...@@ -31,45 +31,109 @@ ...@@ -31,45 +31,109 @@
<!-- ---------================ detailCart start==============================---------------------------- --> <!-- ---------================ detailCart start==============================---------------------------- -->
<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 items" style="margin-top: 61px;"> <div class="row" style="margin-top: 84px;">
<md-card class="medium-6 columns cartItemsDetails"> <md-card class="medium-7 columns cartItemsDetails">
<div style="margin: 5px;"> <div class="ecmdetailsItems">
<table style="border: 2px solid ghostwhite; width: 100%;"> <div class="ecm-headings" style="font-size: 15px;padding-left: 14px">
<tr> <span>({{cartItems}}) My Cart</span>
<th>Item</th> </div>
<th>itemDescription</th> <hr>
<th>Price</th> <div class="listItems" *ngFor="let item of cartItemsDetail">
<th>Remove</th> <div class="media-object-section item-image">
</tr> <ecm-image [refId]='item.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage] = "true"></ecm-image>
<tr *ngFor="let item of cartItemsDetail" > </div>
<div class="media-object-section" style="width: 325px;">
<div class="items-desc">
<span style="font-size: 16px; color: mediumvioletred">Handmade Cusine Handicarft</span>
<span class="item-descr" style="display: block;font-size: 16px;padding-top: 16px;">{{item.descr}}</span>
<span style="font-size: 14px; color: dimgray">Sold by</span>
<span style="font-size: 16px; color: mediumvioletred">Handmade Cusine Handicarft</span>
</div>
<div class="change-color">
<span class="size-of-item">Size Selected :</span>
<button md-mini-fab class="back btn selected" >L</button>
<span class="color-change">Change</span>
</div>
</div>
<div class="media-object-section" style="width: 206px;">
<div class="counter">
<button md-mini-fab [disabled]="disable()" class="ecm-decre" (click)="decrement(item.itemCode)">-</button>
<span>
<input class="ecm-textBox" type="text" [value]="counterValue">
</span>
<button md-mini-fab class="ecm-incre" (click)="increment(item.itemCode)">+</button>
</div>
<div class="items-cost-rate">
<span style="font-size: 16px;float: right;">₹ {{item.costRate}}</span>
</div>
<div class="wish-remove-dipslay">
<span class="wishList-items" (click)="wishList()">Add to Wishlist</span>
<span class="remove-items" (click)="deleteCartItem(item.itemCode)" style="cursor: pointer;">Remove</span>
</div>
</div>
</div>
</div>
<div class="detail-Continue-Shopping-button" >
<button md-button style="line-height: 3;float: right;border: 2px solid ghostwhite;" >Continue Shopping</button>
</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="itemImage"><img style="height: inherit;" src="../assets/images/items/{{item.itemCode}}.png"></td>
<td class="itemdescription">{{item.descr}}</td> <td class="ecm-itemdescription">{{item.descr}}</td>
<td style="padding: 10px;">₹ {{item.costRate}}</td> <td class="itemcostRate" style="padding: 10px;width: 26%;">₹ {{item.costRate}}</td>
<td (click)="deleteCartItem(item.itemCode)" style="cursor: pointer;"><i class="material-icons" style="color: mediumvioletred; font-size: 20px;">&#xE872;</i></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> </tr>
</table> </table>
</div> </div>
</md-card> </div> -->
<div class="medium-6 columns ecm-productDetails"> </md-card>
<div class="medium-5 columns ecm-productDetails">
<md-card class="totalPriceDetails"> <md-card class="totalPriceDetails">
<span class="PriceDetails">PRICE DETAILS</span> <div style="text-align: center;position: relative;bottom: 22px;">
<hr style="margin-top: 14px;"> <span style="font-size: 15px;" class="priceDetails">PRICE DETAILS</span>
<div> </div>
<span style="font-size: 15px;padding-left: 14px;">Price (1 item)</span> <div class="totalProductsInfo">
<span style="float: right;">₹ 671</span> <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> </div>
<br> <br>
<div> <div>
<hr style="border: dotted;color: dimgray;border-width: thin;"> <hr style="border: dotted;color: dimgray;border-width: thin;">
<span class="amountPayable">Amount Payable</span> <div class="amount">
<span style="float: right; font-weight: 600;font-size: 16px;">₹ 671</span> <span class="amountPayable">Amount Payable</span>
</div> <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> </md-card>
</div> </div>
</div> </div>
......
ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-cart/ecm-cart.component.ts
View file @ f47c748d
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 { 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 } from '../../ecm-store/ecm-store'; import { INCREMENT, DECREMENT, RESET, REMOVE } 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';
import { ECMCart } from '../../ecm-model/cart-model'; import { ECMCart } from '../../ecm-model/cart-model';
import { Router,ActivatedRoute } from '@angular/router'; import { Router, ActivatedRoute } from '@angular/router';
@Component({ @Component( {
selector: 'ecm-cart', selector: 'ecm-cart',
templateUrl: './ecm-cart.component.html', templateUrl: './ecm-cart.component.html',
styleUrls: ['./ecm-cart.component.css'] styleUrls: ['./ecm-cart.component.css']
}) })
export class EcmCartComponent implements OnInit { export class EcmCartComponent implements OnInit {
cartItemsDetail: Item[]; cartItemsDetail: Item[];
cartItems = 0; cartItems = 0;
catCode; catCode;
show = 3; show = 3;
@Input() isMiniCart: boolean = false; totalPrice: number = 0;
@Output() closePanel = new EventEmitter(); counterValue = 1;
constructor(private route: ActivatedRoute, private router:Router, public cartService: EcmCartService, public snackBar: MdSnackBar, private http: Http, private store: Store<EcmStoreModel>) { } itemPrice = 1000;
total = this.totalPrice;
ngOnInit() { @Input() isMiniCart: boolean = false;
this.getCartItem(); @Output() closePanel = new EventEmitter();
} @Output() doActivity = new EventEmitter();
constructor( private route: ActivatedRoute, private router: Router, public cartService: EcmCartService, public snackBar: MdSnackBar, private http: Http, private store: Store<EcmStoreModel> ) { }
ngOnInit() {
this.getCartItem();
}
getCartItem() { getCartItem() {
this.cartService.getCartItems().subscribe( this.cartService.getCartItems().subscribe(
...@@ -38,6 +43,10 @@ export class EcmCartComponent implements OnInit { ...@@ -38,6 +43,10 @@ export class EcmCartComponent implements OnInit {
this.cartItemsDetail = cartItemsDetail; this.cartItemsDetail = cartItemsDetail;
this.cartItems = this.cartItemsDetail.length; this.cartItems = this.cartItemsDetail.length;
console.log( 'comp cartItemsDetail[' + JSON.stringify( cartItemsDetail ) + '] \n this.cartItemsDetail[' + this.cartItemsDetail.length + ']' ); console.log( 'comp cartItemsDetail[' + JSON.stringify( cartItemsDetail ) + '] \n this.cartItemsDetail[' + this.cartItemsDetail.length + ']' );
if ( this.cartItemsDetail ) {
this.getTotalPrice();
console.log( "the total Price is" + this.totalPrice );
}
}, },
error => { error => {
let errorMessage = <any>error; let errorMessage = <any>error;
...@@ -56,27 +65,65 @@ export class EcmCartComponent implements OnInit { ...@@ -56,27 +65,65 @@ export class EcmCartComponent implements OnInit {
console.log( error.json() ); console.log( error.json() );
}); });
this.getCartItem(); this.getCartItem();
this.decreasePrice();
let cartData = new ECMCart;
cartData.itemCode = itemCode;
this.store.dispatch( { type: REMOVE, payload: cartData });
this.openSnackBar( "Item in the Cart", "Deleted" );
}
openSnackBar( message: string, action: string ) {
this.snackBar.open( message, action, {
duration: 1000,
});
}
showTotalCartItems() {
this.show = this.cartItemsDetail.length;
this.getTotalPrice();
this.router.navigate( ['/cart'] );
}
getTotalPrice() {
this.cartItemsDetail.forEach(( item, i ) => {
this.totalPrice = this.totalPrice + parseFloat( item.costRate );
});
}
decreasePrice() {
this.cartItemsDetail.forEach(( item, i ) => {
this.totalPrice = this.totalPrice - parseFloat( item.costRate );
});
}
increment(itemCode) {
this.counterValue += 1;
this.total = this.counterValue * this.total;
let cartData = new ECMCart; let cartData = new ECMCart;
cartData.itemCode = itemCode; cartData.itemCode = itemCode;
this.store.dispatch({ type: DECREMENT, payload: cartData }); this.store.dispatch( { type: INCREMENT, payload: cartData });
}
decrement(itemCode) {
this.counterValue -= 1;
this.total = this.total - this.total;
this.openSnackBar("Item in the Cart","Deleted"); let cartData = new ECMCart;
cartData.itemCode = itemCode;
this.store.dispatch( { type: DECREMENT, payload: cartData });
}
disable() {
if ( this.counterValue == 1 )
return true;
else
return false;
}
wishList() {
alert( "item is added in a wishList" );
} }
openSnackBar(message: string, action: string) {
this.snackBar.open(message, action, {
duration: 1000,
});
}
showTotalCartItems(){
this.show = this.cartItemsDetail.length;
this.router.navigate(['/cart']);
}
} }
......
ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-checkout/ecm-checkout.component.css 0 → 100755
View file @ f47c748d
.checkout-page {
margin-top: 70px;
}
.medium-btn{
display: inline-block;
box-sizing: border-box;
border: 2px solid mediumvioletred;
background-color: #FFF;
font-size: 14px;
font-weight: 500;
color: #202020;
margin: 0;
left: 14px;
padding: 2px 47px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
border-radius: 0;
outline: none;
-webkit-appearance: none;
position: relative;
top: 140px;
}
.head{
font-size: 18px;
display: block;
padding-left: 20px;
padding-right: 20px;
}
.medium-btn:hover {
background-color: mediumvioletred;
cursor: pointer;
color: white;
}
.head-Shipping{
font-size: 18px;
display: block;
padding-left: 20px;
padding-right: 20px;
}
.shippingaddress{
position: relative;
top: 9px;
}
.Country{
position: relative;
top: 8px;
}
.select-country {
width: calc(100% - 20px);
margin: 20px;
}
.billingAddress{
}
.countryValue{
font-size: 18px;
display: block;
padding-left: 20px;
padding-right: 20px;
}
.orderSummary{
}
.order{
display: block;
font-size: 18px;
padding: 10px;
}
.orderItems{
display: block;
top: 34px;
padding: 10px;
}
.totalCost{
display: block;
top: 50px;
padding: 10px;
}
.expiryDetails{
font-size: 18px;
}
.payment {
padding-right: 20px;
padding-left: 20px;
display: block;
font-size: 18px;
}
.billing-add-title {
padding-right: 20px;
padding-left: 20px;
display: block;
font-size: 18px;
}
.mat-select-trigger {
font-size: 19px;
}
.mat-input-element {
font: inherit;
background: 0 0;
color: currentColor;
border: none;
outline: 0;
/* padding: 0; */
width: 100%;
vertical-align: bottom;
padding-top: 10px;
}
.userEmail{
display: block;
margin-left: 20px;
margin-right: 20px;
}
.userInfo{
display: block;
margin-left: 20px;
margin-right: 20px;
}
.userAdress{
display: block;
margin-left: 20px;
margin-right: 20px;
}
.userCity{
display: block;
margin-left: 20px;
margin-right: 20px;
}
.userState{
display: block;
margin-left: 20px;
margin-right: 20px;
}
.userPostal{
display: block;
}
.Cardholder{
margin-left: 20px;
margin-right: 20px;
}
.CardNumber{
margin-left: 20px;
margin-right: 20px;
}
.expiry-title {
padding-left: 20px;
}
.months {
margin-left: 20px;
margin-right: 20px;
}
.years {
margin-left: 20px;
margin-right: 20px;
}
.cvv{
padding: 20px;
}
.cvv-input {
width: 50px;
}
.diff-bill-chkbox {
margin-left: 20px;
margin-right: 20px;
}
.place-order-button{
width: 100%;
height: 50px;
font-size: 15px;
border-radius: 2px;
background: mediumvioletred;
color:#fff !important;
margin-top: 20px;
}
.error-msg {
color: red;
padding-left: 25px;
}
.item-name, .item-cost, .order-summary-title, .total, .total-price {
padding: 10px;
}
.order-summary-title {
text-align: left;
}
.total {
padding-top: 25px;
}
.item-cost{
width: 25%;
padding-top: 25px;
}
md-error{
padding-left: 20px;
}
/* form starting stylings ------------------------------- */
.group
{
position:relative;
margin-bottom:45px;
}
.ecm-input
{
font-size:14px;
padding:2px 10px 10px 5px;
display:block;
/* width:300px; */
border:none;
border-bottom:1px solid #757575;
box-shadow: none;
margin: 0;
}
.ecm-input:focus
{
outline:none;
border:none;
box-shadow: none;
}
/* LABEL ======================================= */
.ecm-label
{
color:#999;
/* color:mediumvioletred; */
font-size:14px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:10px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
/* active state */
.ecm-input:focus ~ .ecm-label,
.ecm-input:valid ~ .ecm-label
{
top:-20px;
font-size:12px;
color:#5264AE;
color:mediumvioletred;
}
/* BOTTOM BARS ================================= */
.bar
{
position:relative; display:block;
/* width:300px; */
}
.bar:before,
.bar:after
{
content:'';
height:2px;
width:0;
bottom:1px;
position:absolute;
background:#5264AE;
background:mediumvioletred;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.bar:before
{
left:50%;
}
.bar:after
{
right:50%;
}
/* active state */
.ecm-input:focus ~ .bar:before,
.ecm-input:focus ~ .bar:after
{
width:50%;
}
/* HIGHLIGHTER ================================== */
.highlight {
position:absolute;
height:60%;
width:100px;
top:25%;
left:0;
pointer-events:none;
opacity:0.5;
}
/* active state */
.ecm-input:focus ~ .highlight {
-webkit-animation:ecm-inputHighlighter 0.3s ease;
-moz-animation:ecm-inputHighlighter 0.3s ease;
animation:ecm-inputHighlighter 0.3s ease;
}
/* ANIMATIONS ================ */
@-webkit-keyframes ecm-inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
@-moz-keyframes ecm-inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
@keyframes ecm-inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
.group-select
{
}
select
{
font-size:14px;
padding:2px 10px 10px 5px;
display:block;
/* width:300px; */
border:none;
border-bottom:1px solid #757575;
box-shadow: none;
margin: 0;
background: transparent;
}
select:focus
{
outline:none;
border:none;
box-shadow: none;
}
/* active state */
select:focus ~ label
{
top:-20px;
font-size:12px;
color:#5264AE;
}
.bar-select { position:relative; display:block;
/* width:300px; */
}
.bar-select:before, .bar-select:after {
content:'';
height:2px;
width:0;
bottom:1px;
position:absolute;
background:#5264AE;
background:mediumvioletred;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.bar-select:before {
left:50%;
}
.bar-select:after {
right:50%;
}
/* active state */
select:focus ~ .bar-select:before,
select:focus ~ .bar-select:after {
width:50%;
}
.highlight-select {
position:absolute;
height:60%;
width:100px;
top:25%;
left:0;
pointer-events:none;
opacity:0.5;
}
/* active state */
select:focus ~ .highlight-select {
-webkit-animation:highlight-select 0.3s ease;
-moz-animation:highlight-select 0.3s ease;
animation:highlight-select 0.3s ease;
}
@-webkit-keyframes highlight-select {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
@-moz-keyframes highlight-select {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
@keyframes highlight-select {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
md-card {
margin: 20px;
}
ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-checkout/ecm-checkout.component.html 0 → 100755
View file @ f47c748d
<ecm-header [isFixedHeader]=false> </ecm-header>
<ecm-breadcrumbs [pageName]="'CHECKOUT'"></ecm-breadcrumbs>
<div class="row checkout-page">
<form #userForm="ngForm" (ngSubmit)="onSubmit()">
<div class="medium-7 columns">
<md-card>
<div class="accountInformation">
<span class="head">Account Information</span>
<table class="example-full-width" cellspacing="5" width="100%"><span>
<span class="form-group">
<md-input-container class="userEmail">
<input type="email" mdInput placeholder="Email" class="form-control" required name="email" #emailRef="ngModel" [(ngModel)]="email">
<md-error *ngIf="emailRef.errors && emailRef.dirty" class="">Email required</md-error>
</md-input-container></span>
<span class="form-group">
<md-input-container class="userInfo">
<input type="number" mdInput placeholder="Phone Number" id="phone" class="form-control" required minlength="10" maxlength="10" name="phone" #phoneRef="ngModel" [(ngModel)]="phone">
<md-error *ngIf="phoneRef.errors && phoneRef.dirty" class="">Phone Number required</md-error>
</md-input-container>
</span> </span></table>
</div>
</md-card>
<md-card>
<div class="billing">
<div class="billingUserAddress">
<span class="head-Shipping">Shipping Address</span>
<table class="example-full-width" cellspacing="5" width="100%"><span>
<span>
<md-input-container class="userAdress">
<input required minlength="10" maxlength="100" mdInput placeholder="Address" [(ngModel)]="billAddress" #addressRef="ngModel" name="billAddress">
<md-error *ngIf="addressRef.errors && addressRef.dirty" class="">Address required</md-error>
</md-input-container></span>
<span>
<md-input-container class="userCity">
<input required mdInput placeholder="City" #cityRef="ngModel" [(ngModel)]="city" name="city">
<md-error *ngIf="cityRef.errors && cityRef.dirty" class="">City required</md-error>
</md-input-container></span></span></table>
</div>
<div class="billinguserState">
<table class="example-full-width" cellspacing="5" width="100%"><tr>
<td>
<md-input-container class="userState">
<input mdInput placeholder="State/Province" required #stateRef="ngModel" [(ngModel)]="state" name="state">
<md-error *ngIf="stateRef.errors && stateRef.dirty" class="">State required</md-error>
</md-input-container></td>
<td><md-input-container class="userPostal">
<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-input-container></td>
</tr>
</table>
</div>
<div class="billingCountry">
<span class="countryValue">Country</span>
<md-select class="select-country" placeholder="Country" [(ngModel)]="selectedCountry" name="countries">
<md-option *ngFor="let countries of countries" [value]="countries.viewValue">
{{countries.viewValue}}
</md-option>
</md-select>
</div>
</div>
<div class="billingAddress">
<div class="group-select">
<md-checkbox class="diff-bill-chkbox" [(ngModel)]="checked" name="checked">Use different billing address</md-checkbox>
</div>
</div>
</md-card>
<md-card *ngIf="checked">
<div class="billing">
<div class="billingUserAddress">
<span class="head-Shipping">Billing Address</span>
<table class="example-full-width" cellspacing="5" width="100%"><span>
<span>
<md-input-container class="userAdress">
<input required minlength="10" maxlength="100" mdInput placeholder="Address" #billaddressRef="ngModel" [(ngModel)]="billAddress" name="billAddress">
<md-error *ngIf="billaddressRef.errors && billaddressRef.dirty" class="">Address required</md-error>
</md-input-container></span>
<span>
<md-input-container class="userCity">
<input required mdInput placeholder="City" #cityRef="ngModel" [(ngModel)]="city" name="city">
<md-error *ngIf="cityRef.errors && cityRef.dirty" class="">City required</md-error>
</md-input-container></span></span></table>
</div>
<div class="billinguserState">
<table class="example-full-width" cellspacing="5" width="100%"><tr>
<td>
<md-input-container class="userState">
<input mdInput placeholder="State/Province" #stateRef="ngModel" [(ngModel)]="state" name="state">
<md-error *ngIf="stateRef.errors && stateRef.dirty" class="">State required</md-error>
</md-input-container></td>
<td>
<md-input-container class="userPostal">
<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-input-container></td></tr>
</table>
</div>
<div class="billingCountry">
<span class="countryValue">Country</span>
<md-select class="select-country" placeholder="Country" [(ngModel)]="selectedCountry" name="countries">
<md-option *ngFor="let countries of countries" [value]="countries.viewValue">
{{countries.viewValue}}
</md-option>
</md-select>
</div>
</div>
</md-card>
<!-- <div class="medium-12 columns paymentMethod">
<span class="payment">Payment Method</span >
<md-input-container class="Cardholder" >
<input mdInput placeholder="Cardholder" value="Cardholder Name">
</md-input-container>
<md-input-container class="CardNumber">
<input mdInput placeholder="CardNumber" value="Card Number">
</md-input-container>
</div> -->
<md-card>
<div class="paymentMethod">
<span class="payment">Payment Method</span>
<table class="example-full-width" cellspacing="5" width="100%"><tr>
<td><md-input-container class="Cardholder">
<input required mdInput placeholder="Cardholder" [(ngModel)]="cardHolder" name="cardHolder"> </md-input-container></td>
<td><md-input-container class="CardNumber">
<input required type="number" mdInput placeholder="Card Number" [(ngModel)]="cardNumber" name="cardNumber"> </md-input-container></td></tr></table>
</div>
<div class="expiry">
<div class="expiry-title">Expiry</div>
<md-select class="months" placeholder="Month" [(ngModel)]="selectedMonth"
name="months"> <md-option *ngFor="let months of months"
[value]="months.viewValue"> {{months.viewValue}} </md-option> </md-select>
<md-select class="years" placeholder="Years" [(ngModel)]="selectedYear"
name="years"> <md-option *ngFor="let years of years"
[value]="years.viewValue"> {{years.viewValue}} </md-option> </md-select>
<span class="cvv">
<md-input-container class="cvv-input">
<input required type="number" mdInput placeholder="cvv" #cvvRef="ngModel" [(ngModel)]="cvv" name="cvv">
<md-error *ngIf="cvvRef.errors && cvvRef.dirty" class="">Zip/Postalcode required</md-error>
</md-input-container>
</span>
</div>
</md-card>
</div>
<div class="medium-5 columns">
<md-card>
<div class="orderSummary">
<table>
<tr>
<th class="order-summary-title">Order Summary</th>
</tr>
<tr>
<td class="item-name">Indigenous Handicrafts Incredible Applique Work Red Cotton Bed Cover</td>
<td class="item-cost">₹ 500</td>
</tr>
<tr>
<td class="item-name">Indigenous Handicrafts Incredible Applique Work Red Cotton Bed Cover</td>
<td class="item-cost">₹ 500</td>
</tr>
<tr>
<td class="item-name">Tie & Dye Black Cotton Reversible Double AC Quilt or Quilted Bed Cover</td>
<td class="item-cost">₹ 500</td>
</tr>
<tr>
<td class="total">Total</td>
<td class="total-price">₹ 1500</td>
</tr>
</table>
</div>
<button type="submit" [disabled]="!userForm.valid" md-button class="place-order-button">Place Order</button>
</md-card>
</div>
</form>
</div>
ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-checkout/ecm-checkout.component.ts 0 → 100755
View file @ f47c748d
import { Component, OnInit, ViewChild, ElementRef, Input, Output, EventEmitter } from '@angular/core';
import { FormBuilder, Validators,NgForm } from '@angular/forms';
@Component( {
selector: 'ecm-checkout',
templateUrl: './ecm-checkout.component.html',
styleUrls: ['./ecm-checkout.component.css']
})
export class EcmCheckoutComponent implements OnInit {
@ViewChild('userForm') currentForm: NgForm;
userForm: NgForm;
selectedCountry;
selectedMonth;
selectedYear: string;
checked = false;
phone;
email;
shipAddress;
billAddress;
city;
zipCode;
cardHolder;
cardNumber;
cvv;
state;
countries;
months;
years;
constructor(private formBuilder: FormBuilder) {
this.countries = [
{ viewValue: 'India' },
{ viewValue: 'UAE' },
{ viewValue: 'Canada' }
];
this.months = [
{ viewValue: 'January' },
{ viewValue: 'Febuary' },
{ viewValue: 'march' },
{ viewValue: 'April' },
{ viewValue: 'May' },
{ viewValue: 'June' },
{ viewValue: 'July' },
{ viewValue: 'August' },
{ viewValue: 'September' },
{ viewValue: 'October' },
{ viewValue: 'November' },
{ viewValue: 'December' }];
this.years = [
{ viewValue: 2017 },
{ viewValue: 2017 },
{ viewValue: 2018 },
{ viewValue: 2019 },
{ viewValue: 2020 },
{ viewValue: 2021 },
{ viewValue: 2022 }];
}
ngOnInit() {
}
onSubmit() {
alert("Form Submitted");
}
}
ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-recent-view/ecm-recent-view.component.ts
View file @ f47c748d
...@@ -36,8 +36,6 @@ export class EcmRecentViewComponent implements OnInit { ...@@ -36,8 +36,6 @@ export class EcmRecentViewComponent implements OnInit {
} }
viewItem(itemCode){ viewItem(itemCode){
//this.productDetailComponent.getItemDetail(itemCode);
//this.setItemDetail.next(itemCode);
this.router.navigate(['/detail',itemCode]); this.router.navigate(['/detail',itemCode]);
} }
......
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