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

[AAE-1174] select first user info when open the first time (#5345)

Browse Source 
* 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
2020-01-13 11:24:03 +01:00
committed by GitHub
parent 26677c6789
commit a8c2a0b1e2
4 changed files with 86 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
e2e/core/user-info-component.e2e.ts
View File

@@ -74,7 +74,6 @@ describe('User Info component', () => {
await userInfoPage.clickUserProfile(); await userInfoPage.clickUserProfile();
await userInfoPage.dialogIsDisplayed(); await userInfoPage.dialogIsDisplayed();
await userInfoPage.clickOnContentServicesTab();
await userInfoPage.checkContentServicesTabIsSelected(); await userInfoPage.checkContentServicesTabIsSelected();
await expect(await userInfoPage.getContentHeaderTitle()).toEqual(contentUserModel.firstName + ' ' + contentUserModel.lastName); await expect(await userInfoPage.getContentHeaderTitle()).toEqual(contentUserModel.firstName + ' ' + contentUserModel.lastName);

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

@@ -1,20 +1,22 @@
<div id="userinfo_container" [class.adf-userinfo-name-right]="showOnRight" (keyup)="onKeyPress($event)" <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"> <ng-container *ngIf="showName">
<span *ngIf="identityUser$ | async as identityUser; else showBpmAndEcmUserFullNames" id="adf-userinfo-identity-name-display" <span *ngIf="identityUser$ | async as identityUser; else showBpmAndEcmUserFullNames"
class="adf-userinfo-name">{{identityUser | fullName}}</span> id="adf-userinfo-identity-name-display"
class="adf-userinfo-name">{{identityUser | fullName}}</span>
<ng-template #showBpmAndEcmUserFullNames> <ng-template #showBpmAndEcmUserFullNames>
<span *ngIf="ecmUser$ | async as ecmUser; else showBpmUserFullName" id="adf-userinfo-ecm-name-display" <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> <ng-template #showBpmUserFullName>
<span *ngIf="bpmUser$ | async as bpmUser" id="adf-userinfo-bpm-name-display" <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-template> </ng-template>
</ng-container> </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 class="adf-userinfo-button-profile" id="user-profile">
<div *ngIf="identityUser$ | async as identityUser; else showBpmAndEcmUserImage" id="identity-user-image"> <div *ngIf="identityUser$ | async as identityUser; else showBpmAndEcmUserImage" id="identity-user-image">
<div [outerHTML]="identityUser | usernameInitials:'adf-userinfo-pic'"></div> <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$ | async as ecmUser; else showBpmUserImage" id="ecm-user-image">
<div *ngIf="ecmUser.avatarId; else initialTemplate" class="adf-userinfo-profile-container"> <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" <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> </div>
<ng-template #initialTemplate> <ng-template #initialTemplate>
<div [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-pic'"></div> <div [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-pic'"></div>
@@ -31,64 +33,75 @@
</div> </div>
<ng-template #showBpmUserImage> <ng-template #showBpmUserImage>
<div *ngIf="bpmUser$ | async as bpmUser" id="bpm-user-image"> <div *ngIf="bpmUser$ | async as bpmUser" id="bpm-user-image">
<div *ngIf="bpmUser.pictureId; else initialTemplate" class="adf-userinfo-profile-container"> <div *ngIf="bpmUser.pictureId; else initialTemplate" class="adf-userinfo-profile-container">
<img id="logged-user-img" [src]="getBpmUserImage()" alt="user-info-profile-button" <img id="logged-user-img" [src]="getBpmUserImage()" alt="user-info-profile-button"
class="adf-userinfo-profile-image"/> class="adf-userinfo-profile-image"/>
</div> </div>
<ng-template #initialTemplate> <ng-template #initialTemplate>
<div [outerHTML]="bpmUser | usernameInitials:'adf-userinfo-pic'"></div> <div [outerHTML]="bpmUser | usernameInitials:'adf-userinfo-pic'"></div>
</ng-template> </ng-template>
</div> </div>
</ng-template> </ng-template>
</ng-template> </ng-template>
</div> </div>
</button> </button>
<mat-menu #menu="matMenu" id="user-profile-lists" [xPosition]="menuPositionX" [yPosition]="menuPositionY" [overlapTrigger]="false" class="adf-userinfo-menu"> <mat-menu #menu="matMenu" id="user-profile-lists" [xPosition]="menuPositionX" [yPosition]="menuPositionY"
<mat-tab-group id="tab-group-env" (click)="stopClosing($event)" [overlapTrigger]="false" class="adf-userinfo-menu">
class="adf-userinfo-tab" [class.adf-hide-tab]="!(bpmUser$ | async) || !(ecmUser$ | async)"> <mat-tab-group id="tab-group-env" (click)="stopClosing($event)" selectedIndex="0"
<mat-tab id="ecm-panel" label="{{ 'USER_PROFILE.TAB.CS' | translate }}" *ngIf="ecmUser$ | async as ecmUser"> class="adf-userinfo-tab" [class.adf-hide-tab]="!(bpmUser$ | async) || !(ecmUser$ | async)">
<mat-card class="adf-userinfo-card"> <mat-tab id="ecm-panel" label="{{ 'USER_PROFILE.TAB.CS' | translate }}"
<mat-card-header class="adf-userinfo-card-header" [style.background-image]="'url(' + ecmBackgroundImage + ')'"> *ngIf="mode==='CONTENT' || mode==='ALL'">
<div *ngIf="ecmUser.avatarId; else initialTemplate" class="adf-userinfo-profile-container adf-hide-small"> <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" <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> </div>
<ng-template #initialTemplate> <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> </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-header>
<mat-card-content> <mat-card-content>
<div class="adf-userinfo-supporting-text"> <div class="adf-userinfo-supporting-text">
<div class="adf-userinfo-detail"> <div class="adf-userinfo-detail">
<span id="ecm-full-name" class="adf-userinfo__detail-title">{{ecmUser | fullName}}</span> <span id="ecm-full-name"
<span class="adf-userinfo__detail-profile" id="ecm-email"> {{ecmUser.email}} </span> class="adf-userinfo__detail-title">{{ecmUser | fullName}}</span>
</div> <span class="adf-userinfo__detail-profile" id="ecm-email"> {{ecmUser.email}} </span>
<div class="adf-userinfo-detail"> </div>
<div class="adf-userinfo-detail">
<span class="adf-userinfo__secondary-info" id="ecm-job-title-label"> <span class="adf-userinfo__secondary-info" id="ecm-job-title-label">
{{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }} {{ '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 id="ecm-job-title" class="adf-userinfo__detail-profile"> {{ ecmUser.jobTitle ? ecmUser.jobTitle : 'N/A' }} </span>
</span> </span>
</div> </div>
</div> </div>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
</mat-tab> </mat-tab>
<mat-tab id="bpm-panel" label="{{ 'USER_PROFILE.TAB.PS' | translate }}" *ngIf="bpmUser$ | async as bpmUser"> <mat-tab id="bpm-panel" label="{{ 'USER_PROFILE.TAB.PS' | translate }}"
<mat-card class="adf-userinfo-card"> *ngIf="mode==='PROCESS' || mode==='ALL'">
<mat-card-header class="adf-userinfo-card-header" [style.background-image]="'url(' + bpmBackgroundImage + ')'"> <mat-card class="adf-userinfo-card" *ngIf="bpmUser$ | async as bpmUser">
<img *ngIf="bpmUser.pictureId; else initialTemplate" class="adf-userinfo-profile-picture adf-hide-small" id="bpm-user-detail-image" <mat-card-header class="adf-userinfo-card-header"
alt="bpm-profile-image" [src]="getBpmUserImage()"/> [style.background-image]="'url(' + bpmBackgroundImage + ')'">
<ng-template #initialTemplate> <img *ngIf="bpmUser.pictureId; else initialTemplate"
<div [outerHTML]="bpmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div> class="adf-userinfo-profile-picture adf-hide-small" id="bpm-user-detail-image"
</ng-template> alt="bpm-profile-image" [src]="getBpmUserImage()"/>
<div class="adf-userinfo-title" id="bpm-username">{{bpmUser | fullName}}</div> <ng-template #initialTemplate>
</mat-card-header> <div
<mat-card-content> [outerHTML]="bpmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
<div class="adf-userinfo-supporting-text"> </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"> <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> <span class="adf-userinfo__detail-profile" id="bpm-email"> {{bpmUser.email}} </span>
</div> </div>
<div class="adf-userinfo-detail"> <div class="adf-userinfo-detail">
@@ -97,24 +110,26 @@
<span class="adf-userinfo__detail-profile">{{ bpmUser.tenantName ? bpmUser.tenantName : '' }}</span> <span class="adf-userinfo__detail-profile">{{ bpmUser.tenantName ? bpmUser.tenantName : '' }}</span>
</span> </span>
</div> </div>
</div> </div>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
</mat-tab> </mat-tab>
<mat-tab id="identity-panel" *ngIf="identityUser$ | async as identityUser"> <mat-tab id="identity-panel" *ngIf="mode==='SSO'">
<mat-card class="adf-userinfo-card"> <mat-card class="adf-userinfo-card" *ngIf="identityUser$ | async as identityUser">
<mat-card-header class="adf-userinfo-card-header" [style.background-image]="'url(' + bpmBackgroundImage + ')'"> <mat-card-header class="adf-userinfo-card-header"
[style.background-image]="'url(' + bpmBackgroundImage + ')'">
<div <div
[outerHTML]="identityUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"> [outerHTML]="identityUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'">
</div> </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-header>
<mat-card-content> <mat-card-content>
<div class="adf-userinfo-supporting-text"> <div class="adf-userinfo-supporting-text">
<div class="adf-userinfo-detail"> <div class="adf-userinfo-detail">
<span id="identity-full-name" class="adf-userinfo__detail-title">{{identityUser | fullName}}</span> <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> <span class="adf-userinfo__detail-profile"
</div> id="identity-email"> {{identityUser.email}} </span>
</div>
</div> </div>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>

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

@@ -62,6 +62,8 @@ export class UserInfoComponent implements OnInit {
@Input() @Input()
namePosition: string = 'right'; namePosition: string = 'right';
mode: string;
ecmUser$: Observable<EcmUserModel>; ecmUser$: Observable<EcmUserModel>;
bpmUser$: Observable<BpmUserModel>; bpmUser$: Observable<BpmUserModel>;
identityUser$: Observable<IdentityUserModel>; identityUser$: Observable<IdentityUserModel>;
@@ -80,13 +82,17 @@ export class UserInfoComponent implements OnInit {
getUserInfo() { getUserInfo() {
if (this.authService.isOauth()) { if (this.authService.isOauth()) {
this.loadIdentityUserInfo(); this.loadIdentityUserInfo();
this.mode = 'SSO';
} else if (this.authService.isEcmLoggedIn() && this.authService.isBpmLoggedIn()) { } else if (this.authService.isEcmLoggedIn() && this.authService.isBpmLoggedIn()) {
this.loadEcmUserInfo(); this.loadEcmUserInfo();
this.loadBpmUserInfo(); this.loadBpmUserInfo();
this.mode = 'ALL';
} else if (this.authService.isEcmLoggedIn()) { } else if (this.authService.isEcmLoggedIn()) {
this.loadEcmUserInfo(); this.loadEcmUserInfo();
this.mode = 'CONTENT';
} else if (this.authService.isBpmLoggedIn()) { } else if (this.authService.isBpmLoggedIn()) {
this.loadBpmUserInfo(); this.loadBpmUserInfo();
this.mode = 'PROCESS';
} }
} }
@@ -95,7 +101,7 @@ export class UserInfoComponent implements OnInit {
} }
private closeUserModal($event: KeyboardEvent) { private closeUserModal($event: KeyboardEvent) {
if ($event.keyCode === 27 ) { if ($event.keyCode === 27) {
this.trigger.closeMenu(); this.trigger.closeMenu();
} }
} }
@@ -120,7 +126,7 @@ export class UserInfoComponent implements OnInit {
event.stopPropagation(); event.stopPropagation();
} }
getEcmAvatar(avatarId: any ): string { getEcmAvatar(avatarId: any): string {
return this.ecmUserService.getUserProfileImage(avatarId); return this.ecmUserService.getUserProfileImage(avatarId);
} }

17
lib/testing/src/lib/core/pages/user-info.page.ts
View File

@@ -39,6 +39,11 @@ export class UserInfoPage {
userInfoSsoTitle: ElementFinder = element(by.css('.adf-userinfo__detail-title')); userInfoSsoTitle: ElementFinder = element(by.css('.adf-userinfo__detail-title'));
ssoEmail: ElementFinder = element(by.id('identity-email')); ssoEmail: ElementFinder = element(by.id('identity-email'));
userProfileButton: ElementFinder = element(by.css('button[data-automation-id="adf-user-profile"]')); userProfileButton: ElementFinder = element(by.css('button[data-automation-id="adf-user-profile"]'));
tabsPage: TabsPage;
constructor() {
this.tabsPage = new TabsPage();
}
async dialogIsDisplayed(): Promise<void> { async dialogIsDisplayed(): Promise<void> {
await BrowserVisibility.waitUntilElementIsVisible(this.dialog); await BrowserVisibility.waitUntilElementIsVisible(this.dialog);
@@ -53,23 +58,19 @@ export class UserInfoPage {
} }
async clickOnContentServicesTab(): Promise<void> { async clickOnContentServicesTab(): Promise<void> {
const tabsPage = new TabsPage(); await this.tabsPage.clickTabByTitle('Content Services');
await tabsPage.clickTabByTitle('Content Services');
} }
async checkProcessServicesTabIsSelected(): Promise<void> { async checkProcessServicesTabIsSelected(): Promise<void> {
const tabsPage = new TabsPage; await this.tabsPage.checkTabIsSelectedByTitle('Process Services');
await tabsPage.checkTabIsSelectedByTitle('Process Services');
} }
async checkContentServicesTabIsSelected(): Promise<void> { async checkContentServicesTabIsSelected(): Promise<void> {
const tabsPage = new TabsPage; await this.tabsPage.checkTabIsSelectedByTitle('Content Services');
await tabsPage.checkTabIsSelectedByTitle('Content Services');
} }
async clickOnProcessServicesTab(): Promise<void> { async clickOnProcessServicesTab(): Promise<void> {
const tabsPage = new TabsPage; await this.tabsPage.clickTabByTitle('Process Services');
await tabsPage.clickTabByTitle('Process Services');
} }
async userImageIsDisplayed(): Promise<void> { async userImageIsDisplayed(): Promise<void> {