mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[AAE-1174] select first user info when open the first time (#5345)
* select first info user when open * add early check to build the tabs * fix lint * try different solution
This commit is contained in:
Eugenio Romano
GitHub
@@ -1,20 +1,22 @@
|
||||
<div id="userinfo_container" [class.adf-userinfo-name-right]="showOnRight" (keyup)="onKeyPress($event)"
|
||||
class="adf-userinfo-container" *ngIf="isLoggedIn">
|
||||
class="adf-userinfo-container" *ngIf="isLoggedIn">
|
||||
|
||||
<ng-container *ngIf="showName">
|
||||
<span *ngIf="identityUser$ | async as identityUser; else showBpmAndEcmUserFullNames" id="adf-userinfo-identity-name-display"
|
||||
class="adf-userinfo-name">{{identityUser | fullName}}</span>
|
||||
<span *ngIf="identityUser$ | async as identityUser; else showBpmAndEcmUserFullNames"
|
||||
id="adf-userinfo-identity-name-display"
|
||||
class="adf-userinfo-name">{{identityUser | fullName}}</span>
|
||||
<ng-template #showBpmAndEcmUserFullNames>
|
||||
<span *ngIf="ecmUser$ | async as ecmUser; else showBpmUserFullName" id="adf-userinfo-ecm-name-display"
|
||||
class="adf-userinfo-name">{{ecmUser | fullName}}</span>
|
||||
class="adf-userinfo-name">{{ecmUser | fullName}}</span>
|
||||
<ng-template #showBpmUserFullName>
|
||||
<span *ngIf="bpmUser$ | async as bpmUser" id="adf-userinfo-bpm-name-display"
|
||||
class="adf-userinfo-name">{{bpmUser | fullName}}</span>
|
||||
class="adf-userinfo-name">{{bpmUser | fullName}}</span>
|
||||
</ng-template>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
|
||||
<button mat-button [matMenuTriggerFor]="menu" class="adf-userinfo-menu_button" data-automation-id="adf-user-profile">
|
||||
<button mat-button [matMenuTriggerFor]="menu" class="adf-userinfo-menu_button"
|
||||
data-automation-id="adf-user-profile">
|
||||
<div class="adf-userinfo-button-profile" id="user-profile">
|
||||
<div *ngIf="identityUser$ | async as identityUser; else showBpmAndEcmUserImage" id="identity-user-image">
|
||||
<div [outerHTML]="identityUser | usernameInitials:'adf-userinfo-pic'"></div>
|
||||
@@ -23,7 +25,7 @@
|
||||
<div *ngIf="ecmUser$ | async as ecmUser; else showBpmUserImage" id="ecm-user-image">
|
||||
<div *ngIf="ecmUser.avatarId; else initialTemplate" class="adf-userinfo-profile-container">
|
||||
<img id="logged-user-img" [src]="getEcmAvatar(ecmUser.avatarId)" alt="user-info-profile-button"
|
||||
class="adf-userinfo-profile-image"/>
|
||||
class="adf-userinfo-profile-image"/>
|
||||
</div>
|
||||
<ng-template #initialTemplate>
|
||||
<div [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-pic'"></div>
|
||||
@@ -31,64 +33,75 @@
|
||||
</div>
|
||||
<ng-template #showBpmUserImage>
|
||||
<div *ngIf="bpmUser$ | async as bpmUser" id="bpm-user-image">
|
||||
<div *ngIf="bpmUser.pictureId; else initialTemplate" class="adf-userinfo-profile-container">
|
||||
<img id="logged-user-img" [src]="getBpmUserImage()" alt="user-info-profile-button"
|
||||
class="adf-userinfo-profile-image"/>
|
||||
</div>
|
||||
<ng-template #initialTemplate>
|
||||
<div [outerHTML]="bpmUser | usernameInitials:'adf-userinfo-pic'"></div>
|
||||
</ng-template>
|
||||
<div *ngIf="bpmUser.pictureId; else initialTemplate" class="adf-userinfo-profile-container">
|
||||
<img id="logged-user-img" [src]="getBpmUserImage()" alt="user-info-profile-button"
|
||||
class="adf-userinfo-profile-image"/>
|
||||
</div>
|
||||
<ng-template #initialTemplate>
|
||||
<div [outerHTML]="bpmUser | usernameInitials:'adf-userinfo-pic'"></div>
|
||||
</ng-template>
|
||||
</div>
|
||||
</ng-template>
|
||||
</ng-template>
|
||||
</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$ | async) || !(ecmUser$ | async)">
|
||||
<mat-tab id="ecm-panel" label="{{ 'USER_PROFILE.TAB.CS' | translate }}" *ngIf="ecmUser$ | async as ecmUser">
|
||||
<mat-card class="adf-userinfo-card">
|
||||
<mat-card-header class="adf-userinfo-card-header" [style.background-image]="'url(' + ecmBackgroundImage + ')'">
|
||||
<div *ngIf="ecmUser.avatarId; else initialTemplate" class="adf-userinfo-profile-container adf-hide-small">
|
||||
<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)" selectedIndex="0"
|
||||
class="adf-userinfo-tab" [class.adf-hide-tab]="!(bpmUser$ | async) || !(ecmUser$ | async)">
|
||||
<mat-tab id="ecm-panel" label="{{ 'USER_PROFILE.TAB.CS' | translate }}"
|
||||
*ngIf="mode==='CONTENT' || mode==='ALL'">
|
||||
<mat-card class="adf-userinfo-card" *ngIf="ecmUser$ | async as ecmUser">
|
||||
<mat-card-header class="adf-userinfo-card-header"
|
||||
[style.background-image]="'url(' + ecmBackgroundImage + ')'">
|
||||
<div *ngIf="ecmUser.avatarId; else initialTemplate"
|
||||
class="adf-userinfo-profile-container adf-hide-small">
|
||||
<img class="adf-userinfo-profile-picture" id="ecm-user-detail-image"
|
||||
alt="ecm-profile-image" [src]="getEcmAvatar(ecmUser.avatarId)" />
|
||||
alt="ecm-profile-image" [src]="getEcmAvatar(ecmUser.avatarId)"/>
|
||||
</div>
|
||||
<ng-template #initialTemplate>
|
||||
<div [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
|
||||
<div
|
||||
[outerHTML]="ecmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
|
||||
</ng-template>
|
||||
|
||||
<div class="adf-userinfo-title" id="ecm-username">{{ecmUser | fullName}}</div>
|
||||
<div class="adf-userinfo-title" id="ecm-username">{{ecmUser | fullName}}</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 | fullName}}</span>
|
||||
<span class="adf-userinfo__detail-profile" id="ecm-email"> {{ecmUser.email}} </span>
|
||||
</div>
|
||||
<div class="adf-userinfo-detail">
|
||||
<div class="adf-userinfo-detail">
|
||||
<span id="ecm-full-name"
|
||||
class="adf-userinfo__detail-title">{{ecmUser | fullName}}</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" id="ecm-job-title-label">
|
||||
{{ '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>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</mat-tab>
|
||||
<mat-tab id="bpm-panel" label="{{ 'USER_PROFILE.TAB.PS' | translate }}" *ngIf="bpmUser$ | async as bpmUser">
|
||||
<mat-card class="adf-userinfo-card">
|
||||
<mat-card-header class="adf-userinfo-card-header" [style.background-image]="'url(' + bpmBackgroundImage + ')'">
|
||||
<img *ngIf="bpmUser.pictureId; else initialTemplate" class="adf-userinfo-profile-picture adf-hide-small" id="bpm-user-detail-image"
|
||||
alt="bpm-profile-image" [src]="getBpmUserImage()"/>
|
||||
<ng-template #initialTemplate>
|
||||
<div [outerHTML]="bpmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
|
||||
</ng-template>
|
||||
<div class="adf-userinfo-title" id="bpm-username">{{bpmUser | fullName}}</div>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div class="adf-userinfo-supporting-text">
|
||||
<mat-tab id="bpm-panel" label="{{ 'USER_PROFILE.TAB.PS' | translate }}"
|
||||
*ngIf="mode==='PROCESS' || mode==='ALL'">
|
||||
<mat-card class="adf-userinfo-card" *ngIf="bpmUser$ | async as bpmUser">
|
||||
<mat-card-header class="adf-userinfo-card-header"
|
||||
[style.background-image]="'url(' + bpmBackgroundImage + ')'">
|
||||
<img *ngIf="bpmUser.pictureId; else initialTemplate"
|
||||
class="adf-userinfo-profile-picture adf-hide-small" id="bpm-user-detail-image"
|
||||
alt="bpm-profile-image" [src]="getBpmUserImage()"/>
|
||||
<ng-template #initialTemplate>
|
||||
<div
|
||||
[outerHTML]="bpmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
|
||||
</ng-template>
|
||||
<div class="adf-userinfo-title" id="bpm-username">{{bpmUser | fullName}}</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 | fullName }}</span>
|
||||
<span id="bpm-full-name"
|
||||
class="adf-userinfo__detail-title">{{ bpmUser | fullName }}</span>
|
||||
<span class="adf-userinfo__detail-profile" id="bpm-email"> {{bpmUser.email}} </span>
|
||||
</div>
|
||||
<div class="adf-userinfo-detail">
|
||||
@@ -97,24 +110,26 @@
|
||||
<span class="adf-userinfo__detail-profile">{{ bpmUser.tenantName ? bpmUser.tenantName : '' }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</mat-tab>
|
||||
<mat-tab id="identity-panel" *ngIf="identityUser$ | async as identityUser">
|
||||
<mat-card class="adf-userinfo-card">
|
||||
<mat-card-header class="adf-userinfo-card-header" [style.background-image]="'url(' + bpmBackgroundImage + ')'">
|
||||
<mat-tab id="identity-panel" *ngIf="mode==='SSO'">
|
||||
<mat-card class="adf-userinfo-card" *ngIf="identityUser$ | async as identityUser">
|
||||
<mat-card-header class="adf-userinfo-card-header"
|
||||
[style.background-image]="'url(' + bpmBackgroundImage + ')'">
|
||||
<div
|
||||
[outerHTML]="identityUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'">
|
||||
</div>
|
||||
<div class="adf-userinfo-title" id="identity-username">{{identityUser | fullName}}</div>
|
||||
<div class="adf-userinfo-title" id="identity-username">{{identityUser | fullName}}</div>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div class="adf-userinfo-supporting-text">
|
||||
<div class="adf-userinfo-detail">
|
||||
<span id="identity-full-name" class="adf-userinfo__detail-title">{{identityUser | fullName}}</span>
|
||||
<span class="adf-userinfo__detail-profile" id="identity-email"> {{identityUser.email}} </span>
|
||||
</div>
|
||||
<div class="adf-userinfo-detail">
|
||||
<span id="identity-full-name" class="adf-userinfo__detail-title">{{identityUser | fullName}}</span>
|
||||
<span class="adf-userinfo__detail-profile"
|
||||
id="identity-email"> {{identityUser.email}} </span>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
@@ -62,6 +62,8 @@ export class UserInfoComponent implements OnInit {
|
||||
@Input()
|
||||
namePosition: string = 'right';
|
||||
|
||||
mode: string;
|
||||
|
||||
ecmUser$: Observable<EcmUserModel>;
|
||||
bpmUser$: Observable<BpmUserModel>;
|
||||
identityUser$: Observable<IdentityUserModel>;
|
||||
@@ -80,13 +82,17 @@ export class UserInfoComponent implements OnInit {
|
||||
getUserInfo() {
|
||||
if (this.authService.isOauth()) {
|
||||
this.loadIdentityUserInfo();
|
||||
this.mode = 'SSO';
|
||||
} else if (this.authService.isEcmLoggedIn() && this.authService.isBpmLoggedIn()) {
|
||||
this.loadEcmUserInfo();
|
||||
this.loadBpmUserInfo();
|
||||
this.mode = 'ALL';
|
||||
} else if (this.authService.isEcmLoggedIn()) {
|
||||
this.loadEcmUserInfo();
|
||||
this.mode = 'CONTENT';
|
||||
} else if (this.authService.isBpmLoggedIn()) {
|
||||
this.loadBpmUserInfo();
|
||||
this.mode = 'PROCESS';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -95,7 +101,7 @@ export class UserInfoComponent implements OnInit {
|
||||
}
|
||||
|
||||
private closeUserModal($event: KeyboardEvent) {
|
||||
if ($event.keyCode === 27 ) {
|
||||
if ($event.keyCode === 27) {
|
||||
this.trigger.closeMenu();
|
||||
}
|
||||
}
|
||||
@@ -120,7 +126,7 @@ export class UserInfoComponent implements OnInit {
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
getEcmAvatar(avatarId: any ): string {
|
||||
getEcmAvatar(avatarId: any): string {
|
||||
return this.ecmUserService.getUserProfileImage(avatarId);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user