Commit ec58f044 authored by prumde's avatar prumde

Updated


git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174223 ce508802-f39f-4f6c-b175-0d175dae99d5
parent 5593a006
...@@ -26,10 +26,8 @@ export class AdressAction { ...@@ -26,10 +26,8 @@ export class AdressAction {
type: AdressAction.LOAD_ADDRESS_SUCCESS, type: AdressAction.LOAD_ADDRESS_SUCCESS,
payload: userAddresses payload: userAddresses
}; };
} }
static ADD_NEW_ADDRESS = '[Address] Add new Address'; static ADD_NEW_ADDRESS = '[Address] Add new Address';
addNewAdddress(userAddress): Action { addNewAdddress(userAddress): Action {
return { return {
......
...@@ -32,7 +32,7 @@ export class AddressEffects { ...@@ -32,7 +32,7 @@ export class AddressEffects {
// .map(userAddress => this.addressActions.updateAddressSuccess(userAddress)); // .map(userAddress => this.addressActions.updateAddressSuccess(userAddress));
@Effect() deleteAddress$ = this.update$ @Effect() deleteAddress$ = this.update$
.ofType(AdressAction.DELETE_ADDRESS) .ofType(AdressAction.DELETE_ADDRESS_SUCCESS)
.map(action => action.payload) .map(action => action.payload)
.switchMap(userAddress => this.svc.deleteUserAddress(userAddress)); .switchMap(userAddress => this.svc.deleteUserAddress(userAddress));
// .map(userAddress => this.addressActions.deleteAddressSuccess(userAddress)); // .map(userAddress => this.addressActions.deleteAddressSuccess(userAddress));
......
...@@ -24,6 +24,10 @@ ...@@ -24,6 +24,10 @@
border-radius: 3px; border-radius: 3px;
min-width: 120px; min-width: 120px;
} }
.save-button[disabled]{
background: #e0e0e0;
color: #fff;
}
.edit-button { .edit-button {
display: inline-block; display: inline-block;
...@@ -35,9 +39,7 @@ ...@@ -35,9 +39,7 @@
padding-right: 20px; padding-right: 20px;
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
} }
.delete-button { .delete-button {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
......
...@@ -10,11 +10,11 @@ ...@@ -10,11 +10,11 @@
<i class="material-icons add-icon">add</i>Add a new Address <i class="material-icons add-icon">add</i>Add a new Address
</button> </button>
<div class="showADD" style="padding: 12px;" *ngIf="showAdd"> <div class="showADD" style="padding: 12px;" *ngIf="showAdd">
<address-screen [editMode] = "editMode" [address]='newAddress' ></address-screen> <address-screen #addrAddScreen [editMode] = "editMode" [address]='newAddress' ></address-screen>
<button md-button class="cancel-button" (click)="cancel();" > <button md-button class="cancel-button" (click)="cancel();" >
Cancel Cancel
</button> </button>
<button md-button class="save-button" (click)="save();" > <button md-button class="save-button" *ngIf="addForm" [disabled]="!addForm.valid" (click)="save();">
Save Save
</button> </button>
</div> </div>
...@@ -23,23 +23,23 @@ ...@@ -23,23 +23,23 @@
<ng-template #editScreen> <ng-template #editScreen>
<address-screen [editMode] = "editMode" [address]='address'></address-screen> <address-screen #addrEditScreen [editMode] = "editMode" [address]='address'></address-screen>
<div class="remove-edit-button" *ngIf="editMode == 'V' "> <div class="remove-edit-button" *ngIf="editMode == 'V' ">
<button md-button class="delete-button" (click)="remove();" > <button md-button class="delete-button" (click)="remove();" >
<i class="material-icons delete-icon">delete</i> <i class="material-icons delete-icon">delete</i>
</button> </button>
<button md-button class="edit-button" (click)="edit();" > <button md-button class="edit-button" (click)="edit();" >
<i class="material-icons edit-icon">edit</i> Edit <i class="material-icons edit-icon">edit</i> Edit
</button> </button>
</div> </div>
<div class="edit-save" *ngIf="editMode == 'E' "> <div class="edit-save" *ngIf="editMode == 'E' ">
<button md-button class="cancel-button" (click)="cancel(); " > <button md-button class="cancel-button" (click)="cancel(); " >
Cancel Cancel
</button> </button>
<button md-button class="save-button" (click)="save(); " > <button md-button class="save-button" *ngIf="editForm" [disabled]=" !editForm.valid || !editForm.dirty " (click)="save();">
Save Save
</button> </button>
</div> </div>
</ng-template> </ng-template>
\ No newline at end of file
import { Component, Input, Output, EventEmitter, ViewEncapsulation, OnInit, ElementRef } from '@angular/core'; import { Component, Input, Output, EventEmitter, ViewEncapsulation, OnInit, ElementRef,ViewChild } from '@angular/core';
import { Address } from './address.model'; import { Address } from './address.model';
import { IScreenEditor } from '../screen-editor'; import { IScreenEditor } from '../screen-editor';
import { AddressScreenComponent } from './address-screen/address-screen.component';
@Component({ @Component({
selector: 'address-manager', selector: 'address-manager',
templateUrl: './address-manager.component.html', templateUrl: './address-manager.component.html',
...@@ -19,6 +21,11 @@ export class AddressEditor implements OnInit, IScreenEditor { ...@@ -19,6 +21,11 @@ export class AddressEditor implements OnInit, IScreenEditor {
@Output() onSave : EventEmitter<Address> = new EventEmitter<Address>(); @Output() onSave : EventEmitter<Address> = new EventEmitter<Address>();
@Output() onDiscard : EventEmitter<string> = new EventEmitter<string>(); @Output() onDiscard : EventEmitter<string> = new EventEmitter<string>();
@ViewChild('addrAddScreen') addScreen: AddressScreenComponent;
@ViewChild('addrEditScreen') editScreen: AddressScreenComponent;
public addForm;
public editForm;
newAddress : Address; newAddress : Address;
oldAddress : Address; oldAddress : Address;
showAdd : boolean = false; showAdd : boolean = false;
...@@ -72,7 +79,7 @@ export class AddressEditor implements OnInit, IScreenEditor { ...@@ -72,7 +79,7 @@ export class AddressEditor implements OnInit, IScreenEditor {
} }
remove(){ remove(){
this.onDelete.emit(this.address);
} }
simpleClone(obj: any) { simpleClone(obj: any) {
...@@ -93,4 +100,18 @@ export class AddressEditor implements OnInit, IScreenEditor { ...@@ -93,4 +100,18 @@ export class AddressEditor implements OnInit, IScreenEditor {
} }
return true; return true;
} }
ngAfterViewChecked(): void {
console.log("ngAfterViewChecked disable save button before")
if ( this.showAdd ) {
this.addForm = this.addScreen.addressForm;
console.log("ngAfterViewChecked disable save button After", this.addForm , this.editForm);
}
if( this.editMode == 'E' ) {
this.editForm = this.editScreen.addressForm;
console.log("ngAfterViewChecked disable save button After", this.addForm , this.editForm);
}
}
} }
...@@ -11,11 +11,11 @@ ...@@ -11,11 +11,11 @@
<span class="billing-tag" *ngIf=" address.addrUse == 'B' || address.addrUse == 'A' " >Billing</span> <span class="billing-tag" *ngIf=" address.addrUse == 'B' || address.addrUse == 'A' " >Billing</span>
</div> </div>
<div class="name"> <div class="name">
<span class="name-span">{{address?.firstname}} {{address?.lastname}}</span> <span class="name-span">{{address?.firstName}} {{address?.lastName}}</span>
</div> </div>
<div> <div>
<span class="address-span">{{address?.addr1}}, {{address?.addr2}}, {{address?.addr3}}, {{address?.city}}, </span> <span class="address-span">{{address?.addr1}}, {{address?.addr2}}, {{address?.addr3}}, {{address?.city}}, </span>
<span class="address-span">{{address?.state}} - {{address?.pincode}}. </span> <span class="address-span">{{address?.stateDescr}} - {{address?.pinCode}} - {{address?.countDescr}}. </span>
</div> </div>
<div> <div>
<span class="mail-span">{{address?.emailId}} </span> <span class="mail-span">{{address?.emailId}} </span>
...@@ -28,69 +28,90 @@ ...@@ -28,69 +28,90 @@
<ng-template #interactiveTemplate> <ng-template #interactiveTemplate>
<div class="row"> <div class="row">
<div class="user-current-location" > <form #userAddress="ngForm">
<button class="user-location-container"> <div class="user-current-location" >
<i class="material-icons user-location-icon">&#xE0C8;</i> <span (click)="updateuserLocation();" class="user-location-link"> Use current location </span> <button class="user-location-container">
</button> <i class="material-icons user-location-icon">&#xE0C8;</i> <span (click)="updateuserLocation();" class="user-location-link"> Use current location </span>
</div> </button>
</div>
<div class="small-6 medium-6 large-3 columns">
<bb-textbox [placeholder]="'First Name'" [(ngModel)]="address.firstname"></bb-textbox> <div class="small-6 medium-6 large-3 columns">
</div> <bb-textbox [placeholder]="'First Name'" [required]="true" [(ngModel)]="address.firstName" name="firstName"></bb-textbox>
<div class="small-6 medium-6 large-3 columns"> </div>
<bb-textbox [placeholder]="'Last Name'" [(ngModel)]="address.lastname"></bb-textbox> <div class="small-6 medium-6 large-3 columns">
</div> <bb-textbox [placeholder]="'Last Name'" [required]="true" [(ngModel)]="address.lastName" name="lastName"></bb-textbox>
</div>
<div class="small-12 medium-12 large-6 columns">
<bb-textbox [placeholder]="'Address Line 1'" [(ngModel)]="address.addr1"></bb-textbox> <div class="small-12 medium-12 large-6 columns">
</div> <bb-textbox [placeholder]="'Locality, Area or Street name'" [required]="true" [(ngModel)]="address.addr1" name="addr1"></bb-textbox>
</div>
<div class="small-12 medium-12 large-6 columns">
<bb-textbox [placeholder]="'Address Line 2'" [(ngModel)]="address.addr2"></bb-textbox> <div class="small-12 medium-12 large-6 columns">
</div> <bb-textbox [placeholder]="'Flat No., Building Name'" [required]="true" [(ngModel)]="address.addr2" name="addr2"></bb-textbox>
<div class="small-12 medium-12 large-6 columns"> </div>
<bb-textbox [placeholder]="'Landmark (Optional)'" [(ngModel)]="address.addr3"></bb-textbox> <div class="small-12 medium-12 large-6 columns">
</div> <bb-textbox [placeholder]="'Landmark (Optional)'" [(ngModel)]="address.addr3" name="addr3"></bb-textbox>
</div>
<div class="small-6 medium-6 large-3 columns">
<bb-textbox [placeholder]="'City'" [(ngModel)]="address.city"></bb-textbox> <div class="small-6 medium-6 large-3 columns">
</div> <bb-textbox [placeholder]="'City'" [required]="true" [(ngModel)]="address.city" name="city"></bb-textbox>
<div class="small-6 medium-6 large-3 columns"> </div>
<bb-textbox [placeholder]="'Pincode'" [(ngModel)]="address.pincode"></bb-textbox> <div class="small-6 medium-6 large-3 columns">
</div> <bb-textbox [placeholder]="'Pincode'" [required]="true" [(ngModel)]="address.pinCode" name="pinCode"></bb-textbox>
</div>
<div class="small-6 medium-6 large-3 columns">
<bb-textbox [placeholder]="'State'" [(ngModel)]="address.state"></bb-textbox> <div class="small-6 medium-6 large-3 columns">
</div> <!-- <bb-textbox [placeholder]="'State'" [(ngModel)]="address.stateCode"></bb-textbox> -->
<div class="small-6 medium-6 large-3 columns">
<bb-textbox [placeholder]="'Country'" [(ngModel)]="address.country"></bb-textbox> <md-input-container>
</div> <input mdInput type="text" placeholder="State" name="state" [formControl]="stateCtrl" [required]="true" [(ngModel)]="address.stateDescr" [mdAutocomplete]="stateAuto" />
<md-autocomplete #stateAuto>
<div class="small-6 medium-6 large-6 columns"> <md-option *ngFor="let state of stateOptions" [value]="state.descr"
<bb-textbox [placeholder]="'Alternate Phone (Optional)'" [(ngModel)]="address.contactNo"></bb-textbox> (click)="address.stateCode = state.stateCode; "
</div> (onSelect)="address.stateCode = state.stateCode; ">{{state.descr}}</md-option>
</md-autocomplete>
<div class="small-6 medium-6 large-6 columns"> </md-input-container>
<bb-email [placeholder]="'Email ID (Optional)'" [(ngModel)]="address.emailId"></bb-email> </div>
</div>
<div class="small-6 medium-6 large-3 columns">
<div class="small-12 medium-12 large-10 columns"> <!-- <bb-textbox [placeholder]="'Country'" [(ngModel)]="address.countCode"></bb-textbox> -->
<span class="adress-type">Address Type</span>
<md-radio-group [(ngModel)]="address.addrType" > <md-input-container>
<md-radio-button class="home" value="R" >Home</md-radio-button> <input mdInput type="text" placeholder="Country" name="country" [formControl]="countryCtrl" [required]="true" [(ngModel)]="address.countDescr" [mdAutocomplete]="countryAuto" />
<md-radio-button class="off-commercial" value="O" >Office/Commercial</md-radio-button> <md-autocomplete #countryAuto>
</md-radio-group> <md-option *ngFor="let country of countryOptions" [value]="country.descr"
</div> (click)="address.countCode = country.countCode; "
(onSelect)="address.countCode = country.countCode; ">{{country.descr}}</md-option>
<div class="small-12 medium-12 large-10 columns ecm-user-advance-info"> </md-autocomplete>
<span class="advance-type">Advance</span> </md-input-container>
<section class="adress-use"> </div>
<md-checkbox class="addrUse-check" [checked] = " address.addrUse == 'D' || address.addrUse == 'A' " (change) = "updateAddrUseD( $event );" >Set as delivery address</md-checkbox>
<md-checkbox class="addrUse-check" [checked] = " address.addrUse == 'B' || address.addrUse == 'A' " (change) = "updateAddrUseB( $event );" >Set as billing address</md-checkbox> <div class="small-6 medium-6 large-6 columns">
<md-checkbox class="default-check" [checked] = " address.isDefault == 'Y' " (change) = "updateDefault( $event );" >Set as default</md-checkbox> <bb-textbox [placeholder]="'Alternate Phone (Optional)'" [(ngModel)]="address.contactNo" name="contactNo"></bb-textbox>
</section> </div>
</div>
<div class="small-6 medium-6 large-6 columns">
<bb-email [placeholder]="'Email ID (Optional)'" [(ngModel)]="address.emailId" name="emailId"></bb-email>
</div>
<div class="small-12 medium-12 large-10 columns">
<span class="adress-type">Address Type</span>
<md-radio-group [(ngModel)]="address.addrType" name="addrType" >
<md-radio-button class="home" value="R" >Home</md-radio-button>
<md-radio-button class="off-commercial" value="O" >Office/Commercial</md-radio-button>
</md-radio-group>
</div>
<div class="small-12 medium-12 large-10 columns ecm-user-advance-info">
<span class="advance-type">Advance</span>
<section class="adress-use">
<md-checkbox class="addrUse-check" name="addrUseDel" [ngModel] = " address.addrUse == 'D' || address.addrUse == 'A' " (change) = "updateAddrUseD( $event );" >Set as delivery address</md-checkbox>
<md-checkbox class="addrUse-check" name="addrUseBill" [ngModel] = " address.addrUse == 'B' || address.addrUse == 'A' " (change) = "updateAddrUseB( $event );" >Set as billing address</md-checkbox>
<md-checkbox class="default-check" name="addrDefault" [ngModel] = " address.isDefault == 'Y' " (change) = "updateDefault( $event );" >Set as default</md-checkbox>
</section>
</div>
</form>
</div> </div>
</ng-template> </ng-template>
......
import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core'; import { Component, OnInit, Input, ViewEncapsulation, ViewChild } from '@angular/core';
import { Address } from '../address.model'; import { Address } from '../address.model';
import { EcmLocationService } from '../../../ecm-search/ecm-location.service'; import { EcmLocationService } from '../../../ecm-search/ecm-location.service';
import { EcmLocation } from '../../../ecm-search/ecm-location'; import { EcmLocation } from '../../../ecm-search/ecm-location';
import { Observable } from 'rxjs/Observable'; import { Observable } from 'rxjs/Observable';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { AppState } from '../../../ecm-store/reducers'; import { AppState } from '../../../ecm-store/reducers';
import { UserAddressService } from '../../ecm-user-address.service';
import { FormControl } from '@angular/forms';
import { NgForm, NgModel, FormBuilder, FormGroup, NgModelGroup, Validators } from '@angular/forms';
@Component({ @Component({
selector: 'address-screen', selector: 'address-screen',
...@@ -16,27 +19,75 @@ export class AddressScreenComponent implements OnInit { ...@@ -16,27 +19,75 @@ export class AddressScreenComponent implements OnInit {
@Input() editMode : string = 'V'; @Input() editMode : string = 'V';
@Input() address : Address; @Input() address : Address;
@ViewChild('userAddress') addressForm: NgForm;
public storeUserLocation : Observable<EcmLocation>; public storeUserLocation : Observable<EcmLocation>;
stateCtrl = new FormControl();
countryCtrl = new FormControl();
stateOptions;
countryOptions;
constructor(private locationService: EcmLocationService, private store: Store<AppState>) { } constructor(private locationService: EcmLocationService,private userAddressService: UserAddressService, private store: Store<AppState>) {
this.countryCtrl.valueChanges.debounceTime(100).subscribe((val: any) => {
console.log("Selected Value[" +val+ "]");
let trimmedVal = '';
if( val ){
trimmedVal = val.trim();
}
if(trimmedVal.length > 2)
{
this.userAddressService.getSuggestions('country', trimmedVal).subscribe(data => {
if( data )
{
this.countryOptions = data;
}
else
{
this.countryOptions = [];
}
});
}
});
this.stateCtrl.valueChanges.debounceTime(100).subscribe((val: any) => {
console.log("Selected Value[" +val+ "]");
let trimmedVal = '';
if( val ){
trimmedVal = val.trim();
}
if(trimmedVal.length > 2)
{
this.userAddressService.getSuggestions('state', trimmedVal).subscribe(data => {
if( data )
{
this.stateOptions = data;
}
else
{
this.stateOptions = [];
}
});
}
});
}
ngOnInit() { ngOnInit() {
this.storeUserLocation = this.store.select('location'); this.storeUserLocation = this.store.select('location');
} }
//TODO : for immediate response //For extracting User Location to Address
updateuserLocation() { updateuserLocation() {
this.locationService.getGeoLocation(); this.locationService.getGeoLocation();
this.storeUserLocation.subscribe( userLocation => { this.storeUserLocation.subscribe( userLocation => {
console.log("userlocation -----------",userLocation ); console.log("userlocation -----------",userLocation );
this.address.city = userLocation.city; this.address.city = userLocation.city;
this.address.pincode = userLocation.pincode; this.address.pinCode = userLocation.pincode;
this.address.state = userLocation.state; this.address.stateDescr = userLocation.state; //TODO : Mapped with STATE_CODE and its DESCR
this.address.country = userLocation. country; this.address.countDescr = userLocation.country; //TODO : Mapped with COUNT_CODE and its DESCR
console.log("adress -----------",this.address ); console.log("adress -----------",this.address );
}); });
...@@ -55,4 +106,9 @@ export class AddressScreenComponent implements OnInit { ...@@ -55,4 +106,9 @@ export class AddressScreenComponent implements OnInit {
updateDefault(evt) { updateDefault(evt) {
this.address.isDefault = evt.checked ? "Y" : "N"; this.address.isDefault = evt.checked ? "Y" : "N";
} }
submitAddress(userAddress) {
console.log('Submitted Address Data', userAddress);
}
} }
...@@ -2,8 +2,8 @@ export class Address { ...@@ -2,8 +2,8 @@ export class Address {
public id: string = 'ADDR_' + this.lineNo; public id: string = 'ADDR_' + this.lineNo;
constructor( constructor(
public userName:string = '', // firstName + lastName public userName:string = '', // firstName + lastName
public firstname:string = '', public firstName:string = '',
public lastname:string = '', public lastName:string = '',
public lineNo:string = '', // Record Number public lineNo:string = '', // Record Number
public isDefault:string = 'N', //Set Default address public isDefault:string = 'N', //Set Default address
public emailId:string = '', // Optional EMail Id public emailId:string = '', // Optional EMail Id
...@@ -11,12 +11,14 @@ export class Address { ...@@ -11,12 +11,14 @@ export class Address {
public addr2:string = '', // public addr2:string = '', //
public addr3:string = '', // Landmark (Optional) public addr3:string = '', // Landmark (Optional)
public city:string = '', // City name public city:string = '', // City name
public pincode:string = '', // Pin Area Code public pinCode:string = '', // Pin Area Code
public state:string = '', // State Name >> StateCode public stateCode:string = '', // State Code >> StateCode
public stateDescr:string = '', // State Name >> Description
public contactNo:string = '', // Optional Mobile No public contactNo:string = '', // Optional Mobile No
public addrType:string = '', public addrType:string = '',
public addrUse:string = '', public addrUse:string = '',
public country: string = '', // Country Name >> CountryCode public countCode: string = '', // Country Code >> CountryCode
public countDescr: string = '', // Country Name >> Description
public geoPos: string = '', // GeoPosition of an User's GPS Location ( i.e lg/lt ) public geoPos: string = '', // GeoPosition of an User's GPS Location ( i.e lg/lt )
public stanCode: string = '' public stanCode: string = ''
) { } ) { }
......
...@@ -49,10 +49,22 @@ export class UserAddressService { ...@@ -49,10 +49,22 @@ export class UserAddressService {
} }
deleteUserAddress( userAdress ) { deleteUserAddress( userAdress ) {
console.log( "deleteUserAddress Called" ); console.log( "deleteCartItem Called" );
console.log(JSON.stringify(userAdress));
return this.http.delete( this.userActionUrl + '/' + userAdress.userCode, {}) return this.http.delete( this.userActionUrl + '/address/' + userAdress.lineNo, {})
.map(res => res.json()); .map(res => res.json());
}
getSuggestions(field, value) {
console.log('Query:['+field+']['+value+']');
let suggestionUrl = '/ecm/service/sys/' + field + '/' + value;
let headers = new Headers( { 'Content-Type': 'application/json' });
let options = new RequestOptions( { headers: headers });
return this.http.get( suggestionUrl, options )
.map( (res) => this.extractData(res) )
.catch( this.handleError );
} }
......
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
<div class="adressList" *ngFor = "let address of addressList" > <div class="adressList" *ngFor = "let address of addressList" >
<address-manager [id] = "address.id" [editorId] = "address.id" [address] = "address" <address-manager [id] = "address.id" [editorId] = "address.id" [address] = "address"
(onSave) = 'onSaveClick($event)' (onSave) = 'onSaveClick($event)'
(onDelete) = 'deleteUserAddress($event)'
(onDiscard) = 'onDiscard($event)' > (onDiscard) = 'onDiscard($event)' >
</address-manager> </address-manager>
</div> </div>
......
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