Skip to content

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

Updated 


git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174501 ce508802-f39f-4f6c-b175-0d175dae99d5
parent db160178
Hide whitespace changes
Inline Side-by-side
Showing with 941 additions and 476 deletions
ecm/Angular/ProteusECM/trunk/src/app/ecm-card/ecm-card.component.html
View file @ 54140570
...@@ -13,9 +13,9 @@ ...@@ -13,9 +13,9 @@
<div *ngIf="category" class="ecm-card" (click)="viewCategories()"> <div *ngIf="category" class="ecm-card" (click)="viewCategories()">
<!-- <img class="ecm-card-img"src="{{category.resourceUrl}}{{category.catCode}}.png"alt="Category image"> --> <!-- <img class="ecm-card-img"src="{{category.resourceUrl}}{{category.catCode}}.png"alt="Category image"> -->
<ecm-image [refId]='category.catCode' [refSer]="'ECMCAT'" [object]="'ECM_CATEGORY'" [attachType]="'Image'"></ecm-image> <ecm-image [refId]='category.catCode' [refSer]="'ECMCAT'" [object]="'ECM_CATEGORY'" [attachType]="'Image'" [isThumbnail]="true"></ecm-image>
<div class="ecm-card-footer"> <div class="ecm-card-footer">
<ecm-image [refId]='category.catCode' [refSer]="'ECMCAT'" [object]="'ECM_CATEGORY'" [attachType]="'Icon'"></ecm-image> <ecm-image [refId]='category.catCode' [refSer]="'ECMCAT'" [object]="'ECM_CATEGORY'" [attachType]="'Icon'" [isThumbnail]="true"></ecm-image>
<div class="ecm-card-info"> <div class="ecm-card-info">
<span class="ecm-card-info-title">{{category.shDescr}}</span> <span class="ecm-card-info-title">{{category.shDescr}}</span>
<span class="ecm-card-info-subhead">{{category.descr}}</span> <span class="ecm-card-info-subhead">{{category.descr}}</span>
...@@ -27,9 +27,9 @@ ...@@ -27,9 +27,9 @@
<div *ngIf="subcategory" class="ecm-card" (click)="viewProducts()"> <div *ngIf="subcategory" class="ecm-card" (click)="viewProducts()">
<!-- <img class="ecm-card-img"src="{{subcategory.resourceUrl}}{{subcategory.scatCode}}.png"alt="Category image">--> <!-- <img class="ecm-card-img"src="{{subcategory.resourceUrl}}{{subcategory.scatCode}}.png"alt="Category image">-->
<ecm-image [refId]="subcategory.scatCode + ':' + subcategory.catCode" [refSer]="'ECMCAT'" [object]="'ECM_CATEGORY'" [attachType]="'Image'"></ecm-image> <ecm-image [refId]="subcategory.scatCode + ':' + subcategory.catCode" [refSer]="'ECMCAT'" [object]="'ECM_CATEGORY'" [attachType]="'Image'" [isThumbnail]="true"></ecm-image>
<div class="ecm-card-footer"> <div class="ecm-card-footer">
<ecm-image [refId]='subcategory.catCode' [refSer]="'ECMCAT'" [object]="'ECM_CATEGORY'" [attachType]="'Icon'"></ecm-image> <ecm-image [refId]='subcategory.catCode' [refSer]="'ECMCAT'" [object]="'ECM_CATEGORY'" [attachType]="'Icon'" [isThumbnail]="true"></ecm-image>
<div class="ecm-card-info"> <div class="ecm-card-info">
<span class="ecm-card-info-title">{{subcategory.shDescr}}</span> <span class="ecm-card-info-title">{{subcategory.shDescr}}</span>
<span class="ecm-card-info-subhead">{{subcategory.descr}}</span> <span class="ecm-card-info-subhead">{{subcategory.descr}}</span>
......
ecm/Angular/ProteusECM/trunk/src/app/ecm-image/ecm-image.component.html
View file @ 54140570
...@@ -3,6 +3,11 @@ ...@@ -3,6 +3,11 @@
<div *ngIf="!attachType" class="img-loading" #loadingImage></div> <div *ngIf="!attachType" class="img-loading" #loadingImage></div>
<div *ngIf="!attachType" class="ecm-image" #targetAttachImage></div> <div *ngIf="!attachType" class="ecm-image" #targetAttachImage></div>
<img *ngIf="attachType == 'Image'" class="ecm-image" #targetImage /> <!-- <img *ngIf="attachType == 'Image'" class="ecm-image" #targetImage /> -->
<img *ngIf="attachType == 'Icon'" [ngClass]="isSmallIcon ? 'ecm-small-image-icon' : 'ecm-image-icon'" #targetImage /> <!-- <img *ngIf="attachType == 'Icon'" [ngClass]="isSmallIcon ? 'ecm-small-image-icon' : 'ecm-image-icon'" #targetImage /> -->
<div *ngIf=" attachType == 'Image' " class="ecm-image" #targetAttachImage></div>
<div *ngIf=" attachType == 'Icon' " [ngClass]="isSmallIcon ? 'ecm-small-image-icon' : 'ecm-image-icon'" #targetAttachImage></div>
\ No newline at end of file
ecm/Angular/ProteusECM/trunk/src/app/ecm-image/ecm-image.component.ts
View file @ 54140570
...@@ -33,13 +33,15 @@ export class EcmImageComponent implements OnInit, AfterViewChecked { ...@@ -33,13 +33,15 @@ export class EcmImageComponent implements OnInit, AfterViewChecked {
{ {
if( this.attachType ) if( this.attachType )
{ {
this.initImage(this.object,this.refSer, this.refId, this.attachType); //this.initImage(this.object,this.refSer, this.refId, this.attachType);
} }
else else
{ {
//this.initAttachImage(this.object,this.refSer, this.refId, 'V', this.isSingleImage, this.height, this.width); ////this.initAttachImage(this.object,this.refSer, this.refId, 'V', this.isSingleImage, this.height, this.width);
this.initSingleImage(this.object,this.refSer, this.refId); //this.initSingleImage(this.object,this.refSer, this.refId);
this.attachType = "";
} }
this.initSingleImage(this.object,this.refSer, this.refId);
} }
//192.168.0.222:9090/ibase/rest/E12ExtService/getAttachDocument? //192.168.0.222:9090/ibase/rest/E12ExtService/getAttachDocument?
...@@ -113,7 +115,8 @@ export class EcmImageComponent implements OnInit, AfterViewChecked { ...@@ -113,7 +115,8 @@ export class EcmImageComponent implements OnInit, AfterViewChecked {
REF_SER : refSer, REF_SER : refSer,
REF_ID : refId,//ITEM_CODE REF_ID : refId,//ITEM_CODE
HOST_URL : "", HOST_URL : "",
DOC_TYPE : "", //DOC_TYPE : "",
DOC_TYPE : this.attachType,
IS_HOSTED_MODE : true || false, IS_HOSTED_MODE : true || false,
ENABLE_SINGLE_IMAGE : true ENABLE_SINGLE_IMAGE : true
}, this, 'imageCallback'); }, this, 'imageCallback');
......
ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-checkout/ecm-checkout.component.css
View file @ 54140570
md-card {
margin: 10px 20px;
padding: 0;
}
.checkout-page { .checkout-page {
margin-top: 70px; margin-top: 70px;
} }
.medium-btn { .check-icon {
display: inline-block; color: rgba(49, 184, 105, 0.92);
box-sizing: border-box; font-size: 26px;
border: 2px solid mediumvioletred; line-height: 35px;
background-color: #FFF; padding-right: 10px;
font-size: 14px; padding-left: 5px;
font-weight: 500; height: 35px;
color: #202020; }
margin: 0;
left: 14px; .edit-button {
padding: 2px 47px; display: inline-block;
height: 28px;
line-height: 30px;
text-align: center; text-align: center;
text-decoration: none; background: #fff;
text-transform: uppercase; color: mediumvioletred !important;
border-radius: 0; padding-right: 20px;
outline: none; font-size: 12px;
-webkit-appearance: none; font-weight: bold;
position: relative; margin-right: 15px;
top: 140px;
} }
.head { .edit-icon{
font-size: 18px; font-size: 16px;
display: block; vertical-align: sub;
padding-left: 20px;
padding-right: 20px;
} }
.medium-btn:hover {
background-color: mediumvioletred; .right-panel-sec {
cursor: pointer; display: inline-block;
color: white; width: 65%;
padding-left: 5px;
} }
.head-Shipping { .user-emailid {
font-size: 18px; padding-top: 5px;
display: block;
padding-left: 20px;
padding-right: 20px;
} }
.shippingaddress {
position: relative; .user-address {
top: 9px; display: block;
font-size: 13px;
padding-bottom: 20px;
} }
.Country {
position: relative; .edit-section {
top: 8px; width: 34%;
text-align: right;
display: inline-block;
}
.collapse-panel {
min-height: 35px;
padding: 6px 0;
color: #787878;
font-size: 17px;
} }
.select-country { .edit-panel {
width: calc(100% - 20px);
margin: 20px 20px 20px 25px;
} }
.billingAddress { .panel-selected {
background-color: rgba(49, 184, 105, 0.92) !important;
color: white;
}
.panel-selected:HOVER {
background-color:rgba(49, 184, 105, 0.92) !important;
color: white;
} }
.countryValue { .panel-selected-icon {
font-size: 18px; height: 22px;
display: block; width: 22px;
padding-left: 20px; display: inline-block;
padding-right: 20px; background-color: white;
border-radius: 100%;
text-align: center;
line-height: 24px;
font-size: 12px;
color: black;
margin: 6px 10px 6px 6px;
} }
.order-summary-header {
text-align: center;
padding: 12px;
border-bottom: 1px solid #f3f3f3;
font-weight: 700;
font-size: 16px;
}
.orderSummary { .orderSummary {
padding: 0 15px;
} }
.order {
.order-item-container {
padding: 15px 0;
border-bottom: 1px solid #f3f3f3;
color: #787878;
font-weight: 700;
}
.order-item-descr {
display: block; display: block;
font-size: 18px; padding-bottom: 15px;
padding: 10px;
} }
.orderItems{
display: block; .order-item-qty {
top: 34px; display: inline-block;
padding: 10px; width: 49%;
} }
.totalCost{
display: block; .order-item-rate {
top: 50px; display: inline-block;
padding: 10px; width: 49%;
text-align: right;
color: black;
} }
.expiryDetails{ .order-total-container {
font-size: 18px; padding: 12px;
color: #787878;
font-weight: 700;
} }
.payment {
padding-right: 20px; .order-total-title {
padding-left: 20px; display: inline-block;
display: block;
font-size: 18px;
} }
.billing-add-title { .order-shipping-title {
padding-right: 20px; display: inline-block;
padding-left: 20px;
display: block;
font-size: 18px;
} }
/* .mat-select-trigger { */ .order-amount-title {
/* font-size: 19px; */ display: inline-block;
/* } */ }
.userEmail { .order-total-price {
display: block; display: inline-block;
margin-left: 20px; text-align: right;
margin-right: 20px; float: right;
} }
.userInfo {
display: block; .order-shipping-price {
margin-left: 20px; display: inline-block;
margin-right: 20px; float: right;
color: green;
} }
.userAdress {
display: block; .total-amt-container, .shipping-detl-container {
margin-left: 20px; padding-bottom: 5px;
margin-right: 20px;
} }
.userCity {
display: block; .amt-payble-container {
margin-left: 20px; color: black;
margin-right: 20px; padding-top: 10px;
font-size: 16px;
} }
.userState {
display: block; .order-amnt-pyble {
margin-left: 20px; display: inline-block;
margin-right: 20px; float: right;
} }
.userPostal {
display: block; .ecm-secure-payment {
margin: 20px;
padding: 0 15px;
color: #787878;
} }
.Cardholder {
margin-left: 20px; .secure-icon {
margin-right: 20px; font-size: 25px !important;
display: inline-block;
width: 25px;
vertical-align: top;
padding: 4px 0;
} }
.CardNumber {
margin-left: 20px; .secure-payment-info{
margin-right: 20px; font-size: 17px;
display: inline-block;
width: calc(100% - 30px);
line-height: initial;
padding-left: 5px;
} }
.expiry-title { .payment-option-title{
padding-left: 20px; display: block;
padding-bottom: 20px; padding-left: 12px;
font-size: 18px;
}
.address-panel {
} }
.months { .user-name {
margin-left: 20px; display: block;
margin-right: 20px; color: black;
font-weight: 700;
} }
.years { .payment-option{
margin-left: 20px; display: block;
margin-right: 20px; border-bottom: 1px solid #f3f3f3;
padding: 15px 0;
padding-left: 15px;
} }
.cvv{ .user-address{
padding: 20px; display: block;
color: #787878;
line-height: initial;
} }
.cvv-input { .address-screen {
display: block;
padding-left: 12px;
} }
.diff-bill-chkbox { .edit-detail-template {
margin-left: 20px; padding: 20px 15px 15px 40px;
margin-right: 20px;
} }
.place-order-button { .payment-button {
width: 100%; width: 200px;
height: 50px; height: 50px;
font-size: 15px; font-size: 18px;
line-height: 46px;
text-align: center;
border-radius: 2px; border-radius: 2px;
background: mediumvioletred; position: relative;
color:#fff !important; padding: 0;
margin-top: 20px; margin: 38px 0 0px 0;
background: mediumvioletred;
color: #fff;
font-weight: 700;
margin: 0 12px;
} }
.place-order-button[disabled] { .login-button {
width: 160px;
height: 40px;
font-size: 16px;
line-height: 40px;
text-align: center;
border-radius: 2px;
position: relative;
padding: 0;
background: mediumvioletred;
color: #fff;
font-weight: 700;
margin: 0 12px;
}
.save-button {
display: inline-block;
height: 40px;
line-height: 40px;
background: mediumvioletred;
color: #fff !important;
max-width: 190px;
text-align: center;
box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
border-radius: 3px;
min-width: 120px;
font-weight: 700;
margin: 0 12px 0 40px;
}
.username-field, .password-field{
width: 200px !important;
display: block;
left: calc(50% - 100px);
}
.payment-button[disabled], .save-button[disabled] {
background: #e0e0e0; background: #e0e0e0;
color: #fff; color: #fff;
} }
.error-msg { .ecm-pay-terms {
color: red; display: block;
padding-left: 25px; padding-left: 12px;
padding-top: 5px;
}
.address-screen {
padding: 15px 40px;
} }
.item-name, .item-cost, .order-summary-title, .total, .total-price { /* Review Order */
padding: 20px;
@media screen and (max-width: 64em) {
.columns {
padding: 0;
}
.ecm-item-container{
padding: 20px 20px !important;
}
.ecm-item-img {
left: calc(50% - 125px) !important;
}
} }
.order-summary-title { @media screen and (min-width: 64em)
text-align: left; {
padding-left: 20px; .ecm-item-info {
padding-top: 0 !important;
}
.delivery-offers {
font-size: 14px !important;
}
.link_button[_ngcontent-c1] {
float: inherit !important;
padding-left: 25px !important;
font-size: 13px;
}
.product-price {
text-align: start !important;
}
.discounted-price {
font-size: 14px !important;
}
}
.ecm-item-container {
border-top: 1px solid lightgray;
padding: 20px 0;
margin: 0;
} }
.total { .ecm-item-img {
padding-top: 25px; position: relative;
max-height: 250px;
max-width: 250px;
} }
.item-cost{ .ecm-item-info {
width: 40%; padding-top: 15px;
} }
/* md-error { */ .delivery-offers {
/* padding-top: 12px; */ padding-top: 18px;
padding-bottom: 10px;
font-size: 12px;
}
.link_button {
color: mediumvioletred;
font-weight: bold;
padding: 0;
float: right;
font-size: 13px;
}
.arrow {
vertical-align: middle;
margin-left: -2px;
font-size: 21px;
}
.product-price {
text-align: end;
padding-left: 5px;
}
.discounted-price {
display: block;
font-size: 10px;
}
.individual-price {
display: block;
font-size: 12px;
}
/* Review Order End*/
/* .example-headers-align .mat-expansion-panel-header-title, */
/* .example-headers-align .mat-expansion-panel-header-description { */
/* flex-basis: 0; */
/* } */ /* } */
.example-headers-align .mat-expansion-panel-header-description {
justify-content: flex-end;
align-items: initial;
}
.mat-expansion-panel {
margin: 10px 0 !important;
}
/* form starting stylings ------------------------------- */ .mat-expansion-panel-header-title {
.group line-height: 35px;
{
position:relative;
margin-bottom:45px;
} }
md-card { .mat-expansion-panel-header {
margin: 20px; padding: 0 !important;
}
.login-descr {
justify-content: space-between !important;
} }
ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-checkout/ecm-checkout.component.html
View file @ 54140570
<ecm-header [isFixedHeader]=true> </ecm-header> <ecm-header [isFixedHeader]=true> </ecm-header>
<ecm-breadcrumbs [pageName]="'CHECKOUT'"></ecm-breadcrumbs>
<div class="row checkout-page"> <div class="row checkout-page">
<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm.value)"> <div class="medium-8 columns">
<div class="medium-7 columns"> <md-accordion class="example-headers-align">
<md-card> <md-expansion-panel [expanded]="checkStep(0)" (opened)="setStep(0)" (closed)="resetStep(0);" hideToggle="true">
<div class="accountInformation"> <md-expansion-panel-header [ngClass]="checkStep(0) ? 'panel-selected' : ''" [expandedHeight]="'35px'" [collapsedHeight]="'35px'">
<span class="head">Account Information</span> <md-panel-title [style.color]="checkStep(0) ? 'white' : 'black'">
<table class="example-full-width" cellspacing="5" width="100%"><span> <md-icon *ngIf="!checkStep(0)" class="check-icon">check_circle</md-icon>
<span class="form-group"> <span *ngIf="checkStep(0)" class="panel-selected-icon">1</span>
<md-input-container class="userEmail"> Login
<input type="email" mdInput placeholder="Email" class="form-control" required name="email" #emailRef="ngModel" [(ngModel)]="email"> </md-panel-title>
<md-error *ngIf="emailRef.errors && emailRef.dirty">Email required</md-error> <md-panel-description class="login-descr">
</md-input-container></span> <span class="user-emailid">{{(userInfo | async).emailId}}</span>
<button class="edit-button" *ngIf="!checkStep(0)">
<md-icon class="edit-icon">mode_edit</md-icon> Edit
<span class="form-group"> </button>
<md-input-container class="userInfo"> </md-panel-description>
<input type="number" mdInput placeholder="Phone Number" id="phone" class="form-control" required minlength="10" maxlength="10" name="phone" #phoneRef="ngModel" [(ngModel)]="phone"> </md-expansion-panel-header>
<md-error *ngIf="phoneRef.errors && phoneRef.dirty">Phone Number required</md-error>
</md-input-container> <ng-container *ngTemplateOutlet="loginPage"></ng-container>
</span> </span></table> </md-expansion-panel>
</div> <md-expansion-panel [expanded]="checkStep(1)" (opened)="setStep(1)" (closed)="resetStep(1);" hideToggle="true">
</md-card> <md-expansion-panel-header [ngClass]="checkStep(1) ? 'panel-selected' : ''" [expandedHeight]="'35px'" [collapsedHeight]="'105px'">
<md-panel-title [style.color]="checkStep(1) ? 'white' : 'black'">
<md-card> <md-icon *ngIf="!checkStep(1)" class="check-icon">check_circle</md-icon>
<div class="billing"> <span *ngIf="checkStep(1)" class="panel-selected-icon">2</span>
<div class="billingUserAddress">
<span class="head-Shipping">Shipping Address</span> <div class="address-panel">
<table class="example-full-width" cellspacing="5" width="100%"><span> <span>Delivery/Billing Address</span>
<span> <span *ngIf="!checkStep(1) && (userInfo | async).firstName" class="user-name">{{(userInfo | async).firstName}} {{(userInfo | async).lastName}}</span>
<md-input-container class="userAdress"> <span *ngIf="!checkStep(1) && selectedAddress" class="user-address">{{selectedAddress.addr1}}, {{selectedAddress.addr2}}, <span *ngIf="selectedAddress.addr3">Near {{selectedAddress.addr3}},</span> {{selectedAddress.city}}<span *ngIf="selectedAddress.stateDescr">, {{selectedAddress?.stateDescr}}</span>-{{selectedAddress.pinCode}}</span>
<input required minlength="10" maxlength="100" mdInput placeholder="Address" [(ngModel)]="billAddress" #addressRef="ngModel" name="billAddress"> </div>
<md-error *ngIf="addressRef.dirty && addressRef.errors">Address required</md-error>
</md-input-container></span> </md-panel-title>
<md-panel-description>
<span> <button class="edit-button" *ngIf="!checkStep(1)">
<md-input-container class="userCity"> <md-icon class="edit-icon">mode_edit</md-icon> Edit
<input required mdInput placeholder="City" #cityRef="ngModel" [(ngModel)]="shippingCity" name="city"> </button>
<md-error *ngIf="cityRef.errors && cityRef.dirty" class="">City required</md-error> </md-panel-description>
</md-input-container></span></span></table> </md-expansion-panel-header>
</div>
<ng-container *ngTemplateOutlet="userAddress"></ng-container>
<div class="billinguserState">
<table class="example-full-width" cellspacing="5" width="100%"><tr> </md-expansion-panel>
<td>
<md-input-container class="userState"> <md-expansion-panel [expanded]="checkStep(2)" (opened)="setStep(2)" (closed)="resetStep(2);" hideToggle="true">
<input mdInput placeholder="State/Province" required #stateRef="ngModel" [(ngModel)]="shippingState" name="state"> <md-expansion-panel-header [ngClass]="checkStep(2) ? 'panel-selected' : ''" [expandedHeight]="'35px'" [collapsedHeight]="'35px'">
<md-error *ngIf="stateRef.errors && stateRef.dirty" class="">State required</md-error> <md-panel-title [style.color]="checkStep(2) ? 'white' : 'black'">
</md-input-container></td> <md-icon *ngIf="!checkStep(2)" class="check-icon">check_circle</md-icon>
<td><md-input-container class="userPostal"> <span *ngIf="checkStep(2)" class="panel-selected-icon">3</span>
<input required minlength="6" maxlength="6" type="number" mdInput placeholder="Zip/Postalcode" #zipcodeRef="ngModel" [(ngModel)]="shippingZipCode" name="zipCode"> Review Order({{(cartItems | async)?.length}} Items)
<md-error *ngIf="zipcodeRef.errors && zipcodeRef.dirty" class="">Zip/Postalcode required</md-error> </md-panel-title>
</md-input-container></td> <md-panel-description>
</tr> <button class="edit-button" *ngIf="!checkStep(2)">
</table> <md-icon class="edit-icon">mode_edit</md-icon> Edit
</div> </button>
</md-panel-description>
<div class="billingCountry"> </md-expansion-panel-header>
<md-select class="select-country" placeholder="Country" [(ngModel)]="shippingCountry" name="countries">
<md-option *ngFor="let countries of countries" [value]="countries.viewValue"> <ng-container *ngTemplateOutlet="reviewOrder"></ng-container>
{{countries.viewValue}}
</md-option> </md-expansion-panel>
</md-select>
<md-expansion-panel [expanded]="checkStep(3)" (opened)="setStep(3)" (closed)="resetStep(3);" hideToggle="true">
<md-expansion-panel-header [ngClass]="checkStep(3) ? 'panel-selected' : ''" [expandedHeight]="'35px'" [collapsedHeight]="'35px'">
<md-panel-title [style.color]="checkStep(3) ? 'white' : 'black'">
<md-icon *ngIf="!checkStep(3)" class="check-icon">check_circle</md-icon>
<span *ngIf="checkStep(3)" class="panel-selected-icon">4</span>
Payment Method
</md-panel-title>
<md-panel-description>
<button class="edit-button" *ngIf="!checkStep(3)">
<md-icon class="edit-icon">mode_edit</md-icon> Edit
</button>
</md-panel-description>
</md-expansion-panel-header>
<ng-container *ngTemplateOutlet="usercards"></ng-container>
</md-expansion-panel>
</md-accordion>
</div>
<div *ngIf="(cartItems | async)?.length > 0" class="medium-4 columns">
<md-card>
<div class="order-summary-header">Order Summary({{(cartItems | async)?.length}} Items)</div>
<div class="orderSummary">
<div *ngFor="let item of cartItems | async" class="order-item-container">
<span class="order-item-descr">{{item.itemHeader.itemDescr}}</span>
<span class="order-item-qty">Quantity: {{item.itemQuantity}}</span>
<span class="order-item-rate">Rs. {{item.itemHeader.itemDiscountedRate}}</span>
</div>
</div>
<span *ngIf="unAuthorized">
<md-error >Please login first</md-error>
</span>
</md-card>
<md-card>
<div class="order-total-container">
<div class="total-amt-container"><span class="order-total-title">Total</span> <span class="order-total-price">Rs. {{totalPrice}}</span></div>
<div class="shipping-detl-container"><span class="order-shipping-title">Shipping/Booking</span> <span class="order-shipping-price">Free</span></div>
<div class="amt-payble-container"><span class="order-amount-title">Amount Payable</span> <span class="order-amnt-pyble">Rs. {{totalPrice}}</span></div>
</div> </div>
</div> </md-card>
<div class="billingAddress"> <div class="ecm-secure-payment">
<div class="group-select"> <i class="material-icons secure-icon">&#xE8E8;</i>
<md-checkbox class="diff-bill-chkbox" [(ngModel)]="checked" name="checked">Use different billing address</md-checkbox> <span class="secure-payment-info">Safe and Secure Payments. 100% Authentic products</span>
</div>
</div> </div>
</md-card> </div>
<md-card *ngIf="checked">
<div class="billing">
<div class="billingUserAddress">
<span class="head-Shipping">Billing Address</span>
<table class="example-full-width" cellspacing="5" width="100%"><span>
<span>
<md-input-container class="userAdress">
<input required minlength="10" maxlength="100" mdInput placeholder="Address" [(ngModel)]="billAddress" #addressRef="ngModel" name="billAddress">
<md-error *ngIf="addressRef.errors && addressRef.dirty" class="">Address required</md-error>
</md-input-container></span>
<span>
<md-input-container class="userCity">
<input required mdInput placeholder="City" #cityRef="ngModel" [(ngModel)]="billingCity" name="city">
<md-error *ngIf="cityRef.errors && cityRef.dirty" class="">City required</md-error>
</md-input-container></span></span></table>
</div>
<div class="billinguserState"> </div>
<table class="example-full-width" cellspacing="5" width="100%"><tr>
<td>
<md-input-container class="userState">
<input mdInput placeholder="State/Province" required #stateRef="ngModel" [(ngModel)]="billingState" name="state">
<md-error *ngIf="stateRef.errors && stateRef.dirty" class="">State required</md-error>
</md-input-container></td>
<td><md-input-container class="userPostal">
<input required minlength="6" maxlength="6" type="number" mdInput placeholder="Zip/Postalcode" #zipcodeRef="ngModel" [(ngModel)]="billingZipCode" name="zipCode">
<md-error *ngIf="zipcodeRef.errors && zipcodeRef.dirty" class="">Zip/Postalcode required</md-error>
</md-input-container></td>
</tr>
</table>
</div>
<div class="billingCountry"> <ng-template #loginPage>
<md-select class="select-country" placeholder="Country" [(ngModel)]="billingCountry" name="countries"> <div class="username-field">
<md-option *ngFor="let countries of countries" [value]="countries.viewValue"> <md-form-field>
{{countries.viewValue}} <input mdInput id="username" name="username" [placeholder]="'User Name'" [required]="true" type="text">
</md-option> </md-form-field>
</md-select> </div>
</div>
</div>
</md-card>
<!-- <div class="medium-12 columns paymentMethod"> <div class="password-field">
<span class="payment">Payment Method</span > <md-form-field>
<md-input-container class="Cardholder" > <input mdInput id="password" name="password" [placeholder]="'Password'" [required]="true" type="text">
<input mdInput placeholder="Cardholder" value="Cardholder Name"> </md-form-field>
</md-input-container> </div>
<md-input-container class="CardNumber">
<input mdInput placeholder="CardNumber" value="Card Number"> <button md-button class="login-button">
</md-input-container> Login
</div> --> </button>
</ng-template>
<md-card>
<div class="paymentMethod"> <ng-template #newcard>
<span class="payment">Payment Method</span> <card-screen #cardScreen [editMode]="'E'" [isPaymentsPage]="true" [card]="newCard" class="payment-option-title"></card-screen>
<table class="example-full-width" cellspacing="5" width="100%"><tr> <button md-button class="payment-button" *ngIf="childForm" [disabled]="!childForm.valid" (click)="executePayment();">
<td><md-input-container class="Cardholder"> Pay Rs. {{totalPrice}}
<input required mdInput placeholder="Cardholder" [(ngModel)]="cardHolder" name="cardHolder"> </md-input-container></td> </button>
<td><md-input-container class="CardNumber"> <span class="ecm-pay-terms">By clicking make payment you agree with Terms & Conditions</span>
<input required type="number" mdInput placeholder="Card Number" [(ngModel)]="cardNumber" name="cardNumber"> </md-input-container></td></tr></table> </ng-template>
</div>
<div class="expiry"> <ng-template #reviewOrder>
<div class="expiry-title">Expiry</div> <div *ngFor="let item of cartItems | async" class="ecm-item-container row">
<md-select class="months" placeholder="Month" [(ngModel)]="selectedMonth" <div class="large-2 columns ecm-item-img">
name="months"> <md-option *ngFor="let months of months" <ecm-image [refId]='item.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage]="true" [isThumbnail]="true"></ecm-image>
[value]="months.viewValue"> {{months.viewValue}} </md-option> </md-select>
<md-select class="years" placeholder="Years" [(ngModel)]="selectedYear"
name="years"> <md-option *ngFor="let years of years"
[value]="years.viewValue"> {{years.viewValue}} </md-option> </md-select>
<span class="cvv">
<md-input-container class="cvv-input">
<input required type="number" mdInput placeholder="cvv" #cvvRef="ngModel" [(ngModel)]="cvv" name="cvv">
<md-error *ngIf="cvvRef.errors && cvvRef.dirty" class="">cvv required</md-error>
</md-input-container>
</span>
</div> </div>
</md-card>
</div>
<div *ngIf="(cartItems | async)?.length > 0" class="medium-5 columns"> <div class="large-6 columns ecm-item-info">
<md-card> <span style="display: block;font-size: 16px;"> {{item.itemHeader.itemDescr}} </span>
<div class="orderSummary"> <div *ngIf="item.itemCategory.catCode == 'CAT0000004'" class="delivery-offers">
<table> <span>FREE Delivery in 5 to 6 days</span>
<tr> <button type="button" class="md-button link_button">
<th class="order-summary-title">Order Summary</th> More Offers
</tr> <i class="material-icons arrow ">&#xE313;</i>
<tr *ngFor="let item of cartItems | async"> </button>
<td class="item-name">{{item.itemHeader.itemShDescr}} ({{item.itemQuantity}})</td> </div>
<td class="item-cost">Rs. {{item.itemHeader.itemDiscountedRate}}</td> </div>
</tr>
<tr>
<td class="total">Total</td>
<td class="total-price">Rs. {{totalPrice}}</td>
</tr>
</table>
</div>
<button type="submit" [disabled]="!userForm.valid" md-button class="place-order-button">Place Order</button>
<span *ngIf="unAuthorized " >
<md-error >Please login first</md-error>
</span>
</md-card>
</div>
</form>
</div> <counter [quantity]="item.itemQuantity" (decrement)="decrement(item);" (increment)="increment(item);">
<price>
<div *ngIf="item.itemCategory.catCode == 'CAT0000004'" class="product-price">
<span style="display: block;" class="total-cost">Rs {{item.itemHeader.itemDiscountedRate}}</span>
<span class="discounted-price"><s>Rs {{item.itemHeader.itemCostRate}}</s> <span class="discount-rate">{{item.itemHeader.itemDiscount}}% Off</span></span>
</div>
<span *ngIf="item == 'occassion'" class="individual-price">Rs 500 per person (Inclusive GST)</span>
</price>
</counter>
</div>
</ng-template>
<ng-template #userAddress>
<md-radio-group class="example-radio-group" [(ngModel)]="selectedAddress">
<md-radio-button *ngFor = "let address of addressList" class="user-address" [value]="address">
<address-screen [address]="address" class="address-screen"></address-screen>
</md-radio-button>
<md-radio-button class="user-address" [value]="'newaddress'">
<span class="address-screen">New Address</span>
</md-radio-button>
<div *ngIf="selectedAddress == 'newaddress'" class="edit-detail-template">
<address-screen #addrAddScreen [editMode]="'E'" [address]="newAddress" class="address-screen"></address-screen>
<button md-button class="save-button" *ngIf="editForm" [disabled]="!editForm.valid || !editForm.dirty" (click)="saveAddress();">
SAVE
</button>
</div>
</md-radio-group>
</ng-template>
<ng-template #usercards>
<md-radio-group class="example-radio-group" [(ngModel)]="selectedPaymntOpt">
<md-radio-button *ngFor = "let card of cardList | async" class="payment-option" [value]="card.lineNo">
<card-screen [card] = "card" class="payment-option-title"></card-screen>
</md-radio-button>
<md-radio-button class="payment-option" [value]="'newcard'" >
<span class="payment-option-title">Credit / Debit / ATM card</span>
</md-radio-button>
<div *ngIf="selectedPaymntOpt == 'newcard'" class="edit-detail-template">
<ng-container *ngTemplateOutlet="newcard"></ng-container>
</div>
<md-radio-button class="payment-option" [value]="'netbanking'" >
<span class="payment-option-title">Net Banking</span>
</md-radio-button>
<md-radio-button class="payment-option" [value]="'cod'" >
<span class="payment-option-title">Cash On Delivery</span>
</md-radio-button>
<md-radio-button class="payment-option" [value]="'wallet'" >
<span class="payment-option-title">Wallet</span>
</md-radio-button>
</md-radio-group>
</ng-template>
<ecm-footer> </ecm-footer>
ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-checkout/ecm-checkout.component.ts
View file @ 54140570
...@@ -5,12 +5,18 @@ import { Observable } from 'rxjs/Observable'; ...@@ -5,12 +5,18 @@ import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch'; import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map'; import 'rxjs/add/operator/map';
import { Location } from '@angular/common'; import { Location } from '@angular/common';
import { MdSnackBar } from '@angular/material';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import {AppState} from '../../ecm-store/reducers'; import {AppState} from '../../ecm-store/reducers';
import { EcmCheckoutService } from './ecm-checkout.service'; import { EcmCheckoutService } from './ecm-checkout.service';
import {CartActions} from '../../ecm-store/actions'; import {CartActions, SavedCardAction, ProfileActions, AdressAction} from '../../ecm-store/actions';
import { Breadcrumbs } from '../../ecm-breadcrumbs/ecm-breadcrumbs.component'; import { Breadcrumbs } from '../../ecm-breadcrumbs/ecm-breadcrumbs.component';
import { Card } from '../../user-card/card-manager/card.model';
import { Address } from '../../user-address/address-manager/address.model';
import { Item } from '../../ecm-model/product-model';
import { CardScreenComponent } from '../../user-card/card-manager/card-screen/card-screen.component';
import { AddressScreenComponent } from '../../user-address/address-manager/address-screen/address-screen.component';
@Component( { @Component( {
selector: 'ecm-checkout', selector: 'ecm-checkout',
...@@ -22,47 +28,31 @@ import { Breadcrumbs } from '../../ecm-breadcrumbs/ecm-breadcrumbs.component'; ...@@ -22,47 +28,31 @@ import { Breadcrumbs } from '../../ecm-breadcrumbs/ecm-breadcrumbs.component';
export class EcmCheckoutComponent implements OnInit { export class EcmCheckoutComponent implements OnInit {
@ViewChild('userForm') currentForm: NgForm; @ViewChild('userForm') currentForm: NgForm;
@Input() unAuthorized: boolean = false;
userForm: NgForm; userForm: NgForm;
checked = false; checked = false;
cartItemsDetail: ItemDetail[]; cartItemsDetail: ItemDetail[];
totalPrice:number = 0; totalPrice:number = 0;
@Input() unAuthorized: boolean = false;
countries;
months;
years;
activeNGForm: NgForm; activeNGForm: NgForm;
cartItems: Observable<ItemDetail[]>; cartItems: Observable<ItemDetail[]>;
userData: any; userData: any;
constructor(private formBuilder: FormBuilder, private store: Store<AppState>,public checkoutService: EcmCheckoutService,private _location: Location, private cartActions: CartActions, public breadcrumbSerivce: Breadcrumbs) { @ViewChild( 'cardScreen' ) child: CardScreenComponent;
this.countries = [ @ViewChild('addrAddScreen') addScreen: AddressScreenComponent;
{ viewValue: 'India' }, cardList;
{ viewValue: 'UAE' }, newCard: Card = new Card();
{ viewValue: 'Canada' } selectedPaymntOpt;
]; addressList;
this.months = [ newAddress: Address = new Address();
{ viewValue: 'January' }, selectedAddress: Address;
{ viewValue: 'Febuary' }, userInfo;
{ viewValue: 'march' }, public childForm;
{ viewValue: 'April' }, public editForm;
{ viewValue: 'May' },
{ viewValue: 'June' }, constructor(private formBuilder: FormBuilder, private store: Store<AppState>,public checkoutService: EcmCheckoutService,private _location: Location, private cartActions: CartActions, public breadcrumbSerivce: Breadcrumbs, private cardActions: SavedCardAction, private profileActions: ProfileActions, private addressActions: AdressAction, public snackBar: MdSnackBar) {
{ viewValue: 'July' }, this.store.dispatch(this.profileActions.loadProfile());
{ viewValue: 'August' }, this.store.dispatch(this.addressActions.loadAddress());
{ viewValue: 'September' }, this.store.dispatch(this.cardActions.loadSavedCards());
{ viewValue: 'October' },
{ viewValue: 'November' },
{ viewValue: 'December' }];
this.years = [
{ viewValue: 2017 },
{ viewValue: 2017 },
{ viewValue: 2018 },
{ viewValue: 2019 },
{ viewValue: 2020 },
{ viewValue: 2021 },
{ viewValue: 2022 }];
} }
ngOnInit() { ngOnInit() {
...@@ -76,6 +66,36 @@ export class EcmCheckoutComponent implements OnInit { ...@@ -76,6 +66,36 @@ export class EcmCheckoutComponent implements OnInit {
let breadcrumb = [{label: 'Home', url: '/home'}, {label: 'Checkout', url: 'javascript:void(0)'}]; let breadcrumb = [{label: 'Home', url: '/home'}, {label: 'Checkout', url: 'javascript:void(0)'}];
this.breadcrumbSerivce.breadcrumbs = breadcrumb; this.breadcrumbSerivce.breadcrumbs = breadcrumb;
this.cardList = this.store.select('savedCards');
this.userInfo = this.store.select('profileInfo');
//this.addressList = this.store.select('Address');
this.store.select('Address').subscribe( addressList => {
console.log( 'loadUser addressList >> ', addressList );
this.addressList = addressList;
this.selectedAddress = addressList[0];
});
this.cardList.subscribe( cardList => {
console.log( 'loadUser cardList >> ', cardList );
if(cardList[0]){
this.selectedPaymntOpt = cardList[0].lineNo;
}
});
if(this.checkUser() == 'undefined' && this.checkUser() == null && this.checkUser() == 'null'){
this.step = 0;
}
}
ngAfterViewChecked(): void {
if(this.child){
this.childForm = this.child.cardForm;
}
if(this.addScreen){
this.editForm = this.addScreen.addressForm;
}
} }
onSubmit(data) { onSubmit(data) {
...@@ -122,8 +142,115 @@ export class EcmCheckoutComponent implements OnInit { ...@@ -122,8 +142,115 @@ export class EcmCheckoutComponent implements OnInit {
let errorMessage = <any>error; let errorMessage = <any>error;
console.log( 'comp errorMessage[' + errorMessage + ']' ); console.log( 'comp errorMessage[' + errorMessage + ']' );
} }
); );
}
executePayment() {
console.log('card details: ',this.newCard);
if(this.selectedPaymntOpt == 'newcard'){
}
let order = { "billAddress": this.selectedAddress };
console.log('-----order-----',order);
}
saveAddress(){
console.log('entered address',this.newAddress);
this.onAddNew(this.newAddress);
this.selectedAddress = this.newAddress;
this.newAddress = new Address();
}
increment(item : ItemDetail) {
item.itemQuantity++;
let cartData = new Item;
cartData.itemCode = item.itemCode;
cartData.itemQuantity = item.itemQuantity;
this.store.dispatch(this.cartActions.updateCart(cartData));
this.openSnackBar( 'Quantity increased of ' + item.itemHeader.itemShDescr );
}
decrement(item : ItemDetail) {
item.itemQuantity--;
let cartData = new Item;
cartData.itemCode = item.itemCode;
cartData.itemQuantity = item.itemQuantity;
this.store.dispatch(this.cartActions.updateCart(cartData));
this.openSnackBar( 'Quantity decreased of ' + item.itemHeader.itemShDescr );
}
openSnackBar( message: string ) {
this.snackBar.open( message, '', {
duration: 2000,
});
}
checkUser(){
var userInfo = localStorage.getItem( 'userInfo' );
if ( userInfo !== 'undefined' && userInfo !== null && userInfo !== 'null' )
{
return userInfo;
}
else
{
return userInfo;
}
} }
step;
setStep(index: number) {
this.step = index;
}
resetStep(index: number){
if(this.step == index){
this.step = undefined;
}
} }
checkStep(index: number){
if(index == this.step){
return true;
}else {
return false;
}
}
onAddNew(address: Address)
{
let lineNo = this.getMaxLineNo();
//this.selectedAddress = lineNo;
console.log( 'loadUser addressList >> ', lineNo);
address.lineNo = lineNo+'';
address.userName = address.firstName + " " + address.lastName;
console.log('On Add new Click the userAddress name is ', address.userName);
this.addressList.push( address );
console.log('On Save Click From Add New ', address);
this.store.dispatch(this.addressActions.addNewAdddress(address));
}
getMaxLineNo() : number {
let maxLineNo = 0;
for( let address of this.addressList){
let addrLineNo : number = Number(address.lineNo);
if(addrLineNo > maxLineNo){
maxLineNo = addrLineNo;
}
}
console.log('maxLineno--',maxLineNo);
return maxLineNo + 1;
}
}
ecm/Angular/ProteusECM/trunk/src/app/my-profile/my-profile.component.css
View file @ 54140570
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
/* width: calc( 100% - 350px); */ /* width: calc( 100% - 350px); */
width: 70%; width: 70%;
left: 25px; left: 25px;
max-height: 450px; /* max-height: 450px; */
display: inline-block; display: inline-block;
position: relative; position: relative;
} }
......
ecm/Angular/ProteusECM/trunk/src/app/my-profile/my-profile.component.html
View file @ 54140570
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<md-accordion> <md-accordion>
<ng-template ngFor let-link [ngForOf]="navLinks" > <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 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-expansion-panel-header class= "expannd-panel-header" [ngClass]="{selected: link.isOpen}" [expandedHeight]="'60px'" [collapsedHeight]="'60px'">
<md-panel-title> <md-panel-title>
{{link.name}} {{link.name}}
</md-panel-title> </md-panel-title>
......
ecm/Angular/ProteusECM/trunk/src/app/user-address/address-manager/address-screen/address-screen.component.html
View file @ 54140570
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
<div class="row"> <div class="row">
<form #userAddress="ngForm"> <form #userAddress="ngForm">
<div class="user-current-location" > <div class="user-current-location large-12 columns">
<button class="user-location-container"> <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> <i class="material-icons user-location-icon">&#xE0C8;</i> <span (click)="updateuserLocation();" class="user-location-link"> Use current location </span>
</button> </button>
......
ecm/Angular/ProteusECM/trunk/src/app/user-card/card-manager/card-manager.component.css
View file @ 54140570
...@@ -60,6 +60,7 @@ ...@@ -60,6 +60,7 @@
color: mediumvioletred !important; color: mediumvioletred !important;
min-width: 200px; min-width: 200px;
margin: 12px; margin: 12px;
font-weight: 700;
} }
......
ecm/Angular/ProteusECM/trunk/src/app/user-card/card-manager/card-manager.component.ts
View file @ 54140570
import { Component,Input, Output, EventEmitter, ViewEncapsulation, OnInit, ElementRef, ViewChild } from '@angular/core'; import { Component, Input, Output, EventEmitter, ViewEncapsulation, OnInit, ElementRef, ViewChild } from '@angular/core';
import { Card } from './card.model'; import { Card } from './card.model';
import { IScreenEditor } from '../screen-editor'; import { IScreenEditor } from '../screen-editor';
import { MdDialog, MdDialogRef } from '@angular/material'; import { MdDialog, MdDialogRef } from '@angular/material';
...@@ -6,100 +6,106 @@ import { MdDialog, MdDialogRef } from '@angular/material'; ...@@ -6,100 +6,106 @@ import { MdDialog, MdDialogRef } from '@angular/material';
import { CardScreenComponent } from './card-screen/card-screen.component'; import { CardScreenComponent } from './card-screen/card-screen.component';
import { ECMConfirmDialog } from '../../ecm-view/ecm-cart/ecm-cart.component'; import { ECMConfirmDialog } from '../../ecm-view/ecm-cart/ecm-cart.component';
@Component({ import { Observable } from 'rxjs/Observable';
selector: 'card-manager',
templateUrl: './card-manager.component.html', declare var require: any;
styleUrls: ['./card-manager.component.css'],
encapsulation: ViewEncapsulation.None @Component( {
selector: 'card-manager',
templateUrl: './card-manager.component.html',
styleUrls: ['./card-manager.component.css'],
encapsulation: ViewEncapsulation.None
}) })
export class CardEditor implements OnInit, IScreenEditor { export class CardEditor implements OnInit, IScreenEditor {
@Input() editorId : string; @Input() editorId: string;
@Input() editMode : string = 'V'; @Input() editMode: string = 'V';
@Input() card : Card; @Input() card: Card;
@Output() onDelete : EventEmitter<Card> = new EventEmitter<Card>(); @Output() onDelete: EventEmitter<Card> = new EventEmitter<Card>();
@Output() onAddNew : EventEmitter<Card> = new EventEmitter<Card>(); @Output() onAddNew: EventEmitter<Card> = new EventEmitter<Card>();
@Output() onSave : EventEmitter<Card> = new EventEmitter<Card>(); @Output() onSave: EventEmitter<Card> = new EventEmitter<Card>();
@Output() onDiscard : EventEmitter<Card> = new EventEmitter<Card>(); @Output() onDiscard: EventEmitter<Card> = new EventEmitter<Card>();
@ViewChild('cardScreen') child: CardScreenComponent; @ViewChild( 'cardScreen' ) child: CardScreenComponent;
public childForm; public childForm;
newCard : Card; newCard: Card;
oldCard : Card; oldCard: Card;
showAdd : boolean = false; showAdd: boolean = false;
addType = [{ viewValue: 'Home' }, { viewValue: 'Office/Commercial' }];
advance = [{ viewValue: 'Set as delivery address' }, { viewValue: 'Set as Billing address' }, { viewValue: 'Set as default' }];
addType = [ { viewValue: 'Home'},{ viewValue: 'Office/Commercial'} ]; constructor( public dialog: MdDialog ) {
advance = [ { viewValue: 'Set as delivery address'},{ viewValue: 'Set as Billing address'},{ viewValue: 'Set as default'} ];
constructor( public dialog: MdDialog ){
} }
ngOnInit(){ ngOnInit() {
console.log("ID", this.editorId ); console.log( "ID", this.editorId );
//this.setCardBank( this.card.acctNumber );
} }
ngAfterViewChecked(): void { ngAfterViewChecked(): void {
if ( this.showAdd ) { if ( this.showAdd ) {
this.childForm = this.child.cardForm; this.childForm = this.child.cardForm;
} }
} }
addNew(){ addNew() {
this.newCard = new Card();
this.newCard = new Card(); this.showAdd = true;
this.showAdd = true; localStorage.setItem( 'editorId', this.editorId );
localStorage.setItem('editorId', this.editorId );
} }
edit() { edit() {
this.oldCard = this.simpleClone( this.card );
this.oldCard = this.simpleClone( this.card ); this.editMode = 'E';
this.editMode = 'E'; localStorage.setItem( 'editorId', this.editorId );
localStorage.setItem('editorId', this.editorId );
} }
save(){ save() {
console.log('save', this.showAdd, this.card, this.newCard); console.log( 'save', this.showAdd, this.card, this.newCard );
if( this.showAdd ) { this.newCard.acctNumber = this.newCard.acctNumber.replace( /\D/g, '' );
this.onAddNew.emit(this.newCard);
if ( this.showAdd ) {
this.setCardType( this.newCard.acctNumber );
} }
else { else {
this.onSave.emit(this.card); this.onSave.emit( this.card );
} }
console.log('save...'); console.log( 'save...' );
}
reInitialize() {
this.showAdd = false; this.showAdd = false;
this.newCard = new Card(); this.newCard = new Card();
localStorage.removeItem('editorId'); localStorage.removeItem( 'editorId' );
if( this.editMode == 'E'){ if ( this.editMode == 'E' ) {
this.editMode = 'V'; this.editMode = 'V';
} }
} }
cancel(){ cancel() {
this.showAdd = false; this.showAdd = false;
//console.log('cancel', this.address, this.oldAddress); //console.log('cancel', this.address, this.oldAddress);
this.card = this.oldCard; this.card = this.oldCard;
this.newCard = new Card(); this.newCard = new Card();
localStorage.removeItem('editorId'); localStorage.removeItem( 'editorId' );
if( this.editMode == 'E'){ if ( this.editMode == 'E' ) {
this.editMode = 'V'; this.editMode = 'V';
} }
} }
remove(){ remove() {
this.onDelete.emit(this.card); this.onDelete.emit( this.card );
} }
confirmDialog( item: any ) { confirmDialog( item: any ) {
let dialogRef = this.dialog.open( ECMConfirmDialog,{ let dialogRef = this.dialog.open( ECMConfirmDialog, {
width:'300px', width: '300px',
height:'180px', height: '180px',
disableClose: true disableClose: true
}); });
dialogRef.componentInstance.dialogTitle = "Remove Card ?"; dialogRef.componentInstance.dialogTitle = "Remove Card ?";
...@@ -107,17 +113,44 @@ export class CardEditor implements OnInit, IScreenEditor { ...@@ -107,17 +113,44 @@ export class CardEditor implements OnInit, IScreenEditor {
dialogRef.componentInstance.cancelText = "No"; dialogRef.componentInstance.cancelText = "No";
dialogRef.componentInstance.confirmText = "Yes"; dialogRef.componentInstance.confirmText = "Yes";
dialogRef.afterClosed().subscribe( result => { dialogRef.afterClosed().subscribe( result => {
if( result == 'true') if ( result == 'true' ) {
{ this.onDelete.emit( this.card );
this.onDelete.emit(this.card);
} }
}); });
} }
simpleClone(obj: any) { simpleClone( obj: any ) {
return Object.assign({}, obj); return Object.assign( {}, obj );
} }
// setCardBank( cardNumber: string ) {
// var lookup = require( 'binlookup' )();
//
// console.log( 'cardNumber[' + cardNumber + ']' );
//
// lookup( cardNumber ).then(
// data => {
// console.log( 'credit card details', data );
// this.card.bankName = data.bank.name;
// });
// }
setCardType( cardNumber ) {
var lookup = require( 'binlookup' )();
console.log( 'cardNumber[' + cardNumber + ']' );
lookup( cardNumber ).then(
data => {
console.log( 'credit card details', data );
if ( data.type == 'credit' ) {
this.newCard.payMthdType = '0';
} else {
this.newCard.payMthdType = '1';
}
this.onAddNew.emit( this.newCard );
this.reInitialize();
});
}
} }
ecm/Angular/ProteusECM/trunk/src/app/user-card/card-manager/card-screen/card-screen.component.css
View file @ 54140570
...@@ -48,6 +48,10 @@ ...@@ -48,6 +48,10 @@
vertical-align: middle; vertical-align: middle;
} }
.card-input-field {
width: 100%;
}
/*------------------------------- UPDATED CSS -------------------------------------------------*/ /*------------------------------- UPDATED CSS -------------------------------------------------*/
......
ecm/Angular/ProteusECM/trunk/src/app/user-card/card-manager/card-screen/card-screen.component.html
View file @ 54140570
...@@ -7,10 +7,10 @@ ...@@ -7,10 +7,10 @@
</div> </div>
<div class="user-bank-info"> <div class="user-bank-info">
<div class="bname"> <div class="bname">
<span class="bname-span">HDFC BANK LTD.{{card?.bankName}}</span> <span class="bname-span">{{card?.bankName}}</span>
</div> </div>
<div class="card-number"> <div class="card-number">
<span class="bnumber-span">{{format(card?.acctNumber)}} </span> <span class="bnumber-span" #cardNumberEl>{{card?.acctNumber}}</span>
</div> </div>
<div class="cardtype"> <div class="cardtype">
<span class="ctype-span">{{card?.payServiceProvider}} </span> <span class="ctype-span">{{card?.payServiceProvider}} </span>
...@@ -24,24 +24,36 @@ ...@@ -24,24 +24,36 @@
<div class="row"> <div class="row">
<form [formGroup]="cardForm" (ngSubmit)="submitCard(cardForm)"> <form [formGroup]="cardForm" (ngSubmit)="submitCard(cardForm)">
<div class="small-6 medium-12 large-6 columns"> <div class="small-6 medium-12 large-6 columns">
<md-form-field> <md-form-field class="card-input-field">
<input mdInput formControlName="creditCard" id="cc-number" name="acctNumber" [(ngModel)]="card.acctNumber" [placeholder]="'Card Number'" [required]="true" (changeType)="changeType($event);" (setCardLength)="setCardLength($event)" type="text" autocomplete="cc-number" ccNumber> <input mdInput formControlName="creditCard" id="cc-number" name="acctNumber" [(ngModel)]="card.acctNumber" [placeholder]="'Card Number'" [required]="true" (changeType)="changeType($event);" (setCardLength)="setCardLength($event)" type="text" autocomplete="cc-number" ccNumber>
<img *ngIf="card.payServiceProvider && card.payServiceProvider!='unknown'" class="pay-svcp-icon" src="/ecm/assets/images/{{card?.payServiceProvider.trim()}}.png" /> <img *ngIf="card.payServiceProvider && card.payServiceProvider!='unknown'" class="pay-svcp-icon" src="/ecm/assets/images/{{card?.payServiceProvider.trim()}}.png" />
</md-form-field> </md-form-field>
</div> </div>
<div class="small-6 medium-6 large-3 columns"> <div class="small-6 medium-6 large-3 columns">
<md-form-field [floatPlaceholder]="'never'"> <md-form-field [floatPlaceholder]="'never'" class="card-input-field">
<input mdInput formControlName="expiryMonth" id="cc-month" name="expiryMonth" [(ngModel)]="card.expiryMonth" [placeholder]="'MM'" type="number"> <input mdInput formControlName="expiryMonth" id="cc-month" name="expiryMonth" [(ngModel)]="card.expiryMonth" [placeholder]="'MM'" type="number">
</md-form-field> </md-form-field>
</div> </div>
<div class="small-6 medium-6 large-3 columns"> <div class="small-6 medium-6 large-3 columns">
<md-form-field [floatPlaceholder]="'never'"> <md-form-field [floatPlaceholder]="'never'" class="card-input-field">
<input mdInput formControlName="expiryYear" id="cc-year" name="expiryYear" [(ngModel)]="card.expiryYear" [placeholder]="'YYYY'"type="number"> <input mdInput formControlName="expiryYear" id="cc-year" name="expiryYear" [(ngModel)]="card.expiryYear" [placeholder]="'YYYY'"type="number">
</md-form-field> </md-form-field>
</div> </div>
<div class="small-6 medium-12 large-6 columns"> <div class="small-6 medium-12 large-6 columns">
<bb-textbox formControlName="acctName" [id]="'cc-name'" name="acctName" [(ngModel)]="card.acctName" [placeholder]="'Cardholder Name'"></bb-textbox> <!-- <bb-textbox formControlName="acctName" [id]="'cc-name'" name="acctName" [(ngModel)]="card.acctName" [placeholder]="'Cardholder Name'"></bb-textbox> -->
<md-form-field class="card-input-field">
<input mdInput formControlName="acctName" id="cc-name" name="acctName" [(ngModel)]="card.acctName" [placeholder]="'Cardholder Name'">
</md-form-field>
</div>
<input *ngIf="!isPaymentsPage" formControlName="cvv" type="hidden" [(ngModel)]="card.cvv">
<div class="small-6 medium-6 large-3 columns" *ngIf="isPaymentsPage">
<md-form-field [floatPlaceholder]="'never'" class="card-input-field">
<input mdInput formControlName="cvv" id="cvv" name="cvv" [(ngModel)]="card.cvv" [placeholder]="'CVV'"type="number">
</md-form-field>
</div> </div>
</form> </form>
</div> </div>
......
ecm/Angular/ProteusECM/trunk/src/app/user-card/card-manager/card-screen/card-screen.component.ts
View file @ 54140570
import { Component, OnInit, Input, ViewChild } from '@angular/core'; import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
import { Card } from '../card.model'; import { Card } from '../card.model';
import { NgForm, NgModel, FormBuilder, FormGroup, NgModelGroup, Validators } from '@angular/forms'; import { NgForm, NgModel, FormBuilder, FormGroup, NgModelGroup, Validators } from '@angular/forms';
...@@ -8,6 +8,10 @@ import { AppState } from '../../../ecm-store/reducers'; ...@@ -8,6 +8,10 @@ import { AppState } from '../../../ecm-store/reducers';
import { CreditCardValidator } from 'base-blocks'; import { CreditCardValidator } from 'base-blocks';
import { CreditCard } from './credit-card';
declare var require: any;
@Component( { @Component( {
selector: 'card-screen', selector: 'card-screen',
templateUrl: './card-screen.component.html', templateUrl: './card-screen.component.html',
...@@ -17,29 +21,51 @@ export class CardScreenComponent implements OnInit { ...@@ -17,29 +21,51 @@ export class CardScreenComponent implements OnInit {
@Input() editMode: string = 'V'; @Input() editMode: string = 'V';
@Input() card: Card; @Input() card: Card;
@Input() isPaymentsPage: boolean = false;
//@ViewChild('savecard') form: NgForm; //@ViewChild('savecard') form: NgForm;
@ViewChild('cardNumberEl') cardNumberEl: ElementRef;
public target;
cardForm: FormGroup; cardForm: FormGroup;
cardLength = 16; cardLength = 16;
currentTime = new Date(); currentTime = new Date();
currentYear: number = this.currentTime.getFullYear(); currentYear: number = this.currentTime.getFullYear();
cardDetails;
constructor( private store: Store<AppState>, private _fb: FormBuilder ) { } constructor( private store: Store<AppState>, private _fb: FormBuilder ){}
ngOnInit() { ngOnInit() {
this.cardForm = this._fb.group({ this.cardForm = this._fb.group({
creditCard: ['', [<any>CreditCardValidator.validateCCNumber]], creditCard: ['', [<any>CreditCardValidator.validateCCNumber]],
expiryMonth: ['', [<any>Validators.required, <any>Validators.min(1), <any>Validators.max(12)]], expiryMonth: ['', [<any>Validators.required, <any>Validators.min(1), <any>Validators.max(12)]],
expiryYear: ['', [<any>Validators.required, <any>Validators.min(this.currentYear)]], expiryYear: ['', [<any>Validators.required, <any>Validators.min(this.currentYear)]],
acctName: ['', [<any>Validators.required]] acctName: ['', [<any>Validators.required]],
cvv: ['', [<any>Validators.required]]
}); });
this.card.acctNumber = this.replaceFullWidthChars(this.card.acctNumber.trim());
if(!this.isPaymentsPage) {
this.card.cvv = "123";
}
if(this.editMode == 'V'){
this.getCardDetails(this.card.acctNumber);
}
//this.form.addFormGroup(dir) //this.form.addFormGroup(dir)
} }
ngAfterViewInit(){
if(this.editMode == 'V'){
this.target = this.cardNumberEl.nativeElement;
this.reFormatCardNumber(this.card.acctNumber);
}
}
changeType($event){ changeType($event){
this.card.payServiceProvider = $event ; this.card.payServiceProvider = $event;
console.log('Type==>',$event); console.log('Type==>',$event);
} }
...@@ -50,34 +76,48 @@ export class CardScreenComponent implements OnInit { ...@@ -50,34 +76,48 @@ export class CardScreenComponent implements OnInit {
console.log('Card Length==>',$event); console.log('Card Length==>',$event);
} }
format(value: string) {
return value.replace(/ /g, '-');
}
submitCard(card) { submitCard(card) {
console.log('Submitted Card Data', card); console.log('Submitted Card Data', card);
} }
public replaceFullWidthChars(str) { private reFormatCardNumber(e) {
if (str === null) { let formattedValue;
str = ''; let cardNumber = this.target.innerHTML;
}
setTimeout(() => {
console.log('this.target.value',cardNumber);
let value = CreditCard.replaceFullWidthChars(cardNumber);
value = CreditCard.formatCardNumber(value);
console.log('--value--['+value+']');
formattedValue = value.replace(/ /g, '-');
this.target.selectionStart = this.target.selectionEnd = CreditCard.safeVal(value, this.target);
this.target.innerHTML = this.creditCardMask(formattedValue);
});
}
private creditCardMask(number, character = "X"){
console.log('creditCardMask',number);
//number = number.replace(/[^0-9]+/g, ''); /*ensureOnlyNumbers*/
var firstOccurence = number.indexOf("-");
var lastOccurence = number.lastIndexOf("-");
console.log('Occurences',firstOccurence,lastOccurence);
var l = number.length;
return number.substring(0,firstOccurence+1) + character.repeat(l-8) + number.substring(lastOccurence,l);
}
getCardDetails(cardNumber){
var lookup = require( 'binlookup' )();
let chr, console.log( 'cardNumber[' + cardNumber + ']' );
idx,
fullWidth = '\uff10\uff11\uff12\uff13\uff14\uff15\uff16\uff17\uff18\uff19',
halfWidth = '0123456789',
value = '',
chars = str.split('');
for (let i = 0; i < chars.length; i++) { lookup( cardNumber ).then(
chr = chars[i]; data => {
idx = fullWidth.indexOf(chr); console.log( 'credit card details', data );
if (idx > -1) { this.card.bankName = data.bank.name;
chr = halfWidth[idx]; });
}
value += chr;
}
return value;
} }
} }
ecm/Angular/ProteusECM/trunk/src/app/user-card/card-manager/card.model.ts
View file @ 54140570
...@@ -10,7 +10,8 @@ export class Card { ...@@ -10,7 +10,8 @@ export class Card {
public expiryYear: string = '', public expiryYear: string = '',
public lineNo: string = '', public lineNo: string = '',
public payMthdType: string = '', public payMthdType: string = '',
public entityType: string = '' public entityType: string = '',
public cvv: string = ''
) { ) {
} }
} }
ecm/Angular/ProteusECM/trunk/src/app/user-card/user-card.component.ts
View file @ 54140570
...@@ -55,9 +55,7 @@ export class UserCardComponent implements OnInit { ...@@ -55,9 +55,7 @@ export class UserCardComponent implements OnInit {
console.log('On Save Click From Add New--', newCard); console.log('On Save Click From Add New--', newCard);
let lineNo = this.getMaxLineNo(); let lineNo = this.getMaxLineNo();
newCard.payMthdType = "1";
newCard.lineNo = lineNo + ''; newCard.lineNo = lineNo + '';
newCard.acctNumber.trim();
console.log('cardnumber--',newCard.acctNumber); console.log('cardnumber--',newCard.acctNumber);
this.store.dispatch(this.cardActions.addNewCardSuccess(newCard)); this.store.dispatch(this.cardActions.addNewCardSuccess(newCard));
......
ecm/Angular/ProteusECM/trunk/src/assets/js/e12PluginWrapper.js
View file @ 54140570
...@@ -240,15 +240,17 @@ function getImagePluginUI(data, caller, callback) ...@@ -240,15 +240,17 @@ function getImagePluginUI(data, caller, callback)
metadata.put(MetadataKey.OBJ_NAME, new MetadataValue(data.OBJ_NAME)); metadata.put(MetadataKey.OBJ_NAME, new MetadataValue(data.OBJ_NAME));
metadata.put(MetadataKey.REF_SERIES, new MetadataValue(data.REF_SER)); metadata.put(MetadataKey.REF_SERIES, new MetadataValue(data.REF_SER));
metadata.put(MetadataKey.REF_ID, new MetadataValue(data.REF_ID)); metadata.put(MetadataKey.REF_ID, new MetadataValue(data.REF_ID));
metadata.put(MetadataKey.DOC_TYPE, new MetadataValue(data.DOC_TYPE)); metadata.put(MetadataKey.DOC_TYPE_ATTACH_FILTER, new MetadataValue(data.DOC_TYPE));
metadata.put(MetadataKey.HOST_URL, new MetadataValue(data.HOST_URL)); metadata.put(MetadataKey.HOST_URL, new MetadataValue(data.HOST_URL));
metadata.put(MetadataKey.ENABLE_SINGLE_IMAGE, new MetadataValue(data.ENABLE_SINGLE_IMAGE)); metadata.put(MetadataKey.ENABLE_SIGNLE_IMAGE, new MetadataValue(data.ENABLE_SINGLE_IMAGE));
metadata.put(MetadataKey.IS_HOSTED_MODE, new MetadataValue(!! data.IS_HOSTED_MODE)); metadata.put(MetadataKey.IS_HOSTED_MODE, new MetadataValue(!! data.IS_HOSTED_MODE));
//
metadata.put(MetadataKey.VIEW_ONLY, new MetadataValue(true));
attchPlugin = new AttachmentsPlugin(); attchPlugin = new AttachmentsPlugin();
attchPlugin.init(metadata); attchPlugin.init(metadata);
attchPlugin.requestImageArray(function(imgArr) { attchPlugin.requestImagesArray(function(imgArr) {
console.log("On requestImageArray : caller >> imgArr["+imgArr+"][" + Object.keys(caller) + "] "); console.log("On requestImageArray : caller >> imgArr["+imgArr+"][" + Object.keys(caller) + "] ");
console.log("callback >> [" + callback + " = " + caller[callback] + "] "); console.log("callback >> [" + callback + " = " + caller[callback] + "] ");
......
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