[ACS-4708] Implemented user initials (#3184)

* added user initials

* modified spec file

* changes for config files

* class name renamed

* implemented the review comments
This commit is contained in:
Yasa-Nataliya
2023-05-16 14:25:43 +05:30
committed by GitHub
parent 9603c0a36b
commit adbbc1c152
21 changed files with 735 additions and 295 deletions

View File

@@ -1,4 +1,9 @@
<button mat-menu-item [routerLink]="['/profile']" title="{{'APP.TOOLTIPS.MY_PROFILE' | translate}}">
<mat-icon>account_circle</mat-icon>
<span>{{ (displayName$ | async) }}</span>
</button>
<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>

View File

@@ -0,0 +1,25 @@
.aca-user-info {
display: flex;
height: 66px;
align-items: center;
&-button {
border-radius: 90%;
height: 32px;
margin-right: 0;
min-width: 32px;
padding: 0;
font-weight: 700;
line-height: 32px;
text-align: center;
vertical-align: middle;
background: var(--theme-user-initials-background-color);
color: var(--theme-user-intials-text-color);
border: none;
}
&-name-email {
line-height: 24px;
margin-left: 10px;
}
}

View File

@@ -23,7 +23,7 @@
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AuthenticationService } from '@alfresco/adf-core';
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';
@@ -34,7 +34,7 @@ describe('UserInfoComponent', () => {
let fixture: ComponentFixture<UserInfoComponent>;
let authServiceStub: Partial<AuthenticationService>;
let peopleContentServiceStub: Partial<PeopleContentService>;
let identityUserServiceStub: Partial<PeopleContentService>;
let identityUserServiceStub: Partial<IdentityUserService>;
beforeEach(() => {
authServiceStub = {
@@ -67,24 +67,23 @@ describe('UserInfoComponent', () => {
};
identityUserServiceStub = {
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
})
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({
@@ -93,7 +92,7 @@ describe('UserInfoComponent', () => {
providers: [
{ provide: AuthenticationService, useValue: authServiceStub },
{ provide: PeopleContentService, useValue: peopleContentServiceStub },
{ provide: identityUserServiceStub, useValue: identityUserServiceStub }
{ provide: IdentityUserService, useValue: identityUserServiceStub }
]
}).compileComponents();
@@ -107,15 +106,45 @@ describe('UserInfoComponent', () => {
expect(loggedIn).toBeTrue();
});
it('should parse display name without email', async () => {
const model = { firstName: 'John' };
const displayName = component['parseDisplayName'](model);
expect(displayName).toBe('John');
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 parse display name with email', async () => {
const model = { firstName: 'John', email: 'john@example.com' };
const displayName = component['parseDisplayName'](model);
expect(displayName).toBe('John (john@example.com)');
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');
});
});

View File

@@ -23,17 +23,19 @@
*/
import { IdentityUserService, AuthenticationService } from '@alfresco/adf-core';
import { Component, OnInit } from '@angular/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';
@Component({
selector: 'app-user-info',
templateUrl: './user-info.component.html'
templateUrl: './user-info.component.html',
styleUrls: ['./user-info.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class UserInfoComponent implements OnInit {
displayName$: Observable<string>;
displayName$: Observable<{ firstName: string; initials: string; email: string }>;
constructor(
private peopleContentService: PeopleContentService,
@@ -72,13 +74,19 @@ export class UserInfoComponent implements OnInit {
this.displayName$ = of(this.identityUserService.getCurrentUserInfo()).pipe(map((model) => this.parseDisplayName(model)));
}
private parseDisplayName(model: { firstName?: string; email?: string }): string {
let result = model.firstName;
if (model.email) {
result = `${model.firstName} (${model.email})`;
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;
}