OZG-1414 OZG-3105 Add initials to user icon

goofy-client/README.md

@@ -46,7 +46,7 @@ Libraries are sharable across libraries and applications. They can be imported f
 Run
 
 ```bash
-ng g component 'component-name' --project=my-app
+npx nx g @nrwl/angular:component 'component-name' --project=my-app
 ```
 
 to generate a new component.

goofy-client/libs/navigation/src/lib/header-container/header-container.component.html

 <goofy-client-header
 	[navigationCollapse]="navigationCollapse$ | async"
-	(toggleMenuEvent)="toggleNavigation($event)"
-	(logoutEmitter)="logout()">
+	(toggleMenuEvent)="toggleNavigation($event)">
 </goofy-client-header>

goofy-client/libs/navigation/src/lib/header-container/header-container.component.spec.ts

 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { AppService } from '@goofy-client/app-shared';
 import { mock } from '@goofy-client/test-utils';
-import { OAuthService } from 'angular-oauth2-oidc';
 import { MockComponent } from 'ng-mocks';
 import { BehaviorSubject } from 'rxjs';
 import { HeaderContainerComponent } from './header-container.component';
@@ -13,7 +12,6 @@ describe('HeaderContainerComponent', () => {
 
 	const darkModeSubj: BehaviorSubject<boolean> = new BehaviorSubject(false);
 	const appService = { ...mock(AppService), getDarkMode: () => darkModeSubj };
-	const authService = mock(OAuthService);
 
 	beforeEach(async () => {
 		await TestBed.configureTestingModule({
@@ -25,10 +23,6 @@ describe('HeaderContainerComponent', () => {
 				{
 					provide: AppService,
 					useValue: appService
-				},
-				{
-					provide: OAuthService,
-					useValue: authService
 				}
 			]
 		})

goofy-client/libs/navigation/src/lib/header-container/header-container.component.ts

 import { Component } from '@angular/core';
 import { AppService } from '@goofy-client/app-shared';
-import { OAuthService } from 'angular-oauth2-oidc';
 import { Observable } from 'rxjs';
 
 @Component({
@@ -11,18 +10,11 @@ import { Observable } from 'rxjs';
 export class HeaderContainerComponent {
 	navigationCollapse$: Observable<boolean>;
 
-	constructor(
-		private appService: AppService,
-		private authService: OAuthService,
-	) {
+	constructor(private appService: AppService) {
 		this.navigationCollapse$ = this.appService.getNavigationCollapse();
 	}
 
 	toggleNavigation(isToggle: boolean): void {
 		this.appService.setNavigationCollapse(isToggle);
 	}
-
-	logout(): void {
-		this.authService.logOut();
-	}
 }

goofy-client/libs/navigation/src/lib/header-container/header/header.component.html

@@ -16,18 +16,7 @@
 	<div class="right">
 
 		<goofy-client-user-settings-container data-test-id="user-settings"></goofy-client-user-settings-container>
+		<goofy-client-user-profile-in-header-container></goofy-client-user-profile-in-header-container>
 
-		<!-- TODO: User Profile in eigene Componente auslagern -->
-		<button mat-icon-button [matMenuTriggerFor]="accountMenu" class="big-button" aria-label="Benutzerkonto" data-test-id="user-icon-button"
-				matTooltip="Benutzerkonto Icon/Initialen">
-			<goofy-client-user-icon></goofy-client-user-icon>
-		</button>
-
-		<mat-menu #accountMenu="matMenu">
-			<button mat-menu-item (click)="logoutEmitter.emit()" data-test-id="logout-button">
-				<mat-icon>logout</mat-icon>
-				<span>Abmelden</span>
-			</button>
-		</mat-menu>
 	</div>
 </header>

goofy-client/libs/navigation/src/lib/header-container/header/header.component.scss

@@ -49,13 +49,6 @@ img {
 	}
 }
 
-.big-button {
-	margin-left: 20px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
 .right {
 	color: $grey;
 	display: flex;

goofy-client/libs/navigation/src/lib/header-container/header/header.component.ts

@@ -10,5 +10,4 @@ export class HeaderComponent {
 	@Input() navigationCollapse: boolean;
 
 	@Output() public toggleMenuEvent: EventEmitter<boolean> = new EventEmitter<boolean>()
-	@Output() public logoutEmitter: EventEmitter<void> = new EventEmitter<void>()
 }

goofy-client/libs/navigation/src/lib/header-container/header/user-profile-in-header-container/user-profile-in-header-container.component.html

+<ng-container *ngIf="(currentUserResource$ | async) as currentUserResource">
+	<goofy-client-user-profile-in-header
+		[currentUserResource]="currentUserResource"
+		(logoutEmitter)="logout()">
+	</goofy-client-user-profile-in-header>
+</ng-container>

goofy-client/libs/navigation/src/lib/header-container/header/user-profile-in-header-container/user-profile-in-header-container.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { mock } from '@goofy-client/test-utils';
+import { UserProfileService } from '@goofy-client/user-profile-shared';
+import { OAuthService } from 'angular-oauth2-oidc';
+import { MockComponent } from 'ng-mocks';
+
+import { UserProfileInHeaderContainerComponent } from './user-profile-in-header-container.component';
+import { UserProfileInHeaderComponent } from './user-profile-in-header/user-profile-in-header.component';
+
+describe('UserProfileInHeaderContainerComponent', () => {
+	let component: UserProfileInHeaderContainerComponent;
+	let fixture: ComponentFixture<UserProfileInHeaderContainerComponent>;
+
+	const authService = mock(OAuthService);
+	const userProfileService = mock(UserProfileService);
+
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			declarations: [
+				UserProfileInHeaderContainerComponent,
+				MockComponent(UserProfileInHeaderComponent)
+			],
+			providers: [
+				{
+					provide: OAuthService,
+					useValue: authService
+				},
+				{
+					provide: UserProfileService,
+					useValue: userProfileService
+				}
+			],
+		}).compileComponents();
+
+		fixture = TestBed.createComponent(
+			UserProfileInHeaderContainerComponent
+		);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+
+	describe('ngOnInit', () => {
+		it('should call apiRootService', () => {
+			component.ngOnInit();
+
+			expect(userProfileService.getCurrentUser).toHaveBeenCalled();
+		})
+	})
+
+	describe('logout', () => {
+		it('should call authService', () => {
+			component.logout();
+
+			expect(authService.logOut).toHaveBeenCalled();
+		})
+	})
+});

goofy-client/libs/navigation/src/lib/header-container/header/user-profile-in-header-container/user-profile-in-header-container.component.ts

+import { Component, OnInit } from '@angular/core';
+import { ApiRootResource } from '@goofy-client/api-root-shared';
+import { StateResource } from '@goofy-client/tech-shared';
+import { UserProfileResource, UserProfileService } from '@goofy-client/user-profile-shared';
+import { OAuthService } from 'angular-oauth2-oidc';
+import { Observable } from 'rxjs';
+
+@Component({
+	selector: 'goofy-client-user-profile-in-header-container',
+	templateUrl: './user-profile-in-header-container.component.html',
+	styleUrls: ['./user-profile-in-header-container.component.scss'],
+})
+export class UserProfileInHeaderContainerComponent implements OnInit {
+	apiRootStateResource$: Observable<StateResource<ApiRootResource>>;
+	currentUserResource$: Observable<StateResource<UserProfileResource>>;
+
+	constructor(private authService: OAuthService, private userProfileService: UserProfileService) {}
+
+	ngOnInit(): void {
+		this.currentUserResource$ = this.userProfileService.getCurrentUser();
+	}
+
+	logout(): void {
+		this.authService.logOut();
+	}
+}

goofy-client/libs/navigation/src/lib/header-container/header/user-profile-in-header-container/user-profile-in-header/user-profile-in-header.component.html

+<button mat-icon-button [matMenuTriggerFor]="accountMenu" class="big-button" aria-label="Benutzerkonto" data-test-id="user-icon-button">
+	<goofy-client-user-icon [userProfileStateResource]="currentUserResource"></goofy-client-user-icon>
+</button>
+
+<mat-menu #accountMenu="matMenu" data-test-id="account-menu">
+	<button mat-menu-item (click)="logoutEmitter.emit()" data-test-id="logout-button">
+		<mat-icon>logout</mat-icon>
+		<span>Abmelden</span>
+	</button>
+</mat-menu>

goofy-client/libs/navigation/src/lib/header-container/header/user-profile-in-header-container/user-profile-in-header/user-profile-in-header.component.scss

+.big-button {
+	margin-left: 20px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}

goofy-client/libs/navigation/src/lib/header-container/header/user-profile-in-header-container/user-profile-in-header/user-profile-in-header.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatIcon } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { getElementFromDomRoot, getElementFromFixture } from '@goofy-client/test-utils';
+import { UserIconComponent } from '@goofy-client/user-profile';
+import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
+import { MockComponent } from 'ng-mocks';
+import { UserProfileInHeaderComponent } from './user-profile-in-header.component';
+
+describe('UserProfileInHeaderComponent', () => {
+	let component: UserProfileInHeaderComponent;
+	let fixture: ComponentFixture<UserProfileInHeaderComponent>;
+
+	const logoutButton: string = getDataTestIdOf('logout-button');
+	const userIconButton: string = getDataTestIdOf('user-icon-button');
+
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			declarations: [
+				UserProfileInHeaderComponent,
+				MockComponent(UserIconComponent),
+				MatIcon
+			],
+			imports: [
+				NoopAnimationsModule,
+				MatMenuModule
+			]
+		}).compileComponents();
+
+		fixture = TestBed.createComponent(UserProfileInHeaderComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+
+	describe('click on logout button', () => {
+		it('should emit logout event', () => {
+			jest.spyOn(component.logoutEmitter, 'emit');
+
+			getElementFromFixture(fixture, userIconButton).click();
+			getElementFromDomRoot(fixture, logoutButton).click();
+
+			expect(component.logoutEmitter.emit).toHaveBeenCalled();
+		})
+	})
+});

goofy-client/libs/navigation/src/lib/header-container/header/user-profile-in-header-container/user-profile-in-header/user-profile-in-header.component.ts

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { StateResource } from '@goofy-client/tech-shared';
+import { UserProfileResource } from '@goofy-client/user-profile-shared';
+
+@Component({
+	selector: 'goofy-client-user-profile-in-header',
+	templateUrl: './user-profile-in-header.component.html',
+	styleUrls: ['./user-profile-in-header.component.scss'],
+})
+export class UserProfileInHeaderComponent {
+	@Output() public logoutEmitter: EventEmitter<void> = new EventEmitter<void>()
+	@Input() public currentUserResource: StateResource<UserProfileResource>;
+}

goofy-client/libs/navigation/src/lib/navigation.module.ts

@@ -12,6 +12,8 @@ import { NavigationContainerComponent } from './navigation-container/navigation-
 import { AllVorgaengeNavigationItemComponent } from './navigation/all-vorgaenge-navigation-item/all-vorgaenge-navigation-item.component';
 import { MyVorgaengeNavigationItemComponent } from './navigation/my-vorgaenge-navigation-item/my-vorgaenge-navigation-item.component';
 import { NavigationComponent } from './navigation/navigation.component';
+import { UserProfileInHeaderContainerComponent } from './header-container/header/user-profile-in-header-container/user-profile-in-header-container.component';
+import { UserProfileInHeaderComponent } from './header-container/header/user-profile-in-header-container/user-profile-in-header/user-profile-in-header.component';
 
 @NgModule({
 	declarations: [
@@ -22,6 +24,8 @@ import { NavigationComponent } from './navigation/navigation.component';
 		AllVorgaengeNavigationItemComponent,
 		MyVorgaengeNavigationItemComponent,
 		NavigationContainerComponent,
+		UserProfileInHeaderContainerComponent,
+		UserProfileInHeaderComponent,
 	],
 	imports: [
 		CommonModule,

goofy-client/libs/user-profile-shared/src/lib/user-profile.service.ts

@@ -74,7 +74,7 @@ export class UserProfileService {
 			});
 		});
 
-		return this.currentUser;
+		return this.currentUser.asObservable();
 	}
 
 	private loadCurrentUser(): Observable<UserProfileResource> {