fix initials avatar not reloading user

apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.html

@@ -125,7 +125,7 @@
                         <redaction-needs-work-badge [needsWorkInput]="pw"></redaction-needs-work-badge>
                     </div>
                     <div class="user-column">
-                        <redaction-initials-avatar [user]="getUser(pw.project.ownerId)" [withName]="true"></redaction-initials-avatar>
+                        <redaction-initials-avatar [userId]="pw.project.ownerId" [withName]="true"></redaction-initials-avatar>
                     </div>
                     <div class="status-container">
                         <redaction-project-listing-actions (actionPerformed)="actionPerformed($event)" [project]="pw"></redaction-project-listing-actions>

apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.ts

@@ -1,5 +1,5 @@
 import { Component, Injector, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { Project, RuleSetModel, User } from '@redaction/red-ui-http';
+import { Project, RuleSetModel } from '@redaction/red-ui-http';
 import { AppStateService } from '../../../../state/app-state.service';
 import { UserService } from '../../../../services/user.service';
 import { DoughnutChartConfig } from '../../../shared/components/simple-doughnut-chart/simple-doughnut-chart.component';
@@ -157,10 +157,6 @@ export class ProjectListingScreenComponent extends BaseListingComponent<ProjectW
         return this._userService.user;
     }
 
-    public getUser(id: string): User {
-        return this._userService.getUserById(id);
-    }
-
     public get activeProjectsCount() {
         return this.allEntities.filter((p) => p.project.status === Project.StatusEnum.ACTIVE).length;
     }

apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.ts

@@ -51,6 +51,8 @@ export class ProjectOverviewScreenComponent extends BaseListingComponent<FileSta
     @ViewChild('projectDetailsComponent', { static: false })
     private _projectDetailsComponent: ProjectDetailsComponent;
     private _filesAutoUpdateTimer: Subscription;
+    private _routerEventsScrollPositionSub: Subscription;
+    private _fileChangedSub: Subscription;
     private _lastScrollPosition: number;
 
     @ViewChild(CdkVirtualScrollViewport) private _scrollBar: CdkVirtualScrollViewport;
@@ -58,12 +60,10 @@ export class ProjectOverviewScreenComponent extends BaseListingComponent<FileSta
     @ViewChild('statusFilter') private _statusFilterComponent: FilterComponent;
     @ViewChild('peopleFilter') private _peopleFilterComponent: FilterComponent;
     @ViewChild('needsWorkFilter') private _needsWorkFilterComponent: FilterComponent;
-    private _routerEventsScrollPositionSub: Subscription;
-    private _fileChangedSub: Subscription;
 
     constructor(
-        public readonly userService: UserService,
         public readonly permissionsService: PermissionsService,
+        private readonly _userService: UserService,
         private readonly _notificationService: NotificationService,
         private readonly _dialogService: ProjectsDialogService,
         private readonly _fileUploadService: FileUploadService,
@@ -97,9 +97,9 @@ export class ProjectOverviewScreenComponent extends BaseListingComponent<FileSta
         });
 
         this._routerEventsScrollPositionSub = this._router.events
-            .pipe(filter((events) => events instanceof NavigationStart || events instanceof NavigationEnd))
+            .pipe(filter((events) => events instanceof NavigationStart))
-            .subscribe((event) => {
+            .subscribe((event: NavigationStart) => {
-                if (event instanceof NavigationStart && !event.url.endsWith(this._appStateService.activeProjectId)) {
+                if (!event.url.endsWith(this._appStateService.activeProjectId)) {
                     this._lastScrollPosition = this._scrollBar.measureScrollOffset('top');
                 }
             });
@@ -263,7 +263,7 @@ export class ProjectOverviewScreenComponent extends BaseListingComponent<FileSta
         allDistinctPeople.forEach((userId) => {
             peopleFilters.push({
                 key: userId,
-                label: this.userService.getNameForId(userId)
+                label: this._userService.getNameForId(userId)
             });
         });
         this.peopleFilters = processFilters(this.peopleFilters, peopleFilters);

apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, OnInit } from '@angular/core';
+import { Component, Input, OnChanges } from '@angular/core';
 import { UserService } from '../../../../services/user.service';
 import { User } from '@redaction/red-ui-http';
 import { TranslateService } from '@ngx-translate/core';
@@ -8,7 +8,7 @@ import { TranslateService } from '@ngx-translate/core';
     templateUrl: './initials-avatar.component.html',
     styleUrls: ['./initials-avatar.component.scss']
 })
-export class InitialsAvatarComponent implements OnInit, OnChanges {
+export class InitialsAvatarComponent implements OnChanges {
     @Input() public userId: string;
     @Input() public user: User;
     @Input() public color = 'lightgray';
@@ -18,65 +18,61 @@ export class InitialsAvatarComponent implements OnInit, OnChanges {
     @Input() public tooltipPosition: 'below' | 'above' = 'above';
 
     public displayName: string;
-
     public initials: string;
-
     public colorClass: string;
 
     constructor(private readonly _userService: UserService, private readonly _translateService: TranslateService) {}
 
-    ngOnInit(): void {}
-
     ngOnChanges(): void {
         const isSystemUser = this.userId && this.userId.toLowerCase() === 'system';
-        if (!isSystemUser) {
+        if (isSystemUser) {
-            if (this.user) {
-                this.userId = this.user.userId;
-            } else {
-                this.user = this._userService.getUserById(this.userId);
-            }
-            this.displayName = this._userService.getName(this.user);
-            if (this.showYou && this._userService.userId === this.userId) {
-                this.displayName += ` (${this._translateService.instant('initials-avatar.you')})`;
-            }
-            this.initials = this._getInitials();
-            this.colorClass = this._colorClass;
-        } else {
             this.displayName = 'System';
             this.initials = 'SY';
             this.colorClass = 'red-white red';
+            return;
         }
+
+        if (this.userId) {
+            this.user = this._userService.getUserById(this.userId);
+        }
+
+        this.displayName = this._userService.getName(this.user);
+        if (this.showYou && this._isCurrentUser) {
+            this.displayName += ` (${this._translateService.instant('initials-avatar.you')})`;
+        }
+
+        this.initials = this._getInitials();
+        this.colorClass = this._colorClass;
     }
 
-    private _getInitials() {
+    private _getInitials(): string {
         if (!this.user) {
             return '?';
-        } else {
-            return this._userService
-                .getName(this.user)
-                .split(' ')
-                .filter((value) => value !== ' ')
-                .filter((value, idx) => idx < 2)
-                .map((str) => str[0])
-                .join('');
         }
+
+        return this._userService
+            .getName(this.user)
+            .split(' ')
+            .filter((value) => value !== ' ')
+            .filter((value, idx) => idx < 2)
+            .map((str) => str[0])
+            .join('');
     }
 
-    private get _colorClass() {
+    private get _colorClass(): string {
-        if (this._userService.userId === this.userId) {
+        if (this._isCurrentUser) return 'red-white';
-            return 'red-white';
+        if (this.disabled) return 'inactive';
-        }
+        if (this.color.includes('-')) return this.color;
-        if (this.disabled) {
+
-            return 'inactive';
-        }
-        if (this.color.includes('-')) {
-            return this.color;
-        }
         return `${this.color}-dark`;
     }
 
+    private get _isCurrentUser(): boolean {
+        return this.user && this._userService.userId === this.user.userId;
+    }
+
     public get hasBorder(): boolean {
-        return !!this.user && this._userService.userId !== this.userId && this._userService.isManager(this.user);
+        return !!this.user && !this._isCurrentUser && this._userService.isManager(this.user);
     }
 
     public get disabled(): boolean {