Commit dd886e22 authored by prumde's avatar prumde

Updated


git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174481 ce508802-f39f-4f6c-b175-0d175dae99d5
parent 777ff389
......@@ -3,6 +3,7 @@ import {Action} from '@ngrx/store';
import {Card} from '../../user-card/card-manager/card.model';
@Injectable()
export class SavedCardAction {
static LOAD_SAVED_CARDS = '[Cards] Load Saved Cards';
......@@ -13,15 +14,15 @@ export class SavedCardAction {
}
static LOAD_SAVED_CARDS_SUCCESS = '[Cards] Load Saved Cards Success';
loadSavedCardsSuccess(userCard): Action {
// if(!cartItems.length)
// {
// cartItems = [];
// }
loadSavedCardsSuccess(userCards): Action {
console.log('card-action-loadSuccess',userCards);
if(!userCards.length)
{
userCards = [];
}
return {
type: SavedCardAction.LOAD_SAVED_CARDS_SUCCESS,
payload: userCard
payload: userCards
};
}
......@@ -36,6 +37,7 @@ export class SavedCardAction {
static ADD_NEW_CARD_SUCCESS = '[Cards] Add new Card Success';
addNewCardSuccess(userCard): Action {
console.log('card-store: ',userCard);
return {
type: SavedCardAction.ADD_NEW_CARD_SUCCESS,
payload: userCard
......@@ -51,18 +53,18 @@ export class SavedCardAction {
static DELETE_CARD = '[Cards] Delete Cards';
deleteCard(userAddress): Action {
deleteCard(card): Action {
return {
type: SavedCardAction.DELETE_CARD,
payload: userAddress
payload: card
};
}
static DELETE_CARD_SUCCESS = '[Cards] Delete Cards Success';
deleteCardSuccess(userAddress): Action {
deleteCardSuccess(card): Action {
return {
type: SavedCardAction.DELETE_CARD_SUCCESS,
payload: userAddress
payload: card
};
}
}
......@@ -3,7 +3,7 @@ import {Effect, Actions} from '@ngrx/effects';
import {AppState} from '../reducers';
import {SavedCardAction} from '../actions';
//import {EcmCartService} from '../../ecm-view/ecm-cart/ecm-cart.service';
import {UserCardService} from '../../user-card/ecm-user-card.service';
import 'rxjs/add/operator/switchMap';
@Injectable()
......@@ -11,13 +11,13 @@ export class SavedCardEffects {
constructor (
private update$: Actions,
private savedCardActions: SavedCardAction,
// private svc: EcmCartService,
private svc: UserCardService,
) {}
@Effect() loadCards$ = this.update$
.ofType(SavedCardAction.LOAD_SAVED_CARDS)
// .switchMap(() => this.svc.fetchCartItems())
.map(userCard => this.savedCardActions.loadSavedCardsSuccess(userCard));
.switchMap(() => this.svc.fetchUserCards())
.map(cards => this.savedCardActions.loadSavedCardsSuccess(cards));
@Effect() addNewCards$ = this.update$
.ofType(SavedCardAction.ADD_NEW_CARD)
......@@ -25,11 +25,15 @@ export class SavedCardEffects {
// .switchMap(item => this.svc.addToCart(item)
.map(userCard => this.savedCardActions.addNewCardSuccess(userCard));
@Effect() addToCaddNewCards$art$ = this.update$
.ofType(SavedCardAction.ADD_NEW_CARD_SUCCESS)
.map(action => action.payload)
.switchMap(card => this.svc.addUserCard(card));
@Effect() deleteCards$ = this.update$
.ofType(SavedCardAction.DELETE_CARD)
.ofType(SavedCardAction.DELETE_CARD_SUCCESS)
.map(action => action.payload)
// .switchMap(item => this.svc.deleteCartItem(item))
.map(userCard => this.savedCardActions.deleteCardSuccess(userCard));
.switchMap(card => this.svc.deleteUserCard(card))
//.map(card => this.savedCardActions.deleteCardSuccess(card));
}
import {Action} from '@ngrx/store';
import {Observable} from 'rxjs/Observable';
import {ItemDetail} from '../../ecm-model/product-detail-model';
import {CartActions} from '../actions';
......
......@@ -8,7 +8,7 @@ import categoryListReducer, * as fromCategoryList from './category-list';
import subCategoryListReducer, * as fromSubCategoryList from './subcategory-list';
import itemListReducer, * as fromItemList from './item-list';
import wishListReducer, * as fromWishList from './wish-list';
import menuReducer, * as fromMenu from './menu';
import cardListReducer, * as fromSavedCardList from './saved-card-list';
import categoryReducer, * as fromCategory from './category';
import subCategoryReducer, * as fromSubCategory from './subcategory';
......@@ -16,7 +16,7 @@ import itemReducer, * as fromItem from './item';
import locationReducer, * as fromLocation from './location';
import profileReducer, * as fromProfile from './profile-info';
import addressReducer, * as fromAddress from './manage-adress-list';
import menuReducer, * as fromMenu from './menu';
export interface AppState {
cartItems: fromCartList.CartListState;
......@@ -25,6 +25,7 @@ export interface AppState {
items: fromItemList.ItemListState;
wishlistItems: fromWishList.WishListState;
menuList: fromMenu.MenuState;
savedCards: fromSavedCardList.CardState;
category: fromCategory.CategoryState;
subcategory: fromSubCategory.SubCategoryState;
......@@ -42,6 +43,7 @@ export default compose(storeLogger(),combineReducers)({
items: itemListReducer,
wishlistItems: wishListReducer,
menuList: menuReducer,
savedCards: cardListReducer,
category: categoryReducer,
subcategory: subCategoryReducer,
......
import {Action} from '@ngrx/store';
import {Observable} from 'rxjs/Observable';
import {Card} from '../../user-card/card-manager/card.model';
import {SavedCardAction} from '../actions';
export type CardState = Card[];
const initialState: CardState = [];
export default function (state = initialState, action: Action): CardState {
switch (action.type) {
case SavedCardAction.LOAD_SAVED_CARDS_SUCCESS: {
console.log('reducer--payload',action.payload);
return action.payload;
}
case SavedCardAction.ADD_NEW_CARD_SUCCESS: {
return [...state, action.payload];
}
case SavedCardAction.DELETE_CARD_SUCCESS: {
return state.filter(card => {
return card.lineNo !== action.payload.lineNo;
});
}
case SavedCardAction.RESET_CARD: {
return initialState;
}
default: {
return state;
}
}
}
\ No newline at end of file
......@@ -7,7 +7,7 @@
max-width: 75rem;
margin-left: auto;
margin-right: auto;
min-height: 480px;
min-height: calc(100% - 120px);
padding-bottom: 75px;
}
......
......@@ -29,6 +29,11 @@
min-width: 166px;
}
.card-save-button[disabled] {
background: #e0e0e0;
color: #fff;
}
.card-delete-button {
height: 50px;
......
......@@ -11,12 +11,12 @@
</button>
</div>
<div class="showADDCard" *ngIf="showAdd">
<card-screen [editMode] = "editMode" [card]='newCard' ></card-screen>
<card-screen #cardScreen [editMode] = "editMode" [card]='newCard' ></card-screen>
<div class="card-cancel-save-button">
<button md-button class="card-cancel-button" (click)="cancel();" >
Cancel
</button>
<button md-button class="card-save-button" (click)="save();" >
<button md-button class="card-save-button" *ngIf="childForm" [disabled]="!childForm.valid" (click)="save();" >
Save
</button>
</div>
......
import { Component,Input, Output, EventEmitter, ViewEncapsulation, OnInit, ElementRef } from '@angular/core';
import { Component,Input, Output, EventEmitter, ViewEncapsulation, OnInit, ElementRef, ViewChild } from '@angular/core';
import { Card } from './card.model';
import { IScreenEditor } from '../screen-editor';
import { CardScreenComponent } from './card-screen/card-screen.component';
@Component({
selector: 'card-manager',
templateUrl: './card-manager.component.html',
......@@ -20,6 +22,9 @@ export class CardEditor implements OnInit, IScreenEditor {
@Output() onSave : EventEmitter<Card> = new EventEmitter<Card>();
@Output() onDiscard : EventEmitter<Card> = new EventEmitter<Card>();
@ViewChild('cardScreen') child: CardScreenComponent;
public childForm;
newCard : Card;
oldCard : Card;
showAdd : boolean = false;
......@@ -32,6 +37,12 @@ export class CardEditor implements OnInit, IScreenEditor {
console.log("ID", this.editorId );
}
ngAfterViewChecked(): void {
if ( this.showAdd ) {
this.childForm = this.child.cardForm;
}
}
addNew(){
this.newCard = new Card();
......@@ -77,7 +88,7 @@ export class CardEditor implements OnInit, IScreenEditor {
}
remove(){
this.onDelete.emit(this.card);
}
simpleClone(obj: any) {
......
......@@ -6,6 +6,8 @@
.user-bank-info{
display: inline-block;
padding-left: 24px;
font-size: 13px;
line-height: 18px;
}
.cardtype{
display: table;
......@@ -14,18 +16,38 @@
color: dimgray;
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
}
.atm-card-img{
display: inline-block;
width: 94px;
}
/* ------------------ ------------------*/
.bname{
.bname {
display: table;
}
.bnumber-span {
font-size: 15px;
}
.pay-svcp-icon {
position: absolute;
top: 2px;
right: 5px;
width: 40px;
height: 100%;
padding-bottom: 5px;
}
.ecm-card-icon {
width: 80px;
height: 50px;
vertical-align: middle;
}
/*------------------------------- UPDATED CSS -------------------------------------------------*/
......
......@@ -2,41 +2,48 @@
</ng-container>
<ng-template #displayTemplate>
<div class="atm-card-img">
<img class="ecm-card-icon" src="/ecm/assets/images/mastercard.png" />
</div>
<div class="user-bank-info">
<div class="bname">
<span class="bname-span">{{card?.bankname}} </span>
</div>
<div class="card-number">
<span class="bnumber-span">{{card?.cardnumber}} </span>
</div>
<div class="cardtype">
<span class="ctype-span">{{card?.cardtype}} </span>
</div>
</div>
<div class="atm-card-img">
<img class="ecm-card-icon" src="/ecm/assets/images/{{card?.payServiceProvider.trim()}}.png" />
</div>
<div class="user-bank-info">
<div class="bname">
<span class="bname-span">HDFC BANK LTD.{{card?.bankName}}</span>
</div>
<div class="card-number">
<span class="bnumber-span">{{format(card?.acctNumber)}} </span>
</div>
<div class="cardtype">
<span class="ctype-span">{{card?.payServiceProvider}} </span>
</div>
</div>
</ng-template>
<ng-template #interactiveTemplate>
<div class="row">
<form [formGroup]="cardForm" (ngSubmit)="submitCard(cardForm)">
<div class="small-6 medium-12 large-6 columns">
<bb-number [placeholder]="'Card Number'" [(ngModel)]="card.cardnumber"></bb-number>
<md-form-field>
<input mdInput formControlName="creditCard" id="cc-number" name="acctNumber" [(ngModel)]="card.acctNumber" [placeholder]="'Card Number'" [required]="true" (changeType)="changeType($event);" (setCardLength)="setCardLength($event)" type="text" autocomplete="cc-number" ccNumber>
<img *ngIf="card.payServiceProvider && card.payServiceProvider!='unknown'" class="pay-svcp-icon" src="/ecm/assets/images/{{card?.payServiceProvider.trim()}}.png" />
</md-form-field>
</div>
<div class="small-6 medium-6 large-3 columns">
<bb-textbox [placeholder]="'Expiry'"></bb-textbox>
<md-form-field [floatPlaceholder]="'never'">
<input mdInput formControlName="expiryMonth" id="cc-month" name="expiryMonth" [(ngModel)]="card.expiryMonth" [placeholder]="'MM'" type="number">
</md-form-field>
</div>
<div class="small-6 medium-6 large-3 columns">
<bb-textbox class="year"></bb-textbox>
<md-form-field [floatPlaceholder]="'never'">
<input mdInput formControlName="expiryYear" id="cc-year" name="expiryYear" [(ngModel)]="card.expiryYear" [placeholder]="'YYYY'"type="number">
</md-form-field>
</div>
<div class="small-6 medium-12 large-6 columns">
<bb-textbox [placeholder]="'Cardholder Name'" [(ngModel)]="card.cardholdername"></bb-textbox>
<bb-textbox formControlName="acctName" [id]="'cc-name'" name="acctName" [(ngModel)]="card.acctName" [placeholder]="'Cardholder Name'"></bb-textbox>
</div>
</form>
</div>
</ng-template>
......
import { Component, OnInit, Input } from '@angular/core';
import { Component, OnInit, Input, ViewChild } from '@angular/core';
import { Card } from '../card.model';
import { NgForm, NgModel, FormBuilder, FormGroup, NgModelGroup, Validators } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import { Store } from '@ngrx/store';
import { AppState } from '../../../ecm-store/reducers';
import { CreditCardValidator } from 'base-blocks';
@Component({
@Component( {
selector: 'card-screen',
templateUrl: './card-screen.component.html',
styleUrls: ['./card-screen.component.css']
})
export class CardScreenComponent implements OnInit {
@Input() editMode : string = 'V';
@Input() card : Card;
@Input() editMode: string = 'V';
@Input() card: Card;
//@ViewChild('savecard') form: NgForm;
cardForm: FormGroup;
cardLength = 16;
currentTime = new Date();
currentYear: number = this.currentTime.getFullYear();
constructor( private store: Store<AppState>, private _fb: FormBuilder ) { }
ngOnInit() {
this.cardForm = this._fb.group({
creditCard: ['', [<any>CreditCardValidator.validateCCNumber]],
expiryMonth: ['', [<any>Validators.required, <any>Validators.min(1), <any>Validators.max(12)]],
expiryYear: ['', [<any>Validators.required, <any>Validators.min(this.currentYear)]],
acctName: ['', [<any>Validators.required]]
});
console.log('this.card.acctNumber.trim()',this.card.acctNumber.trim());
this.card.acctNumber = this.replaceFullWidthChars(this.card.acctNumber.trim());
//this.form.addFormGroup(dir)
}
changeType($event){
constructor( private store: Store<AppState>) { }
this.card.payServiceProvider = $event ;
ngOnInit() {
console.log('Type==>',$event);
}
setCardLength($event){
this.cardLength = $event + 3;
console.log('Card Length==>',$event);
}
format(value: string) {
return value.replace(/ /g, '-');
}
submitCard(card) {
console.log('Submitted Card Data', card);
}
public replaceFullWidthChars(str) {
if (str === null) {
str = '';
}
let chr,
idx,
fullWidth = '\uff10\uff11\uff12\uff13\uff14\uff15\uff16\uff17\uff18\uff19',
halfWidth = '0123456789',
value = '',
chars = str.split('');
for (let i = 0; i < chars.length; i++) {
chr = chars[i];
idx = fullWidth.indexOf(chr);
if (idx > -1) {
chr = halfWidth[idx];
}
value += chr;
}
return value;
}
}
export class Card {
public id: string = 'ADDR_' + Math.random();
constructor(
constructor(
public bankname: string = '',
public cardnumber: string = '',
public cardtype: string = '',
public cardholdername: string = '') {
}
public bankName: string = '',
public acctNumber: string = '',
public payServiceProvider: string = '',
public acctName: string = '',
public expiryMonth: string = '',
public expiryYear: string = '',
public lineNo: string = '',
public payMthdType: string = '',
public entityType: string = ''
) {
}
}
......@@ -5,128 +5,131 @@ import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import { Store } from '@ngrx/store';
import {AppState} from '../ecm-store/reducers';
import { SavedCardAction} from '../ecm-store/actions';
import { AppState } from '../ecm-store/reducers';
import { SavedCardAction } from '../ecm-store/actions';
import { Card } from './card-manager/card.model';
@Injectable()
export class UserCardService {
private userActionUrl = '';
private userActionUrl = '/ecm/service/feeds/';
userCard: Card[];
constructor(private http: Http, private store: Store<AppState>, private savedcardActions: SavedCardAction) { }
constructor( private http: Http, private store: Store<AppState>, private savedcardActions: SavedCardAction ) { }
loadUserCard(){
this.fetchUserInfo().subscribe(
loadUserCard() {
this.fetchUserCards().subscribe(
data => {
this.userCard = data;
if ( data && data != null ) {
this.userCard.forEach( userCard => {
this.store.dispatch(this.savedcardActions.addNewCard(userCard));
this.store.dispatch( this.savedcardActions.addNewCard( userCard ) );
})
}
});
}
fetchUserInfo(): Observable<Card[]> {
fetchUserCards(): Observable<Card[]> {
let headers = new Headers( { 'Content-Type': 'application/json' });
let options = new RequestOptions( { headers: headers });
return this.http.get( this.userActionUrl, options )
.map( (res) => this.extractData(res) );
return this.http.get( this.userActionUrl+'cards', options )
.map(( res ) => this.extractData( res ) );
}
updateUserCard( userCard ) {
console.log( "StoreInCard Called" );
console.log(JSON.stringify(userCard));
console.log( JSON.stringify( userCard ) );
let headers = new Headers( { 'Content-Type': 'application/json' });
let options = new RequestOptions( { headers: headers });
return this.http.post( '', JSON.stringify( userCard ), options )
.map(( res ) => this.extractData( res ) );
}
addUserCard( card ){
console.log( "AddCardService Called" );
console.log( JSON.stringify( card ) );
let headers = new Headers( { 'Content-Type': 'application/json' });
let options = new RequestOptions( { headers: headers });
return this.http.post( '', JSON.stringify(userCard) , options)
.map( (res) => this.extractData(res) );
return this.http.post( this.userActionUrl+'card/', JSON.stringify( card ), options )
.map(( res ) => this.extractData( res ) );
}
deleteCartItem( userReview ) {
console.log( "deleteUserreview Called" );
return this.http.delete( this.userActionUrl + '/' + userReview.userCode, {})
.map(res => res.json());
deleteUserCard( card: Card ) {
console.log( "deleteUserCard Called", card);
return this.http.delete( this.userActionUrl + 'card/' + card.lineNo, {})
.map( res => res.json() );
}
private extractData(res: Response) {
private extractData( res: Response ) {
let respJson = res.json();
console.log('extracData',respJson);
if(respJson != null)
{
for( let key of Object.keys( respJson ) )
{
console.log( 'extracData', respJson );
if ( respJson != null ) {
for ( let key of Object.keys( respJson ) ) {
console.log( "getUserCard Card ==> key: " + key )
let data = respJson[key];
try
{
try {
respJson[key] = JSON.parse( data );
console.log( "getUserCard Card try : " + respJson[key] );
}
catch(e)
{
console.log( "getUserCard Card ==> key: " ,data, typeof data === 'object')
if(typeof data === 'object')
respJson[key] = this.formatObject(data);
catch ( e ) {
console.log( "getUserCard Card ==> key: ", data, typeof data === 'object' )
if ( typeof data === 'object' )
respJson[key] = this.formatObject( data );
else
respJson[key] = data;
console.log( "getUserCard Card catch : " + respJson[key] );
}
}
console.log('extractData[' + JSON.stringify(respJson) + ']');
console.log( 'extractData[' + JSON.stringify( respJson ) + ']' );
}
return respJson || { };
return respJson || {};
}
formatObject(respJson: any) {
formatObject( respJson: any ) {
console.log('formatObject',respJson);
if(respJson != null)
{
for( let key of Object.keys( respJson ) )
{
console.log( 'formatObject', respJson );
if ( respJson != null ) {
for ( let key of Object.keys( respJson ) ) {
console.log( "formatObject Card ==> key: " + key )
let data = respJson[key];
try
{
try {
respJson[key] = JSON.parse( data );
console.log( "formatObject Card try : " + respJson[key] );
}
catch(e)
{
catch ( e ) {
respJson[key] = data;
console.log( "formatObject Card catch : " + respJson[key] );
}
}
console.log('formatObject[' + JSON.stringify(respJson) + ']');
console.log( 'formatObject[' + JSON.stringify( respJson ) + ']' );
}
return respJson || { };
return respJson || {};
}
private handleError (error: Response | any) {
private handleError( error: Response | any ) {
// In a real world app, we might use a remote logging infrastructure
let errMsg: string;
if (error instanceof Response) {
if ( error instanceof Response ) {
const body = error.json() || '';
const err = body.error || JSON.stringify(body);
const err = body.error || JSON.stringify( body );
errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
} else {
errMsg = error.message ? error.message : error.toString();
}
console.error('Service handleError:' + errMsg);
return Observable.throw(errMsg);
console.error( 'Service handleError:' + errMsg );
return Observable.throw( errMsg );
}
......
......@@ -3,10 +3,10 @@
(onDiscard) = 'onDiscard($event)' >
</card-manager>
<div class="user-card-all-info" *ngFor = "let card of cardList" >
<div class="user-card-all-info" *ngFor = "let card of cardList | async" >
<card-manager [id] = "card.id" [editorId] = "card.id" [card] = "card"
(onSave) = 'onSaveClick($event)'
(onDiscard) = 'onDiscard($event)' >
(onDiscard) = 'onDiscard($event)' (onDelete)="onDeleteCard($event);">
</card-manager>
</div>
......@@ -15,20 +15,20 @@ import { SavedCardAction} from '../ecm-store/actions';
})
export class UserCardComponent implements OnInit {
cardList: Observable<Card[]>;
@ViewChildren(CardEditor) cardEditors: QueryList<CardEditor>
cardList: Card[]= [
new Card('HDFC BANK LTD','55555-XXXXXX-1235','Credit Card',''),
new Card('ICICI BANK LTD','55555-XXXXXX-1235','Credit Card','')
];
newCard: Card = new Card();
userCard : Observable<Card[]>;
constructor(private store: Store<AppState>, private cardActions: SavedCardAction){}
constructor(private store: Store<AppState>, private cardActions: SavedCardAction){
this.store.dispatch(this.cardActions.loadSavedCards());
}
ngOnInit() {
this.cardList = this.store.select('savedCards');
localStorage.removeItem('editorId');
}
......@@ -48,16 +48,25 @@ export class UserCardComponent implements OnInit {
}
// onAddNew(card: Card)
onAddNew()
onAddNew( newCard: Card )
{
// this.cardList.push( card );
// console.log('On Save Click From Add New ', card);
this.store.dispatch(this.cardActions.addNewCard(this.userCard));
console.log('On Save Click From Add New--', newCard);
let lineNo = this.getMaxLineNo();
newCard.payMthdType = "1";
newCard.lineNo = lineNo + '';
newCard.acctNumber.trim();
console.log('cardnumber--',newCard.acctNumber);
this.store.dispatch(this.cardActions.addNewCardSuccess(newCard));
}
onDeleteCard(){
this.store.dispatch(this.cardActions.deleteCard(this.userCard));
onDeleteCard(card: Card){
console.log('delete card of user-card-component:', card);
this.store.dispatch(this.cardActions.deleteCardSuccess(card));
}
onDiscard(editorId: string)
......@@ -72,4 +81,20 @@ export class UserCardComponent implements OnInit {
//TODO Call POST service (address)
}
getMaxLineNo() : number {
let maxLineNo = 0;
this.cardList.forEach(cards => {
cards.forEach( card => {
if(Number(card.lineNo) > maxLineNo){
maxLineNo = Number(card.lineNo);
}
})
});
console.log('maxLineno--',maxLineNo);
return maxLineNo + 1;
}
}
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