mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-07-24 17:31:52 +00:00
[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:
@@ -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>
|
||||
|
@@ -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;
|
||||
}
|
||||
}
|
@@ -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');
|
||||
});
|
||||
});
|
||||
|
@@ -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;
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user