inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-1945] Profile image has Initials displayed behind it. (#2648)

Browse Source 
*  Refactored userInfo component.
*  Added test cases.
This commit is contained in:
siva kumar 2017-11-18 02:30:16 +05:30 committed by Eugenio Romano
parent 8a52d6fed5
commit 15cbd3a316
4 changed files with 81 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
lib/core/userinfo/components/user-info.component.html
View File

@ -8,15 +8,15 @@
<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">
<div *ngIf="!hasBpmUserPictureId()" [outerHTML]="bpmUser | usernameInitials:'adf-userinfo-pic'"></div>
<div *ngIf="hasBpmUserPictureId()" 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">
<div *ngIf="!hasEcmUserAvatarId()" [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-pic'"></div>
<div *ngIf="hasEcmUserAvatarId()" class="adf-userinfo-profile-container">
<img id="logged-user-img" [src]="ecmUserImage" alt="user-info-profile-button"
class="adf-userinfo-profile-image"/>
</div>
@ -29,8 +29,8 @@
<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">
<div *ngIf="!hasEcmUserAvatarId()" [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
<div *ngIf="hasEcmUserAvatarId()" 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>
@ -55,8 +55,8 @@
<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"
<div *ngIf="!hasBpmUserPictureId()" [outerHTML]="bpmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
<img *ngIf="hasBpmUserPictureId()" 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>

6
lib/core/userinfo/components/user-info.component.scss
View File

@ -35,6 +35,7 @@
}
&-userinfo-profile-image {
background: mat-color($primary, 300);
text-align: center;
border-radius: 90%;
width: 40px;
@ -42,7 +43,7 @@
margin-right: 0;
cursor: pointer;
vertical-align: middle;
margin-left: -45px;
margin-left: 0px;
}
&-userinfo-profile-container{
@ -136,11 +137,12 @@
}
&-userinfo-profile-picture {
background: mat-color($primary, 300);
background-size: cover;
border-radius: 50%;
height: 80px;
width: 80px;
margin-left: -88px;
margin-left: 0px;
margin-right: 8px;
}

62
lib/core/userinfo/components/user-info.component.spec.ts
View File

@ -16,8 +16,9 @@
*/
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { By, DomSanitizer } from '@angular/platform-browser';
import { AuthenticationService, ContentService } from '../../services';
import { InitialUsernamePipe } from '../../pipes';
import { fakeBpmUser } from '../../mock/bpm-user.service.mock';
import { fakeEcmEditedUser, fakeEcmUser, fakeEcmUserNoImage } from '../../mock/ecm-user.service.mock';
import { MaterialModule } from '../../material.module';
@ -26,6 +27,37 @@ import { EcmUserService } from '../services/ecm-user.service';
import { BpmUserModel } from './../models/bpm-user.model';
import { UserInfoComponent } from './user-info.component';
class FakeSanitazer extends DomSanitizer {
constructor() {
super();
}
sanitize(html) {
return html;
}
bypassSecurityTrustHtml(value: string): any {
return value;
}
bypassSecurityTrustStyle(value: string): any {
return null;
}
bypassSecurityTrustScript(value: string): any {
return null;
}
bypassSecurityTrustUrl(value: string): any {
return null;
}
bypassSecurityTrustResourceUrl(value: string): any {
return null;
}
}
declare let jasmine: any;
describe('User info component', () => {
@ -189,6 +221,20 @@ describe('User info component', () => {
});
}));
it('should display the current user image if user has avatarId', 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(userInfoComp.ecmUser.avatarId).toBe('fake-avatar-id');
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();
@ -239,6 +285,20 @@ describe('User info component', () => {
let tabHeader = fixture.debugElement.query(By.css('#tab-group-env'));
expect(tabHeader.classes['adf-hide-tab']).toBeTruthy();
});
it('should display the current user Initials if the user dose not have avatarId', async(() => {
fixture.whenStable().then(() => {
fixture.detectChanges();
let pipe = new InitialUsernamePipe(new FakeSanitazer());
expect(userInfoComp.ecmUser.avatarId).toBeNull();
expect(pipe.transform({
id: 13,
firstName: 'Wilbur',
lastName: 'Adams',
email: 'wilbur@app.com'
})).toBe('<div id="user-initials-image" class="">WA</div>');
});
}));
});
});

8
lib/core/userinfo/components/user-info.component.ts
View File

@ -111,4 +111,12 @@ export class UserInfoComponent implements OnInit {
showOnRight() {
return this.namePosition === 'right';
}
hasBpmUserPictureId(): boolean {
return !!this.bpmUser.pictureId;
}
hasEcmUserAvatarId(): boolean {
return !!this.ecmUser.avatarId;
}
}