inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-07-24 17:31:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-6699] cleanup user info menu and details (#3625)

Browse Source 
* cleanup user menu

* cleanup user info component
This commit is contained in:
Denys Vuika
2024-02-02 11:43:03 -05:00
committed by GitHub
parent 489a84735a
commit 4393f337c5
8 changed files with 28 additions and 421 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
projects/aca-content/src/lib/components/common/user-info/user-info.component.html
View File

@@ -1,9 +1,11 @@
<div mat-menu-item class="aca-user-info" [routerLink]="['/profile']" title="{{'APP.TOOLTIPS.MY_PROFILE' | translate}}">
<button class="aca-user-info-button">
<div>{{ (displayName$ | async)?.initials }}</div>
</button>
<div class="aca-user-info-name-email">
<div>{{ (displayName$ | async)?.firstName }}</div>
<div>{{ (displayName$ | async)?.email }}</div>
</div>
<div mat-menu-item class="aca-user-info" [routerLink]="['/profile']" title="{{ 'APP.TOOLTIPS.MY_PROFILE' | translate }}">
<ng-container *ngIf="user$ | async as user">
<button class="aca-user-info-button">
<div>{{ user.initials || 'U' }}</div>
</button>
<div class="aca-user-info-details">
<div>{{ user.userName }}</div>
<div>{{ user.email }}</div>
</div>
</ng-container>
</div>

2
projects/aca-content/src/lib/components/common/user-info/user-info.component.scss
View File

@@ -18,7 +18,7 @@
border: none;
}
&-name-email {
&-details {
line-height: 24px;
margin-left: 10px;
}

149
projects/aca-content/src/lib/components/common/user-info/user-info.component.spec.ts
View File

@@ -1,149 +0,0 @@
/*!
* Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* Alfresco Example Content Application
*
* This file is part of the Alfresco Example Content Application.
* If the software was purchased under a paid Alfresco license, the terms of
* the paid license agreement will prevail. Otherwise, the software is
* provided under the following open source license terms:
*
* The Alfresco Example Content Application is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* The Alfresco Example Content Application is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AuthenticationService, IdentityUserService } from '@alfresco/adf-core';
import { PeopleContentService } from '@alfresco/adf-content-services';
import { UserInfoComponent } from './user-info.component';
import { AppTestingModule } from '../../../testing/app-testing.module';
import { of } from 'rxjs';
describe('UserInfoComponent', () => {
let component: UserInfoComponent;
let fixture: ComponentFixture<UserInfoComponent>;
let authServiceStub: Partial<AuthenticationService>;
let peopleContentServiceStub: Partial<PeopleContentService>;
let identityUserServiceStub: Partial<IdentityUserService>;
beforeEach(() => {
authServiceStub = {
isOauth: () => true,
isECMProvider: () => true,
isEcmLoggedIn: () => true,
isKerberosEnabled: () => false,
isLoggedIn: () => true
};
peopleContentServiceStub = {
getCurrentUserInfo: () =>
of({
firstName: 'John',
email: 'john@example.com',
id: 'johnDoe1',
enabled: true,
company: {
organization: 'ABC Organization',
address1: 'XYZ Road',
address2: 'Ohio',
address3: 'Westlake',
postcode: '44145',
telephone: '456876',
fax: '323984',
email: 'contact.us@abc.com'
},
isAdmin: () => true
})
};
identityUserServiceStub = {
getCurrentUserInfo: () => ({
firstName: 'John',
email: 'john@example.com',
id: 'johnDoe1',
enabled: true,
company: {
organization: 'ABC Organization',
address1: 'XYZ Road',
address2: 'Ohio',
address3: 'Westlake',
postcode: '44145',
telephone: '456876',
fax: '323984',
email: 'contact.us@abc.com'
},
isAdmin: () => true
})
};
TestBed.configureTestingModule({
imports: [AppTestingModule, UserInfoComponent],
providers: [
{ provide: AuthenticationService, useValue: authServiceStub },
{ provide: PeopleContentService, useValue: peopleContentServiceStub },
{ provide: IdentityUserService, useValue: identityUserServiceStub }
]
}).compileComponents();
fixture = TestBed.createComponent(UserInfoComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should check if user is logged in', async () => {
const loggedIn = component.isLoggedIn;
expect(loggedIn).toBeTrue();
});
it('should return an object with empty strings for all properties when the input model is empty', () => {
const result = component.parseDisplayName({});
expect(result.firstName).toEqual('');
expect(result.initials).toEqual('');
expect(result.email).toEqual('');
});
it('should return an object with the correct firstName and initials when the input model has only the firstName property', () => {
const result = component.parseDisplayName({ firstName: 'John' });
expect(result.firstName).toEqual('John');
expect(result.initials).toEqual('J');
expect(result.email).toEqual('');
});
it('should return an object with the correct firstName and initials when the input model has only the lastName property', () => {
const result = component.parseDisplayName({ lastName: 'Doe' });
expect(result.firstName).toEqual(' Doe');
expect(result.initials).toEqual('D');
expect(result.email).toEqual('');
});
it('should return an object with the correct email property when the input model has only the email property', () => {
const result = component.parseDisplayName({ email: 'john.doe@example.com' });
expect(result.firstName).toEqual('');
expect(result.initials).toEqual('');
expect(result.email).toEqual('john.doe@example.com');
});
it('should return an object with the correct firstName, initials, and lastName concatenated when the input model has both firstName and lastName properties', () => {
const result = component.parseDisplayName({ firstName: 'John', lastName: 'Doe' });
expect(result.firstName).toEqual('John Doe');
expect(result.initials).toEqual('JD');
expect(result.email).toEqual('');
});
it('should return an object with all properties correctly parsed when the input model has all three properties', () => {
const result = component.parseDisplayName({ firstName: 'John', lastName: 'Doe', email: 'john.doe@example.com' });
expect(result.firstName).toEqual('John Doe');
expect(result.initials).toEqual('JD');
expect(result.email).toEqual('john.doe@example.com');
});
});

70
projects/aca-content/src/lib/components/common/user-info/user-info.component.ts
View File

@@ -22,15 +22,13 @@
* from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
*/
import { IdentityUserService, AuthenticationService } from '@alfresco/adf-core';
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Observable, of } from 'rxjs';
import { PeopleContentService } from '@alfresco/adf-content-services';
import { map } from 'rxjs/operators';
import { Component, ViewEncapsulation, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { MatMenuModule } from '@angular/material/menu';
import { TranslateModule } from '@ngx-translate/core';
import { AppStore, getUserProfile } from '@alfresco/aca-shared/store';
import { Store } from '@ngrx/store';
@Component({
standalone: true,
@@ -40,63 +38,7 @@ import { TranslateModule } from '@ngx-translate/core';
styleUrls: ['./user-info.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class UserInfoComponent implements OnInit {
displayName$: Observable<{ firstName: string; initials: string; email: string }>;
constructor(
private peopleContentService: PeopleContentService,
private identityUserService: IdentityUserService,
private authService: AuthenticationService
) {}
ngOnInit() {
this.getUserInfo();
}
getUserInfo() {
if (this.authService.isOauth()) {
this.loadIdentityUserInfo();
if (this.authService.isECMProvider() && this.authService.isEcmLoggedIn()) {
this.loadEcmUserInfo();
}
} else if (this.isEcmLoggedIn()) {
this.loadEcmUserInfo();
}
}
get isLoggedIn(): boolean {
if (this.authService.isKerberosEnabled()) {
return true;
}
return this.authService.isLoggedIn();
}
private loadEcmUserInfo(): void {
this.displayName$ = this.peopleContentService.getCurrentUserInfo().pipe(map((model) => this.parseDisplayName(model)));
}
private loadIdentityUserInfo() {
this.displayName$ = of(this.identityUserService.getCurrentUserInfo()).pipe(map((model) => this.parseDisplayName(model)));
}
parseDisplayName(model: { firstName?: string; lastName?: string; email?: string }): { firstName: string; initials: string; email: string } {
const result = { firstName: '', initials: '', email: '' };
if (model.firstName) {
result.firstName = model.firstName;
result.initials = model.firstName.charAt(0).toUpperCase();
}
if (model.lastName) {
result.firstName += ' ' + model.lastName;
result.initials += model.lastName.charAt(0).toUpperCase();
}
if (model.email) {
result.email = `${model.email}`;
}
return result;
}
private isEcmLoggedIn() {
return this.authService.isEcmLoggedIn() || (this.authService.isECMProvider() && this.authService.isKerberosEnabled());
}
export class UserInfoComponent {
private store = inject<Store<AppStore>>(Store<AppStore>);
user$ = this.store.select(getUserProfile);
}

2
projects/aca-content/src/lib/components/sidenav/user-menu/user-menu.component.html
View File

@@ -4,7 +4,7 @@
[matMenuTriggerFor]="menu"
title="{{'APP.TOOLTIPS.OPTIONS_SETTINGS' | translate}}"
>
<div>{{ (displayName$ | async)?.initials }}</div>
<div>{{ (user$ | async)?.initials }}</div>
</button>
<mat-menu #menu="matMenu" xPosition="before">

142
projects/aca-content/src/lib/components/sidenav/user-menu/user-menu.component.spec.ts
View File

@@ -1,142 +0,0 @@
/*!
* Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* Alfresco Example Content Application
*
* This file is part of the Alfresco Example Content Application.
* If the software was purchased under a paid Alfresco license, the terms of
* the paid license agreement will prevail. Otherwise, the software is
* provided under the following open source license terms:
*
* The Alfresco Example Content Application is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* The Alfresco Example Content Application is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AuthenticationService, IdentityUserService } from '@alfresco/adf-core';
import { PeopleContentService } from '@alfresco/adf-content-services';
import { AppTestingModule } from '../../../testing/app-testing.module';
import { UserMenuComponent } from './user-menu.component';
import { of } from 'rxjs';
describe('UserMenuComponent', () => {
let component: UserMenuComponent;
let fixture: ComponentFixture<UserMenuComponent>;
let authServiceStub: Partial<AuthenticationService>;
let peopleContentServiceStub: Partial<PeopleContentService>;
let identityUserServiceStub: Partial<IdentityUserService>;
const menuItems = [
{
id: 'menu1',
title: 'Menu Item 1',
icon: 'icon1',
actions: {
click: 'action1'
}
},
{
id: 'menu2',
title: 'Menu Item 2',
icon: 'icon2',
actions: {
click: 'action2'
}
}
];
beforeEach(() => {
authServiceStub = {
isOauth: () => true,
isECMProvider: () => true,
isEcmLoggedIn: () => true,
isKerberosEnabled: () => false,
isLoggedIn: () => true
};
peopleContentServiceStub = {
getCurrentUserInfo: () =>
of({
firstName: 'John',
email: 'john@example.com',
id: 'johnDoe1',
enabled: true,
company: {
organization: 'ABC Organization',
address1: 'XYZ Road',
address2: 'Ohio',
address3: 'Westlake',
postcode: '44145',
telephone: '456876',
fax: '323984',
email: 'contact.us@abc.com'
},
isAdmin: () => true
})
};
identityUserServiceStub = {
getCurrentUserInfo: () => ({
firstName: 'John',
email: 'john@example.com',
id: 'johnDoe1',
enabled: true,
company: {
organization: 'ABC Organization',
address1: 'XYZ Road',
address2: 'Ohio',
address3: 'Westlake',
postcode: '44145',
telephone: '456876',
fax: '323984',
email: 'contact.us@abc.com'
},
isAdmin: () => true
})
};
TestBed.configureTestingModule({
imports: [AppTestingModule, UserMenuComponent],
providers: [
{ provide: AuthenticationService, useValue: authServiceStub },
{ provide: PeopleContentService, useValue: peopleContentServiceStub },
{ provide: identityUserServiceStub, useValue: identityUserServiceStub }
]
}).compileComponents();
fixture = TestBed.createComponent(UserMenuComponent);
component = fixture.componentInstance;
component.data = { items: menuItems };
fixture.detectChanges();
});
it('should return an object with empty strings for all properties when the input model is empty', () => {
const result = component.parseDisplayName({});
expect(result.initials).toEqual('');
});
it('should return an object with the correct initials when the input model has only the firstName property', () => {
const result = component.parseDisplayName({ firstName: 'John' });
expect(result.initials).toEqual('J');
});
it('should return an object with the correct initials when the input model has only the lastName property', () => {
const result = component.parseDisplayName({ lastName: 'Doe' });
expect(result.initials).toEqual('D');
});
it('should return an object with the correct initials concatenated when the input model has both firstName and lastName properties', () => {
const result = component.parseDisplayName({ firstName: 'John', lastName: 'Doe' });
expect(result.initials).toEqual('JD');
});
});

62
projects/aca-content/src/lib/components/sidenav/user-menu/user-menu.component.ts
View File

@@ -22,17 +22,15 @@
* from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
*/
import { PeopleContentService } from '@alfresco/adf-content-services';
import { AuthenticationService, IdentityUserService } from '@alfresco/adf-core';
import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';
import { Component, Input, OnInit, ViewEncapsulation, inject } from '@angular/core';
import { ContentActionRef } from '@alfresco/adf-extensions';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { TranslateModule } from '@ngx-translate/core';
import { MatMenuModule } from '@angular/material/menu';
import { ToolbarMenuItemComponent } from '@alfresco/aca-shared';
import { AppStore, getUserProfile } from '@alfresco/aca-shared/store';
import { Store } from '@ngrx/store';
@Component({
standalone: true,
@@ -43,64 +41,18 @@ import { ToolbarMenuItemComponent } from '@alfresco/aca-shared';
encapsulation: ViewEncapsulation.None
})
export class UserMenuComponent implements OnInit {
displayName$: Observable<{ firstName: string; initials: string }>;
private store = inject<Store<AppStore>>(Store<AppStore>);
user$ = this.store.select(getUserProfile);
@Input()
actionRef: ContentActionRef;
@Input()
data: { items: any[] };
constructor(
private peopleContentService: PeopleContentService,
private identityUserService: IdentityUserService,
private authService: AuthenticationService
) {}
ngOnInit() {
this.getUserInfo();
if (this.data?.items) {
this.data.items.sort((a, b) => a.order - b.order);
}
}
getUserInfo() {
if (this.authService.isOauth()) {
this.loadIdentityUserInfo();
if (this.authService.isECMProvider() && this.authService.isEcmLoggedIn()) {
this.loadEcmUserInfo();
}
} else if (this.isEcmLoggedIn()) {
this.loadEcmUserInfo();
}
}
get isLoggedIn(): boolean {
if (this.authService.isKerberosEnabled()) {
return true;
}
return this.authService.isLoggedIn();
}
private loadEcmUserInfo(): void {
this.displayName$ = this.peopleContentService.getCurrentUserInfo().pipe(map((model) => this.parseDisplayName(model)));
}
private loadIdentityUserInfo() {
this.displayName$ = of(this.identityUserService.getCurrentUserInfo()).pipe(map((model) => this.parseDisplayName(model)));
}
parseDisplayName(model: { firstName?: string; lastName?: string }): { firstName: string; initials: string } {
const result = { firstName: '', initials: '' };
if (model.firstName) {
result.initials = model.firstName.charAt(0).toUpperCase();
}
if (model.lastName) {
result.initials += model.lastName.charAt(0).toUpperCase();
}
return result;
}
private isEcmLoggedIn() {
return this.authService.isEcmLoggedIn() || (this.authService.isECMProvider() && this.authService.isKerberosEnabled());
}
}