From 8356caa7229efe5c1b5c3cfc2ebc520f07071a6d Mon Sep 17 00:00:00 2001 From: Dan Percic Date: Mon, 10 May 2021 11:53:32 +0300 Subject: [PATCH] fix initials avatar not reloading user --- .../project-listing-screen.component.html | 2 +- .../project-listing-screen.component.ts | 6 +- .../project-overview-screen.component.ts | 14 ++-- .../initials-avatar.component.ts | 74 +++++++++---------- 4 files changed, 44 insertions(+), 52 deletions(-) diff --git a/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.html b/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.html index 2d6fa818a..3bb397f0c 100644 --- a/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.html +++ b/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.html @@ -125,7 +125,7 @@
- +
diff --git a/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.ts b/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.ts index ab82aa730..c3f38354d 100644 --- a/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.ts +++ b/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 p.project.status === Project.StatusEnum.ACTIVE).length; } diff --git a/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.ts b/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.ts index aa59ddc6f..378fd2a5f 100644 --- a/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.ts +++ b/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 events instanceof NavigationStart || events instanceof NavigationEnd)) - .subscribe((event) => { - if (event instanceof NavigationStart && !event.url.endsWith(this._appStateService.activeProjectId)) { + .pipe(filter((events) => events instanceof NavigationStart)) + .subscribe((event: NavigationStart) => { + if (!event.url.endsWith(this._appStateService.activeProjectId)) { this._lastScrollPosition = this._scrollBar.measureScrollOffset('top'); } }); @@ -263,7 +263,7 @@ export class ProjectOverviewScreenComponent extends BaseListingComponent { peopleFilters.push({ key: userId, - label: this.userService.getNameForId(userId) + label: this._userService.getNameForId(userId) }); }); this.peopleFilters = processFilters(this.peopleFilters, peopleFilters); 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 4636db7ab..5b307c5b6 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,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 (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 { + if (isSystemUser) { 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() { - if (this._userService.userId === this.userId) { - return 'red-white'; - } - if (this.disabled) { - return 'inactive'; - } - if (this.color.includes('-')) { - return this.color; - } + private get _colorClass(): string { + if (this._isCurrentUser) return 'red-white'; + 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 {