Skip to content

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

Added New Components 


git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174213 ce508802-f39f-4f6c-b175-0d175dae99d5
parent 4f9439ac
Show whitespace changes
Inline Side-by-side
Showing with 3108 additions and 0 deletions
ecm/Angular/trunk/src/app/change-password/change-password.component.html 0 → 100755
View file @ b9fc61b1
<ecm-user-option [activeScreen]="'changePwdScreen'" [fullProfile]="true"></ecm-user-option>
<ecm-user-option [activeScreen]="'successForm'"></ecm-user-option>
\ No newline at end of file
ecm/Angular/trunk/src/app/change-password/change-password.component.spec.ts 0 → 100755
View file @ b9fc61b1
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ChangePasswordComponent } from './change-password.component';
describe('ChangePasswordComponent', () => {
let component: ChangePasswordComponent;
let fixture: ComponentFixture<ChangePasswordComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ChangePasswordComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ChangePasswordComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should be created', () => {
expect(component).toBeTruthy();
});
});
ecm/Angular/trunk/src/app/change-password/change-password.component.ts 0 → 100755
View file @ b9fc61b1
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-change-password',
templateUrl: './change-password.component.html',
styleUrls: ['./change-password.component.css']
})
export class ChangePasswordComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
ecm/Angular/trunk/src/app/my-profile/my-profile.component.css 0 → 100755
View file @ b9fc61b1
/*Desktop Interface*/
.desktop {
position: relative;
display: block;
width: 72rem;
top: 75px;
max-width: 75rem;
margin-left: auto;
margin-right: auto;
min-height: 480px;
padding-bottom: 75px;
}
.ecm-nav {
width: 25%;
height: 100%;
display: block;
float: left;
min-height: 450px;
}
.ecm-nav-content{
/* width: calc( 100% - 350px); */
width: 70%;
left: 25px;
max-height: 450px;
display: inline-block;
position: relative;
}
.ecm-nav > md-card,
.ecm-nav-content > md-card {
padding: 0;
box-shadow: none;
}
.md-tab-link {
width: 100%;
text-align: left;
height: 60px;
line-height: 60px;
box-shadow: 0 0 1px 0.5px #f2f2f2;
}
.selected {
background: #fafafa;
}
.my-prof-name {
display: block;
text-align: left;
text-transform: capitalize;
}
.my-prof-email {
display: block;
text-align: left;
font-size: 16px;
color: gray;
text-overflow: ellipsis;
overflow: hidden;
text-transform: lowercase;
}
.my-avatar {
width: 100%;
height: 120px;
position: relative;
padding: 0;
margin: 0;
overflow: hidden;
background: #fff;
box-shadow: 0px 0px 1px 1px #f2f2f2;
}
.my-avatar-info {
width: calc(100% - 120px);
height: 120px;
position: relative;
float: right;
padding: 35px 0;
margin: 0;
margin-right: 10px;
}
.my-avatar .profile-image-128{
width: 80px;
height: 80px;
}
.my-avatar .profile-image {
position: absolute;
padding: 0;
margin: 20px 10px 10px 20px;
-webkit-filter: contrast(100%) brightness(85%);
filter: contrast(100%) brightness(85%);
border-radius: 100%;
}
/*Mobile Interface*/
.mobile {
position: relative;
display: block;
width: 100%;
top: 75px;
min-height: 480px;
padding-bottom: 75px;
}
.mobile .ecm-nav-content {
width: 100%;
left: 0;
}
.expannd-panel-header {
text-align: left;
height: 60px !important;
box-shadow: 0px 0px 1px 1px #f2f2f2;
}
.mat-expansion-panel-header-description {
justify-content: space-between;
align-items: center;
margin-right: -8px !important;
}
.mat-expansion-panel-spacing {
margin: 0 !important;
}
.mobile .user-profile-info,
.mobile .user-saved-card-info,
.mobile .user-review-card,
.mobile .user-address-info {
display: none;
}
ecm/Angular/trunk/src/app/my-profile/my-profile.component.html 0 → 100755
View file @ b9fc61b1
<ecm-header [isFixedHeader]=true> </ecm-header>
<ecm-breadcrumbs [pageName]="'USERPROFILE'"></ecm-breadcrumbs>
<div *ngIf="clientWidth <= 639" class="mobile">
<ng-container *ngTemplateOutlet='myAvatar'></ng-container>
<md-accordion>
<ng-template ngFor let-link [ngForOf]="navLinks" >
<md-expansion-panel hideToggle="true" [expanded] = "link.isOpen" (closed) ="link.isOpen = false;" (opened) = "selectLink(link); ">
<md-expansion-panel-header class= "expannd-panel-header" [ngClass]="{selected: link.isOpen}">
<md-panel-title>
{{link.name}}
</md-panel-title>
<md-panel-description>
&nbsp;
<i *ngIf="link.isOpen" class="material-icons">keyboard_arrow_down</i>
<i *ngIf="!link.isOpen" class="material-icons">keyboard_arrow_right</i>
</md-panel-description>
</md-expansion-panel-header>
<div *ngIf="link.isOpen" class="ecm-nav-content" >
<router-outlet name="profile" ></router-outlet>
</div>
</md-expansion-panel>
</ng-template>
</md-accordion>
</div>
<div *ngIf="clientWidth > 640" class="desktop">
<div class="ecm-nav">
<md-card>
<ng-container *ngTemplateOutlet='myAvatar'></ng-container>
<a md-button *ngFor="let link of navLinks"
(click)="selectLink(link)" routerLinkActive
#rla="routerLinkActive" class="md-tab-link" [ngClass]="{selected: link.isOpen}">
{{link.name}}
</a>
</md-card>
</div>
<div class="ecm-nav-content" *ngIf="clientWidth > 640">
<md-card>
<router-outlet name="profile"></router-outlet>
</md-card>
</div>
</div>
<ecm-footer></ecm-footer>
<ng-template #myAvatar>
<div class="my-avatar" titile="Profile">
<img [src]="userData.profileImageLink" onerror="this.src = '/ecm/assets/images/w_user_128_128.png'; " class="profile-image profile-image-128" title="{{userData.NAME}}" />
<div class="my-avatar-info">
<span class="my-prof-name"> {{lowercase( userData.NAME ) }}</span>
<span class="my-prof-email"> {{userData.EMAIL_ID}} </span>
</div>
</div>
</ng-template>
\ No newline at end of file
ecm/Angular/trunk/src/app/my-profile/my-profile.component.ts 0 → 100755
View file @ b9fc61b1
import { Component, OnInit, ViewEncapsulation, Output, EventEmitter } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import { Store } from '@ngrx/store';
import { AppState } from '../ecm-store/reducers';
import { CartActions } from '../ecm-store/actions';
@Component({
selector: 'my-profile',
templateUrl: './my-profile.component.html',
styleUrls: ['./my-profile.component.css'],
encapsulation: ViewEncapsulation.None
})
export class MyProfileComponent implements OnInit {
clientWidth: number;
@Output() onDiscard : EventEmitter<string> = new EventEmitter<string>();
navLinks: Links[]
userData: any;
constructor(private router: Router , private route: ActivatedRoute) {
this.navLinks = [
{ name: 'Profile Info', navLink: 'userprofile', isOpen: false },
{ name: 'Manage Address', navLink: 'useraddress', isOpen: false },
{ name: 'Change Password', navLink: 'chgpassword', isOpen: false },
{ name: 'Saved Cards', navLink: 'usercard', isOpen: false },
{ name: 'My Reviews', navLink: 'userreview', isOpen: false }
];
}
ngOnInit() {
var userInfo = localStorage.getItem( 'userInfo' );
console.log( 'EcmUserOptionComponent getUserInfo ::' + userInfo );
if ( userInfo !== 'undefined' && userInfo !== null && userInfo !== 'null' ) {
this.userData = JSON.parse( userInfo );
}
console.log("the user data is ",this.userData);
this.clientWidth = document.documentElement.clientWidth;
RESIZE_EVENT.subscribe(data => {
this.clientWidth = data.width;
//console.log('this.clientWidth['+this.clientWidth+']this.clientHeight['+this.clientHeight+']');
});
//to open first link by default in desktop view
if( this.clientWidth > 640 ){
this.selectLink(this.navLinks[0]);
}
}
selectLink (link: Links) {
let navLink = link.navLink;
if( this.checkEditorStatus() ) {
for(let l of this.navLinks )
{
if( l.navLink == navLink )
{
l.isOpen = true;
}
else
{
l.isOpen = false;
}
}
console.log("navLink >>" , navLink, this.navLinks);
this.router.navigate(['/myprofile', {outlets: { 'profile' :[navLink] } } ], { relativeTo: this.route, skipLocationChange: true } );
}
}
checkEditorStatus() : boolean {
let cacheId = localStorage.getItem('editorId');
if( cacheId ) {
let choice = window.confirm("Discard current changes ?");
console.log('choice', choice);
if( choice ) {
localStorage.removeItem('editorId');
this.onDiscard.emit(cacheId);
console.log('cacheId element >>' , cacheId);
}
return choice;
}
return true;
}
lowercase(str : string) : string{
if( str )
return str.toLowerCase();
else
return str;
}
}
class Links {
name: string;
navLink: string;
isOpen: boolean;
}
const RESIZE_EVENT = Observable.fromEvent(window, 'resize')
.map(() => {
return { 'width' : document.documentElement.clientWidth, 'height' : document.documentElement.clientHeight };
})
.debounceTime(200);
\ No newline at end of file
ecm/Angular/trunk/src/app/user-address/address-manager/address-manager.component.css 0 → 100755
View file @ b9fc61b1
.cancel-button {
display: inline-block;
height: 40px;
line-height: 40px;
max-width: 190px;
text-align: center;
border-radius: 3px;
background: #fff;
color: mediumvioletred !important;
min-width: 120px;
box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
}
.save-button {
display: inline-block;
height: 40px;
line-height: 40px;
background: mediumvioletred;
color: #fff !important;
max-width: 190px;
text-align: center;
margin-left: 10px;
box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
border-radius: 3px;
min-width: 120px;
}
.edit-button {
display: inline-block;
height: 40px;
line-height: 40px;
text-align: center;
background: #fff;
color: mediumvioletred !important;
padding-right: 20px;
font-size: 12px;
font-weight: bold;
}
.delete-button {
height: 40px;
line-height: 40px;
text-align: center;
background: #fff;
padding-left: 70px;
color: dimgray;
}
.delete-icon{
font-size: 18px;
}
.edit-icon{
font-size: 16px;
}
.add-new-button {
display: inline-block;
height: 40px;
line-height: 40px;
max-width: 190px;
text-align: center;
margin-left: 10px;
box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
border-radius: 3px;
background: #fff;
color: mediumvioletred !important;
min-width: 120px;
}
/* ------------------ ------------------*/
.user-address-info{
border: 1px solid #f2f2f2;
border-top: 0px;
border-left: 0px;
border-right: 0px;
padding-bottom: 10px;
}
.address-info {
font-size: 18px;
}
.add-new-address-button{
border: 1px solid #f2f2f2;
border-top: 0px;
border-left: 0px;
border-right: 0px;
padding: 12px;
}
.add-icon{
vertical-align: text-top;
padding-right: 6px;
font-size: 18px;
}
.remove-edit-button{
text-align: right;
}
.user-address-info{
border: 1px solid #f2f2f2;
border-top: 0px;
padding: 12px;
}
.adress-info {
font-size: 18px;
}
@media screen and (max-width: 640px){
.save-button {
min-width: 100px !important;
}
.cancel-button {
min-width: 100px !important;
}
}
\ No newline at end of file
ecm/Angular/trunk/src/app/user-address/address-manager/address-manager.component.html 0 → 100755
View file @ b9fc61b1
<div *ngIf="editMode == 'A'; then addScreen; else editScreen; " ></div>
<ng-template #addScreen>
<div class="user-address-info">
<span class="adress-info">Manage Address</span>
</div>
<div class="add-new-address-button">
<button *ngIf="!showAdd" md-button class="add-new-button" (click)="addNew();" >
<i class="material-icons add-icon">add</i>Add a new Address
</button>
<div class="showADD" style="padding: 12px;" *ngIf="showAdd">
<address-screen [editMode] = "editMode" [address]='newAddress' ></address-screen>
<button md-button class="cancel-button" (click)="cancel();" >
Cancel
</button>
<button md-button class="save-button" (click)="save();" >
Save
</button>
</div>
</div>
</ng-template>
<ng-template #editScreen>
<address-screen [editMode] = "editMode" [address]='address'></address-screen>
<div class="remove-edit-button" *ngIf="editMode == 'V' ">
<button md-button class="delete-button" (click)="remove();" >
<i class="material-icons delete-icon">delete</i>
</button>
<button md-button class="edit-button" (click)="edit();" >
<i class="material-icons edit-icon">edit</i> Edit
</button>
</div>
<div class="edit-save" *ngIf="editMode == 'E' ">
<button md-button class="cancel-button" (click)="cancel(); " >
Cancel
</button>
<button md-button class="save-button" (click)="save(); " >
Save
</button>
</div>
</ng-template>
\ No newline at end of file
ecm/Angular/trunk/src/app/user-address/address-manager/address-manager.component.ts 0 → 100755
View file @ b9fc61b1
import { Component, Input, Output, EventEmitter, ViewEncapsulation, OnInit, ElementRef } from '@angular/core';
import { Address } from './address.model';
import { IScreenEditor } from '../screen-editor';
@Component({
selector: 'address-manager',
templateUrl: './address-manager.component.html',
styleUrls: ['./address-manager.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AddressEditor implements OnInit, IScreenEditor {
@Input() editorId : string;
@Input() editMode : string = 'V';
@Input() address : Address;
@Output() onDelete : EventEmitter<Address> = new EventEmitter<Address>();
@Output() onAddNew : EventEmitter<Address> = new EventEmitter<Address>();
@Output() onSave : EventEmitter<Address> = new EventEmitter<Address>();
@Output() onDiscard : EventEmitter<string> = new EventEmitter<string>();
newAddress : Address;
oldAddress : Address;
showAdd : boolean = false;
ngOnInit(){
console.log("ID", this.editorId );
}
addNew(){
if( this.checkEditorStatus() ) {
this.newAddress = new Address();
this.showAdd = true;
localStorage.setItem('editorId', this.editorId );
}
}
edit() {
if( this.checkEditorStatus() ) {
this.oldAddress = this.simpleClone( this.address );
this.editMode = 'E';
localStorage.setItem('editorId', this.editorId );
}
}
save(){
console.log('save', this.showAdd, this.address, this.newAddress);
if( this.showAdd ) {
this.onAddNew.emit(this.newAddress);
}
else {
this.onSave.emit(this.address);
}
console.log('save...');
this.showAdd = false;
this.newAddress = new Address();
localStorage.removeItem('editorId');
if( this.editMode == 'E'){
this.editMode = 'V';
}
}
cancel(){
this.showAdd = false;
//console.log('cancel', this.address, this.oldAddress);
this.address = this.oldAddress;
this.newAddress = new Address();
localStorage.removeItem('editorId');
if( this.editMode == 'E'){
this.editMode = 'V';
}
}
remove(){
}
simpleClone(obj: any) {
return Object.assign({}, obj);
}
checkEditorStatus() : boolean {
let cacheId = localStorage.getItem('editorId');
if( cacheId ) {
let choice = window.confirm("Discard current changes ?");
console.log('choice', choice);
if( choice ) {
localStorage.removeItem('editorId');
this.onDiscard.emit(cacheId);
console.log('cacheId element >>' , cacheId);
}
return choice;
}
return true;
}
}
ecm/Angular/trunk/src/app/user-address/address-manager/address-screen/address-screen.component.css 0 → 100755
View file @ b9fc61b1
.name-span{
color: #000;
font-weight: 600;
font-size: 12px;
}
.address-span{
color: #666;
display: block;
font-size: 12px;
}
.mail-span {
color: #666;
font-size: 12px;
display: block;
line-height: 32px;
text-transform: lowercase;
}
.contact-span{
color: #666;
font-size: 12px;
display: block;
}
.contact-span:before {
content: '+91 ';
}
/* ------------------ ------------------ */
.address-info {
font-size: 18px;
}
.user-home-delivery-option{
padding-bottom: 4px;
padding-top: 16px;
}
.home-icon{
font-size: 16px;
vertical-align: sub;
padding-right: 5px;
color: darkgray;
}
.name{
padding-bottom: 8px;
}
.adress-type, .advance-type{
display: block;
font-size: 10px;
font-weight: bold;
color: dimgray;
padding-bottom: 9px;
}
.adress-use{
display: flex;
flex-direction: column;
display: grid;
}
.default-check{
font-size: 14px;
}
.addrUse-check{
padding-bottom: 10px;
font-size: 14px;
}
.default-tag{
font-size: 10px;
background-color: yellow;
}
.delivery-tag, .billing-tag{
font-size: 10px;
background-color: deepskyblue;
position: relative;
left: 3px;
}
.home{
font-size: 16px;
width: 100px;
height: 36px;
}
.off-commercial{
font-size: 16px;
}
.ecm-user-advance-info{
padding-top: 20px;
padding-bottom: 20px;
}
.user-address-info{
border: 1px solid #f2f2f2;
border-top: 0px;
border-left: 0px;
border-right: 0px;
padding-bottom: 10px;
}
.adress-info {
font-size: 18px;
}
.user-current-location{
padding-bottom: 24px;
}
.user-location-container{
line-height: 40px;
text-align: center;
box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
border-radius: 3px;
color: white;
background-color: mediumvioletred;
width: 184px;
}
.user-location-icon{
font-size: 14px;
}
.user-location-link{
font-size: 12px;
vertical-align: top;
position: relative;
left: 4px;
}
.user-profile-current-location{
font-size: 14px;
padding-bottom: 10px;
}
.mobile .small-12 {
width: calc( 100% - .625rem - .625rem);
}
.mobile .small-6 {
width: calc( 50% - .625rem - .625rem );
}
.columns .mat-form-field {
width: 100% !important;
}
ecm/Angular/trunk/src/app/user-address/address-manager/address-screen/address-screen.component.html 0 → 100755
View file @ b9fc61b1
<ng-container *ngTemplateOutlet="editMode == 'V' ? displayTemplate : interactiveTemplate" >
</ng-container>
<ng-template #displayTemplate>
<div class="user-alladress-info">
<div class="user-home-delivery-option">
<i class="material-icons home-icon" *ngIf=" address.addrType == 'R' ">home</i>
<i class="material-icons home-icon" *ngIf=" address.addrType == 'O' ">work</i>
<span class="default-tag" *ngIf=" address.isDefault == 'Y' ">Default</span>
<span class="delivery-tag" *ngIf=" address.addrUse == 'D' || address.addrUse == 'A' " >Delivery</span>
<span class="billing-tag" *ngIf=" address.addrUse == 'B' || address.addrUse == 'A' " >Billing</span>
</div>
<div class="name">
<span class="name-span">{{address?.firstname}} {{address?.lastname}}</span>
</div>
<div>
<span class="address-span">{{address?.addr1}}, {{address?.addr2}}, {{address?.addr3}}, {{address?.city}}, </span>
<span class="address-span">{{address?.state}} - {{address?.pincode}}. </span>
</div>
<div>
<span class="mail-span">{{address?.emailId}} </span>
<span class="contact-span">{{address?.contactNo}} </span>
</div>
</div>
</ng-template>
<ng-template #interactiveTemplate>
<div class="row">
<div class="user-current-location" >
<button class="user-location-container">
<i class="material-icons user-location-icon">&#xE0C8;</i> <span (click)="updateuserLocation();" class="user-location-link"> Use current location </span>
</button>
</div>
<div class="small-6 medium-6 large-3 columns">
<bb-textbox [placeholder]="'First Name'" [(ngModel)]="address.firstname"></bb-textbox>
</div>
<div class="small-6 medium-6 large-3 columns">
<bb-textbox [placeholder]="'Last Name'" [(ngModel)]="address.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>
<div class="small-12 medium-12 large-6 columns">
<bb-textbox [placeholder]="'Address Line 2'" [(ngModel)]="address.addr2"></bb-textbox>
</div>
<div class="small-12 medium-12 large-6 columns">
<bb-textbox [placeholder]="'Landmark (Optional)'" [(ngModel)]="address.addr3"></bb-textbox>
</div>
<div class="small-6 medium-6 large-3 columns">
<bb-textbox [placeholder]="'City'" [(ngModel)]="address.city"></bb-textbox>
</div>
<div class="small-6 medium-6 large-3 columns">
<bb-textbox [placeholder]="'Pincode'" [(ngModel)]="address.pincode"></bb-textbox>
</div>
<div class="small-6 medium-6 large-3 columns">
<bb-textbox [placeholder]="'State'" [(ngModel)]="address.state"></bb-textbox>
</div>
<div class="small-6 medium-6 large-3 columns">
<bb-textbox [placeholder]="'Country'" [(ngModel)]="address.country"></bb-textbox>
</div>
<div class="small-6 medium-6 large-6 columns">
<bb-textbox [placeholder]="'Alternate Phone (Optional)'" [(ngModel)]="address.contactNo"></bb-textbox>
</div>
<div class="small-6 medium-6 large-6 columns">
<bb-email [placeholder]="'Email ID (Optional)'" [(ngModel)]="address.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" >
<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" [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>
<md-checkbox class="default-check" [checked] = " address.isDefault == 'Y' " (change) = "updateDefault( $event );" >Set as default</md-checkbox>
</section>
</div>
</div>
</ng-template>
ecm/Angular/trunk/src/app/user-address/address-manager/address-screen/address-screen.component.ts 0 → 100755
View file @ b9fc61b1
import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core';
import { Address } from '../address.model';
import { EcmLocationService } from '../../../ecm-search/ecm-location.service';
import { EcmLocation } from '../../../ecm-search/ecm-location';
import { Observable } from 'rxjs/Observable';
import { Store } from '@ngrx/store';
import { AppState } from '../../../ecm-store/reducers';
@Component({
selector: 'address-screen',
templateUrl: './address-screen.component.html',
styleUrls: ['./address-screen.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AddressScreenComponent implements OnInit {
@Input() editMode : string = 'V';
@Input() address : Address;
public storeUserLocation : Observable<EcmLocation>;
constructor(private locationService: EcmLocationService, private store: Store<AppState>) { }
ngOnInit() {
this.storeUserLocation = this.store.select('location');
}
//TODO : for immediate response
updateuserLocation() {
this.locationService.getGeoLocation();
this.storeUserLocation.subscribe( userLocation => {
console.log("userlocation -----------",userLocation );
this.address.city = userLocation.city;
this.address.pincode = userLocation.pincode;
this.address.state = userLocation.state;
this.address.country = userLocation. country;
console.log("adress -----------",this.address );
});
}
//To set addrUse = D - Delivery or A - All
updateAddrUseD(evt) {
this.address.addrUse = evt.checked ? ( this.address.addrUse == "B" ? "A" : "D") : ( this.address.addrUse == "A" ? "B" : "" );
}
//To set addrUse = B - Billing or A - All
updateAddrUseB(evt) {
this.address.addrUse = evt.checked ? ( this.address.addrUse == "D" ? "A" : "B") : ( this.address.addrUse == "A" ? "D" : "" );
}
updateDefault(evt) {
this.address.isDefault = evt.checked ? "Y" : "N";
}
}
ecm/Angular/trunk/src/app/user-address/address-manager/address.model.ts 0 → 100755
View file @ b9fc61b1
export class Address {
public id: string = 'ADDR_' + this.lineNo;
constructor(
public userName:string = '', // firstName + lastName
public firstname:string = '',
public lastname:string = '',
public lineNo:string = '', // Record Number
public isDefault:string = 'N', //Set Default address
public emailId:string = '', // Optional EMail Id
public addr1:string = '', // Street / Road Name
public addr2:string = '', //
public addr3:string = '', // Landmark (Optional)
public city:string = '', // City name
public pincode:string = '', // Pin Area Code
public state:string = '', // State Name >> StateCode
public contactNo:string = '', // Optional Mobile No
public addrType:string = '',
public addrUse:string = '',
public country: string = '', // Country Name >> CountryCode
public geoPos: string = '', // GeoPosition of an User's GPS Location ( i.e lg/lt )
public stanCode: string = ''
) { }
}
ecm/Angular/trunk/src/app/user-address/address-manager/index.ts 0 → 100755
View file @ b9fc61b1
export {AddressEditor} from './address-manager.component';
export {AddressScreenComponent} from './address-screen/address-screen.component';
\ No newline at end of file
ecm/Angular/trunk/src/app/user-address/ecm-user-address.service.ts 0 → 100755
View file @ b9fc61b1
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import { Store } from '@ngrx/store';
import {AppState} from '../ecm-store/reducers';
import { AdressAction} from '../ecm-store/actions';
import { Address } from './address-manager/address.model';
@Injectable()
export class UserAddressService {
private userActionUrl = '/ecm/service/feeds';
constructor(private http: Http, private store: Store<AppState>, private addressActions: AdressAction) { }
fetchUserAddress(): Observable<Address[]> {
console.log( "fetchUserAddress Called" );
let headers = new Headers( { 'Content-Type': 'application/json' });
let options = new RequestOptions( { headers: headers });
return this.http.get( this.userActionUrl + "/addresses", options )
.map( (res) => this.extractData(res) )
.catch(this.handleError);
}
addNewAddress( userAdress ) {
console.log( "addNewAddress StoreInAddress Called" );
console.log(JSON.stringify(userAdress));
let headers = new Headers( { 'Content-Type': 'application/json' });
let options = new RequestOptions( { headers: headers });
return this.http.post( '/ecm/service/feeds/address', JSON.stringify(userAdress) , options)
.map( (res) => this.extractData(res) );
}
updateUserAddress( userAdress ) {
console.log( "updateUserAddress StoreInAddress Called" );
console.log(JSON.stringify(userAdress));
let headers = new Headers( { 'Content-Type': 'application/json' });
let options = new RequestOptions( { headers: headers });
return this.http.post( '/ecm/service/feeds/address', JSON.stringify(userAdress) , options)
.map( (res) => this.extractData(res) );
}
deleteUserAddress( userAdress ) {
console.log( "deleteUserAddress Called" );
console.log(JSON.stringify(userAdress));
return this.http.delete( this.userActionUrl + '/' + userAdress.userCode, {})
.map(res => res.json());
}
private extractData(res: Response) {
let respJson = res.json();
console.log('extracData',respJson);
if(respJson != null)
{
for( let key of Object.keys( respJson ) )
{
console.log( "getUserAddress Address ==> key: " + key )
let data = respJson[key];
try
{
respJson[key] = JSON.parse( data );
console.log( "getUserAddress Address try : " + respJson[key] );
}
catch(e)
{
console.log( "getUserAddress Address ==> key: " ,data, typeof data === 'object')
if(typeof data === 'object')
respJson[key] = this.formatObject(data);
else
respJson[key] = data;
console.log( "getUserAddress Address catch : " + respJson[key] );
}
}
console.log('extractData[' + JSON.stringify(respJson) + ']');
}
return respJson || { };
}
formatObject(respJson: any) {
console.log('formatObject',respJson);
if(respJson != null)
{
for( let key of Object.keys( respJson ) )
{
console.log( "formatObject Address ==> key: " + key )
let data = respJson[key];
try
{
respJson[key] = JSON.parse( data );
console.log( "formatObject Address try : " + respJson[key] );
}
catch(e)
{
respJson[key] = data;
console.log( "formatObject Address catch : " + respJson[key] );
}
}
console.log('formatObject[' + JSON.stringify(respJson) + ']');
}
return respJson || { };
}
private handleError (error: Response | any) {
// In a real world app, we might use a remote logging infrastructure
let errMsg: string;
if (error instanceof Response) {
const body = error.json() || '';
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);
}
}
ecm/Angular/trunk/src/app/user-address/index.ts 0 → 100755
View file @ b9fc61b1
export * from './address-manager';
export {UserAddressComponent} from './user-address.component';
ecm/Angular/trunk/src/app/user-address/screen-editor.ts 0 → 100755
View file @ b9fc61b1
export interface IScreenEditor {
edit();
cancel();
save();
addNew();
remove();
}
ecm/Angular/trunk/src/app/user-address/user-address.component.css 0 → 100755
View file @ b9fc61b1
.adressList {
padding: 12px;
border: 1px solid #f2f2f2;
border-top: 0px;
}
\ No newline at end of file
ecm/Angular/trunk/src/app/user-address/user-address.component.html 0 → 100755
View file @ b9fc61b1
<address-manager [id] = "newAddress.id" [editorId] = "newAddress.id" [editMode] = "'A'"
(onAddNew) = 'onAddNew($event)'
(onDiscard) = 'onDiscard($event)' >
</address-manager>
<div *ngIf="addressList">
<div class="adressList" *ngFor = "let address of addressList" >
<address-manager [id] = "address.id" [editorId] = "address.id" [address] = "address"
(onSave) = 'onSaveClick($event)'
(onDiscard) = 'onDiscard($event)' >
</address-manager>
</div>
</div>
ecm/Angular/trunk/src/app/user-address/user-address.component.ts 0 → 100755
View file @ b9fc61b1
import { Component, OnInit, ViewChildren, QueryList} from '@angular/core';
import { Address } from './address-manager/address.model';
import { AddressEditor } from './address-manager';
import { AppState } from '../ecm-store/reducers';
import { Store } from '@ngrx/store';
import { ProfileActions} from '../ecm-store/actions';
import { Observable } from 'rxjs/Observable';
import { UserAddressService } from './ecm-user-address.service';
import { AdressAction} from '../ecm-store/actions';
@Component({
selector: 'user-address',
templateUrl: './user-address.component.html',
styleUrls: ['./user-address.component.css']
})
export class UserAddressComponent implements OnInit {
@ViewChildren(AddressEditor) addressEditors: QueryList<AddressEditor>
// addressList: Address[]= [
// new Address('Priyanka', 'Borate', 'Priyanka@gmail.com', 'Nilkanth Kingdom', 'Vidyavihar', 'Near Vidyavihar Bus Stop', 'Mumbai', '400090', 'Maharashtra', '9876543210', 'R', 'D','India'),
// new Address('Chitranga', 'Tandel', 'Chitra@gmail.com', 'Nilkanth Kingdom', 'Vidyavihar', 'Near Vidyavihar Bus Stop', 'Mumbai', '400090', 'Maharashtra', '9876543210', 'R', 'D','India')
// ];
addressList : any;
newAddress: Address = new Address();
constructor(private store: Store<AppState>, private addressActions: AdressAction){}
ngOnInit() {
localStorage.removeItem('editorId');
this.store.dispatch(this.addressActions.loadAddress());
this.loadUserAddress();
}
onSaveClick(address: Address)
{
console.log('On Save Click ', address);
if( address.isDefault == 'Y' ){
this.updateDefaultStatus(address);
}
//Call POST service (address)
this.store.dispatch(this.addressActions.updateAddress(address));
}
onAddNew(address: Address)
{
let lineNo = this.getMaxLineNo();
console.log( 'loadUser addressList >> ', lineNo);
address.lineNo = lineNo+'';
if( address.isDefault == 'Y' ){
this.updateDefaultStatus(address);
}
this.addressList.push( address );
console.log('On Save Click From Add New ', address);
this.store.dispatch(this.addressActions.addNewAdddress(address));
}
onDiscard(editorId: string)
{
console.log('On Discard Click ', editorId);
//Call POST service (address)
this.addressEditors.forEach(addressEditor => {
if( editorId == addressEditor.editorId ) {
console.log(addressEditor);
addressEditor.cancel();
}
});
}
loadUserAddress() {
this.store.select( 'Address' ).subscribe( addressList => {
console.log( 'loadUser addressList >> ', addressList );
this.addressList = addressList;
});
}
getMaxLineNo() : number {
let lineNo = this.addressList.length + 1;
//TODO : when Delete gets functional
return lineNo;
}
updateDefaultStatus(address:Address){
let _address :Address;
for( _address of this.addressList){
if( _address.lineNo == address.lineNo )
{
_address.isDefault = 'Y';
}
else
{
_address.isDefault = 'N';
}
}
}
}
ecm/Angular/trunk/src/app/user-card/card-manager/card-manager.component.css 0 → 100755
View file @ b9fc61b1
.card-cancel-button {
display: inline-block;
height: 46px;
line-height: 40px;
max-width: 220px;
text-align: center;
border-radius: 3px;
background: #fff;
color: mediumvioletred !important;
min-width: 166px;
box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
}
.card-cancel-save-button {
padding-top: 16px;
padding-bottom: 16px;
}
.card-save-button {
display: inline-block;
height: 46px;
line-height: 40px;
background: mediumvioletred;
color: #fff !important;
max-width: 218px;
text-align: center;
margin-left: 10px;
box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
border-radius: 3px;
min-width: 166px;
}
.card-delete-button {
height: 50px;
text-align: center;
background: #fff;
padding-left: 70px;
color: dimgray;
}
.card-delete-icon{
font-size: 18px;
}
.new-card-button {
display: inline-block;
height: 44px;
line-height: 40px;
max-width: 220px;
text-align: center;
margin-left: 10px;
box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
border-radius: 3px;
background: #fff;
color: mediumvioletred !important;
min-width: 200px;
margin: 12px;
}
/* ------------------ ------------------*/
.user-saved-card-info{
border: 1px solid #f2f2f2;
border-top: 0px;
border-left: 0px;
border-right: 0px;
padding-bottom: 10px;
}
.address-info {
font-size: 18px;
}
.add-new-card-button{
border: 1px solid #f2f2f2;
border-top: 0px;
border-left: 0px;
border-right: 0px;
}
.add-icon{
vertical-align: text-top;
padding-right: 6px;
font-size: 18px;
}
.card-remove-edit-button{
display: inline-block;
float: right;
}
.user-saved-card-info{
border: 1px solid #f2f2f2;
border-top: 0px;
padding: 12px;
}
.saved-card-info {
font-size: 18px;
}
.showADDCard{
padding: 12px;
background-color: rgba(242, 242, 242, 0.34);
}
\ No newline at end of file
ecm/Angular/trunk/src/app/user-card/card-manager/card-manager.component.html 0 → 100755
View file @ b9fc61b1
<div *ngIf="editMode == 'A'; then addScreen; else editScreen; " ></div>
<ng-template #addScreen>
<div class="user-saved-card-info">
<span class="saved-card-info">Saved Cards</span>
</div>
<div class="add-new-card-button">
<button *ngIf="!showAdd" md-button class="new-card-button" (click)="addNew();" >
<i class="material-icons add-icon">add</i>Add a new Card
</button>
</div>
<div class="showADDCard" *ngIf="showAdd">
<card-screen [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();" >
Save
</button>
</div>
</div>
</ng-template>
<ng-template #editScreen>
<div class="card-remove-edit-button" *ngIf="editMode == 'V' ">
<button md-button class="card-delete-button" (click)="remove();" >
<i class="material-icons card-delete-icon">delete</i>
</button>
</div>
<card-screen class="card-screen" [editMode] = "editMode" [card]='card'></card-screen>
</ng-template>
\ No newline at end of file
ecm/Angular/trunk/src/app/user-card/card-manager/card-manager.component.spec.ts 0 → 100755
View file @ b9fc61b1
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CardManagerComponent } from './card-manager.component';
describe('CardManagerComponent', () => {
let component: CardManagerComponent;
let fixture: ComponentFixture<CardManagerComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ CardManagerComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CardManagerComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should be created', () => {
expect(component).toBeTruthy();
});
});
ecm/Angular/trunk/src/app/user-card/card-manager/card-manager.component.ts 0 → 100755
View file @ b9fc61b1
import { Component,Input, Output, EventEmitter, ViewEncapsulation, OnInit, ElementRef } from '@angular/core';
import { Card } from './card.model';
import { IScreenEditor } from '../screen-editor';
@Component({
selector: 'card-manager',
templateUrl: './card-manager.component.html',
styleUrls: ['./card-manager.component.css'],
encapsulation: ViewEncapsulation.None
})
export class CardEditor implements OnInit, IScreenEditor {
@Input() editorId : string;
@Input() editMode : string = 'V';
@Input() card : Card;
@Output() onDelete : EventEmitter<Card> = new EventEmitter<Card>();
@Output() onAddNew : EventEmitter<Card> = new EventEmitter<Card>();
@Output() onSave : EventEmitter<Card> = new EventEmitter<Card>();
@Output() onDiscard : EventEmitter<Card> = new EventEmitter<Card>();
newCard : Card;
oldCard : Card;
showAdd : boolean = false;
addType = [ { viewValue: 'Home'},{ viewValue: 'Office/Commercial'} ];
advance = [ { viewValue: 'Set as delivery address'},{ viewValue: 'Set as Billing address'},{ viewValue: 'Set as default'} ];
ngOnInit(){
console.log("ID", this.editorId );
}
addNew(){
this.newCard = new Card();
this.showAdd = true;
localStorage.setItem('editorId', this.editorId );
}
edit() {
this.oldCard = this.simpleClone( this.card );
this.editMode = 'E';
localStorage.setItem('editorId', this.editorId );
}
save(){
console.log('save', this.showAdd, this.card, this.newCard);
if( this.showAdd ) {
this.onAddNew.emit(this.newCard);
}
else {
this.onSave.emit(this.card);
}
console.log('save...');
this.showAdd = false;
this.newCard = new Card();
localStorage.removeItem('editorId');
if( this.editMode == 'E'){
this.editMode = 'V';
}
}
cancel(){
this.showAdd = false;
//console.log('cancel', this.address, this.oldAddress);
this.card = this.oldCard;
this.newCard = new Card();
localStorage.removeItem('editorId');
if( this.editMode == 'E'){
this.editMode = 'V';
}
}
remove(){
}
simpleClone(obj: any) {
return Object.assign({}, obj);
}
}
ecm/Angular/trunk/src/app/user-card/card-manager/card-screen/card-screen.component.css 0 → 100755
View file @ b9fc61b1
.bname-span{
color: dimgray;
font-weight: 600;
font-size: 12px;
}
.user-bank-info{
display: inline-block;
padding-left: 24px;
}
.cardtype{
display: table;
}
.ctype-span{
color: dimgray;
font-weight: 600;
font-size: 12px;
}
.atm-card-img{
display: inline-block;
width: 94px;
}
/* ------------------ ------------------*/
.bname{
display: table;
}
/*------------------------------- UPDATED CSS -------------------------------------------------*/
ecm/Angular/trunk/src/app/user-card/card-manager/card-screen/card-screen.component.html 0 → 100755
View file @ b9fc61b1
<ng-container *ngTemplateOutlet="editMode == 'V' ? displayTemplate : interactiveTemplate" >
</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>
</ng-template>
<ng-template #interactiveTemplate>
<div class="row">
<div class="small-6 medium-12 large-6 columns">
<bb-number [placeholder]="'Card Number'" [(ngModel)]="card.cardnumber"></bb-number>
</div>
<div class="small-6 medium-6 large-3 columns">
<bb-textbox [placeholder]="'Expiry'"></bb-textbox>
</div>
<div class="small-6 medium-6 large-3 columns">
<bb-textbox class="year"></bb-textbox>
</div>
<div class="small-6 medium-12 large-6 columns">
<bb-textbox [placeholder]="'Cardholder Name'" [(ngModel)]="card.cardholdername"></bb-textbox>
</div>
</div>
</ng-template>
ecm/Angular/trunk/src/app/user-card/card-manager/card-screen/card-screen.component.spec.ts 0 → 100755
View file @ b9fc61b1
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CardScreenComponent } from './card-screen.component';
describe('CardScreenComponent', () => {
let component: CardScreenComponent;
let fixture: ComponentFixture<CardScreenComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ CardScreenComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CardScreenComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should be created', () => {
expect(component).toBeTruthy();
});
});
ecm/Angular/trunk/src/app/user-card/card-manager/card-screen/card-screen.component.ts 0 → 100755
View file @ b9fc61b1
import { Component, OnInit, Input } from '@angular/core';
import { Card } from '../card.model';
import { Observable } from 'rxjs/Observable';
import { Store } from '@ngrx/store';
import { AppState } from '../../../ecm-store/reducers';
@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;
constructor( private store: Store<AppState>) { }
ngOnInit() {
}
}
ecm/Angular/trunk/src/app/user-card/card-manager/card.model.ts 0 → 100755
View file @ b9fc61b1
export class Card {
public id: string = 'ADDR_' + Math.random();
constructor(
public bankname: string = '',
public cardnumber: string = '',
public cardtype: string = '',
public cardholdername: string = '') {
}
}
ecm/Angular/trunk/src/app/user-card/card-manager/index.ts 0 → 100755
View file @ b9fc61b1
export {CardEditor} from './card-manager.component';
export {CardScreenComponent} from './card-screen/card-screen.component';
\ No newline at end of file
ecm/Angular/trunk/src/app/user-card/ecm-user-card.service.ts 0 → 100755
View file @ b9fc61b1
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
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 { Card } from './card-manager/card.model';
@Injectable()
export class UserCardService {
private userActionUrl = '';
userCard: Card[];
constructor(private http: Http, private store: Store<AppState>, private savedcardActions: SavedCardAction) { }
loadUserCard(){
this.fetchUserInfo().subscribe(
data => {
this.userCard = data;
if ( data && data != null ) {
this.userCard.forEach( userCard => {
this.store.dispatch(this.savedcardActions.addNewCard(userCard));
})
}
});
}
fetchUserInfo(): 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) );
}
updateUserCard( userCard ) {
console.log( "StoreInCard Called" );
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) );
}
deleteCartItem( userReview ) {
console.log( "deleteUserreview Called" );
return this.http.delete( this.userActionUrl + '/' + userReview.userCode, {})
.map(res => res.json());
}
private extractData(res: Response) {
let respJson = res.json();
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
{
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);
else
respJson[key] = data;
console.log( "getUserCard Card catch : " + respJson[key] );
}
}
console.log('extractData[' + JSON.stringify(respJson) + ']');
}
return respJson || { };
}
formatObject(respJson: any) {
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
{
respJson[key] = JSON.parse( data );
console.log( "formatObject Card try : " + respJson[key] );
}
catch(e)
{
respJson[key] = data;
console.log( "formatObject Card catch : " + respJson[key] );
}
}
console.log('formatObject[' + JSON.stringify(respJson) + ']');
}
return respJson || { };
}
private handleError (error: Response | any) {
// In a real world app, we might use a remote logging infrastructure
let errMsg: string;
if (error instanceof Response) {
const body = error.json() || '';
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);
}
}
ecm/Angular/trunk/src/app/user-card/index.ts 0 → 100755
View file @ b9fc61b1
export * from './card-manager';
export {UserCardComponent} from './user-card.component';
ecm/Angular/trunk/src/app/user-card/screen-editor.ts 0 → 100755
View file @ b9fc61b1
export interface IScreenEditor {
edit();
cancel();
save();
addNew();
remove();
}
ecm/Angular/trunk/src/app/user-card/user-card.component.css 0 → 100755
View file @ b9fc61b1
.user-card-all-info{
border: 1px solid #f2f2f2;
border-top: 0px;
padding: 12px;
}
ecm/Angular/trunk/src/app/user-card/user-card.component.html 0 → 100755
View file @ b9fc61b1
<card-manager [id] = "newCard.id" [editorId] = "newCard.id" [editMode] = "'A'"
(onAddNew) = 'onAddNew($event)'
(onDiscard) = 'onDiscard($event)' >
</card-manager>
<div class="user-card-all-info" *ngFor = "let card of cardList" >
<card-manager [id] = "card.id" [editorId] = "card.id" [card] = "card"
(onSave) = 'onSaveClick($event)'
(onDiscard) = 'onDiscard($event)' >
</card-manager>
</div>
ecm/Angular/trunk/src/app/user-card/user-card.component.ts 0 → 100755
View file @ b9fc61b1
import { Component, OnInit, ViewChildren, QueryList } from '@angular/core';
import { Card } from './card-manager/card.model';
import { CardEditor } from './card-manager';
import { AppState } from '../ecm-store/reducers';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
import { UserCardService } from './ecm-user-card.service';
import { SavedCardAction} from '../ecm-store/actions';
@Component({
selector: 'user-card',
templateUrl: './user-card.component.html',
styleUrls: ['./user-card.component.css']
})
export class UserCardComponent implements OnInit {
@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){}
ngOnInit() {
localStorage.removeItem('editorId');
}
onSaveClick(card: Card)
{
console.log('On Save Click ', card);
//TODO Call POST service (address)
this.userCard = this.store.select('userCard');
this.userCard.subscribe( CardData => {
CardData.forEach(
profileInfo => {
}
);
});
}
// onAddNew(card: Card)
onAddNew()
{
// this.cardList.push( card );
// console.log('On Save Click From Add New ', card);
this.store.dispatch(this.cardActions.addNewCard(this.userCard));
}
onDeleteCard(){
this.store.dispatch(this.cardActions.deleteCard(this.userCard));
}
onDiscard(editorId: string)
{
console.log('On Discard Click ', editorId);
this.cardEditors.forEach(cardEditor => {
if( editorId == cardEditor.editorId ) {
console.log(cardEditor);
cardEditor.cancel();
}
});
//TODO Call POST service (address)
}
}
ecm/Angular/trunk/src/app/user-profile/index.ts 0 → 100755
View file @ b9fc61b1
export * from './profile-manager';
export {UserProfileComponent} from './user-profile.component';
ecm/Angular/trunk/src/app/user-profile/profile-info.service.ts 0 → 100755
View file @ b9fc61b1
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import { Store } from '@ngrx/store';
import {AppState} from '../ecm-store/reducers';
import { ProfileActions} from '../ecm-store/actions';
import { Profile } from './profile-manager/profile.model';
@Injectable()
export class ProfileInfoService {
private userActionUrl = '/ecm/service/feeds/profile';
profile: Profile;
constructor(private http: Http, private store: Store<AppState>, private profileActions: ProfileActions) { }
fetchUserInfo(): Observable<Profile> {
console.log( "fetchUserInfo Called" );
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) )
.catch(this.handleError);
}
updateUserInfo( userData ) {
console.log( "StoreInUser Called" );
console.log(JSON.stringify(userData));
let headers = new Headers( { 'Content-Type': 'application/json' });
let options = new RequestOptions( { headers: headers });
return this.http.post( '/ecm/service/feeds/profile', JSON.stringify(userData) , options)
.map( (res) => this.extractData(res) );
}
private extractData(res: Response) {
let respJson = res.json();
console.log('extracData',respJson);
if(respJson != null)
{
for( let key of Object.keys( respJson ) )
{
console.log( "getUserInfo Profile ==> key: " + key )
let data = respJson[key];
try
{
respJson[key] = JSON.parse( data );
console.log( "getUserInfo Profile try : " + respJson[key] );
}
catch(e)
{
console.log( "getItemDetail Profile ==> key: " ,data, typeof data === 'object')
if(typeof data === 'object')
respJson[key] = this.formatObject(data);
else
respJson[key] = data;
console.log( "getUserInfo Profile catch : " + respJson[key] );
}
}
console.log('extractData[' + JSON.stringify(respJson) + ']');
}
return respJson || { };
}
formatObject(respJson: any) {
console.log('formatObject',respJson);
if(respJson != null)
{
for( let key of Object.keys( respJson ) )
{
console.log( "formatObject Profile ==> key: " + key )
let data = respJson[key];
try
{
respJson[key] = JSON.parse( data );
console.log( "formatObject Profile try : " + respJson[key] );
}
catch(e)
{
respJson[key] = data;
console.log( "formatObject Profile catch : " + respJson[key] );
}
}
console.log('formatObject[' + JSON.stringify(respJson) + ']');
}
return respJson || { };
}
private handleError (error: Response | any) {
// In a real world app, we might use a remote logging infrastructure
let errMsg: string;
if (error instanceof Response) {
const body = error.json() || '';
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);
}
}
ecm/Angular/trunk/src/app/user-profile/profile-manager/index.ts 0 → 100755
View file @ b9fc61b1
export {ProfileEditor} from './profile-manager.component';
export {ProfileScreenComponent} from './profile-screen/profile-screen.component';
\ No newline at end of file
ecm/Angular/trunk/src/app/user-profile/profile-manager/profile-manager.component.css 0 → 100755
View file @ b9fc61b1
.user-info-edit{
text-align: right;
color: mediumvioletred;
}
.edit-icon-change{
font-size: 16px;
padding: 3px;
padding-bottom: 9px;
}
.save-cancel-button{
padding: 12px;
background-color: rgba(242, 242, 242, 0.34);
}
.cancel-profile-button{
display: inline-block;
height: 40px;
line-height: 40px;
max-width: 190px;
text-align: center;
border-radius: 3px;
background: #fff;
color: mediumvioletred !important;
min-width: 160px;
box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
}
.save-profile-button{
display: inline-block;
height: 40px;
line-height: 40px;
background: mediumvioletred;
color: #fff !important;
max-width: 190px;
text-align: center;
margin-left: 14px;
box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
border-radius: 3px;
min-width: 160px;
}
.user-profile-info{
border: 1px solid #f2f2f2;
border-top: 0px;
padding: 12px;
}
.profile-info {
font-size: 18px;
}
@media screen and (max-width: 640px){
.save-profile-button{
min-width: 110px !important;
}
.cancel-profile-button {
min-width: 110px !important;
}
.save-cancel-button{
background-color: none !important;
}
}
ecm/Angular/trunk/src/app/user-profile/profile-manager/profile-manager.component.html 0 → 100755
View file @ b9fc61b1
<div class="user-profile-info">
<span class="profile-info">Profile Info</span>
</div>
<profile-screen [editMode] = "editMode" [profileData]='profileData'></profile-screen>
<div class="user-info-edit" *ngIf="editMode == 'V' ">
<button md-button class="edit-button" (click)="edit();" >
<i class="material-icons edit-icon-change">edit</i> Edit
</button>
</div>
<div class="save-cancel-button" *ngIf="editMode == 'E' ">
<button md-button class="cancel-profile-button" (click)="cancel(); " >
Cancel
</button>
<button md-button class="save-profile-button" (click)="save(); " >
Save
</button>
</div>
ecm/Angular/trunk/src/app/user-profile/profile-manager/profile-manager.component.ts 0 → 100755
View file @ b9fc61b1
import { Component, OnInit, Output, EventEmitter, ViewEncapsulation, Input, ElementRef } from '@angular/core';
import { Profile } from './profile.model';
import { IScreenEditor } from '../screen-editor';
@Component({
selector: 'profile-manager',
templateUrl: './profile-manager.component.html',
styleUrls: ['./profile-manager.component.css']
})
export class ProfileEditor implements OnInit {
@Output() onDiscard : EventEmitter<string> = new EventEmitter<string>();
@Output() onAddNew : EventEmitter<Profile> = new EventEmitter<Profile>();
@Output() onSave : EventEmitter<Profile> = new EventEmitter<Profile>();
@Input() editorId : string;
@Input() editMode : string = 'V';
@Input() profileData : Profile;
oldProfile : Profile ;
constructor() { }
ngOnInit() {
}
edit() {
this.oldProfile = this.simpleClone( this.profileData );
this.editMode = 'E';
localStorage.setItem('editorId', this.editorId );
}
save(){
console.log('save', this.profileData);
this.onSave.emit(this.profileData);
console.log('save...');
localStorage.removeItem('editorId');
this.editMode = 'V';
}
cancel(){
console.log('cancel', this.profileData.birthDate, this.oldProfile.birthDate);
this.profileData = this.oldProfile;
localStorage.removeItem('editorId');
this.editMode = 'V';
}
simpleClone(obj: any) {
return Object.assign({}, obj);
}
}
ecm/Angular/trunk/src/app/user-profile/profile-manager/profile-screen/profile-screen.component.css 0 → 100755
View file @ b9fc61b1
/* ------------------------ FOR displayTemplate --------------------------------------------- */
.user-name-info, .user-email-info, .user-mobile-number-info, .user-dob-info, .user-gender-info{
padding-bottom: 12px;
}
.name-info{
color: darkgrey;
font-size: 15px;
font-weight: bold;
}
.user-full-name{
padding-left: 130px;
font-size: 14px;
font-weight: bold;
color: dimgray;
}
.email-id-info{
color: darkgrey;
font-size: 15px;
font-weight: bold;
}
.email-span{
padding-left: 114px;
font-size: 14px;
font-weight: bold;
color: dimgray;
}
.number-info{
color: darkgrey;
font-size: 15px;
font-weight: bold;
}
.phone-span{
padding-left: 70px;
font-size: 14px;
font-weight: bold;
color: dimgray;
}
.dob-info{
color: darkgrey;
font-size: 15px;
font-weight: bold;
}
.dob-span{
padding-left: 83px;
font-size: 14px;
font-weight: bold;
color: dimgray;
}
.gender-info{
color: darkgrey;
font-size: 15px;
font-weight: bold;
}
.gender-span{
padding-left: 125px;
font-size: 14px;
font-weight: bold;
color: dimgray;
}
.totalProfile{
padding: 12px;
background-color: rgba(242, 242, 242, 0.34);
}
.user-all-info {
padding: 12px;
}
/*------------------------------- UPDATED CSS-------------------------- */
.user-gender{
position: relative;
bottom: 10px;
font-size: 10px;
color: dimgray;
font-weight: bold;
}
.male-user{
width: 100px;
}
.columns .mat-form-field {
width: 100% !important;
}
.mobile .small-12 {
width: calc( 100% - .625rem - .625rem);
}
.mobile .small-6 {
width: calc( 50% - .625rem - .625rem );
}
ecm/Angular/trunk/src/app/user-profile/profile-manager/profile-screen/profile-screen.component.html 0 → 100755
View file @ b9fc61b1
<ng-container *ngTemplateOutlet="editMode == 'V' ? displayTemplate : interactiveTemplate" >
</ng-container>
<ng-template #displayTemplate>
<div class="user-all-info">
<div class="user-name-info">
<span class="name-info" >Name</span>
<span class="user-full-name">{{profileData?.firstName}} {{profileData?.lastName}}</span>
</div>
<div class="user-email-info">
<span class="email-id-info">Email ID</span>
<span class="email-span">{{profileData?.emailId}} </span>
</div>
<div class="user-mobile-number-info">
<span class="number-info">Mobile Number</span>
<span class="phone-span">{{profileData?.contactNo}} </span>
</div>
<div class="user-dob-info">
<span class="dob-info">Date of Birth</span>
<span class="dob-span">{{profileData?.birthDate}}</span>
</div>
<div class="user-gender-info">
<span class="gender-info">Gender</span>
<span class="gender-span">{{ ( profileData?.gender == 'M' ) ? 'Male' : 'Female' }} </span>
</div>
</div>
</ng-template>
<ng-template #interactiveTemplate>
<div class="row totalProfile">
<div class="small-6 medium-6 large-4 columns">
<bb-textbox [required]="true" [placeholder]="'First Name'" [(ngModel)]="profileData.firstName"></bb-textbox>
</div>
<div class="small-6 medium-6 large-4 columns">
<bb-textbox [placeholder]="'Last Name'" [(ngModel)]="profileData.lastName"></bb-textbox>
</div>
<div class="small-12 medium-12 large-4 columns">
<bb-email [placeholder]="'Email ID (Optional)'" [(ngModel)]="profileData.emailId"></bb-email>
</div>
<div class="small-6 medium-6 large-4 columns">
<bb-textbox [placeholder]="'Alternate Phone (Optional)'" [(ngModel)]="profileData.contactNo"></bb-textbox>
</div>
<div class="small-6 medium-6 large-4 columns">
<md-input-container>
<input mdInput [(ngModel)]="profileData.birthDate"
[placeholder]="'Date of Birth'"
(click)="birthDatePicker.open();" />
<input type="hidden" [(ngModel)]="birthDate"
[mdDatepicker]="birthDatePicker" />
<md-datepicker #birthDatePicker></md-datepicker>
</md-input-container>
</div>
<div class="small-12 medium-12 large-4 columns">
<span class="user-gender">Gender</span>
<md-radio-group class="gender" [(ngModel)]="profileData.gender" style="display: block;">
<md-radio-button class="male-user" value="M">Male</md-radio-button>
<md-radio-button class="female-user" value="F" >Female</md-radio-button>
</md-radio-group>
</div>
</div>
</ng-template>
ecm/Angular/trunk/src/app/user-profile/profile-manager/profile-screen/profile-screen.component.ts 0 → 100755
View file @ b9fc61b1
import { Component, OnInit, OnChanges, DoCheck, Input, ViewEncapsulation } from '@angular/core';
import { DatePipe } from '@angular/common';
import { Profile } from '../profile.model';
@Component({
selector: 'profile-screen',
templateUrl: './profile-screen.component.html',
styleUrls: ['./profile-screen.component.css'],
encapsulation: ViewEncapsulation.None
})
export class ProfileScreenComponent implements OnInit, DoCheck, OnChanges {
@Input() editMode : string = 'V';
@Input() profileData : Profile;
birthDate: string;
constructor() { }
ngOnInit() { }
ngDoCheck(){
var datePipe = new DatePipe("en-US");
if( !this.birthDate ) this.birthDate = this.profileData.birthDate;
//console.log('doCheck this.birthDate', this.birthDate , 'this.profileData.birthDate', this.profileData.birthDate);
try
{
this.profileData.birthDate = datePipe.transform(this.birthDate, 'dd/MM/yyyy');
}
catch(e)
{
let dt = this.toDate(this.birthDate);
this.birthDate = datePipe.transform(dt, 'yyyy-MM-dd');
//console.log('datePipe.transform >1>', dt , this.birthDate);
//console.log( 'datePipe.transform >3> yyyy-MM-dd ', datePipe.transform(dt, 'yyyy-MM-dd hh:mm:ss.0') );
}
}
ngOnChanges() {
this.birthDate = null;
// console.log('ngOnChanges this.birthDate', this.birthDate , 'this.profileData.birthDate', this.profileData.birthDate);
}
//TODO : Common Function
toDate(dateStr) {
var parts = dateStr.split("/");
return new Date(parts[2], parts[1] - 1, parts[0]);
}
}
ecm/Angular/trunk/src/app/user-profile/profile-manager/profile.model.ts 0 → 100755
View file @ b9fc61b1
export class Profile {
public id: string = 'ADDR_' + Math.random();
constructor(
public userName:string = '',
public firstName:string = '',
public lastName:string = '',
public emailId:string = '',
public contactNo:string = '',
public birthDate:string = '',
public gender: string = '') {
}
}
ecm/Angular/trunk/src/app/user-profile/screen-editor.ts 0 → 100755
View file @ b9fc61b1
export interface IScreenEditor {
edit();
cancel();
save();
addNew();
remove();
}
ecm/Angular/trunk/src/app/user-profile/user-profile.component.css 0 → 100755
View file @ b9fc61b1
.user-gender {
position: relative;
bottom: 4px;
font-size: smaller;
color: dimgray;
font-weight: bold;
}
.user-button {
display: flex;
}
.medium-btn.user-cancel.mat-button {
box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
width: calc(50% - 234px);
border-radius: 3px;
color: mediumvioletred;
height: 45px;
}
.save{
box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
border-radius: 3px;
background-color: mediumvioletred;
color: white;
width: 50%;
height: 45px;
}
.button.medium-btn.user-save.mat-button {
width: calc(50% - 234px);
box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
border-radius: 3px;
background-color: mediumvioletred;
color: white;
/* width: 50%; */
height: 45px;
position: relative;
left: 2px;
}
.ecm-user-gender{
display: inline-flex;
position: relative;
bottom: 18px;
left: 58px;
}
.female-user{
padding-left: 55px;
}
.user-email-id{
width: calc(50% - 160px);
}
ecm/Angular/trunk/src/app/user-profile/user-profile.component.html 0 → 100755
View file @ b9fc61b1
<profile-manager [id] = "'PROF_1'" [editorId] = "'PROF_1'" [profileData] = "profileData"
(onSave) = 'onSaveClick($event)'
(onDiscard) = 'onDiscard($event)' >
</profile-manager>
\ No newline at end of file
ecm/Angular/trunk/src/app/user-profile/user-profile.component.ts 0 → 100755
View file @ b9fc61b1
import { Component, OnInit, ViewChildren, QueryList} from '@angular/core';
import { Profile } from './profile-manager/profile.model';
import { ProfileEditor } from './profile-manager';
import { AppState } from '../ecm-store/reducers';
import { Store } from '@ngrx/store';
import { ProfileActions} from '../ecm-store/actions';
import { Observable } from 'rxjs/Observable';
import { ProfileInfoService } from './profile-info.service';
@Component({
selector: 'user-profile',
templateUrl: './user-profile.component.html',
styleUrls: ['./user-profile.component.css'],
// providers: [ProfileInfoService]
})
export class UserProfileComponent implements OnInit {
@ViewChildren(ProfileEditor) profileEditors: QueryList<ProfileEditor>
profileData;
addressdata;
constructor(private store: Store<AppState>,private profileActions: ProfileActions,){}
ngOnInit() {
localStorage.removeItem('editorId');
this.store.dispatch(this.profileActions.loadProfile());
this.loadUser();
//this.onSaveClick();
// console.log("The user info is ",this.onSaveClick());
}
// onSaveClick(profileData: Profile)
onSaveClick(profileData: Profile)
{
console.log('On Save Click ', this.profileData, profileData);
profileData.userName = profileData.firstName + " " + profileData.lastName;
console.log('On Save Click ', this.profileData, profileData);
this.profileData = profileData;
//TODO Call POST service (userInfo)
this.store.dispatch(this.profileActions.updateUserInfo(profileData));
}
onDiscard(editorId: string)
{
console.log('On Discard Click ', editorId);
this.profileEditors.forEach(profileEditor => {
if( editorId == profileEditor.editorId ) {
console.log(profileEditor);
profileEditor.cancel();
}
});
//TODO Call POST service (profile)
}
loadUser() {
this.store.select('profileInfo').subscribe( profileInfo => {
console.log('loadUser profileInfo >> ', profileInfo);
this.profileData = profileInfo;
});
}
}
ecm/Angular/trunk/src/app/user-review/ecm-user-review.service.ts 0 → 100755
View file @ b9fc61b1
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import { Store } from '@ngrx/store';
import {AppState} from '../ecm-store/reducers';
import { ReviewAction} from '../ecm-store/actions';
import { Review } from './review-manager/review.model';
@Injectable()
export class UserReviewService {
private userActionUrl = '';
userReview: Review[];
constructor(private http: Http, private store: Store<AppState>, private reviewActions: ReviewAction) { }
loadUserReview(){
this.fetchUserInfo().subscribe(
data => {
this.userReview = data;
if ( data && data != null ) {
this.userReview.forEach( userReview => {
this.store.dispatch(this.reviewActions.updateReviews(userReview));
})
}
});
}
fetchUserInfo(): Observable<Review[]> {
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) );
}
updateUserInfo( userReview ) {
console.log( "StoreInReview Called" );
console.log(JSON.stringify(userReview));
let headers = new Headers( { 'Content-Type': 'application/json' });
let options = new RequestOptions( { headers: headers });
return this.http.post( '', JSON.stringify(userReview) , options)
.map( (res) => this.extractData(res) );
}
deleteCartItem( userReview ) {
console.log( "deleteUserreview Called" );
return this.http.delete( this.userActionUrl + '/' + userReview.userCode, {})
.map(res => res.json());
}
private extractData(res: Response) {
let respJson = res.json();
console.log('extracData',respJson);
if(respJson != null)
{
for( let key of Object.keys( respJson ) )
{
console.log( "getUserReview Review ==> key: " + key )
let data = respJson[key];
try
{
respJson[key] = JSON.parse( data );
console.log( "getUserReview Review try : " + respJson[key] );
}
catch(e)
{
console.log( "getUserReview Review ==> key: " ,data, typeof data === 'object')
if(typeof data === 'object')
respJson[key] = this.formatObject(data);
else
respJson[key] = data;
console.log( "getUserAddress Review catch : " + respJson[key] );
}
}
console.log('extractData[' + JSON.stringify(respJson) + ']');
}
return respJson || { };
}
formatObject(respJson: any) {
console.log('formatObject',respJson);
if(respJson != null)
{
for( let key of Object.keys( respJson ) )
{
console.log( "formatObject Review ==> key: " + key )
let data = respJson[key];
try
{
respJson[key] = JSON.parse( data );
console.log( "formatObject Review try : " + respJson[key] );
}
catch(e)
{
respJson[key] = data;
console.log( "formatObject Review catch : " + respJson[key] );
}
}
console.log('formatObject[' + JSON.stringify(respJson) + ']');
}
return respJson || { };
}
private handleError (error: Response | any) {
// In a real world app, we might use a remote logging infrastructure
let errMsg: string;
if (error instanceof Response) {
const body = error.json() || '';
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);
}
}
ecm/Angular/trunk/src/app/user-review/index.ts 0 → 100755
View file @ b9fc61b1
export * from './review-manager';
export {UserReviewComponent} from './user-review.component';
ecm/Angular/trunk/src/app/user-review/review-manager/index.ts 0 → 100755
View file @ b9fc61b1
export {ReviewEditor} from './review-manager.component';
export {ReviewScreenComponent} from './review-screen/review-screen.component';
\ No newline at end of file
ecm/Angular/trunk/src/app/user-review/review-manager/review-manager.component.css 0 → 100755
View file @ b9fc61b1
.user-review-edit-button{
text-align: right;
padding-bottom: 8px;
}
.review-card-delete-button {
height: 40px;
line-height: 40px;
text-align: center;
background: #fff;
padding-left: 70px;
color: dimgray;
}
.review-edit-button{
display: inline-block;
height: 40px;
line-height: 40px;
text-align: center;
background: #fff;
color: mediumvioletred !important;
padding-right: 20px;
font-size: 12px;
font-weight: bold;
}
.cancel-review-button {
display: inline-block;
height: 46px;
line-height: 40px;
max-width: 190px;
text-align: center;
border-radius: 3px;
background: #fff;
color: mediumvioletred !important;
min-width: 166px;
box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
/* position: relative; */
/* left: 200px; */
}
.save-review-button {
display: inline-block;
height: 46px;
line-height: 40px;
background: mediumvioletred;
color: #fff !important;
max-width: 190px;
text-align: center;
margin-left: 10px;
box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
border-radius: 3px;
min-width: 166px;
/* position: relative; */
/* left: 200px; */
}
/* .user-review-card{ */
/* border: 1px solid #f2f2f2; */
/* border-top: 0px; */
/* } */
.user-review-card{
border: 1px solid #f2f2f2;
border-top: 0px;
border-left: 0px;
border-right: 0px;
padding-bottom: 10px;
padding: 12px;
}
.review-save-cancel-button{
padding: 15px;
background-color: rgba(242, 242, 242, 0.34);
}
ecm/Angular/trunk/src/app/user-review/review-manager/review-manager.component.html 0 → 100755
View file @ b9fc61b1
<div class="user-review-card">
<span class="review-card-info">My Reviews</span>
</div>
<review-screen [editMode] = "editMode" [reviewList]='reviewList'></review-screen>
<div class="user-review-edit-button" *ngIf="editMode == 'V' ">
<button md-button class="review-card-delete-button" (click)="remove();" >
<i class="material-icons review-card-delete-icon">delete</i>
</button>
<button md-button class="review-edit-button" (click)="edit();" >
<i class="material-icons edit-icon-change">edit</i> Edit
</button>
</div>
<div class="review-save-cancel-button" *ngIf="editMode == 'E' ">
<button md-button class="cancel-review-button" (click)="cancel(); " >
Cancel
</button>
<button md-button class="save-review-button" (click)="save(); " >
Publish
</button>
</div>
ecm/Angular/trunk/src/app/user-review/review-manager/review-manager.component.spec.ts 0 → 100755
View file @ b9fc61b1
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ReviewManagerComponent } from './review-manager.component';
describe('ReviewManagerComponent', () => {
let component: ReviewManagerComponent;
let fixture: ComponentFixture<ReviewManagerComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ReviewManagerComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ReviewManagerComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should be created', () => {
expect(component).toBeTruthy();
});
});
ecm/Angular/trunk/src/app/user-review/review-manager/review-manager.component.ts 0 → 100755
View file @ b9fc61b1
import { Component, OnInit, Output, EventEmitter, ViewEncapsulation, Input, ElementRef } from '@angular/core';
import { Review } from './review.model';
import { IScreenEditor } from '../screen-editor';
@Component({
selector: 'review-manager',
templateUrl: './review-manager.component.html',
styleUrls: ['./review-manager.component.css']
})
export class ReviewEditor implements OnInit {
@Output() onDiscard : EventEmitter<string> = new EventEmitter<string>();
@Output() onAddNew : EventEmitter<Review> = new EventEmitter<Review>();
@Output() onSave : EventEmitter<Review> = new EventEmitter<Review>();
@Input() editorId : string;
@Input() editMode : string = 'V';
@Input() reviewList : Review;
oldReview : Review ;
constructor() { }
ngOnInit() {
}
edit() {
this.oldReview = this.simpleClone( this.reviewList );
this.editMode = 'E';
localStorage.setItem('editorId', this.editorId );
}
save(){
console.log('save', this.reviewList);
this.onSave.emit(this.reviewList);
console.log('save...');
localStorage.removeItem('editorId');
this.editMode = 'V';
}
cancel(){
//console.log('cancel', this.profileData, this.oldProfile);
this.reviewList = this.oldReview;
localStorage.removeItem('editorId');
this.editMode = 'V';
}
simpleClone(obj: any) {
return Object.assign({}, obj);
}
}
ecm/Angular/trunk/src/app/user-review/review-manager/review-screen/review-screen.component.css 0 → 100755
View file @ b9fc61b1
.category-name{
font-size: 18px;
font-weight: bold;
}
.user-review-title{
position: relative;
bottom: 8px;
}
.review-title{
font-size: 15px;
font-weight: bold;
}
.items-seller-info{
position: relative;
bottom: 8px;
}
.seller-info{
font-size: 10px;
color: dimgrey;
font-weight: bold;
}
.item-review{
font-size: 14px;
}
.edit-category-name{
font-size: 18px;
font-weight: bold;
}
/*---------------------- UPDATED CSS------------------------------------------------*/
.user-review-info{
padding: 12px;
}
.ecm-product-image{
width: 118px;
height: 118px;
}
.user-edit-review-item-rating{
height: 44px;
position: relative;
right: 13px;
}
.review-edit-information {
padding: 12px;
background-color: rgba(242, 242, 242, 0.34);
}
.input-review-title{
width: 400px;
}
ecm/Angular/trunk/src/app/user-review/review-manager/review-screen/review-screen.component.html 0 → 100755
View file @ b9fc61b1
<ng-container *ngTemplateOutlet="editMode == 'V' ? displayTemplate : interactiveTemplate" >
</ng-container>
<ng-template #displayTemplate>
<div class="row user-review-info">
<div class="large-2 columns">
<img class="ecm-product-image" src="/ecm/assets/images/items/L2D0100058.png" />
</div>
<div class="large-10 columns">
<div>
<span class="category-name">{{reviewList?.itemCategory}}</span>
</div>
<div>
<rating [rate]="reviewList?.ratings"></rating>
</div>
<div class="user-review-title">
<span class="review-title">{{reviewList?.reviewTitle}}</span>
</div>
<div class="items-seller-info">
<span class="seller-info">{{reviewList?.sellerInfo}}</span>
</div>
<div>
<span class="item-review">{{reviewList?.itemdescription}}</span>
</div>
</div>
</div>
</ng-template>
<ng-template #interactiveTemplate>
<div class="row review-edit-information">
<div class="large-2 columns">
<img class="ecm-product-image" src="/ecm/assets/images/items/L2D0100058.png" />
</div>
<div class="large-10 columns">
<div>
<span class="edit-category-name">{{reviewList?.itemCategory}}</span>
</div>
<div class="user-edit-review-item-rating">
<rating [rate]="reviewList.ratings" (updateRate)="updateRate($event)" [isResponsive]="true" ></rating>
</div>
<div class="input-review-title">
<md-form-field class="review">
<textarea mdInput [placeholder]="'Title'" [(ngModel)]="reviewList.reviewTitle"></textarea>
</md-form-field>
<md-form-field class="itemList-review">
<textarea mdInput [placeholder]="'Review'" [(ngModel)]="reviewList.itemReview"></textarea>
</md-form-field>
</div>
</div>
</div>
</ng-template>
ecm/Angular/trunk/src/app/user-review/review-manager/review-screen/review-screen.component.spec.ts 0 → 100755
View file @ b9fc61b1
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ReviewScreenComponent } from './review-screen.component';
describe('ReviewScreenComponent', () => {
let component: ReviewScreenComponent;
let fixture: ComponentFixture<ReviewScreenComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ReviewScreenComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ReviewScreenComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should be created', () => {
expect(component).toBeTruthy();
});
});
ecm/Angular/trunk/src/app/user-review/review-manager/review-screen/review-screen.component.ts 0 → 100755
View file @ b9fc61b1
import { Component, OnInit, Input } from '@angular/core';
import { Review } from '../review.model';
@Component({
selector: 'review-screen',
templateUrl: './review-screen.component.html',
styleUrls: ['./review-screen.component.css']
})
export class ReviewScreenComponent implements OnInit {
@Input() editMode : string = 'V';
@Input() reviewList : Review;
constructor() { }
ngOnInit() {
}
updateRate(updatedRate) {
console.log('Updated Rate: '+updatedRate);
this.reviewList.ratings = updatedRate;
}
}
ecm/Angular/trunk/src/app/user-review/review-manager/review.model.ts 0 → 100755
View file @ b9fc61b1
export class Review {
public id: string = 'ADDR_' + Math.random();
constructor(
public itemCategory:string = '',
public ratings:string = '',
public reviewTitle:string = '',
public sellerInfo:string = '',
public itemdescription:string = '',
public itemReview:string = '') {
}
}
ecm/Angular/trunk/src/app/user-review/screen-editor.ts 0 → 100755
View file @ b9fc61b1
export interface IScreenEditor {
edit();
cancel();
save();
addNew();
remove();
}
ecm/Angular/trunk/src/app/user-review/user-review.component.html 0 → 100755
View file @ b9fc61b1
<div class="user-review-all-info">
<review-manager [id] = "'REV_1'" [editorId] = "'REV_1'" [reviewList] = "reviewList"
(onSave) = 'onSaveClick($event)'
(onDiscard) = 'onDiscard($event)' >
</review-manager>
</div>
\ No newline at end of file
ecm/Angular/trunk/src/app/user-review/user-review.component.ts 0 → 100755
View file @ b9fc61b1
import { Component, OnInit, ViewChildren, QueryList} from '@angular/core';
import { Review } from './review-manager/review.model';
import { ReviewEditor } from './review-manager';
import { AppState } from '../ecm-store/reducers';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
import { UserReviewService } from './ecm-user-review.service';
import { ReviewAction} from '../ecm-store/actions';
@Component({
selector: 'user-review',
templateUrl: './user-review.component.html',
styleUrls: ['./user-review.component.css']
})
export class UserReviewComponent implements OnInit {
@ViewChildren(ReviewEditor) reviewEditors: QueryList<ReviewEditor>
// reviewList: Review[]= [
// new Review('Kabab Special','4','Awesome Taste...Good Quantity','By Bipinraj sartape','very nice to eat never eat such good food in my life i will come again and again'),
// new Review('Stone Elephant','4','Awesome Product...Good Quality','By Marbel Decorations ','Superb product never seen such a superb marbel product the best part to decorate our house')
// ];
reviewList: Review = new Review('Kabab Special','4','Awesome Taste...Good Quantity','By Bipinraj sartape on Jan 01,2017','very nice to eat never eat such good food in my life i will come again and again,very nice to eat never eat such good food in my life i will come again and again,very nice to eat never eat such good food in my life i will come again and again','very nice to eat never eat such good food in my life i will come again and again');
userReview : Observable<Review[]>;
constructor(private store: Store<AppState>, private reviewActions: ReviewAction){}
ngOnInit() {
localStorage.removeItem('editorId');
}
onSaveClick()
{
console.log('On Save Click ', this.userReview);
//TODO Call POST service (review)
this.userReview = this.store.select('userAddress');
this.userReview.subscribe( ReviewData => {
ReviewData.forEach(
profileInfo => {
}
);
});
}
deleteCartItem( userReview ) {
console.log( "deleteCartItem Called" );
this.store.dispatch(this.reviewActions.deleteReviews(userReview));
}
onDiscard(editorId: string)
{
console.log('On Discard Click ', editorId);
this.reviewEditors.forEach(reviewEditor => {
if( editorId == reviewEditor.editorId ) {
console.log(reviewEditor);
reviewEditor.cancel();
}
});
//TODO Call POST service (address)
}
}
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