Skip to content

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

User Info display and Change User Image 


git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174382 ce508802-f39f-4f6c-b175-0d175dae99d5
parent bdc6d8ed
Hide whitespace changes
Inline Side-by-side
Showing with 263 additions and 46 deletions
ecm/Angular/ProteusECM/trunk/src/app/ecm-signin/ecm-signin.component.ts
View file @ 5cbdeac7
...@@ -71,6 +71,7 @@ export class EcmSigninComponent implements OnInit { ...@@ -71,6 +71,7 @@ export class EcmSigninComponent implements OnInit {
{ {
this.userData = JSON.parse( result.Response.results ); this.userData = JSON.parse( result.Response.results );
this.userData.jti = this._username; this.userData.jti = this._username;
this.userData.profileImageLink = "/ibase/resource/images/users/" + this._username + ".png?temp=" + Math.random();
console.log( 'comp Object.keys(this.userData) [' + Object.keys(this.userData) + ']' ); console.log( 'comp Object.keys(this.userData) [' + Object.keys(this.userData) + ']' );
localStorage.setItem('userInfo', JSON.stringify( this.userData ) ); localStorage.setItem('userInfo', JSON.stringify( this.userData ) );
} }
......
ecm/Angular/ProteusECM/trunk/src/app/ecm-user-option/ecm-user-option.component.css
View file @ 5cbdeac7
.content-panel
{
display: block;
margin: 15px;
min-height: 150px;
position: relative;
}
.data
{
display: inline-block;
vertical-align: top;
line-height: normal;
position: absolute;
font-size: 14px;
padding :0px;
margin:0px;
margin-top: 13px;
}
.header{
height: 40px;
}
.name{
font-weight: bold;
margin: -4px 0 1px 0;
display:inline-block;
}
.email_id{
color: #666;
}
.mobile_no{
color: #666;
}
.user_id{
color: #666;
display:inline-block;
padding-left: 5px
}
.my-profile{
text-decoration: none;
background: mediumvioletred;
border-color: #3079ed;
font-weight: bold;
margin: 10px 0 0 0;
border: 1px solid #c6c6c6;
display: inline-block;
line-height: 28px;
padding: 0 12px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
}
.user-profile-image{
width: 115px;
height: 115px;
position: relative;
padding: 0;
margin: 0;
margin-right:10px;
-webkit-filter: contrast(100%) brightness(85%);
filter: contrast(100%) brightness(85%);
border-radius: 100%;
display: inline-block;
overflow:hidden;
}
.profile-image-128{
width: 128px;
height: 128px;
}
.profile-image {
position: absolute;
left: 2px;
padding: 0;
margin: 0;
-webkit-filter: contrast(100%) brightness(85%);
filter: contrast(100%) brightness(85%);
border-radius: 100%;
top:-5px;
}
.change-profile-image{
cursor: pointer;
background: rgba(78,144,254,.7);
bottom: 0;
color: #fff;
font-size: 9px;
font-weight: bold;
left: 11px;
line-height: 9px;
position: absolute;
padding: 7px 0;
text-align: center;
width: 96px;
}
.content { .content {
/* height: 100%; */ /* height: 100%; */
/* width: 100%; */ /* width: 100%; */
...@@ -12,9 +109,9 @@ ...@@ -12,9 +109,9 @@
/* left: 2.5rem; */ /* left: 2.5rem; */
/* bottom: 0; */ /* bottom: 0; */
/* position: relative; */ /* position: relative; */
padding-top: 10rem; /* padding-top: 10rem;*/
left: 2.5rem; left: 2.5rem;
bottom: 10px; bottom: 15px;
position: relative; position: relative;
} }
...@@ -39,4 +136,58 @@ ...@@ -39,4 +136,58 @@
position: relative; position: relative;
overflow: auto; overflow: auto;
} }
} }
\ No newline at end of file
/* ContentPlugin - External Component CSS*/
.contentPopupTitle{
color: mediumvioletred;
}
.galaxyButton {
cursor: pointer;
background: mediumvioletred;
border-radius: 2px;
margin: 5px 0 5px 0;
padding: 5px 20px 5px 20px;
color: #fff;
}
.close-button {
right: 0;
position: absolute;
display: inline-block;
width: 24px;
height: 24px;
margin: 15px;
background-color: transparent;
border: none;
cursor: pointer;
border-radius: 100%;
transition: 0.6s;
-webkit-transition: 0.6s;
z-index: 4;
box-shadow: none;
left: auto;
}
.close-button:hover {
box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px
rgba(0, 0, 0, 0.1);
color: transparent;
}
.close-button:before, .close-button:after {
position: absolute;
content: '';
top: 50%;
left: 0;
width: 100%;
height: 2px;
background-color: #EC7263;
background-color: mediumvioletred;
border-radius: 5px;
transition: 0.5s;
}
.close-button:before {
transform: translateY(-50%) rotate(45deg) scale(1);
}
.close-button:after {
transform: translateY(-50%) rotate(-45deg) scale(1);
}
ecm/Angular/ProteusECM/trunk/src/app/ecm-user-option/ecm-user-option.component.html
View file @ 5cbdeac7
<div class="user-option"> <div class="user-option">
<div *ngIf="userData" class="content"> <div *ngIf="userData" class="content">
<div class="button-panel"> <div class="header"></div>
<button md-button class="logout-button" (click)="logout(); closePanel.emit();">Logout</button> <div class="content-panel">
</div> <div class="user-profile-image" titile="Profile">
</div> <img [src]="userData.profileImageLink" onerror="this.src = '/ecm/assets/images/w_user_128_128.png'; " class="profile-image profile-image-128" title="{{userData.name}}" />
<span md-button class="change-profile-image" (click)="openDialog();">Change</span>
</div>
<div class="data">
<div class="name">{{userData.NAME}}</div>
<div class="user_id">( {{userData.USER_ID}} )</div>
<div class="email_id">{{userData.EMAIL_ID}}</div>
<div class="mobile_no">{{userData.MOBILE_NO}}</div>
<button md-button class="my-profile">My Profile</button>
</div>
</div>
<div class="button-panel">
<button md-button class="logout-button" (click)="logout(); closePanel.emit();">Logout</button>
</div>
</div>
</div> </div>
ecm/Angular/ProteusECM/trunk/src/app/ecm-user-option/ecm-user-option.component.ts
View file @ 5cbdeac7
import { Component, OnInit, Output, EventEmitter } from '@angular/core'; import { Component, OnInit, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
import { ECMSigninService } from '../ecm-signin/ecm-signin.service'; import { ECMSigninService } from '../ecm-signin/ecm-signin.service';
declare var getContentPlugin: any;
@Component({ @Component({
selector: 'ecm-user-option', selector: 'ecm-user-option',
templateUrl: './ecm-user-option.component.html', templateUrl: './ecm-user-option.component.html',
styleUrls: ['./ecm-user-option.component.css'], styleUrls: ['./ecm-user-option.component.css'],
providers: [ECMSigninService] providers: [ECMSigninService],
encapsulation: ViewEncapsulation.None
}) })
export class EcmUserOptionComponent implements OnInit { export class EcmUserOptionComponent implements OnInit {
@Output() closePanel = new EventEmitter(); @Output() closePanel = new EventEmitter();
constructor(public signinService: ECMSigninService) { } @Output() updateProfileImages = new EventEmitter();
userData : any;
ngOnInit() { selectedOption: string;
contentPluginViewUI: any;
var userInfo = localStorage.getItem('userInfo'); userData: any;
console.log('EcmUserOptionComponent getUserInfo ::' + userInfo ); //profileImageLink : string;
if( userInfo !== 'undefined' && userInfo !== null && userInfo !== 'null' ) {
this.userData = JSON.parse(userInfo); constructor( public signinService: ECMSigninService ) { }
}
ngOnInit() {
} var userInfo = localStorage.getItem( 'userInfo' );
console.log( 'EcmUserOptionComponent getUserInfo ::' + userInfo );
logout() { if ( userInfo !== 'undefined' && userInfo !== null && userInfo !== 'null' ) {
this.userData = JSON.parse( userInfo );
localStorage.removeItem('userInfo'); //this.profileImageLink = "/ibase/resource/images/users/" + this.userData.jti + ".png";
this.signinService.sendLogout(this.userData.jti, this.userData.TOKEN_ID).subscribe( }
result => { }
console.log( 'comp result.results.indexOf [' + result.Response.results.indexOf('{') + ']' );
if( result.Response.status == 'success' ) openDialog( userid: string, isprofileimage: string ) {
{
console.log('Logging Out'); var userInfo = localStorage.getItem( 'userInfo' );
this.userData = null; console.log( 'EcmUserOptionComponent getUserInfo ::' + userInfo );
localStorage.removeItem('userInfo'); if ( userInfo !== 'undefined' && userInfo !== null && userInfo !== 'null' ) {
} this.userData = JSON.parse( userInfo );
else if( result.Response.status == 'error' ) }
{
this.userData = null; console.log( "loadImage check window.getContentsPlugin " );
} if ( !getContentPlugin ) {
}, console.log( "window.getContentPlugin is null" );
error => { return;
let errorMessage = <any>error; }
console.log( 'comp errorMessage[' + errorMessage + ']' ); // Get the target element in which you want to add ContentPlugin.
} console.log( "loadImage after check window.getContentPlugin " );
);
} this.contentPluginViewUI = getContentPlugin( {
USER_ID: this.userData.jti,
IS_PROFILE_IMAGE: true || false,
HOST_URL: "",
IS_HOSTED_MODE: true || false,
}, this, 'changeProfileImages');
console.log( "USER _ID " + this.userData.jti );
let targetDiv = document.getElementById( 'targetContent' );
console.log( targetDiv );
if ( targetDiv && this.contentPluginViewUI ) {
targetDiv.innerHTML = "";
targetDiv.appendChild( this.contentPluginViewUI );
}
}
changeProfileImages = function() {
console.log( 'USER OPTION : changeProfileImages' );
//this.profileImageLink = "/ibase/resource/images/users/" + this.userData.jti + ".png?temp=" + Math.random();
this.userData.profileImageLink = "/ibase/resource/images/users/" + this.userData.jti + ".png?temp=" + Math.random();
console.log( 'USER OPTION : changeProfileImages' + JSON.stringify( this.userData ));
localStorage.setItem( 'userInfo', JSON.stringify( this.userData ) );
this.updateProfileImages.emit();
}
logout() {
localStorage.removeItem( 'userInfo' );
this.signinService.sendLogout( this.userData.jti, this.userData.TOKEN_ID ).subscribe(
result => {
console.log( 'comp result.results.indexOf [' + result.Response.results.indexOf( '{' ) + ']' );
if ( result.Response.status == 'success' ) {
console.log( 'Logging Out' );
this.userData = null;
localStorage.removeItem( 'userInfo' );
}
else if ( result.Response.status == 'error' ) {
this.userData = null;
}
},
error => {
let errorMessage = <any>error;
console.log( 'comp errorMessage[' + errorMessage + ']' );
}
);
}
} }
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