diff --git a/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.ts b/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.ts index 842637d4a..170643735 100644 --- a/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.ts +++ b/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.ts @@ -75,6 +75,7 @@ export class UserProfileScreenComponent implements OnInit { .toPromise(); await this._userService.loadCurrentUser(); + await this._userService.loadAllUsers(); } this._initializeForm(); diff --git a/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts b/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts index db9168d45..c2401b8a8 100644 --- a/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts +++ b/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts @@ -3,11 +3,13 @@ import { ChangeDetectorRef, Component, Input, - OnChanges + OnChanges, + OnDestroy } from '@angular/core'; import { UserService } from '@services/user.service'; import { User } from '@redaction/red-ui-http'; import { TranslateService } from '@ngx-translate/core'; +import { Subscription } from 'rxjs'; @Component({ selector: 'redaction-initials-avatar', @@ -15,7 +17,7 @@ import { TranslateService } from '@ngx-translate/core'; styleUrls: ['./initials-avatar.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) -export class InitialsAvatarComponent implements OnChanges { +export class InitialsAvatarComponent implements OnChanges, OnDestroy { @Input() userId: string; @Input() color = 'lightgray'; @Input() size: 'small' | 'large' = 'small'; @@ -28,11 +30,17 @@ export class InitialsAvatarComponent implements OnChanges { colorClass: string; user: User; + private _subscription: Subscription; + constructor( private readonly _userService: UserService, private readonly _translateService: TranslateService, private readonly _changeDetectorRef: ChangeDetectorRef - ) {} + ) { + this._subscription = _userService.usersReloaded$.subscribe(() => { + this.detectChanges(); + }); + } get hasBorder(): boolean { return !!this.user && !this._isCurrentUser && this._userService.isManager(this.user); @@ -54,6 +62,10 @@ export class InitialsAvatarComponent implements OnChanges { return this._userService.userId === this.user?.userId; } + ngOnDestroy() { + this._subscription?.unsubscribe(); + } + ngOnChanges(): void { const isSystemUser = this.userId?.toLowerCase() === 'system'; if (isSystemUser) { diff --git a/apps/red-ui/src/app/services/user.service.ts b/apps/red-ui/src/app/services/user.service.ts index 5aec1a941..bfc12b023 100644 --- a/apps/red-ui/src/app/services/user.service.ts +++ b/apps/red-ui/src/app/services/user.service.ts @@ -1,4 +1,4 @@ -import { Inject, Injectable } from '@angular/core'; +import { EventEmitter, Inject, Injectable } from '@angular/core'; import { KeycloakService } from 'keycloak-angular'; import { KeycloakProfile } from 'keycloak-js'; import jwt_decode from 'jwt-decode'; @@ -66,8 +66,8 @@ export class UserWrapper { providedIn: 'root' }) export class UserService { + usersReloaded$: EventEmitter = new EventEmitter(); private _currentUser: UserWrapper; - private _allRedUsers: User[]; private _allUsers: User[]; constructor( @@ -76,14 +76,7 @@ export class UserService { private readonly _userControllerService: UserControllerService ) {} - private static _hasAnyRedRole(user: User) { - return ( - user.roles.indexOf('RED_USER') >= 0 || - user.roles.indexOf('RED_MANAGER') >= 0 || - user.roles.indexOf('RED_ADMIN') >= 0 || - user.roles.indexOf('RED_USER_ADMIN') >= 0 - ); - } + private _allRedUsers: User[]; get allRedUsers(): User[] { return this._allRedUsers; @@ -107,6 +100,15 @@ export class UserService { return this._currentUser; } + private static _hasAnyRedRole(user: User) { + return ( + user.roles.indexOf('RED_USER') >= 0 || + user.roles.indexOf('RED_MANAGER') >= 0 || + user.roles.indexOf('RED_ADMIN') >= 0 || + user.roles.indexOf('RED_USER_ADMIN') >= 0 + ); + } + logout() { wipeCaches().then(); this._keycloakService.logout(window.location.origin + this._baseHref).then(); @@ -125,6 +127,7 @@ export class UserService { async loadAllUsers() { this._allUsers = await this._userControllerService.getAllUsers().toPromise(); + this.usersReloaded$.next(); } async loadCurrentUser() {