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

ACS-8320, ACS-8321: move content/process user info to demo shell (#9918)

Browse Source
This commit is contained in:
Denys Vuika
2024-07-09 07:59:20 -04:00
committed by GitHub
parent 3573df01ce
commit 1d6c431e43
25 changed files with 99 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
lib/content-services/src/lib/common/mocks/ecm-user.service.mock.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { PersonEntry, Person, PersonPaging } from '@alfresco/js-api';
import { Person } from '@alfresco/js-api';
export const fakeEcmUser: Person = {
id: 'fake-id',
@@ -37,114 +37,3 @@ export const fakeEcmUser: Person = {
enabled: true,
emailNotificationsEnabled: true
};
export const fakeEcmAdminUser = {
...fakeEcmUser,
capabilities: {
isAdmin: true
}
};
export const fakeEcmUser2 = {
id: 'another-fake-id',
firstName: 'another-fake-first-name',
lastName: 'another',
displayName: 'admin.adf User',
email: 'admin.adf@alfresco.com',
company: null,
enabled: true,
emailNotificationsEnabled: true
};
export const fakeEcmUserNoImage = {
id: 'fake-id',
firstName: 'fake-first-name',
lastName: 'fake-last-name',
description: 'i am a fake user for test',
avatarId: null,
email: 'fakeEcm@ecmUser.com',
skypeId: 'fake-skype-id',
googleId: 'fake-googleId-id',
instantMessageId: 'fake-instantMessageId-id',
company: null,
jobTitle: null,
location: 'fake location',
mobile: '000000000',
telephone: '11111111',
statusUpdatedAt: 'fake-date',
userStatus: 'active',
enabled: true,
emailNotificationsEnabled: true
};
export const fakeEcmEditedUser = {
id: 'fake-id',
firstName: null,
lastName: 'fake-last-name',
description: 'i am a fake user for test',
avatarId: 'fake-avatar-id',
email: 'fakeEcm@ecmUser.com',
skypeId: 'fake-skype-id',
googleId: 'fake-googleId-id',
instantMessageId: 'fake-instantMessageId-id',
company: null,
jobTitle: 'test job',
location: 'fake location',
mobile: '000000000',
telephone: '11111111',
statusUpdatedAt: 'fake-date',
userStatus: 'active',
enabled: true,
emailNotificationsEnabled: true
};
export const fakeEcmUserList = new PersonPaging({
list: {
pagination: {
count: 2,
hasMoreItems: false,
totalItems: 2,
skipCount: 0,
maxItems: 100
},
entries: [
{
entry: fakeEcmUser
},
{
entry: fakeEcmUser2
}
]
}
});
export const createNewPersonMock = {
id: 'fake-id',
firstName: 'fake-ecm-first-name',
lastName: 'fake-ecm-last-name',
description: 'i am a fake user for test',
password: 'fake-avatar-id',
email: 'fakeEcm@ecmUser.com'
};
export const getFakeUserWithContentAdminCapability = (): PersonEntry => {
const fakeEcmUserWithAdminCapabilities = {
...fakeEcmUser,
capabilities: {
isAdmin: true
}
};
const mockPerson = new Person(fakeEcmUserWithAdminCapabilities);
return { entry: mockPerson };
};
export const getFakeUserWithContentUserCapability = (): PersonEntry => {
const fakeEcmUserWithAdminCapabilities = {
...fakeEcmUser,
capabilities: {
isAdmin: false
}
};
const mockPerson = new Person(fakeEcmUserWithAdminCapabilities);
return { entry: mockPerson };
};

43
lib/content-services/src/lib/common/services/people-content.service.spec.ts
View File

@@ -15,10 +15,51 @@
* limitations under the License.
*/
import { createNewPersonMock, fakeEcmAdminUser, fakeEcmUser, fakeEcmUser2, fakeEcmUserList } from '../mocks/ecm-user.service.mock';
import { fakeEcmUser } from '../mocks/ecm-user.service.mock';
import { AlfrescoApiService, AlfrescoApiServiceMock, CoreTestingModule } from '@alfresco/adf-core';
import { PeopleContentQueryRequestModel, PeopleContentService } from './people-content.service';
import { TestBed } from '@angular/core/testing';
import { PersonPaging } from '@alfresco/js-api';
export const fakeEcmUser2 = {
id: 'another-fake-id',
firstName: 'another-fake-first-name',
lastName: 'another',
displayName: 'admin.adf User',
email: 'admin.adf@alfresco.com',
company: null,
enabled: true,
emailNotificationsEnabled: true
};
const fakeEcmUserList = new PersonPaging({
list: {
pagination: {
count: 2,
hasMoreItems: false,
totalItems: 2,
skipCount: 0,
maxItems: 100
},
entries: [{ entry: fakeEcmUser }, { entry: fakeEcmUser2 }]
}
});
export const createNewPersonMock = {
id: 'fake-id',
firstName: 'fake-ecm-first-name',
lastName: 'fake-ecm-last-name',
description: 'i am a fake user for test',
password: 'fake-avatar-id',
email: 'fakeEcm@ecmUser.com'
};
export const fakeEcmAdminUser = {
...fakeEcmUser,
capabilities: {
isAdmin: true
}
};
describe('PeopleContentService', () => {
let peopleContentService: PeopleContentService;

103
lib/content-services/src/lib/content-user-info/content-user-info.component.html
View File

@@ -1,103 +0,0 @@
<div
id="userinfo_container"
[class.adf-userinfo-name-right]="showOnRight"
(keyup)="onKeyPress($event)"
tabindex="0"
role="button"
class="adf-userinfo-container"
*ngIf="canShow"
>
<span *ngIf="showName" id="adf-userinfo-ecm-name-display" class="adf-userinfo-name">
{{ecmUser | fullName}}
</span>
<button mat-button [matMenuTriggerFor]="menu" class="adf-userinfo-menu_button adf-content-userinfo-button"
data-automation-id="adf-user-profile">
<div class="adf-userinfo-button-profile" id="user-profile">
<div *ngIf="identityUser; else showEcmUserImage" id="identity-user-image">
<div *ngIf="ecmUser?.avatarId; else initialTemplate">
<div class="adf-userinfo-profile-container">
<img id="logged-user-img" [src]="getEcmAvatar(ecmUser.avatarId)" alt="user-info-profile-button"
class="adf-userinfo-profile-image"/>
</div>
</div>
<ng-template #initialTemplate>
<div [innerHTML]="identityUser | usernameInitials:'adf-userinfo-pic'"></div>
</ng-template>
</div>
<ng-template #showEcmUserImage>
<div 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"/>
</div>
<ng-template #initialTemplate>
<div [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-pic'"></div>
</ng-template>
</div>
</ng-template>
</div>
</button>
<mat-menu #menu="matMenu" id="user-profile-lists" [xPosition]="menuPositionX" [yPosition]="menuPositionY"
[overlapTrigger]="false" class="adf-userinfo-menu">
<mat-card *ngIf="mode === userInfoMode.CONTENT" class="adf-userinfo-card adf-content-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">
<img class="adf-userinfo-profile-picture" id="ecm-user-detail-image"
alt="ecm-profile-image" [src]="getEcmAvatar(ecmUser.avatarId)"/>
</div>
<ng-template #initialTemplate>
<div
[outerHTML]="ecmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
</ng-template>
<div class="mat-title" id="ecm-username">{{ecmUser | fullName}}</div>
</mat-card-header>
<mat-card-content>
<div class="adf-userinfo-supporting-text">
<div class="adf-userinfo-detail">
<h2 id="ecm-full-name"
class="adf-userinfo__detail-title">{{ecmUser | fullName}}</h2>
<span id="ecm-email"> {{ecmUser.email}} </span>
<a href="#/profile">
{{ 'USER_PROFILE.LABELS.MY_PROFILE' | translate }}</a>
</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"> {{ ecmUser.jobTitle ? ecmUser.jobTitle : 'N/A' }} </span>
</span>
</div>
</div>
</mat-card-content>
</mat-card>
<mat-card *ngIf="mode === userInfoMode.CONTENT_SSO" class="adf-userinfo-card adf-content-userinfo-card">
<mat-card-header class="adf-userinfo-card-header"
[style.background-image]="'url(' + bpmBackgroundImage + ')'">
<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)"/>
</div>
<ng-template #initialTemplate>
<div
[outerHTML]="identityUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
</ng-template>
<div class="mat-title" id="identity-username">{{identityUser | fullName}}</div>
</mat-card-header>
<mat-card-content>
<div class="adf-userinfo-supporting-text">
<div class="adf-userinfo-detail">
<h2 id="identity-full-name"
class="adf-userinfo__detail-title">{{identityUser | fullName}}</h2>
<span id="identity-email"> {{identityUser.email}} </span>
<a href="#/profile">
{{ 'USER_PROFILE.LABELS.MY_PROFILE' | translate }}</a>
</div>
</div>
</mat-card-content>
</mat-card>
</mat-menu>
</div>

154
lib/content-services/src/lib/content-user-info/content-user-info.component.scss
View File

@@ -1,154 +0,0 @@
@import 'styles/flex';
.adf {
&-userinfo-container {
display: flex;
align-items: center;
padding: 0 5px;
}
&-userinfo-name-right {
flex-direction: row-reverse;
}
&-userinfo-name {
padding: 0 5px;
@include layout-bp(lt-md) {
display: none;
}
}
&-userinfo-pic {
background: var(--adf-theme-primary-300);
display: inline-block;
width: 40px;
height: 40px;
border-radius: 100px;
text-align: center;
font-weight: bolder;
font-size: var(--theme-adf-picture-1-font-size);
text-transform: uppercase;
vertical-align: middle;
line-height: 40px;
}
&-userinfo-profile-image {
background: var(--adf-theme-primary-300);
text-align: center;
border-radius: 90%;
width: 40px;
height: 40px;
margin-right: 0;
cursor: pointer;
vertical-align: middle;
margin-left: 0;
}
&-userinfo-profile-container {
display: inline-block;
}
&-userinfo-menu_button.adf-content-userinfo-button {
margin-right: 0;
border-radius: 90%;
padding: 0;
min-width: 40px;
height: 40px;
}
&-userinfo-card-header {
align-items: center;
display: flex;
justify-content: stretch;
line-height: normal;
height: 100px;
box-sizing: border-box;
}
&-userinfo-card.adf-content-userinfo-card {
padding: 0;
}
&-userinfo-supporting-text {
overflow: hidden;
padding: 32px;
column-count: 2;
display: flex;
justify-content: space-between;
@include layout-bp(lt-sm) {
padding: 10px;
}
}
&-userinfo__detail-title {
text-overflow: ellipsis;
}
&-userinfo__secondary-info {
font-size: var(--theme-body-1-font-size);
font-weight: 400;
letter-spacing: 0;
line-height: 18px;
align-items: flex-end;
}
&-userinfo-profile-picture {
background: var(--adf-theme-primary-300);
background-size: cover;
border-radius: 50%;
height: 80px;
width: 80px;
margin-left: 0;
margin-right: 8px;
}
&-userinfo-profile-initials {
text-transform: uppercase;
background-size: cover;
background-color: var(--adf-theme-primary-300);
border-radius: 50%;
height: 80px;
width: 80px;
margin-left: 0;
margin-right: 8px;
font-size: 35px;
font-weight: 400;
letter-spacing: 0;
line-height: 78px;
overflow: hidden;
display: flex;
justify-content: space-around;
}
&-userinfo-button-profile {
display: inline-block;
border: 0;
vertical-align: middle;
}
&-userinfo-detail {
text-align: left;
}
&-hide-small.adf-userinfo-profile-initials,
&-hide-small.adf-userinfo-profile-container {
@include layout-bp(lt-md) {
display: none;
}
}
}
@media only screen and (device-width >= 480px) {
.adf-content-userinfo-menu.adf-userinfo-menu {
max-height: 450px;
min-width: 450px;
overflow: auto;
padding: 0;
}
}
.adf-content-userinfo-menu.adf-userinfo-menu > div {
padding: 0;
}

242
lib/content-services/src/lib/content-user-info/content-user-info.component.spec.ts
View File

@@ -1,242 +0,0 @@
/*!
* @license
* Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { CoreTestingModule, IdentityUserModel, InitialUsernamePipe, UserInfoMode } from '@alfresco/adf-core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatMenuModule } from '@angular/material/menu';
import { By, DomSanitizer } from '@angular/platform-browser';
import { fakeEcmEditedUser, fakeEcmUser, fakeEcmUserNoImage } from '../common/mocks/ecm-user.service.mock';
import { ContentTestingModule } from '../testing/content.testing.module';
import { ContentUserInfoComponent } from './content-user-info.component';
class FakeSanitizer extends DomSanitizer {
constructor() {
super();
}
sanitize(html) {
return html;
}
bypassSecurityTrustHtml(value: string): any {
return value;
}
bypassSecurityTrustStyle(): any {
return null;
}
bypassSecurityTrustScript(): any {
return null;
}
bypassSecurityTrustUrl(): any {
return null;
}
bypassSecurityTrustResourceUrl(): any {
return null;
}
}
describe('ContentUserInfoComponent', () => {
const profilePictureUrl = 'alfresco-logo.svg';
let component: ContentUserInfoComponent;
let fixture: ComponentFixture<ContentUserInfoComponent>;
let element: HTMLElement;
const identityUserMock = { firstName: 'fake-identity-first-name', lastName: 'fake-identity-last-name', email: 'fakeIdentity@email.com' };
const identityUserWithOutLastNameMock = { firstName: 'fake-identity-first-name', lastName: null, email: 'fakeIdentity@email.com' };
const openUserInfo = () => {
fixture.detectChanges();
const imageButton = element.querySelector<HTMLButtonElement>('#logged-user-img');
imageButton.click();
fixture.detectChanges();
};
const whenFixtureReady = async () => {
fixture.detectChanges();
await fixture.whenStable();
fixture.detectChanges();
};
beforeEach(() => {
TestBed.configureTestingModule({
imports: [CoreTestingModule, ContentTestingModule, MatMenuModule]
});
fixture = TestBed.createComponent(ContentUserInfoComponent);
component = fixture.componentInstance;
element = fixture.nativeElement;
spyOn(window, 'requestAnimationFrame').and.returnValue(1);
});
afterEach(() => {
fixture.destroy();
});
it('should not show any image if the user is not logged in', () => {
expect(element.querySelector('#userinfo_container')).toBeDefined();
expect(element.querySelector('#logged-user-img')).toBeNull();
});
it('should NOT have users immediately after ngOnInit', () => {
expect(element.querySelector('#userinfo_container')).toBeDefined();
expect(element.querySelector('#ecm_username')).toBeNull();
expect(element.querySelector('#user-profile-lists')).toBeNull();
});
describe('when user is logged on ecm', () => {
beforeEach(() => {
component.ecmUser = fakeEcmUser as any;
component.isLoggedIn = true;
});
describe('ui', () => {
it('should show ecm only last name when user first name is null ', async () => {
component.ecmUser = fakeEcmEditedUser as any;
await whenFixtureReady();
openUserInfo();
expect(element.querySelector('#userinfo_container')).toBeDefined();
const ecmUsername = fixture.debugElement.query(By.css('#ecm-username'));
expect(ecmUsername).toBeDefined();
expect(ecmUsername).not.toBeNull();
expect(ecmUsername.nativeElement.textContent).not.toContain('fake-ecm-first-name');
expect(ecmUsername.nativeElement.textContent).not.toContain('null');
});
it('should show the username when showName attribute is true', async () => {
await whenFixtureReady();
expect(component.showName).toBeTruthy();
expect(element.querySelector('#adf-userinfo-ecm-name-display')).not.toBeNull();
});
it('should hide the username when showName attribute is false', async () => {
component.showName = false;
await whenFixtureReady();
expect(element.querySelector('#adf-userinfo-ecm-name-display')).toBeNull();
});
it('should have the defined class to show the name on the right side', async () => {
await whenFixtureReady();
expect(element.querySelector('#userinfo_container').classList).toContain('adf-userinfo-name-right');
});
it('should not have the defined class to show the name on the left side', async () => {
component.namePosition = 'left';
await whenFixtureReady();
expect(element.querySelector('#userinfo_container').classList).not.toContain('adf-userinfo-name-right');
});
describe('and has image', () => {
beforeEach(async () => {
component.ecmUser = fakeEcmUser as any;
component.isLoggedIn = true;
spyOn(component, 'getEcmAvatar').and.returnValue(profilePictureUrl);
await whenFixtureReady();
});
it('should get the ecm current user image', async () => {
openUserInfo();
const loggedImage = fixture.debugElement.query(By.css('#logged-user-img'));
expect(element.querySelector('#userinfo_container')).not.toBeNull();
expect(loggedImage).not.toBeNull();
expect(loggedImage.properties.src).toContain(profilePictureUrl);
});
it('should display the current user image if user has avatarId', () => {
openUserInfo();
const loggedImage = fixture.debugElement.query(By.css('#logged-user-img'));
expect(component.ecmUser).toBeDefined();
expect(component.ecmUser.avatarId).toBe('fake-avatar-id');
expect(element.querySelector('#userinfo_container')).not.toBeNull();
expect(loggedImage).not.toBeNull();
expect(loggedImage.properties.src).toContain(profilePictureUrl);
});
it('should get the ecm user information', async () => {
openUserInfo();
const ecmImage = fixture.debugElement.query(By.css('#ecm-user-detail-image'));
const ecmFullName = fixture.debugElement.query(By.css('#ecm-full-name'));
const ecmJobTitle = fixture.debugElement.query(By.css('#ecm-job-title-label'));
expect(element.querySelector('#userinfo_container')).not.toBeNull();
expect(fixture.debugElement.query(By.css('#ecm-username'))).not.toBeNull();
expect(ecmImage).not.toBeNull();
expect(ecmImage.properties.src).toContain(profilePictureUrl);
expect(ecmFullName.nativeElement.textContent).toContain('fake-ecm-first-name fake-ecm-last-name');
expect(ecmJobTitle.nativeElement.textContent).toContain('USER_PROFILE.LABELS.ECM.JOB_TITLE');
});
});
describe('and has no image', () => {
beforeEach(async () => {
component.ecmUser = fakeEcmUserNoImage as any;
component.isLoggedIn = true;
await whenFixtureReady();
});
it('should show N/A when the job title is null', () => {
const imageButton = element.querySelector<HTMLButtonElement>('[data-automation-id="user-initials-image"]');
imageButton.click();
fixture.detectChanges();
expect(element.querySelector('#userinfo_container')).not.toBeNull();
const ecmJobTitle = fixture.debugElement.query(By.css('#ecm-job-title'));
expect(ecmJobTitle).not.toBeNull();
expect(ecmJobTitle).not.toBeNull();
expect(ecmJobTitle.nativeElement.textContent).toContain('N/A');
});
it('should display the current user Initials if the user dose not have avatarId', () => {
fixture.detectChanges();
const pipe = new InitialUsernamePipe(new FakeSanitizer());
const expected = pipe.transform({
firstName: 'Wilbur',
lastName: 'Adams',
email: 'wilbur@app.com'
});
expect(expected).toBe('<div data-automation-id="user-initials-image" class="">WA</div>');
expect(component.ecmUser).toBeDefined();
expect(component.ecmUser.avatarId).toBeNull();
});
});
});
describe('when identity user is logged in', () => {
beforeEach(() => {
component.ecmUser = fakeEcmUser as any;
component.identityUser = identityUserMock as unknown as IdentityUserModel;
component.isLoggedIn = true;
component.mode = UserInfoMode.CONTENT_SSO;
});
it('should not show initials if the user have avatar and provider is ECM', async () => {
component.identityUser = identityUserWithOutLastNameMock as unknown as IdentityUserModel;
await whenFixtureReady();
expect(element.querySelector('.adf-userinfo-pic')).toBeNull();
expect(element.querySelector('.adf-userinfo-profile-image')).toBeDefined();
expect(element.querySelector('.adf-userinfo-profile-image')).not.toBeNull();
});
});
});
});

115
lib/content-services/src/lib/content-user-info/content-user-info.component.ts
View File

@@ -1,115 +0,0 @@
/*!
* @license
* Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { IdentityUserModel, UserInfoMode } from '@alfresco/adf-core';
import { Component, Input, OnDestroy, ViewChild, ViewEncapsulation } from '@angular/core';
import { MatMenuTrigger, MenuPositionX, MenuPositionY } from '@angular/material/menu';
import { Subject } from 'rxjs';
import { EcmUserModel } from '../common/models/ecm-user.model';
import { PeopleContentService } from '../common/services/people-content.service';
@Component({
selector: 'adf-content-user-info',
templateUrl: './content-user-info.component.html',
styleUrls: ['./content-user-info.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class ContentUserInfoComponent implements OnDestroy {
@ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;
/** Determines if user is logged in. */
@Input()
isLoggedIn: boolean;
/** ECM user info. */
@Input()
ecmUser: EcmUserModel;
/** Identity user info. */
@Input()
identityUser: IdentityUserModel;
/** current mode. */
@Input()
mode: UserInfoMode = UserInfoMode.CONTENT;
/** Custom path for the background banner image for ACS users. */
@Input()
ecmBackgroundImage: string = './assets/images/ecm-background.png';
/** Custom path for the background banner image for APS users. */
@Input()
bpmBackgroundImage: string = './assets/images/bpm-background.png';
/** Custom choice for opening the menu at the bottom. Can be `before` or `after`. */
@Input()
menuPositionX: MenuPositionX = 'after';
/** Custom choice for opening the menu at the bottom. Can be `above` or `below`. */
@Input()
menuPositionY: MenuPositionY = 'below';
/** Shows/hides the username next to the user info button. */
@Input()
showName: boolean = true;
/**
* When the username is shown, this defines its position relative to the user info button.
* Can be `right` or `left`.
*/
@Input()
namePosition: string = 'right';
userInfoMode = UserInfoMode;
private destroy$ = new Subject();
constructor(private peopleContentService: PeopleContentService) {
}
ngOnDestroy(): void {
this.destroy$.next(true);
this.destroy$.complete();
}
onKeyPress(event: KeyboardEvent) {
this.closeUserModal(event);
}
private closeUserModal($event: KeyboardEvent) {
if ($event.keyCode === 27) {
this.trigger.closeMenu();
}
}
stopClosing(event: Event) {
event.stopPropagation();
}
getEcmAvatar(avatarId: string): string {
return this.peopleContentService.getUserProfileImage(avatarId);
}
get showOnRight(): boolean {
return this.namePosition === 'right';
}
get canShow(): boolean {
return this.isLoggedIn && !!this.ecmUser && !!this.mode;
}
}

43
lib/content-services/src/lib/content-user-info/content-user-info.module.ts
View File

@@ -1,43 +0,0 @@
/*!
* @license
* Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ContentUserInfoComponent } from './content-user-info.component';
import { TranslateModule } from '@ngx-translate/core';
import { FullNamePipe, InitialUsernamePipe, PipeModule } from '@alfresco/adf-core';
import { MatButtonModule } from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu';
import { MatTabsModule } from '@angular/material/tabs';
import { MatCardModule } from '@angular/material/card';
@NgModule({
declarations: [ContentUserInfoComponent],
imports: [
CommonModule,
MatButtonModule,
MatMenuModule,
MatTabsModule,
MatCardModule,
TranslateModule,
PipeModule,
InitialUsernamePipe,
FullNamePipe
],
exports: [ContentUserInfoComponent]
})
export class ContentUserInfoModule {}

18
lib/content-services/src/lib/content-user-info/index.ts
View File

@@ -1,18 +0,0 @@
/*!
* @license
* Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export * from './public-api';

20
lib/content-services/src/lib/content-user-info/public-api.ts
View File

@@ -1,20 +0,0 @@
/*!
* @license
* Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export * from './content-user-info.component';
export * from './content-user-info.module';

3
lib/content-services/src/lib/content.module.ts
View File

@@ -44,7 +44,6 @@ import { CONTENT_PIPES } from './pipes/content-pipe.module';
import { NodeCommentsModule } from './node-comments/node-comments.module';
import { TreeModule } from './tree/tree.module';
import { AlfrescoViewerModule } from './viewer/alfresco-viewer.module';
import { ContentUserInfoModule } from './content-user-info/content-user-info.module';
import { CategoriesModule } from './category/category.module';
import { contentAuthLoaderFactory } from './auth-loader/content-auth-loader-factory';
import { ContentAuthLoaderService } from './auth-loader/content-auth-loader.service';
@@ -61,7 +60,6 @@ import { DropdownSitesComponent } from './content-node-selector/site-dropdown/si
DialogModule,
SearchModule,
DocumentListModule,
ContentUserInfoModule,
UploadModule,
MaterialModule,
DropdownSitesComponent,
@@ -87,7 +85,6 @@ import { DropdownSitesComponent } from './content-node-selector/site-dropdown/si
...CONTENT_PIPES,
TagModule,
DocumentListModule,
ContentUserInfoModule,
UploadModule,
SearchModule,
DropdownSitesComponent,

2
lib/content-services/src/public-api.ts
View File

@@ -18,7 +18,6 @@
export * from './lib/directives/index';
export * from './lib/tag/index';
export * from './lib/document-list/index';
export * from './lib/content-user-info/index';
export * from './lib/upload/index';
export * from './lib/search/index';
export * from './lib/breadcrumb/index';
@@ -46,3 +45,4 @@ export * from './lib/infinite-scroll-datasource';
export * from './lib/prediction/index';
export * from './lib/content.module';
export * from './lib/testing/content.testing.module';

BIN
lib/core/src/lib/assets/images/ecm-background.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.9 KiB

18
lib/process-services/src/lib/process-user-info/index.ts
View File

@@ -1,18 +0,0 @@
/*!
* @license
* Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export * from './public-api';

109
lib/process-services/src/lib/process-user-info/process-user-info.component.html
View File

@@ -1,109 +0,0 @@
<div
id="userinfo_container"
tabindex="0"
role="button"
[class.adf-userinfo-name-right]="showOnRight"
(keyup)="onKeyPress($event)"
class="adf-userinfo-container"
*ngIf="canShow"
>
<span *ngIf="showName" id="adf-userinfo-bpm-name-display" class="adf-userinfo-name">
{{bpmUser | fullName}}
</span>
<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="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"/>
</div>
<ng-template #initialTemplate>
<div [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-pic'"></div>
</ng-template>
</div>
<ng-template #showBpmUserImage>
<div *ngIf="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>
</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)" selectedIndex="0" role="menuitem"
class="adf-userinfo-tab" [class.adf-hide-tab]="!ecmUser">
<mat-tab label="{{ 'USER_PROFILE.TAB.CS' | translate }}" role="dialog"
*ngIf="mode===userInfoMode.ALL">
<mat-card class="adf-userinfo-card" *ngIf="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)"/>
</div>
<ng-template #initialTemplate>
<div
[outerHTML]="ecmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
</ng-template>
<div class="mat-title" id="ecm-username">{{ecmUser | fullName}}</div>
</mat-card-header>
<mat-card-content>
<div class="adf-userinfo-supporting-text">
<div class="adf-userinfo-detail">
<h2 id="ecm-full-name"
class="adf-userinfo__detail-title">{{ecmUser | fullName}}</h2>
<span 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"> {{ ecmUser.jobTitle ? ecmUser.jobTitle : 'N/A' }} </span>
</span>
</div>
</div>
</mat-card-content>
</mat-card>
</mat-tab>
<mat-tab id="bpm-panel" label="{{ 'USER_PROFILE.TAB.PS' | translate }}" role="dialog"
*ngIf="mode===userInfoMode.PROCESS || mode===userInfoMode.ALL">
<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="mat-title" id="bpm-username">{{bpmUser | fullName}}</div>
</mat-card-header>
<mat-card-content>
<div class="adf-userinfo-supporting-text">
<div class="adf-userinfo-detail">
<h2 id="bpm-full-name"
class="adf-userinfo__detail-title">{{ bpmUser | fullName }}</h2>
<span id="bpm-email"> {{bpmUser.email}} </span>
</div>
<div class="adf-userinfo-detail">
<span id="bpm-tenant" class="adf-userinfo__secondary-info">
{{ 'USER_PROFILE.LABELS.BPM.TENANT' | translate }}
<span>{{ bpmUser.tenantName ? bpmUser.tenantName : '' }}</span>
</span>
</div>
</div>
</mat-card-content>
</mat-card>
</mat-tab>
</mat-tab-group>
</mat-menu>
</div>

173
lib/process-services/src/lib/process-user-info/process-user-info.component.scss
View File

@@ -1,173 +0,0 @@
@import 'styles/flex';
.adf {
&-userinfo-container {
display: flex;
align-items: center;
padding: 0 5px;
}
&-userinfo-name-right {
flex-direction: row-reverse;
}
&-userinfo-name {
padding: 0 5px;
@include layout-bp(lt-md) {
display: none;
}
}
&-userinfo-pic {
background: var(--adf-theme-primary-300);
display: inline-block;
width: 40px;
height: 40px;
border-radius: 100px;
text-align: center;
font-weight: bolder;
font-size: var(--theme-adf-picture-1-font-size);
text-transform: uppercase;
vertical-align: middle;
line-height: 40px;
}
&-userinfo-profile-image {
background: var(--adf-theme-primary-300);
text-align: center;
border-radius: 90%;
width: 40px;
height: 40px;
margin-right: 0;
cursor: pointer;
vertical-align: middle;
margin-left: 0;
}
&-userinfo-profile-container {
display: inline-block;
}
&-userinfo-menu_button.mat-button {
margin-right: 0;
border-radius: 90%;
padding: 0;
min-width: 40px;
height: 40px;
}
&-userinfo-tab .mat-tab-header {
align-self: center;
width: 100%;
min-width: 250px;
}
&-userinfo-tab .mat-tab-label {
flex: auto;
font-weight: 500;
font-size: var(--theme-body-1-font-size);
text-transform: uppercase;
line-height: 48px;
text-align: center;
}
&-userinfo-card-header {
align-items: center;
display: flex;
justify-content: stretch;
line-height: normal;
height: 100px;
box-sizing: border-box;
}
&-userinfo-card.mat-card {
padding: 0;
}
&-userinfo-supporting-text {
overflow: hidden;
padding: 32px;
column-count: 2;
display: flex;
justify-content: space-between;
@include layout-bp(lt-sm) {
padding: 10px;
}
}
&-userinfo__detail-title {
text-overflow: ellipsis;
}
&-userinfo__secondary-info {
font-size: var(--theme-body-1-font-size);
font-weight: 400;
letter-spacing: 0;
line-height: 18px;
align-items: flex-end;
}
&-userinfo-profile-picture {
background: var(--adf-theme-primary-300);
background-size: cover;
border-radius: 50%;
height: 80px;
width: 80px;
margin-left: 0;
margin-right: 8px;
}
&-userinfo-profile-initials {
text-transform: uppercase;
background-size: cover;
background-color: var(--adf-theme-primary-300);
border-radius: 50%;
height: 80px;
width: 80px;
margin-left: 0;
margin-right: 8px;
font-size: 35px;
font-weight: 400;
letter-spacing: 0;
line-height: 78px;
overflow: hidden;
display: flex;
justify-content: space-around;
}
&-userinfo-button-profile {
display: inline-block;
border: 0;
vertical-align: middle;
}
&-userinfo-detail {
text-align: left;
}
&-hide-tab.adf-userinfo-tab#tab-group-env {
display: none;
}
&-hide-small.adf-userinfo-profile-initials,
&-hide-small.adf-userinfo-profile-container {
@include layout-bp(lt-md) {
display: none;
}
}
}
@media only screen and (min-device-width: 480px) {
.mat-menu-panel.adf-userinfo-menu {
max-height: 450px;
min-width: 450px;
overflow: auto;
padding: 0;
}
}
.mat-menu-panel.adf-userinfo-menu .mat-menu-content {
padding: 0;
}

230
lib/process-services/src/lib/process-user-info/process-user-info.component.spec.ts
View File

@@ -1,230 +0,0 @@
/*!
* @license
* Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { CoreTestingModule, UserInfoMode } from '@alfresco/adf-core';
import { fakeEcmUser, fakeEcmUserNoImage } from '@alfresco/adf-content-services';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { ProcessUserInfoComponent } from './process-user-info.component';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatTabGroupHarness, MatTabHarness } from '@angular/material/tabs/testing';
const fakeBpmUser: any = {
apps: [],
capabilities: null,
company: 'fake-company',
created: 'fake-create-date',
email: 'fakeBpm@fake.com',
externalId: 'fake-external-id',
firstName: 'fake-bpm-first-name',
lastName: 'fake-bpm-last-name',
groups: [],
id: 'fake-id',
lastUpdate: 'fake-update-date',
latestSyncTimeStamp: 'fake-timestamp',
password: 'fake-password',
pictureId: 12,
status: 'fake-status',
tenantId: 'fake-tenant-id',
tenantName: 'fake-tenant-name',
tenantPictureId: 'fake-tenant-picture-id',
type: 'fake-type'
};
describe('ProcessUserInfoComponent', () => {
const profilePictureUrl = 'alfresco-logo.svg';
let component: ProcessUserInfoComponent;
let fixture: ComponentFixture<ProcessUserInfoComponent>;
let loader: HarnessLoader;
let element: HTMLElement;
const openUserInfo = () => {
fixture.detectChanges();
const imageButton = element.querySelector<HTMLButtonElement>('#logged-user-img');
imageButton.click();
fixture.detectChanges();
};
const whenFixtureReady = async () => {
fixture.detectChanges();
await fixture.whenStable();
fixture.detectChanges();
};
beforeEach(() => {
TestBed.configureTestingModule({
imports: [CoreTestingModule, ProcessUserInfoComponent]
});
fixture = TestBed.createComponent(ProcessUserInfoComponent);
component = fixture.componentInstance;
loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
element = fixture.nativeElement;
spyOn(window, 'requestAnimationFrame').and.returnValue(1);
});
afterEach(() => {
fixture.destroy();
});
it('should not show any image if the user is not logged in', () => {
expect(element.querySelector('#userinfo_container')).toBeDefined();
expect(element.querySelector('#logged-user-img')).toBeNull();
});
it('should NOT have users immediately after ngOnInit', () => {
expect(element.querySelector('#userinfo_container')).toBeDefined();
expect(element.querySelector('#ecm_username')).toBeNull();
expect(element.querySelector('#bpm_username')).toBeNull();
expect(element.querySelector('#user-profile-lists')).toBeNull();
});
describe('when user is logged on bpm', () => {
beforeEach(async () => {
component.bpmUser = fakeBpmUser;
component.isLoggedIn = true;
});
it('should show full name next the user image', async () => {
await whenFixtureReady();
openUserInfo();
const bpmUserName = fixture.debugElement.query(By.css('#bpm-username'));
expect(element.querySelector('#userinfo_container')).not.toBeNull();
expect(bpmUserName).toBeDefined();
expect(bpmUserName).not.toBeNull();
expect(bpmUserName.nativeElement.innerHTML).toContain('fake-bpm-first-name fake-bpm-last-name');
});
it('should get the bpm current user image from the service', async () => {
spyOn(component, 'getBpmUserImage').and.returnValue(profilePictureUrl);
await whenFixtureReady();
expect(element.querySelector('#userinfo_container')).not.toBeNull();
expect(element.querySelector('#logged-user-img')).not.toBeNull();
expect(element.querySelector('#logged-user-img').getAttribute('src')).toContain(profilePictureUrl);
});
it('should show last name if first name is null', async () => {
component.bpmUser = {
firstName: null,
lastName: 'fake-last-name'
} as any;
await whenFixtureReady();
const fullNameElement = element.querySelector('#adf-userinfo-bpm-name-display');
fixture.detectChanges();
expect(element.querySelector('#userinfo_container')).toBeDefined();
expect(element.querySelector('#adf-userinfo-bpm-name-display')).not.toBeNull();
expect(fullNameElement.textContent).toContain('fake-last-name');
expect(fullNameElement.textContent).not.toContain('fake-first-name');
});
it('should not show the tabs', async () => {
await whenFixtureReady();
openUserInfo();
const tabGroupHost = await (await loader.getHarness(MatTabGroupHarness.with({ selector: '#tab-group-env' }))).host();
expect(await tabGroupHost.hasClass('adf-hide-tab')).toBeTruthy();
});
});
describe('when user is logged on bpm and ecm', () => {
beforeEach(async () => {
component.bpmUser = fakeBpmUser;
component.ecmUser = fakeEcmUser as any;
component.isLoggedIn = true;
component.mode = UserInfoMode.ALL;
});
it('should show the tabs', async () => {
await whenFixtureReady();
openUserInfo();
const tabGroupHost = await (await loader.getHarness(MatTabGroupHarness.with({ selector: '#tab-group-env' }))).host();
expect(await tabGroupHost.hasClass('adf-hide-tab')).toBeFalsy();
});
it('should get the bpm user information', async () => {
spyOn(component, 'getBpmUserImage').and.returnValue(profilePictureUrl);
await whenFixtureReady();
openUserInfo();
const bpmTab = await loader.getHarness(MatTabHarness.with({ label: 'USER_PROFILE.TAB.PS' }));
await bpmTab.select();
const bpmUsername = fixture.debugElement.query(By.css('#bpm-username'));
const bpmImage = fixture.debugElement.query(By.css('#bpm-user-detail-image'));
expect(element.querySelector('#userinfo_container')).not.toBeNull();
expect(bpmUsername).not.toBeNull();
expect(bpmImage).not.toBeNull();
expect(bpmImage.properties.src).toContain(profilePictureUrl);
expect(bpmUsername.nativeElement.textContent).toContain('fake-bpm-first-name fake-bpm-last-name');
expect(fixture.debugElement.query(By.css('#bpm-tenant')).nativeElement.textContent).toContain('fake-tenant-name');
});
it('should get the ecm user information', async () => {
spyOn(component, 'getEcmAvatar').and.returnValue(profilePictureUrl);
await whenFixtureReady();
openUserInfo();
const ecmUsername = fixture.debugElement.query(By.css('#ecm-username'));
const ecmImage = fixture.debugElement.query(By.css('#ecm-user-detail-image'));
fixture.detectChanges();
await fixture.whenStable();
expect(element.querySelector('#userinfo_container')).toBeDefined();
expect(ecmUsername).not.toBeNull();
expect(ecmImage).not.toBeNull();
expect(ecmImage.properties.src).toContain(profilePictureUrl);
expect(fixture.debugElement.query(By.css('#ecm-full-name')).nativeElement.textContent).toContain(
'fake-ecm-first-name fake-ecm-last-name'
);
expect(fixture.debugElement.query(By.css('#ecm-job-title')).nativeElement.textContent).toContain('job-ecm-test');
});
it('should show the ecm image if exists', async () => {
spyOn(component, 'getEcmAvatar').and.returnValue(profilePictureUrl);
await whenFixtureReady();
openUserInfo();
expect(element.querySelector('#userinfo_container')).toBeDefined();
expect(element.querySelector('#logged-user-img')).toBeDefined();
expect(element.querySelector('#logged-user-img').getAttribute('src')).toEqual(profilePictureUrl);
});
it('should show the ecm initials if the ecm user has no image', async () => {
component.ecmUser = fakeEcmUserNoImage as any;
await whenFixtureReady();
expect(element.querySelector('#userinfo_container')).toBeDefined();
expect(element.querySelector('[data-automation-id="user-initials-image"]').textContent).toContain('ff');
});
it('should show the tabs for the env', async () => {
await whenFixtureReady();
openUserInfo();
const tabGroup = await loader.getHarness(MatTabGroupHarness.with({ selector: '#tab-group-env' }));
const tabs = await tabGroup.getTabs();
expect(await (await tabGroup.host()).hasClass('adf-hide-tab')).toBeFalsy();
expect(tabs.length).toBe(2);
});
it('should not close the menu when a tab is clicked', async () => {
await whenFixtureReady();
openUserInfo();
const bpmTab = await loader.getHarness(MatTabHarness.with({ label: 'USER_PROFILE.TAB.PS' }));
bpmTab.select();
expect(fixture.debugElement.query(By.css('#user-profile-lists'))).not.toBeNull();
});
});
});

125
lib/process-services/src/lib/process-user-info/process-user-info.component.ts
View File

@@ -1,125 +0,0 @@
/*!
* @license
* Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { FullNamePipe, InitialUsernamePipe, UserInfoMode } from '@alfresco/adf-core';
import { EcmUserModel, PeopleContentService } from '@alfresco/adf-content-services';
import { Component, Input, OnDestroy, ViewChild, ViewEncapsulation } from '@angular/core';
import { MatMenuModule, MatMenuTrigger, MenuPositionX, MenuPositionY } from '@angular/material/menu';
import { Subject } from 'rxjs';
import { PeopleProcessService } from '../services/people-process.service';
import { UserRepresentation } from '@alfresco/js-api';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatTabsModule } from '@angular/material/tabs';
import { TranslateModule } from '@ngx-translate/core';
import { MatCardModule } from '@angular/material/card';
@Component({
selector: 'adf-process-user-info',
standalone: true,
imports: [CommonModule, FullNamePipe, MatButtonModule, MatMenuModule, InitialUsernamePipe, MatTabsModule, TranslateModule, MatCardModule],
templateUrl: './process-user-info.component.html',
styleUrls: ['./process-user-info.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class ProcessUserInfoComponent implements OnDestroy {
@ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;
/** Determines if user is logged in. */
@Input()
isLoggedIn: boolean;
/** BPM user info. */
@Input()
bpmUser: UserRepresentation;
/** ECM user info. */
@Input()
ecmUser: EcmUserModel;
/** current mode. */
@Input()
mode: UserInfoMode = UserInfoMode.PROCESS;
/** Custom path for the background banner image for APS users. */
@Input()
bpmBackgroundImage: string = './assets/images/bpm-background.png';
/** Custom path for the background banner image for ACS users. */
@Input()
ecmBackgroundImage: string = './assets/images/ecm-background.png';
/** Custom choice for opening the menu at the bottom. Can be `before` or `after`. */
@Input()
menuPositionX: MenuPositionX = 'after';
/** Custom choice for opening the menu at the bottom. Can be `above` or `below`. */
@Input()
menuPositionY: MenuPositionY = 'below';
/** Shows/hides the username next to the user info button. */
@Input()
showName: boolean = true;
/**
* When the username is shown, this defines its position relative to the user info button.
* Can be `right` or `left`.
*/
@Input()
namePosition: string = 'right';
userInfoMode = UserInfoMode;
private destroy$ = new Subject();
constructor(private peopleProcessService: PeopleProcessService, private peopleContentService: PeopleContentService) {}
ngOnDestroy(): void {
this.destroy$.next(true);
this.destroy$.complete();
}
onKeyPress(event: KeyboardEvent) {
this.closeUserModal(event);
}
private closeUserModal($event: KeyboardEvent) {
if ($event.keyCode === 27) {
this.trigger.closeMenu();
}
}
stopClosing(event: Event) {
event.stopPropagation();
}
getBpmUserImage(): string {
return this.peopleProcessService.getCurrentUserProfileImage();
}
getEcmAvatar(avatarId: string): string {
return this.peopleContentService.getUserProfileImage(avatarId);
}
get showOnRight(): boolean {
return this.namePosition === 'right';
}
get canShow(): boolean {
return this.isLoggedIn && !!this.bpmUser && !!this.mode;
}
}

21
lib/process-services/src/lib/process-user-info/public-api.ts
View File

@@ -1,21 +0,0 @@
/*!
* @license
* Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { ProcessUserInfoComponent } from './process-user-info.component';
export * from './process-user-info.component';
export const PROCESS_USER_INFO_DIRECTIVES = [ProcessUserInfoComponent] as const;

3
lib/process-services/src/lib/process.module.ts
View File

@@ -26,7 +26,6 @@ import { PROCESS_LIST_DIRECTIVES } from './process-list';
import { TASK_LIST_DIRECTIVES } from './task-list';
import { FORM_DIRECTIVES } from './form';
import { TASK_COMMENTS_DIRECTIVES } from './task-comments';
import { PROCESS_USER_INFO_DIRECTIVES } from './process-user-info';
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
@NgModule({
@@ -36,7 +35,6 @@ import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
...TASK_LIST_DIRECTIVES,
...TASK_COMMENTS_DIRECTIVES,
...APPS_LIST_DIRECTIVES,
...PROCESS_USER_INFO_DIRECTIVES,
...ATTACHMENT_DIRECTIVES,
...PEOPLE_DIRECTIVES,
...FORM_DIRECTIVES
@@ -51,7 +49,6 @@ import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
...TASK_LIST_DIRECTIVES,
...TASK_COMMENTS_DIRECTIVES,
...APPS_LIST_DIRECTIVES,
...PROCESS_USER_INFO_DIRECTIVES,
...ATTACHMENT_DIRECTIVES,
...PEOPLE_DIRECTIVES,
...FORM_DIRECTIVES

1
lib/process-services/src/public-api.ts
View File

@@ -19,7 +19,6 @@ export * from './lib/process-list/index';
export * from './lib/task-list/index';
export * from './lib/app-list/index';
export * from './lib/attachment/index';
export * from './lib/process-user-info/index';
export * from './lib/process-comments/index';
export * from './lib/people/index';
export * from './lib/form/index';