diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts index e857bf961..b5508d27f 100644 --- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts @@ -1,4 +1,4 @@ -import { Component, Injector, OnInit } from '@angular/core'; +import { Component, Injector, OnInit, QueryList, ViewChildren } from '@angular/core'; import { PermissionsService } from '@services/permissions.service'; import { UserService } from '@services/user.service'; import { User, UserControllerService } from '@redaction/red-ui-http'; @@ -8,6 +8,7 @@ import { DoughnutChartConfig } from '@shared/components/simple-doughnut-chart/si import { TranslateChartService } from '@services/translate-chart.service'; import { BaseListingComponent } from '@shared/base/base-listing.component'; import { LoadingService } from '../../../../services/loading.service'; +import { InitialsAvatarComponent } from '../../../shared/components/initials-avatar/initials-avatar.component'; @Component({ templateUrl: './user-listing-screen.component.html', @@ -17,6 +18,8 @@ export class UserListingScreenComponent extends BaseListingComponent imple collapsedDetails = false; chartData: DoughnutChartConfig[] = []; protected readonly _selectionKey = 'userId'; + @ViewChildren(InitialsAvatarComponent) + private readonly _avatars: QueryList; constructor( readonly permissionsService: PermissionsService, @@ -56,7 +59,7 @@ export class UserListingScreenComponent extends BaseListingComponent imple .toPromise(); } - await this._loadData(); + await this._loadData(true); }); } @@ -80,7 +83,8 @@ export class UserListingScreenComponent extends BaseListingComponent imple this._loadingService.start(); user.roles = this.userService.isActive(user) ? [] : ['RED_USER']; await this._userControllerService.updateProfile(user, user.userId).toPromise(); - await this._loadData(); + await this._loadData(true); + this._avatars.find(item => item.userId === user.userId).detectChanges(); } toggleCollapsedDetails() { @@ -99,8 +103,9 @@ export class UserListingScreenComponent extends BaseListingComponent imple return this.userService.getName(user); } - private async _loadData() { + private async _loadData(updateUserService = false) { this.allEntities = await this._userControllerService.getAllUsers().toPromise(); + if (updateUserService) await this.userService.loadAllUsers(); this._executeSearchImmediately(); this._computeStats(); this._loadingService.stop(); 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 0771321a9..0b1a8cff6 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 @@ -1,4 +1,10 @@ -import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core'; +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + 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'; @@ -24,7 +30,8 @@ export class InitialsAvatarComponent implements OnChanges { constructor( private readonly _userService: UserService, - private readonly _translateService: TranslateService + private readonly _translateService: TranslateService, + private readonly _changeDetectorRef: ChangeDetectorRef ) {} get hasBorder(): boolean { @@ -67,6 +74,11 @@ export class InitialsAvatarComponent implements OnChanges { this.colorClass = this._colorClass; } + detectChanges(): void { + this.ngOnChanges(); + this._changeDetectorRef.detectChanges(); + } + private _getInitials(): string { if (!this.user) return '?';