Updated

git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174481 ce508802-f39f-4f6c-b175-0d175dae99d5

ecm/Angular/ProteusECM/trunk/src/app/ecm-store/actions/saved-card.ts

@@ -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
         };
     }
 }

ecm/Angular/ProteusECM/trunk/src/app/ecm-store/effects/saved-card.ts

@@ -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));
     
 }

ecm/Angular/ProteusECM/trunk/src/app/ecm-store/reducers/cart-list.ts

 import {Action} from '@ngrx/store';
-import {Observable} from 'rxjs/Observable';
 
 import {ItemDetail} from '../../ecm-model/product-detail-model';
 import {CartActions} from '../actions';

ecm/Angular/ProteusECM/trunk/src/app/ecm-store/reducers/index.ts

@@ -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,

ecm/Angular/ProteusECM/trunk/src/app/ecm-store/reducers/saved-card-list.ts

+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

ecm/Angular/ProteusECM/trunk/src/app/my-profile/my-profile.component.css

@@ -7,7 +7,7 @@
     max-width: 75rem;
     margin-left: auto;
     margin-right: auto;
-    min-height: 480px;
+    min-height: calc(100% - 120px);
     padding-bottom: 75px;
 }
 

ecm/Angular/ProteusECM/trunk/src/app/user-card/card-manager/card-manager.component.css

@@ -29,6 +29,11 @@
     min-width: 166px;
  }
  
+ .card-save-button[disabled] {
+	background: #e0e0e0;
+    color: #fff;
+}
+
  
  .card-delete-button {
     height: 50px;

ecm/Angular/ProteusECM/trunk/src/app/user-card/card-manager/card-manager.component.html

@@ -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>

ecm/Angular/ProteusECM/trunk/src/app/user-card/card-manager/card-manager.component.ts

-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) {

ecm/Angular/ProteusECM/trunk/src/app/user-card/card-manager/card-screen/card-screen.component.css

@@ -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 -------------------------------------------------*/
 
 

ecm/Angular/ProteusECM/trunk/src/app/user-card/card-manager/card-screen/card-screen.component.html

@@ -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>
 

ecm/Angular/ProteusECM/trunk/src/app/user-card/card-manager/card-screen/card-screen.component.ts

-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;
+    }
 }

ecm/Angular/ProteusECM/trunk/src/app/user-card/card-manager/card.model.ts

 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 = ''
+            ) {
+    }
 }

ecm/Angular/ProteusECM/trunk/src/app/user-card/ecm-user-card.service.ts

@@ -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 );
     }
 
 

ecm/Angular/ProteusECM/trunk/src/app/user-card/user-card.component.html

@@ -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>
 

ecm/Angular/ProteusECM/trunk/src/app/user-card/user-card.component.ts

@@ -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;
+    }
+
 }