From 65f45e184e11d765774d0d072ffd397d3f7078d5 Mon Sep 17 00:00:00 2001
From: OZGCloud <ozgcloud@mgm-tp.com>
Date: Thu, 3 Jun 2021 10:06:00 +0200
Subject: [PATCH] OZG-400 create container component;
---
.../header/header.component.html | 2 +-
goofy-client/libs/user-profile/src/index.ts | 3 +-
.../user-icon-container.component.html | 1 +
.../user-icon-container.component.scss | 0
.../user-icon-container.component.spec.ts | 25 +++++++++++++++
.../user-icon-container.component.ts | 32 +++++++++++++++++++
.../lib/user-icon/user-icon.component.html | 15 +++++----
.../lib/user-icon/user-icon.component.scss | 2 +-
.../src/lib/user-icon/user-icon.component.ts | 31 +++++++++---------
.../src/lib/user-profile.module.ts | 8 +++--
.../vorgang-detail-header.component.html | 2 +-
.../vorgang-list-item.component.html | 4 +--
12 files changed, 94 insertions(+), 31 deletions(-)
create mode 100644 goofy-client/libs/user-profile/src/lib/user-icon-container/user-icon-container.component.html
create mode 100644 goofy-client/libs/user-profile/src/lib/user-icon-container/user-icon-container.component.scss
create mode 100644 goofy-client/libs/user-profile/src/lib/user-icon-container/user-icon-container.component.spec.ts
create mode 100644 goofy-client/libs/user-profile/src/lib/user-icon-container/user-icon-container.component.ts
diff --git a/goofy-client/libs/navigation/src/lib/header-container/header/header.component.html b/goofy-client/libs/navigation/src/lib/header-container/header/header.component.html
index 409feda884..8fc56d6d07 100644
--- a/goofy-client/libs/navigation/src/lib/header-container/header/header.component.html
+++ b/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">
diff --git a/goofy-client/libs/user-profile/src/index.ts b/goofy-client/libs/user-profile/src/index.ts
index 9c73fd85e2..618038ce4d 100644
--- a/goofy-client/libs/user-profile/src/index.ts
+++ b/goofy-client/libs/user-profile/src/index.ts
@@ -1,2 +1,3 @@
-export * from './lib/user-icon/user-icon.component';
+export * from './lib/user-icon-container/user-icon-container.component';
export * from './lib/user-profile.module';
+
diff --git a/goofy-client/libs/user-profile/src/lib/user-icon-container/user-icon-container.component.html b/goofy-client/libs/user-profile/src/lib/user-icon-container/user-icon-container.component.html
new file mode 100644
index 0000000000..a4185e299d
--- /dev/null
+++ b/goofy-client/libs/user-profile/src/lib/user-icon-container/user-icon-container.component.html
@@ -0,0 +1 @@
+<goofy-client-user-icon [userProfileStateResource]="userProfile$ | async" [disableTooltip]="disableTooltip" [scaleFactor]="scaleFactor" [transformOrigin]="transformOrigin"></goofy-client-user-icon>
\ No newline at end of file
diff --git a/goofy-client/libs/user-profile/src/lib/user-icon-container/user-icon-container.component.scss b/goofy-client/libs/user-profile/src/lib/user-icon-container/user-icon-container.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/goofy-client/libs/user-profile/src/lib/user-icon-container/user-icon-container.component.spec.ts b/goofy-client/libs/user-profile/src/lib/user-icon-container/user-icon-container.component.spec.ts
new file mode 100644
index 0000000000..6d338b051b
--- /dev/null
+++ b/goofy-client/libs/user-profile/src/lib/user-icon-container/user-icon-container.component.spec.ts
@@ -0,0 +1,25 @@
+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();
+ });
+});
diff --git a/goofy-client/libs/user-profile/src/lib/user-icon-container/user-icon-container.component.ts b/goofy-client/libs/user-profile/src/lib/user-icon-container/user-icon-container.component.ts
new file mode 100644
index 0000000000..5b17ae3a9a
--- /dev/null
+++ b/goofy-client/libs/user-profile/src/lib/user-icon-container/user-icon-container.component.ts
@@ -0,0 +1,32 @@
+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
diff --git a/goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.html b/goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.html
index 45c87a93f7..22f917db9b 100644
--- a/goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.html
+++ b/goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.html
@@ -1,15 +1,16 @@
-<ng-container *ngIf="userProfile$ | async as userProfile">
-
<div class="editor"
[ngStyle]="{
'transform': 'scale(' + scaleFactor + ')',
'transform-origin': transformOrigin
}"
[matTooltipDisabled]="disableTooltip"
- [matTooltip]="{{toolTip}}">
+ matTooltip="{{ toolTip }}">
- <mat-icon>account_circle</mat-icon>
+ <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>
-
-</ng-container>
\ No newline at end of file
+ </div>
\ No newline at end of file
diff --git a/goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.scss b/goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.scss
index 0a64fda9e4..fcccc80212 100644
--- a/goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.scss
+++ b/goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.scss
@@ -19,4 +19,4 @@
left: 0;
top: 0;
}
-}
+}
\ No newline at end of file
diff --git a/goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.ts b/goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.ts
index 58e77b37a5..e0348d0f8b 100644
--- a/goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.ts
+++ b/goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.ts
@@ -1,35 +1,36 @@
-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());
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes.userProfileStateResource) {
+ this.toolTip = this.userProfileStateResource.resource ? this.userProfileStateResource.resource.firstName + ' ' + this.userProfileStateResource.resource.lastName : this.toolTipNoUser;
+ }
+ }
- constructor(private userProfileService: UserProfileService) { }
+ get initials(): string {
+ return this.getFirstLetter(this.userProfileStateResource.resource.firstName) + this.getFirstLetter(this.userProfileStateResource.resource.lastName);
+ }
- ngOnChanges(changes: SimpleChanges) {
- if (changes.vorgang && !isNil(this.vorgang)) {
- this.userProfile$ = this.userProfileService.getUserProfile(this.vorgang);
- }
+ private getFirstLetter(value: string): string {
+ return isNil(value) ? undefined : value.substr(0, 1).toUpperCase();
}
}
\ No newline at end of file
diff --git a/goofy-client/libs/user-profile/src/lib/user-profile.module.ts b/goofy-client/libs/user-profile/src/lib/user-profile.module.ts
index c2cbacbd63..5015a29838 100644
--- a/goofy-client/libs/user-profile/src/lib/user-profile.module.ts
+++ b/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
diff --git a/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.html b/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.html
index a2fd88cca9..55bdebc327 100644
--- a/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.html
+++ b/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>
diff --git a/goofy-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.html b/goofy-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.html
index 384c454167..56944edba3 100644
--- a/goofy-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.html
+++ b/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>
--
GitLab