mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-31 17:38:48 +00:00
user-info fixes and performance improvements (#1171)
* #1167 document-list improvements - allow setting custom root path - document-list module now re-exports datatable module (no need importing it separately if document-list is already used) - documentation updates and fixes * readme updates and unit test * user-info fixes and performance improvements - setup live reloads for user-info (demo shell) - optimise user-info template (single *ngIf, [mdl] directive for ‘user-profile-lists’ instead of CPU-hungry `ngAfterViewChecked`)
This commit is contained in:
Denys Vuika
committed by
Eugenio Romano
Eugenio Romano
parent
9066ce49e0
commit
5c401007f2
@@ -6,6 +6,7 @@
|
|||||||
"node_modules/ng2-alfresco-login/dist/**/*.{html,css,js}",
|
"node_modules/ng2-alfresco-login/dist/**/*.{html,css,js}",
|
||||||
"node_modules/ng2-alfresco-search/dist/**/*.{html,css,js}",
|
"node_modules/ng2-alfresco-search/dist/**/*.{html,css,js}",
|
||||||
"node_modules/ng2-alfresco-upload/dist/**/*.{html,css,js}",
|
"node_modules/ng2-alfresco-upload/dist/**/*.{html,css,js}",
|
||||||
|
"node_modules/ng2-alfresco-userinfo/dist/**/*.{html,css,js}",
|
||||||
"node_modules/ng2-alfresco-viewer/dist/**/*.{html,css,js}",
|
"node_modules/ng2-alfresco-viewer/dist/**/*.{html,css,js}",
|
||||||
"node_modules/ng2-alfresco-webscript/dist/**/*.{html,css,js}",
|
"node_modules/ng2-alfresco-webscript/dist/**/*.{html,css,js}",
|
||||||
"node_modules/ng2-activiti-form/dist/**/*.{html,css,js}",
|
"node_modules/ng2-activiti-form/dist/**/*.{html,css,js}",
|
||||||
|
|||||||
@@ -1,83 +1,84 @@
|
|||||||
<div id="userinfo_container" *ngIf="isLoggedIn()">
|
<div id="userinfo_container" *ngIf="isLoggedIn()">
|
||||||
<div *ngIf="ecmUser || bpmUser" class="button-profile" id="user-profile" data-automation-id="user-profile">
|
<div *ngIf="ecmUser || bpmUser">
|
||||||
<img id="logged-user-img"
|
<div class="button-profile" id="user-profile" data-automation-id="user-profile">
|
||||||
[src]="getUserAvatar()"
|
<img id="logged-user-img"
|
||||||
alt="user-info-profile-button"
|
[src]="getUserAvatar()"
|
||||||
(error)="onImageLoadingError($event)"
|
alt="user-info-profile-button"
|
||||||
class="profile-image"/>
|
(error)="onImageLoadingError($event)"
|
||||||
</div>
|
class="profile-image"/>
|
||||||
<div *ngIf="ecmUser || bpmUser" id="user-profile-lists" class="user-profile-list-mdl
|
</div>
|
||||||
mdl-menu mdl-js-menu mdl-js-ripple-effect"
|
<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"
|
[class.mdl-menu--bottom-left]="menuOpenType === 'left'? true : false"
|
||||||
[class.mdl-menu--bottom-right]="menuOpenType === 'right'? true : false"
|
[class.mdl-menu--bottom-right]="menuOpenType === 'right'? true : false"
|
||||||
for="user-profile" (click)="stopClosing($event)">
|
for="user-profile" (click)="stopClosing($event)">
|
||||||
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect menu-container__items">
|
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect menu-container__items">
|
||||||
<div id="tab-bar-env" class="mdl-tabs__tab-bar" [hidden]="!(ecmUser && bpmUser)">
|
<div id="tab-bar-env" class="mdl-tabs__tab-bar" [hidden]="!(ecmUser && bpmUser)">
|
||||||
<a href="#ecm-panel" id="ecm-tab" class="mdl-tabs__tab is-active">ECM</a>
|
<a href="#ecm-panel" id="ecm-tab" class="mdl-tabs__tab is-active">ECM</a>
|
||||||
<a href="#bpm-panel" id="bpm-tab" class="mdl-tabs__tab">BPM</a>
|
<a href="#bpm-panel" id="bpm-tab" class="mdl-tabs__tab">BPM</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="mdl-tabs__panel" [class.is-active]="ecmUser?true:false" id="ecm-panel">
|
<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="detail-user-profile-list-mdl mdl-list" *ngIf="ecmUser">
|
||||||
<div class="demo-card-wide mdl-card">
|
<div class="demo-card-wide mdl-card">
|
||||||
<div class="card-title__option mdl-card__title"
|
<div class="card-title__option mdl-card__title"
|
||||||
id="ecm-background-image"
|
id="ecm-background-image"
|
||||||
[style.background-image]="'url(' + ( ecmBackgroundImage || baseComponentPath + '/../img/orangeBanner.png')+')'">
|
[style.background-image]="'url(' + ( ecmBackgroundImage || baseComponentPath + '/../img/orangeBanner.png')+')'">
|
||||||
<img class="profile-picture"
|
<img class="profile-picture"
|
||||||
id="ecm-user-detail-image"
|
id="ecm-user-detail-image"
|
||||||
alt="ecm-profile-image"
|
alt="ecm-profile-image"
|
||||||
(error)="onImageLoadingError($event)"
|
(error)="onImageLoadingError($event)"
|
||||||
[src]="getEcmUserAvatar()"/>
|
[src]="getEcmUserAvatar()"/>
|
||||||
<h2 class="mdl-card__title-text" id="ecm-username">{{getUserNameHeaderFor('ECM')}}</h2>
|
<h2 class="mdl-card__title-text" id="ecm-username">{{getUserNameHeaderFor('ECM')}}</h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="mdl-card__supporting-text">
|
<div class="mdl-card__supporting-text">
|
||||||
<li class="mdl-list__item mdl-list__item--two-line">
|
<li class="mdl-list__item mdl-list__item--two-line">
|
||||||
<span class="mdl-list__item-primary-content">
|
<span class="mdl-list__item-primary-content">
|
||||||
<span id="ecm-full-name" class="truncate-long-names">
|
<span id="ecm-full-name" class="truncate-long-names">
|
||||||
{{ formatValue(ecmUser.firstName) }} {{ formatValue(ecmUser.lastName) }}
|
{{ formatValue(ecmUser.firstName) }} {{ formatValue(ecmUser.lastName) }}
|
||||||
</span>
|
</span>
|
||||||
<span id="ecm-email" class="mdl-list__item-sub-title">{{ecmUser.email}}</span>
|
<span id="ecm-email" class="mdl-list__item-sub-title">{{ecmUser.email}}</span>
|
||||||
</span>
|
</span>
|
||||||
<span id="ecm-job-title" class="mdl-list__item-secondary-content custom-role-style">
|
<span id="ecm-job-title" class="mdl-list__item-secondary-content custom-role-style">
|
||||||
<span
|
<span
|
||||||
class="role-label-user">{{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }}</span>
|
class="role-label-user">{{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }}</span>
|
||||||
{{ecmUser.jobTitle?ecmUser.jobTitle:'N/A'}}
|
{{ecmUser.jobTitle?ecmUser.jobTitle:'N/A'}}
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="mdl-tabs__panel" [class.is-active]="bpmUser && !ecmUser?true:false" id="bpm-panel">
|
||||||
<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="detail-user-profile-list-mdl mdl-list" *ngIf="bpmUser">
|
<div class="demo-card-wide mdl-card">
|
||||||
<div class="demo-card-wide mdl-card">
|
<div class="card-title__option mdl-card__title"
|
||||||
<div class="card-title__option mdl-card__title"
|
id="bpm-background-image"
|
||||||
id="bpm-background-image"
|
[style.background-image]="'url(' + (bpmBackgroundImage || baseComponentPath + '/../img/blueBanner.png')+')'">
|
||||||
[style.background-image]="'url(' + (bpmBackgroundImage || baseComponentPath + '/../img/blueBanner.png')+')'">
|
<img class="profile-picture"
|
||||||
<img class="profile-picture"
|
id="bpm-user-detail-image"
|
||||||
id="bpm-user-detail-image"
|
alt="bpm-profile-image"
|
||||||
alt="bpm-profile-image"
|
(error)="onImageLoadingError($event)"
|
||||||
(error)="onImageLoadingError($event)"
|
[src]="getBpmUserAvatar()"/>
|
||||||
[src]="getBpmUserAvatar()"/>
|
<h2 class="mdl-card__title-text" id="bpm-username">{{getUserNameHeaderFor('BPM')}}</h2>
|
||||||
<h2 class="mdl-card__title-text" id="bpm-username">{{getUserNameHeaderFor('BPM')}}</h2>
|
</div>
|
||||||
</div>
|
<div class="mdl-card__supporting-text">
|
||||||
<div class="mdl-card__supporting-text">
|
<li class="mdl-list__item mdl-list__item--two-line">
|
||||||
<li class="mdl-list__item mdl-list__item--two-line">
|
<span class="mdl-list__item-primary-content">
|
||||||
<span class="mdl-list__item-primary-content">
|
<span id="bpm-full-name" class="truncate-long-names">
|
||||||
<span id="bpm-full-name" class="truncate-long-names">
|
{{ formatValue(bpmUser.firstName) }} {{ formatValue(bpmUser.lastName) }}
|
||||||
{{ formatValue(bpmUser.firstName) }} {{ formatValue(bpmUser.lastName) }}
|
</span>
|
||||||
</span>
|
<span id="bpm-email" class="mdl-list__item-sub-title">{{bpmUser.email}}</span>
|
||||||
<span id="bpm-email" class="mdl-list__item-sub-title">{{bpmUser.email}}</span>
|
</span>
|
||||||
</span>
|
<span id="bpm-tenant" class="mdl-list__item-secondary-content custom-role-style">
|
||||||
<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>
|
||||||
<span class="role-label-user">{{ 'USER_PROFILE.LABELS.BPM.TENANT' | translate }}</span>
|
{{bpmUser.tenantName}}
|
||||||
{{bpmUser.tenantName}}
|
</span>
|
||||||
</span>
|
</li>
|
||||||
</li>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -15,7 +15,7 @@
|
|||||||
* limitations under the License.
|
* limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { Component, OnInit, Input, AfterViewChecked } from '@angular/core';
|
import { Component, OnInit, Input } from '@angular/core';
|
||||||
import { EcmUserModel } from './../models/ecm-user.model';
|
import { EcmUserModel } from './../models/ecm-user.model';
|
||||||
import { BpmUserModel } from './../models/bpm-user.model';
|
import { BpmUserModel } from './../models/bpm-user.model';
|
||||||
import { EcmUserService } from './../services/ecm-user.service';
|
import { EcmUserService } from './../services/ecm-user.service';
|
||||||
@@ -30,7 +30,7 @@ declare let componentHandler: any;
|
|||||||
styleUrls: ['./user-info.component.css'],
|
styleUrls: ['./user-info.component.css'],
|
||||||
templateUrl: './user-info.component.html'
|
templateUrl: './user-info.component.html'
|
||||||
})
|
})
|
||||||
export class UserInfoComponent implements AfterViewChecked, OnInit {
|
export class UserInfoComponent implements OnInit {
|
||||||
|
|
||||||
@Input()
|
@Input()
|
||||||
ecmBackgroundImage: string;
|
ecmBackgroundImage: string;
|
||||||
@@ -69,13 +69,6 @@ export class UserInfoComponent implements AfterViewChecked, OnInit {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
ngAfterViewChecked() {
|
|
||||||
// workaround for MDL issues with dynamic components
|
|
||||||
if (componentHandler) {
|
|
||||||
componentHandler.upgradeAllRegistered();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
this.getUserInfo();
|
this.getUserInfo();
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user