mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
Eugenio Romano
GitHub
81
lib/core/userinfo/components/user-info.component.html
Normal file
81
lib/core/userinfo/components/user-info.component.html
Normal file
@@ -0,0 +1,81 @@
|
||||
<div id="userinfo_container"
|
||||
[class.adf-userinfo-name-right]="showOnRight()"
|
||||
class="adf-userinfo-container" *ngIf="isLoggedIn()">
|
||||
<span *ngIf="ecmUser && showName" id="adf-userinfo-ecm-name-display"
|
||||
class="adf-userinfo-name">{{ecmUser.fullNameDisplay}}</span>
|
||||
<span *ngIf="bpmUser && !ecmUser && showName" id="adf-userinfo-bpm-name-display"
|
||||
class="adf-userinfo-name">{{bpmUser.fullNameDisplay}}</span>
|
||||
<button mat-button [matMenuTriggerFor]="menu" class="adf-userinfo-menu_button">
|
||||
<div class="adf-userinfo-button-profile" id="user-profile" data-automation-id="user-profile">
|
||||
<div *ngIf="bpmUser && !ecmUser" id="bpm-user-image">
|
||||
<div [outerHTML]="bpmUser | usernameInitials:'adf-userinfo-pic'"></div>
|
||||
<div *ngIf="bpmUser.pictureId" class="adf-userinfo-profile-container">
|
||||
<img id="logged-user-img" [src]="bpmUserImage" alt="user-info-profile-button"
|
||||
class="adf-userinfo-profile-image"/>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="ecmUser" id="ecm-user-image">
|
||||
<div [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-pic'"></div>
|
||||
<div *ngIf="ecmUser.avatarId" class="adf-userinfo-profile-container">
|
||||
<img id="logged-user-img" [src]="ecmUserImage" alt="user-info-profile-button"
|
||||
class="adf-userinfo-profile-image"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<mat-menu #menu="matMenu" id="user-profile-lists" [xPosition]="menuPositionX" [yPosition]="menuPositionY" [overlapTrigger]="false" class="adf-userinfo-menu">
|
||||
<mat-tab-group id="tab-group-env" (click)="stopClosing($event)"
|
||||
class="adf-userinfo-tab" [class.adf-hide-tab]="!bpmUser || !ecmUser">
|
||||
<mat-tab id="ecm-panel" label="{{ 'USER_PROFILE.TAB.CS' | translate }}" *ngIf="ecmUser">
|
||||
<mat-card class="adf-userinfo-card">
|
||||
<mat-card-header class="adf-userinfo-card-header" [style.background-image]="'url(' + ecmBackgroundImage + ')'">
|
||||
<div [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
|
||||
<div *ngIf="ecmUser.avatarId" class="adf-userinfo-profile-container adf-hide-small">
|
||||
<img class="adf-userinfo-profile-picture" id="ecm-user-detail-image"
|
||||
alt="ecm-profile-image" [src]="ecmUserImage" />
|
||||
</div>
|
||||
<div class="adf-userinfo-title" id="ecm-username">{{ecmUser.fullNameDisplay}}</div>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div class="adf-userinfo-supporting-text">
|
||||
<div class="adf-userinfo-detail">
|
||||
<span id="ecm-full-name" class="adf-userinfo__detail-title">{{ecmUser.fullNameDisplay}}</span>
|
||||
<span class="adf-userinfo__detail-profile" id="ecm-email"> {{ecmUser.email}} </span>
|
||||
</div>
|
||||
<div class="adf-userinfo-detail">
|
||||
<span class="adf-userinfo__secondary-info">
|
||||
{{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }}
|
||||
<span id="ecm-job-title" class="adf-userinfo__detail-profile"> {{ ecmUser.jobTitle ? ecmUser.jobTitle : 'N/A' }} </span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</mat-tab>
|
||||
<mat-tab id="bpm-panel" label="{{ 'USER_PROFILE.TAB.PS' | translate }}" *ngIf="bpmUser">
|
||||
<mat-card class="adf-userinfo-card">
|
||||
<mat-card-header class="adf-userinfo-card-header" [style.background-image]="'url(' + bpmBackgroundImage + ')'">
|
||||
<div [outerHTML]="bpmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
|
||||
<img *ngIf="bpmUser.pictureId" class="adf-userinfo-profile-picture adf-hide-small" id="bpm-user-detail-image"
|
||||
alt="bpm-profile-image" [src]="bpmUserImage"/>
|
||||
<div class="adf-userinfo-title" id="bpm-username">{{bpmUser.fullNameDisplay}}</div>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div class="adf-userinfo-supporting-text">
|
||||
<div class="adf-userinfo-detail">
|
||||
<span id="bpm-full-name" class="adf-userinfo__detail-title">{{ bpmUser.fullNameDisplay }}</span>
|
||||
<span class="adf-userinfo__detail-profile" id="bpm-email"> {{bpmUser.email}} </span>
|
||||
</div>
|
||||
<div class="adf-userinfo-detail">
|
||||
<span id="bpm-tenant" class="adf-userinfo__secondary-info">
|
||||
{{ 'USER_PROFILE.LABELS.BPM.TENANT' | translate }}
|
||||
<span class="adf-userinfo__detail-profile">{{ bpmUser.tenantName ? bpmUser.tenantName : '' }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</mat-menu>
|
||||
</div>
|
||||
195
lib/core/userinfo/components/user-info.component.scss
Normal file
195
lib/core/userinfo/components/user-info.component.scss
Normal file
@@ -0,0 +1,195 @@
|
||||
@mixin adf-userinfo-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$accent: map-get($theme, accent);
|
||||
$warn: map-get($theme, warn);
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
.adf {
|
||||
|
||||
&-userinfo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 5px 0 5px;
|
||||
}
|
||||
|
||||
&-userinfo-name-right {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
&-userinfo-name {
|
||||
padding: 0 5px 0 5px;
|
||||
}
|
||||
|
||||
&-userinfo-pic {
|
||||
background: mat-color($primary, 300);
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 100px;
|
||||
text-align: center;
|
||||
font-weight: bolder;
|
||||
font-size: 18px;
|
||||
text-transform: uppercase;
|
||||
vertical-align: middle;
|
||||
line-height: 40px
|
||||
}
|
||||
|
||||
&-userinfo-profile-image {
|
||||
text-align: center;
|
||||
border-radius: 90%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 0;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
margin-left: -45px;
|
||||
}
|
||||
|
||||
&-userinfo-profile-container{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&-userinfo-menu_button.mat-button {
|
||||
margin-right: 0;
|
||||
border-radius: 90%;
|
||||
padding: 0;
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
&-userinfo-tab .mat-tab-header {
|
||||
align-self: center;
|
||||
width: 100%;
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
&-userinfo-tab .mat-tab-label {
|
||||
flex: auto;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
line-height: 48px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-userinfo-card-header {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: stretch;
|
||||
line-height: normal;
|
||||
height: 100px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&-userinfo-card.mat-card {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&-userinfo-supporting-text {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
line-height: 18px;
|
||||
overflow: hidden;
|
||||
padding: 32px;
|
||||
-webkit-column-count: 2;
|
||||
-moz-column-count: 2;
|
||||
column-count: 2;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@media screen and ($mat-xsmall) {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&-userinfo-title {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
&-userinfo__detail-profile {
|
||||
align-items: flex-start;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
line-height: 18px;
|
||||
display: block;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&-userinfo__detail-title {
|
||||
text-overflow: ellipsis;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
letter-spacing: .04em;
|
||||
line-height: 20px;
|
||||
align-items: flex-start
|
||||
}
|
||||
|
||||
&-userinfo__secondary-info {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
line-height: 18px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
&-userinfo-profile-picture {
|
||||
background-size: cover;
|
||||
border-radius: 50%;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
margin-left: -88px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&-userinfo-profile-initials {
|
||||
text-transform: uppercase;
|
||||
background-size: cover;
|
||||
background: mat-color($primary, 300);
|
||||
border-radius: 50%;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
margin-left: 0;
|
||||
margin-right: 8px;
|
||||
font-size: 35px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
line-height: 78px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
&-userinfo-button-profile {
|
||||
display: inline-block;
|
||||
border: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&-userinfo-detail {
|
||||
text-align: left
|
||||
}
|
||||
|
||||
&-hide-tab .mat-tab-label-active {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (min-device-width: 480px) {
|
||||
.mat-menu-panel.adf-userinfo-menu {
|
||||
max-height: 450px;
|
||||
min-width: 4500px;
|
||||
min-width: 450px;
|
||||
overflow: auto;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-menu-panel.adf-userinfo-menu .mat-menu-content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
456
lib/core/userinfo/components/user-info.component.spec.ts
Normal file
456
lib/core/userinfo/components/user-info.component.spec.ts
Normal file
@@ -0,0 +1,456 @@
|
||||
/*!
|
||||
* @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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { AuthenticationService, ContentService } from '../../services';
|
||||
import { fakeBpmUser } from '../../mock/bpm-user.service.mock';
|
||||
import { fakeEcmEditedUser, fakeEcmUser, fakeEcmUserNoImage } from '../../mock/ecm-user.service.mock';
|
||||
import { MaterialModule } from '../../material.module';
|
||||
import { BpmUserService } from '../services/bpm-user.service';
|
||||
import { EcmUserService } from '../services/ecm-user.service';
|
||||
import { BpmUserModel } from './../models/bpm-user.model';
|
||||
import { UserInfoComponent } from './user-info.component';
|
||||
|
||||
declare let jasmine: any;
|
||||
|
||||
describe('User info component', () => {
|
||||
|
||||
let userInfoComp: UserInfoComponent;
|
||||
let fixture: ComponentFixture<UserInfoComponent>;
|
||||
let element: HTMLElement;
|
||||
let stubAuthService: AuthenticationService;
|
||||
let stubContent: ContentService;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [
|
||||
MaterialModule
|
||||
],
|
||||
declarations: [
|
||||
UserInfoComponent
|
||||
],
|
||||
providers: [
|
||||
EcmUserService,
|
||||
BpmUserService
|
||||
]
|
||||
}).compileComponents().then(() => {
|
||||
fixture = TestBed.createComponent(UserInfoComponent);
|
||||
userInfoComp = fixture.componentInstance;
|
||||
element = fixture.nativeElement;
|
||||
|
||||
stubAuthService = TestBed.get(AuthenticationService);
|
||||
stubContent = TestBed.get(ContentService);
|
||||
});
|
||||
}));
|
||||
|
||||
it('should not show any image if the user is not logged in', () => {
|
||||
expect(element.querySelector('#userinfo_container')).toBeDefined();
|
||||
expect(element.querySelector('#logged-user-img')).toBeNull();
|
||||
});
|
||||
|
||||
it('should NOT have users immediately after ngOnInit', () => {
|
||||
expect(element.querySelector('#userinfo_container')).toBeDefined();
|
||||
expect(element.querySelector('#ecm_username')).toBeNull();
|
||||
expect(element.querySelector('#bpm_username')).toBeNull();
|
||||
expect(element.querySelector('#user-profile-lists')).toBeNull();
|
||||
});
|
||||
|
||||
describe('when user is logged on ecm', () => {
|
||||
|
||||
beforeEach(() => {
|
||||
spyOn(stubAuthService, 'isEcmLoggedIn').and.returnValue(true);
|
||||
spyOn(stubAuthService, 'isLoggedIn').and.returnValue(true);
|
||||
jasmine.Ajax.install();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
jasmine.Ajax.uninstall();
|
||||
});
|
||||
|
||||
it('should show ecm only last name when user first name is null ', async(() => {
|
||||
fixture.detectChanges();
|
||||
jasmine.Ajax.requests.mostRecent().respondWith({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
responseText: JSON.stringify({entry: fakeEcmEditedUser})
|
||||
});
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
let imageButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#logged-user-img');
|
||||
imageButton.click();
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('#userinfo_container')).toBeDefined();
|
||||
let ecmUsername = fixture.debugElement.query(By.css('#ecm-username'));
|
||||
expect(ecmUsername).toBeDefined();
|
||||
expect(ecmUsername).not.toBeNull();
|
||||
expect(ecmUsername.nativeElement.textContent).not.toContain('fake-ecm-first-name');
|
||||
expect(ecmUsername.nativeElement.textContent).not.toContain('null');
|
||||
});
|
||||
}));
|
||||
|
||||
it('should show the username when showName attribute is true', async(() => {
|
||||
fixture.detectChanges();
|
||||
jasmine.Ajax.requests.mostRecent().respondWith({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
responseText: JSON.stringify({entry: fakeEcmEditedUser})
|
||||
});
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
expect(userInfoComp.showName).toBeTruthy();
|
||||
expect(element.querySelector('#adf-userinfo-ecm-name-display')).not.toBeNull();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should hide the username when showName attribute is false', async(() => {
|
||||
userInfoComp.showName = false;
|
||||
fixture.detectChanges();
|
||||
jasmine.Ajax.requests.mostRecent().respondWith({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
responseText: JSON.stringify({entry: fakeEcmEditedUser})
|
||||
});
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('#adf-userinfo-ecm-name-display')).toBeNull();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should have the defined class to show the name on the right side', async(() => {
|
||||
fixture.detectChanges();
|
||||
jasmine.Ajax.requests.mostRecent().respondWith({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
responseText: JSON.stringify({entry: fakeEcmEditedUser})
|
||||
});
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('#userinfo_container').classList).toContain('adf-userinfo-name-right');
|
||||
});
|
||||
}));
|
||||
|
||||
it('should not have the defined class to show the name on the left side', async(() => {
|
||||
userInfoComp.namePosition = 'left';
|
||||
fixture.detectChanges();
|
||||
jasmine.Ajax.requests.mostRecent().respondWith({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
responseText: JSON.stringify({entry: fakeEcmEditedUser})
|
||||
});
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('#userinfo_container').classList).not.toContain('adf-userinfo-name-right');
|
||||
});
|
||||
}));
|
||||
|
||||
describe('and has image', () => {
|
||||
|
||||
beforeEach(async(() => {
|
||||
spyOn(stubContent, 'getContentUrl').and.returnValue('assets/images/ecmImg.gif');
|
||||
fixture.detectChanges();
|
||||
jasmine.Ajax.requests.mostRecent().respondWith({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
responseText: JSON.stringify({entry: fakeEcmUser})
|
||||
});
|
||||
}));
|
||||
|
||||
it('should get the ecm current user image from the service', async(() => {
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
let imageButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#logged-user-img');
|
||||
imageButton.click();
|
||||
fixture.detectChanges();
|
||||
let loggedImage = fixture.debugElement.query(By.css('#logged-user-img'));
|
||||
|
||||
expect(element.querySelector('#userinfo_container')).not.toBeNull();
|
||||
expect(loggedImage).not.toBeNull();
|
||||
expect(loggedImage.properties.src).toContain('assets/images/ecmImg.gif');
|
||||
});
|
||||
}));
|
||||
|
||||
it('should get the ecm user informations from the service', () => {
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
let imageButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#logged-user-img');
|
||||
imageButton.click();
|
||||
fixture.detectChanges();
|
||||
let ecmImage = fixture.debugElement.query(By.css('#ecm-user-detail-image'));
|
||||
let ecmFullName = fixture.debugElement.query(By.css('#ecm-full-name'));
|
||||
let ecmJobTitle = fixture.debugElement.query(By.css('#ecm-job-title-label'));
|
||||
|
||||
expect(element.querySelector('#userinfo_container')).not.toBeNull();
|
||||
expect(fixture.debugElement.query(By.css('#ecm-username'))).not.toBeNull();
|
||||
expect(ecmImage).not.toBeNull();
|
||||
expect(ecmImage.properties.src).toContain('assets/images/ecmImg.gif');
|
||||
expect(ecmFullName.nativeElement.textContent).toContain('fake-ecm-first-name fake-ecm-last-name');
|
||||
expect(ecmJobTitle.nativeElement.textContent).toContain('USER_PROFILE.LABELS.ECM.JOB_TITLE');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('and has no image', () => {
|
||||
|
||||
beforeEach(async(() => {
|
||||
fixture.detectChanges();
|
||||
jasmine.Ajax.requests.mostRecent().respondWith({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
responseText: JSON.stringify({entry: fakeEcmUserNoImage})
|
||||
});
|
||||
fixture.whenStable().then(() => fixture.detectChanges());
|
||||
}));
|
||||
|
||||
it('should show N/A when the job title is null', async(() => {
|
||||
let imageButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#user-initials-image');
|
||||
imageButton.click();
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('#userinfo_container')).not.toBeNull();
|
||||
let ecmJobTitle = fixture.debugElement.query(By.css('#ecm-job-title'));
|
||||
expect(ecmJobTitle).not.toBeNull();
|
||||
expect(ecmJobTitle).not.toBeNull();
|
||||
expect(ecmJobTitle.nativeElement.textContent).toContain('N/A');
|
||||
}));
|
||||
|
||||
it('should not show the tabs', () => {
|
||||
let imageButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#user-initials-image');
|
||||
imageButton.click();
|
||||
fixture.detectChanges();
|
||||
let tabHeader = fixture.debugElement.query(By.css('#tab-group-env'));
|
||||
expect(tabHeader.classes['adf-hide-tab']).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe('when user is logged on bpm', () => {
|
||||
|
||||
beforeEach(async(() => {
|
||||
spyOn(stubAuthService, 'isBpmLoggedIn').and.returnValue(true);
|
||||
spyOn(stubAuthService, 'isLoggedIn').and.returnValue(true);
|
||||
jasmine.Ajax.install();
|
||||
}));
|
||||
|
||||
afterEach(() => {
|
||||
jasmine.Ajax.uninstall();
|
||||
});
|
||||
|
||||
it('should show full name next the user image', () => {
|
||||
fixture.detectChanges();
|
||||
jasmine.Ajax.requests.mostRecent().respondWith({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
responseText: JSON.stringify(fakeBpmUser)
|
||||
});
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
let imageButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#logged-user-img');
|
||||
imageButton.click();
|
||||
fixture.detectChanges();
|
||||
let bpmUserName = fixture.debugElement.query(By.css('#bpm-username'));
|
||||
expect(element.querySelector('#userinfo_container')).not.toBeNull();
|
||||
expect(bpmUserName).toBeDefined();
|
||||
expect(bpmUserName).not.toBeNull();
|
||||
expect(bpmUserName.nativeElement.innerHTML).toContain('fake-bpm-first-name fake-bpm-last-name');
|
||||
});
|
||||
});
|
||||
|
||||
it('should get the bpm current user image from the service', () => {
|
||||
fixture.detectChanges();
|
||||
jasmine.Ajax.requests.mostRecent().respondWith({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
responseText: JSON.stringify(fakeBpmUser)
|
||||
});
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('#userinfo_container')).not.toBeNull();
|
||||
expect(element.querySelector('#logged-user-img')).not.toBeNull();
|
||||
expect(element.querySelector('#logged-user-img').getAttribute('src'))
|
||||
.toContain('activiti-app/app/rest/admin/profile-picture');
|
||||
});
|
||||
});
|
||||
|
||||
it('should show last name if first name is null', () => {
|
||||
fixture.detectChanges();
|
||||
let wrongBpmUser: BpmUserModel = new BpmUserModel({
|
||||
firstName: null,
|
||||
lastName: 'fake-last-name'
|
||||
});
|
||||
userInfoComp.bpmUser = wrongBpmUser;
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('#userinfo_container')).toBeDefined();
|
||||
expect(element.querySelector('#bpm-username')).not.toBeNull();
|
||||
expect(element.querySelector('#bpm-username').textContent).toContain('fake-last-name');
|
||||
expect(element.querySelector('#bpm-username').textContent).not.toContain('fake-bpm-first-name');
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
it('should not show first name if it is null string', () => {
|
||||
fixture.detectChanges();
|
||||
let wrongFirstNameBpmUser: BpmUserModel = new BpmUserModel({
|
||||
firstName: 'null',
|
||||
lastName: 'fake-last-name'
|
||||
});
|
||||
userInfoComp.bpmUser = wrongFirstNameBpmUser;
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('#userinfo_container')).toBeDefined();
|
||||
expect(element.querySelector('#bpm-full-name')).toBeDefined();
|
||||
expect(element.querySelector('#bpm-full-name').textContent).toContain('fake-last-name');
|
||||
expect(element.querySelector('#bpm-full-name').textContent).not.toContain('null');
|
||||
});
|
||||
});
|
||||
|
||||
it('should not show last name if it is null string', () => {
|
||||
fixture.detectChanges();
|
||||
let wrongLastNameBpmUser: BpmUserModel = new BpmUserModel({
|
||||
firstName: 'fake-first-name',
|
||||
lastName: 'null'
|
||||
});
|
||||
userInfoComp.bpmUser = wrongLastNameBpmUser;
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('#userinfo_container')).toBeDefined();
|
||||
expect(element.querySelector('#bpm-full-name')).toBeDefined();
|
||||
expect(element.querySelector('#bpm-full-name').textContent).toContain('fake-first-name');
|
||||
expect(element.querySelector('#bpm-full-name').textContent).not.toContain('null');
|
||||
});
|
||||
});
|
||||
|
||||
it('should not show the tabs', () => {
|
||||
fixture.detectChanges();
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('#tab-bar-env').getAttribute('hidden')).not.toBeNull();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('when user is logged on bpm and ecm', () => {
|
||||
|
||||
beforeEach(async(() => {
|
||||
spyOn(stubAuthService, 'isEcmLoggedIn').and.returnValue(true);
|
||||
spyOn(stubAuthService, 'isBpmLoggedIn').and.returnValue(true);
|
||||
spyOn(stubAuthService, 'isLoggedIn').and.returnValue(true);
|
||||
spyOn(stubContent, 'getContentUrl').and.returnValue('src/assets/images/ecmImg.gif');
|
||||
jasmine.Ajax.install();
|
||||
}));
|
||||
|
||||
beforeEach(async(() => {
|
||||
fixture.detectChanges();
|
||||
jasmine.Ajax.requests.first().respondWith({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
responseText: JSON.stringify({entry: fakeEcmUser})
|
||||
});
|
||||
jasmine.Ajax.requests.mostRecent().respondWith({
|
||||
status: 200,
|
||||
contentType: 'json',
|
||||
responseText: fakeBpmUser
|
||||
});
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture.detectChanges();
|
||||
let imageButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#logged-user-img');
|
||||
imageButton.click();
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
jasmine.Ajax.uninstall();
|
||||
});
|
||||
|
||||
it('should get the bpm user informations from the service', () => {
|
||||
let bpmTab = fixture.debugElement.queryAll(By.css('#tab-group-env .mat-tab-labels .mat-tab-label'))[1];
|
||||
bpmTab.triggerEventHandler('click', null);
|
||||
fixture.detectChanges();
|
||||
let bpmUsername = fixture.debugElement.query(By.css('#bpm-username'));
|
||||
let bpmImage = fixture.debugElement.query(By.css('#bpm-user-detail-image'));
|
||||
|
||||
expect(element.querySelector('#userinfo_container')).not.toBeNull();
|
||||
expect(bpmUsername).not.toBeNull();
|
||||
expect(bpmImage).not.toBeNull();
|
||||
expect(bpmImage.properties.src).toContain('app/rest/admin/profile-picture');
|
||||
expect(bpmUsername.nativeElement.textContent).toContain('fake-bpm-first-name fake-bpm-last-name');
|
||||
expect(fixture.debugElement.query(By.css('#bpm-tenant')).nativeElement.textContent).toContain('fake-tenant-name');
|
||||
});
|
||||
|
||||
it('should get the ecm user informations from the service', () => {
|
||||
let ecmUsername = fixture.debugElement.query(By.css('#ecm-username'));
|
||||
let ecmImage = fixture.debugElement.query(By.css('#ecm-user-detail-image'));
|
||||
|
||||
expect(element.querySelector('#userinfo_container')).toBeDefined();
|
||||
expect(ecmUsername).not.toBeNull();
|
||||
expect(ecmImage).not.toBeNull();
|
||||
expect(ecmImage.properties.src).toContain('assets/images/ecmImg.gif');
|
||||
expect(fixture.debugElement.query(By.css('#ecm-full-name')).nativeElement.textContent).toContain('fake-ecm-first-name fake-ecm-last-name');
|
||||
expect(fixture.debugElement.query(By.css('#ecm-job-title')).nativeElement.textContent).toContain('job-ecm-test');
|
||||
});
|
||||
|
||||
it('should show the ecm image if exists', () => {
|
||||
expect(element.querySelector('#userinfo_container')).toBeDefined();
|
||||
expect(element.querySelector('#logged-user-img')).toBeDefined();
|
||||
expect(element.querySelector('#logged-user-img').getAttribute('src')).toEqual('src/assets/images/ecmImg.gif');
|
||||
});
|
||||
|
||||
it('should show the bpm image if ecm does not have it', () => {
|
||||
userInfoComp.ecmUserImage = null;
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('#userinfo_container')).toBeDefined();
|
||||
expect(element.querySelector('#logged-user-img')).toBeDefined();
|
||||
expect(element.querySelector('#logged-user-img').getAttribute('src')).toContain('rest/admin/profile-picture');
|
||||
});
|
||||
});
|
||||
|
||||
it('should show the tabs for the env', () => {
|
||||
let tabGroup = fixture.debugElement.query(By.css('#tab-group-env'));
|
||||
let tabs = fixture.debugElement.queryAll(By.css('#tab-group-env .mat-tab-labels .mat-tab-label'));
|
||||
|
||||
expect(tabGroup).not.toBeNull();
|
||||
expect(tabGroup.classes['adf-hide-tab']).toBeFalsy();
|
||||
expect(tabs.length).toBe(2);
|
||||
});
|
||||
|
||||
it('should not close the menu when a tab is clicked', () => {
|
||||
let tabGroup = fixture.debugElement.query(By.css('#tab-group-env'));
|
||||
let tabs = fixture.debugElement.queryAll(By.css('#tab-group-env .mat-tab-labels .mat-tab-label'));
|
||||
|
||||
expect(tabGroup).not.toBeNull();
|
||||
tabs[1].triggerEventHandler('click', null);
|
||||
fixture.detectChanges();
|
||||
expect(fixture.debugElement.query(By.css('#user-profile-lists'))).not.toBeNull();
|
||||
});
|
||||
});
|
||||
});
|
||||
114
lib/core/userinfo/components/user-info.component.ts
Normal file
114
lib/core/userinfo/components/user-info.component.ts
Normal file
@@ -0,0 +1,114 @@
|
||||
/*!
|
||||
* @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, Input, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { AuthenticationService } from '../../services';
|
||||
import { BpmUserModel } from './../models/bpm-user.model';
|
||||
import { EcmUserModel } from './../models/ecm-user.model';
|
||||
import { BpmUserService } from './../services/bpm-user.service';
|
||||
import { EcmUserService } from './../services/ecm-user.service';
|
||||
|
||||
declare var require: any;
|
||||
|
||||
@Component({
|
||||
selector: 'adf-userinfo, ng2-alfresco-userinfo',
|
||||
styleUrls: ['./user-info.component.scss'],
|
||||
templateUrl: './user-info.component.html',
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class UserInfoComponent implements OnInit {
|
||||
|
||||
@Input()
|
||||
ecmBackgroundImage: string = require('../../assets/images/ecm-background.png');
|
||||
|
||||
@Input()
|
||||
bpmBackgroundImage: string = require('../../assets/images/bpm-background.png');
|
||||
|
||||
@Input()
|
||||
menuPositionX: string = 'after';
|
||||
|
||||
@Input()
|
||||
menuPositionY: string = 'below';
|
||||
|
||||
@Input()
|
||||
showName: boolean = true;
|
||||
|
||||
@Input()
|
||||
namePosition: string = 'right';
|
||||
|
||||
ecmUser: EcmUserModel;
|
||||
bpmUser: BpmUserModel;
|
||||
bpmUserImage: any;
|
||||
ecmUserImage: any;
|
||||
|
||||
constructor(private ecmUserService: EcmUserService,
|
||||
private bpmUserService: BpmUserService,
|
||||
private authService: AuthenticationService) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.getUserInfo();
|
||||
}
|
||||
|
||||
getUserInfo() {
|
||||
this.loadEcmUserInfo();
|
||||
this.loadBpmUserInfo();
|
||||
}
|
||||
|
||||
isLoggedIn() {
|
||||
return this.authService.isLoggedIn();
|
||||
}
|
||||
|
||||
loadEcmUserInfo(): void {
|
||||
if (this.authService.isEcmLoggedIn()) {
|
||||
this.ecmUserService.getCurrentUserInfo()
|
||||
.subscribe((res) => {
|
||||
this.ecmUser = new EcmUserModel(res);
|
||||
this.getEcmAvatar();
|
||||
}
|
||||
);
|
||||
} else {
|
||||
this.ecmUser = null;
|
||||
this.ecmUserImage = null;
|
||||
}
|
||||
}
|
||||
|
||||
loadBpmUserInfo(): void {
|
||||
if (this.authService.isBpmLoggedIn()) {
|
||||
this.bpmUserService.getCurrentUserInfo()
|
||||
.subscribe((res) => {
|
||||
this.bpmUser = new BpmUserModel(res);
|
||||
});
|
||||
this.bpmUserImage = this.bpmUserService.getCurrentUserProfileImage();
|
||||
} else {
|
||||
this.bpmUser = null;
|
||||
this.bpmUserImage = null;
|
||||
}
|
||||
}
|
||||
|
||||
stopClosing(event) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
private getEcmAvatar() {
|
||||
this.ecmUserImage = this.ecmUserService.getUserProfileImage(this.ecmUser.avatarId);
|
||||
}
|
||||
|
||||
showOnRight() {
|
||||
return this.namePosition === 'right';
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user