mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
Added new version for component
This commit is contained in:
Vito Albano
@@ -0,0 +1,53 @@
|
||||
.profile-image {
|
||||
text-align: center;
|
||||
border-radius: 90%;
|
||||
width: 40px;
|
||||
margin-right: 0%;
|
||||
cursor: pointer;
|
||||
border: 1px solid #999999;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.button-profile {
|
||||
display: inline-block;
|
||||
border: 0px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.detail-user-profile-list-mdl{
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.user-profile-list-mdl{
|
||||
max-height: 450px;
|
||||
min-width: 450px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.header-profile{
|
||||
color: rgb(255,152,0);
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
hr.title-start {
|
||||
border: 0;
|
||||
height: 1px;
|
||||
background: #333;
|
||||
background-image: linear-gradient(to right, #ccc, #333, #ccc);
|
||||
}
|
||||
|
||||
span.role-label-user{
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
letter-spacing: 0;
|
||||
color: rgba(0,0,0,.87);
|
||||
}
|
||||
|
||||
.custom-role-style{
|
||||
font-size: 14px;
|
||||
color: #9e9e9e;
|
||||
}
|
||||
|
||||
.truncate-long-names{
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
<div id="img_container">
|
||||
<span *ngIf="ecmUser">{{ecmUser.firstName || ecmUser.lastName}}</span>
|
||||
<span *ngIf="bpmUser">
|
||||
{{ formatValue(bpmUser.firstName) ||
|
||||
formatValue(bpmUser.lastName) ||
|
||||
formatValue(bpmUser.fullName) }}
|
||||
</span>
|
||||
<div class="button-profile" id="user-profile" data-automation-id="user-profile">
|
||||
<img id="logged-user-img"
|
||||
[src]="getUserAvatar()"
|
||||
class="profile-image"/>
|
||||
</div>
|
||||
<div class="user-profile-list-mdl
|
||||
mdl-menu mdl-menu--bottom-right
|
||||
mdl-js-menu mdl-js-ripple-effect"
|
||||
for="user-profile">
|
||||
<ul class='detail-user-profile-list-mdl mdl-list'>
|
||||
<div *ngIf="ecmUser">
|
||||
<span class="header-profile"><b>ECM</b></span>
|
||||
<hr class="title-start">
|
||||
<li class="mdl-list__item mdl-list__item--two-line">
|
||||
<span class="mdl-list__item-primary-content">
|
||||
<i class="mdl-list__item-avatar">
|
||||
<img id="logged-user-img"
|
||||
[src]="getEcmUserDetailAvatarUrl()"
|
||||
class="profile-image"/>
|
||||
</i>
|
||||
<span class="truncate-long-names">{{ecmUser.firstName}} {{ecmUser.lastName}}</span>
|
||||
<span class="mdl-list__item-sub-title">{{ecmUser.email}}</span>
|
||||
</span>
|
||||
<span class="mdl-list__item-secondary-content custom-role-style">
|
||||
<span class="role-label-user">Job Role</span>
|
||||
{{ecmUser.jobTitle}}
|
||||
</span>
|
||||
</li>
|
||||
</div>
|
||||
|
||||
<div *ngIf="bpmUser">
|
||||
<span class="header-profile"><b>BPM</b></span>
|
||||
<hr class="title-start">
|
||||
<li class="mdl-list__item mdl-list__item--two-line">
|
||||
<span class="mdl-list__item-primary-content">
|
||||
<i class="mdl-list__item-avatar">
|
||||
<img id="logged-user-img"
|
||||
[src]="getBpmUserDetailAvatarUrl()"
|
||||
class="profile-image"/>
|
||||
</i>
|
||||
<span class="truncate-long-names">
|
||||
{{formatValue(bpmUser.firstName) }} {{ formatValue(bpmUser.lastName) }}
|
||||
</span>
|
||||
<span class="mdl-list__item-sub-title">{{bpmUser.email}}</span>
|
||||
</span>
|
||||
<span class="mdl-list__item-secondary-content custom-role-style">
|
||||
<span class="role-label-user">Tenant</span>
|
||||
{{bpmUser.tenantName}}
|
||||
</span>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
// import { UserInfoComponent } from '../src/userinfo.component';
|
||||
|
||||
describe('Basic Example test ng2-alfresco-userinfo', () => {
|
||||
|
||||
it('Test hello world', () => {
|
||||
expect(true).toBe(true);
|
||||
});
|
||||
|
||||
});
|
||||
@@ -0,0 +1,93 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { EcmUserModel } from './../models/ecm-user.model';
|
||||
import { BpmUserModel } from './../models/bpm-user.model';
|
||||
import { EcmUserService } from './../services/ecm-user.service';
|
||||
import { BpmUserService } from './../services/bpm-user.service';
|
||||
import { AlfrescoAuthenticationService } from 'ng2-alfresco-core';
|
||||
|
||||
declare let __moduleName: string;
|
||||
|
||||
@Component({
|
||||
selector: 'ng2-alfresco-userinfo',
|
||||
moduleId: __moduleName,
|
||||
styleUrls: ['./userinfo.component.css'],
|
||||
template: `<h1>HELLO</h1>`
|
||||
})
|
||||
|
||||
export class UserInfoComponent implements OnInit {
|
||||
|
||||
private ecmUser: EcmUserModel;
|
||||
private bpmUser: BpmUserModel;
|
||||
private baseComponentPath = __moduleName.replace('userinfo.component.js', '');
|
||||
private anonymouseImageUrl: string = this.baseComponentPath + 'img/anonymous.gif';
|
||||
public bpmUserImage: any;
|
||||
public ecmUserImage: any;
|
||||
|
||||
constructor(private ecmUserService: EcmUserService,
|
||||
private bpmUserService: BpmUserService,
|
||||
public authService: AlfrescoAuthenticationService) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
if (this.authService.getAlfrescoApi().ecmAuth.isLoggedIn()) {
|
||||
this.ecmUserService.getUserInfo('-me-')
|
||||
.subscribe(
|
||||
(res) => {
|
||||
this.ecmUser = <EcmUserModel> res;
|
||||
this.getEcmUserProfileImage();
|
||||
}
|
||||
);
|
||||
}
|
||||
if (this.authService.getAlfrescoApi().bpmAuth.isLoggedIn()) {
|
||||
this.bpmUserService.getCurrentUserInfo()
|
||||
.subscribe(
|
||||
(res) => {
|
||||
this.bpmUser = <BpmUserModel> res;
|
||||
this.getBpmUserProfileImage();
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
private getBpmUserProfileImage() {
|
||||
this.bpmUserImage = this.bpmUserService.getCurrentUserProfileImage();
|
||||
}
|
||||
|
||||
private getEcmUserProfileImage() {
|
||||
this.ecmUserImage = this.ecmUserService.getCurrentUserProfileImageUrl(this.ecmUser.avatarId);
|
||||
}
|
||||
|
||||
public getUserAvatar() {
|
||||
return this.ecmUserImage || this.bpmUserImage || this.anonymouseImageUrl;
|
||||
}
|
||||
|
||||
public getBpmUserDetailAvatarUrl() {
|
||||
return this.bpmUserImage || this.anonymouseImageUrl;
|
||||
}
|
||||
|
||||
public getEcmUserDetailAvatarUrl() {
|
||||
return this.ecmUserImage || this.anonymouseImageUrl;
|
||||
}
|
||||
|
||||
public formatValue(value: string) {
|
||||
return value === 'null' ? null : value;
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user