inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

code fixes

Browse Source 
- interpolate ng2 components html content
- fix: load images for Login
- fix: load images for User Info
- fix: load images for Document List
- fix: decorator inheritance issue for Form
- fix: load images for Search
This commit is contained in:
Denys Vuika
2016-12-07 14:55:09 +00:00
parent 45993793f9
commit 29f426f643
30 changed files with 134 additions and 306 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
ng2-components/ng2-alfresco-userinfo/src/img/anonymous.gif → ng2-components/ng2-alfresco-userinfo/src/components/anonymous.gif
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

0
ng2-components/ng2-alfresco-userinfo/src/img/blueBanner.png → ng2-components/ng2-alfresco-userinfo/src/components/bpm-background.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.2 KiB

0
ng2-components/ng2-alfresco-userinfo/src/img/orangeBanner.png → ng2-components/ng2-alfresco-userinfo/src/components/ecm-background.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

4
ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.css
View File

@@ -80,7 +80,3 @@ img.profile-picture {
margin-left: 0px;
margin-right: 8px;
}
.menu-container__items{
}

60
ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.html
View File

@@ -1,11 +1,8 @@
<div id="userinfo_container" *ngIf="isLoggedIn()">
<div *ngIf="ecmUser || bpmUser">
<div class="button-profile" id="user-profile" data-automation-id="user-profile">
<img id="logged-user-img"
[src]="getUserAvatar()"
alt="user-info-profile-button"
(error)="onImageLoadingError($event)"
class="profile-image"/>
<img *ngIf="getUserAvatar()" [src]="getUserAvatar()" (error)="bpmUserImage = null; ecmUserImage = null;" id="logged-user-img" class="profile-image" alt="user-info-profile-button">
<img *ngIf="!getUserAvatar()" src="./anonymous.gif" id="logged-user-img" class="profile-image" alt="user-info-profile-button">
</div>
<div mdl id="user-profile-lists" class="user-profile-list-mdl mdl-menu mdl-js-menu mdl-js-ripple-effect"
[class.mdl-menu--bottom-left]="menuOpenType === 'left'? true : false"
@@ -19,27 +16,22 @@
<div class="mdl-tabs__panel" [class.is-active]="ecmUser?true:false" id="ecm-panel">
<div class="detail-user-profile-list-mdl mdl-list" *ngIf="ecmUser">
<div class="demo-card-wide mdl-card">
<div class="card-title__option mdl-card__title"
id="ecm-background-image"
[style.background-image]="'url(' + ( ecmBackgroundImage || baseComponentPath + '/../img/orangeBanner.png')+')'">
<img class="profile-picture"
id="ecm-user-detail-image"
alt="ecm-profile-image"
(error)="onImageLoadingError($event)"
[src]="getEcmUserAvatar()"/>
<div class="card-title__option mdl-card__title user-info__ecm-background" id="ecm-background-image"
style="background-image: url(${require(`./ecm-background.png`)})">
<img *ngIf="ecmUserImage" [src]="ecmUserImage" (error)="ecmUserImage = null" class="profile-picture" id="ecm-user-detail-image" alt="ecm-profile-image">
<img *ngIf="!ecmUserImage" src="./anonymous.gif" class="profile-picture" id="ecm-user-detail-image" alt="ecm-profile-image">
<h2 class="mdl-card__title-text" id="ecm-username">{{getUserNameHeaderFor('ECM')}}</h2>
</div>
<div class="mdl-card__supporting-text">
<li class="mdl-list__item mdl-list__item--two-line">
<span class="mdl-list__item-primary-content">
<span id="ecm-full-name" class="truncate-long-names">
{{ formatValue(ecmUser.firstName) }} {{ formatValue(ecmUser.lastName) }}
</span>
<span id="ecm-email" class="mdl-list__item-sub-title">{{ecmUser.email}}</span>
<span id="ecm-full-name" class="truncate-long-names">
{{ formatValue(ecmUser.firstName) }} {{ formatValue(ecmUser.lastName) }}
</span>
<span id="ecm-email" class="mdl-list__item-sub-title">{{ecmUser.email}}</span>
</span>
<span id="ecm-job-title" class="mdl-list__item-secondary-content custom-role-style">
<span
class="role-label-user">{{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }}</span>
<span class="role-label-user">{{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }}</span>
{{ecmUser.jobTitle?ecmUser.jobTitle:'N/A'}}
</span>
</li>
@@ -50,28 +42,24 @@
<div class="mdl-tabs__panel" [class.is-active]="bpmUser && !ecmUser?true:false" id="bpm-panel">
<div class="detail-user-profile-list-mdl mdl-list" *ngIf="bpmUser">
<div class="demo-card-wide mdl-card">
<div class="card-title__option mdl-card__title"
id="bpm-background-image"
[style.background-image]="'url(' + (bpmBackgroundImage || baseComponentPath + '/../img/blueBanner.png')+')'">
<img class="profile-picture"
id="bpm-user-detail-image"
alt="bpm-profile-image"
(error)="onImageLoadingError($event)"
[src]="getBpmUserAvatar()"/>
<div class="card-title__option mdl-card__title user-info__bpm-background" id="bpm-background-image"
style="background-image: url(${require(`./bpm-background.png`)})">
<img *ngIf="bpmUserImage" [src]="bpmUserImage" class="profile-picture" (error)="bpmUserImage = null" id="bpm-user-detail-image" alt="bpm-profile-image">
<img *ngIf="!bpmUserImage" src="./anonymous.gif" class="profile-picture" id="bpm-user-detail-image" alt="bpm-profile-image">
<h2 class="mdl-card__title-text" id="bpm-username">{{getUserNameHeaderFor('BPM')}}</h2>
</div>
<div class="mdl-card__supporting-text">
<li class="mdl-list__item mdl-list__item--two-line">
<span class="mdl-list__item-primary-content">
<span id="bpm-full-name" class="truncate-long-names">
{{ formatValue(bpmUser.firstName) }} {{ formatValue(bpmUser.lastName) }}
</span>
<span id="bpm-email" class="mdl-list__item-sub-title">{{bpmUser.email}}</span>
</span>
<span class="mdl-list__item-primary-content">
<span id="bpm-full-name" class="truncate-long-names">
{{ formatValue(bpmUser.firstName) }} {{ formatValue(bpmUser.lastName) }}
</span>
<span id="bpm-email" class="mdl-list__item-sub-title">{{bpmUser.email}}</span>
</span>
<span id="bpm-tenant" class="mdl-list__item-secondary-content custom-role-style">
<span class="role-label-user">{{ 'USER_PROFILE.LABELS.BPM.TENANT' | translate }}</span>
{{bpmUser.tenantName}}
</span>
<span class="role-label-user">{{ 'USER_PROFILE.LABELS.BPM.TENANT' | translate }}</span>
{{bpmUser.tenantName}}
</span>
</li>
</div>
</div>

8
ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.spec.ts
View File

@@ -125,6 +125,7 @@ describe('User info component', () => {
expect(res).toEqual('fake-value');
});
/*
it('should return the anonymous avatar when users do not have images', () => {
let event = <any> {
target: {
@@ -134,6 +135,7 @@ describe('User info component', () => {
userInfoComp.onImageLoadingError(event);
expect(event.target.src).toContain('src/img/anonymous.gif');
});
*/
describe('when user is logged on ecm', () => {
@@ -204,7 +206,7 @@ describe('User info component', () => {
describe('and has no image', () => {
beforeEach(async(() => {
userInfoComp.anonymousImageUrl = userInfoComp.anonymousImageUrl.replace('/base/dist', '');
// userInfoComp.anonymousImageUrl = userInfoComp.anonymousImageUrl.replace('/base/dist', '');
spyOn(stubContent, 'getContentUrl').and.returnValue('wrongImage.gif');
fixture.detectChanges();
jasmine.Ajax.requests.mostRecent().respondWith({
@@ -250,7 +252,7 @@ describe('User info component', () => {
});
beforeEach(async(() => {
userInfoComp.anonymousImageUrl = userInfoComp.anonymousImageUrl.replace('/base/dist', '');
// userInfoComp.anonymousImageUrl = userInfoComp.anonymousImageUrl.replace('/base/dist', '');
fixture.detectChanges();
jasmine.Ajax.requests.mostRecent().respondWith({
status: 200,
@@ -329,7 +331,7 @@ describe('User info component', () => {
spyOn(stubAuthService, 'isBpmLoggedIn').and.returnValue(true);
spyOn(stubAuthService, 'isLoggedIn').and.returnValue(true);
spyOn(stubContent, 'getContentUrl').and.returnValue('src/assets/ecmImg.gif');
userInfoComp.anonymousImageUrl = userInfoComp.anonymousImageUrl.replace('/base/dist', '');
// userInfoComp.anonymousImageUrl = userInfoComp.anonymousImageUrl.replace('/base/dist', '');
jasmine.Ajax.install();
fakeBpmUser.firstName = 'fake-bpm-first-name';
fakeBpmUser.lastName = 'fake-bpm-last-name';

40
ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.ts
View File

@@ -31,29 +31,14 @@ declare let componentHandler: any;
})
export class UserInfoComponent implements OnInit {
@Input()
ecmBackgroundImage: string;
@Input()
bpmBackgroundImage: string;
@Input()
menuOpenType: string = 'right';
@Input()
fallBackThumbnailImage: string;
private baseComponentPath = module.id.replace('components/user-info.component.js', '');
ecmUser: EcmUserModel;
bpmUser: BpmUserModel;
anonymousImageUrl: string = this.baseComponentPath + 'img/anonymous.gif';
bpmUserImage: any;
ecmUserImage: any;
bpmUserImage: string;
ecmUserImage: string;
constructor(private ecmUserService: EcmUserService,
private bpmUserService: BpmUserService,
@@ -86,7 +71,7 @@ export class UserInfoComponent implements OnInit {
this.ecmUserService.getCurrentUserInfo()
.subscribe((res) => {
this.ecmUser = <EcmUserModel> res;
this.getEcmAvatar();
this.ecmUserImage = this.ecmUserService.getUserProfileImage(this.ecmUser.avatarId);
}
);
}
@@ -102,13 +87,6 @@ export class UserInfoComponent implements OnInit {
}
}
onImageLoadingError(event) {
if (event) {
let element = <any> event.target;
element.src = this.fallBackThumbnailImage || this.anonymousImageUrl;
}
}
stopClosing(event) {
event.stopPropagation();
}
@@ -125,22 +103,10 @@ export class UserInfoComponent implements OnInit {
}
}
private getEcmAvatar() {
this.ecmUserImage = this.ecmUserService.getUserProfileImage(this.ecmUser.avatarId);
}
getUserAvatar() {
return this.ecmUserImage || this.bpmUserImage;
}
getBpmUserAvatar() {
return this.bpmUserImage;
}
getEcmUserAvatar() {
return this.ecmUserImage;
}
formatValue(value: string) {
return value === 'null' ? null : value;
}