OZG-400 create container component;

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

@@ -17,7 +17,7 @@
 		<goofy-client-settings [darkMode]="darkMode" (darkModeEmitter)="darkModeEmitter.emit($event)"></goofy-client-settings>
 
 		<button mat-icon-button [matMenuTriggerFor]="accountMenu" class="big-button" data-test-id="user-icon-button">
-			<goofy-client-user-icon [disableTooltip]="true" [scaleFactor]="1.4" transformOrigin="center"></goofy-client-user-icon>
+			<goofy-client-user-icon-container [disableTooltip]="true" [scaleFactor]="1.4" transformOrigin="center"></goofy-client-user-icon-container>
 		</button>
 
 		<mat-menu #accountMenu="matMenu">

goofy-client/libs/user-profile/src/index.ts

-export * from './lib/user-icon/user-icon.component';
+export * from './lib/user-icon-container/user-icon-container.component';
 export * from './lib/user-profile.module';
+

goofy-client/libs/user-profile/src/lib/user-icon-container/user-icon-container.component.html

+<goofy-client-user-icon [userProfileStateResource]="userProfile$ | async" [disableTooltip]="disableTooltip" [scaleFactor]="scaleFactor" [transformOrigin]="transformOrigin"></goofy-client-user-icon>
\ No newline at end of file

goofy-client/libs/user-profile/src/lib/user-icon-container/user-icon-container.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserIconContainerComponent } from './user-icon-container.component';
+
+describe('UserIconContainerComponent', () => {
+  let component: UserIconContainerComponent;
+  let fixture: ComponentFixture<UserIconContainerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ UserIconContainerComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserIconContainerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

goofy-client/libs/user-profile/src/lib/user-icon-container/user-icon-container.component.ts

+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { createEmptyStateResource, StateResource } from '@goofy-client/tech-shared';
+import { UserProfileService } from '@goofy-client/user-profile-shared';
+import { VorgangHeaderLinkRel, VorgangWithEingangResource } from '@goofy-client/vorgang-shared';
+import { hasLink } from '@ngxp/rest';
+import { UserProfileResource } from 'libs/user-profile-shared/src/lib/user-profile.model';
+import { isNil } from 'lodash-es';
+import { Observable, of } from 'rxjs';
+
+@Component({
+	selector: 'goofy-client-user-icon-container',
+	templateUrl: './user-icon-container.component.html',
+	styleUrls: ['./user-icon-container.component.scss']
+})
+export class UserIconContainerComponent implements OnChanges {
+
+	@Input() vorgang: VorgangWithEingangResource;
+
+	@Input() disableTooltip: boolean = false;
+	@Input() scaleFactor: number = 2;
+	@Input() transformOrigin: string = 'right center';
+
+	userProfile$: Observable<StateResource<UserProfileResource>> = of(createEmptyStateResource());
+
+	constructor(private userProfileService: UserProfileService) { }
+
+	ngOnChanges(changes: SimpleChanges) {
+		if (changes.vorgang && !isNil(this.vorgang) && hasLink(this.vorgang, VorgangHeaderLinkRel.ASSIGNED_TO)) {
+			this.userProfile$ = this.userProfileService.getUserProfile(this.vorgang);
+		}
+	}
+}
\ No newline at end of file

goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.html

-<ng-container *ngIf="userProfile$ | async as userProfile">
-
 	<div class="editor"
 			[ngStyle]="{
 				'transform': 'scale(' + scaleFactor + ')',
 				'transform-origin': transformOrigin
 			}"
 			[matTooltipDisabled]="disableTooltip"
-			[matTooltip]="{{toolTip}}">
+			matTooltip="{{ toolTip }}">
 
+			<ng-container *ngIf="userProfileStateResource.resource; else noUser">
+				<span>{{ initials }}</span>
+			</ng-container>
+			<ng-template #noUser>
 				<mat-icon>account_circle</mat-icon>
+			</ng-template>
 		<div class="picture"></div>
 	</div>
\ No newline at end of file
-
-</ng-container>
\ No newline at end of file

goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.ts

-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { createEmptyStateResource, StateResource } from '@goofy-client/tech-shared';
-import { UserProfileService } from '@goofy-client/user-profile-shared';
-import { VorgangWithEingangResource } from '@goofy-client/vorgang-shared';
+import { Component, Input, SimpleChanges } from '@angular/core';
+import { StateResource } from '@goofy-client/tech-shared';
 import { UserProfileResource } from 'libs/user-profile-shared/src/lib/user-profile.model';
 import { isNil } from 'lodash';
-import { Observable, of } from 'rxjs';
 
 @Component({
 	selector: 'goofy-client-user-icon',
 	templateUrl: './user-icon.component.html',
 	styleUrls: ['./user-icon.component.scss']
 })
-export class UserIconComponent implements OnChanges {
+export class UserIconComponent {
 
-	@Input() vorgang: VorgangWithEingangResource;
+	@Input() userProfileStateResource: StateResource<UserProfileResource>;
 
 	@Input() disableTooltip: boolean = false;
 	@Input() scaleFactor: number = 2;
 	@Input() transformOrigin: string = 'right center';
 
-	private static DEFAULT_TOOLTIP = 'kein Bearbeiter zugewiesen';
+	readonly toolTipNoUser: string = 'kein Bearbeiter zugewiesen'
 
-	toolTip = UserIconComponent.DEFAULT_TOOLTIP;
+	toolTip: string;
 
-	userProfile$: Observable<StateResource<UserProfileResource>> = of(createEmptyStateResource());
-
-	constructor(private userProfileService: UserProfileService) { }
+	ngOnChanges(changes: SimpleChanges): void {
+		if (changes.userProfileStateResource) {
+			this.toolTip = this.userProfileStateResource.resource ? this.userProfileStateResource.resource.firstName + ' ' + this.userProfileStateResource.resource.lastName : this.toolTipNoUser;
+		}
+	}
 
-	ngOnChanges(changes: SimpleChanges) {
-		if (changes.vorgang && !isNil(this.vorgang)) {
-			this.userProfile$ = this.userProfileService.getUserProfile(this.vorgang);
+	get initials(): string {
+		return this.getFirstLetter(this.userProfileStateResource.resource.firstName) + this.getFirstLetter(this.userProfileStateResource.resource.lastName);
 	}
+
+	private getFirstLetter(value: string): string {
+		return isNil(value) ? undefined : value.substr(0, 1).toUpperCase();
 	}
 }
\ No newline at end of file

goofy-client/libs/user-profile/src/lib/user-profile.module.ts

@@ -2,6 +2,8 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { TechSharedModule } from '@goofy-client/tech-shared';
 import { UiModule } from '@goofy-client/ui';
+import { UserProfileSharedModule } from '@goofy-client/user-profile-shared';
+import { UserIconContainerComponent } from './user-icon-container/user-icon-container.component';
 import { UserIconComponent } from './user-icon/user-icon.component';
 
 @NgModule({
@@ -9,9 +11,9 @@ import { UserIconComponent } from './user-icon/user-icon.component';
 		CommonModule,
 		TechSharedModule,
 		UiModule,
-		UserProfileModule
+		UserProfileSharedModule
 	],
-	declarations: [UserIconComponent],
-	exports: [UserIconComponent]
+	declarations: [UserIconComponent, UserIconContainerComponent],
+	exports: [UserIconContainerComponent]
 })
 export class UserProfileModule { }
\ No newline at end of file

goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.html

@@ -8,5 +8,5 @@
 		<h1 goofy-client-aktenzeichen [vorgang]="vorgangWithEingang"></h1>
 		<h3 data-test-id="name">{{ vorgangWithEingang.name }}</h3>
 	</div>
-	<goofy-client-user-icon *ngIf="vorgangWithEingang | hasLink: linkRel.ASSIGN" [vorgang]="vorgangWithEingang" class="user" data-test-id="user"></goofy-client-user-icon>
+	<goofy-client-user-icon-container *ngIf="vorgangWithEingang | hasLink: linkRel.ASSIGN" [vorgang]="vorgangWithEingang" class="user" data-test-id="user"></goofy-client-user-icon-container>
 </div>

goofy-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.html

@@ -18,9 +18,9 @@
 		<goofy-client-vorgang-next-frist-button [vorgang]="vorgang" class="row wiedervorlagen"></goofy-client-vorgang-next-frist-button>
 	</div>
 
-	<goofy-client-user-icon *ngIf="vorgang | hasLink: vorgangLinkRel.ASSIGN" data-test-id="user"
+	<goofy-client-user-icon-container *ngIf="vorgang | hasLink: vorgangLinkRel.ASSIGN" data-test-id="user"
 		[vorgang]="vorgang"
 		scaleFactor="2.2"
 		class="user-icon">
-	</goofy-client-user-icon>
+	</goofy-client-user-icon-container>
 </a>