add name pipe

apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/reset-password/reset-password.component.html

@@ -1,4 +1,4 @@
-<div [translateParams]="{ userName: userName }" [translate]="'reset-password-dialog.header'" class="dialog-header heading-l"></div>
+<div [translateParams]="{ userName: user | name }" [translate]="'reset-password-dialog.header'" class="dialog-header heading-l"></div>
 
 <form (submit)="save()" [formGroup]="passwordForm">
     <div class="dialog-content">

apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/reset-password/reset-password.component.ts

@@ -23,10 +23,6 @@ export class ResetPasswordComponent {
         private readonly _loadingService: LoadingService
     ) {}
 
-    get userName() {
-        return this._userService.getNameForId(this.user.id);
-    }
-
     async save() {
         this._loadingService.start();
         await this._userControllerService

apps/red-ui/src/app/modules/dossier/components/comments/comments.component.html

@@ -1,9 +1,10 @@
 <div *ngFor="let comment of annotation.comments" class="comment">
     <div class="comment-details-wrapper">
         <div [matTooltipPosition]="'above'" [matTooltip]="comment.date | date: 'exactDate'" class="small-label">
-            <b> {{ getOwnerName(comment) }} </b>
+            <strong> {{ comment.user | name }} </strong>
             {{ comment.date | date: 'sophisticatedDate' }}
         </div>
+
         <div class="comment-actions">
             <iqser-circle-button
                 (action)="deleteComment(comment)"
@@ -15,6 +16,7 @@
             ></iqser-circle-button>
         </div>
     </div>
+
     <div>{{ comment.text }}</div>
 </div>
 

apps/red-ui/src/app/modules/dossier/components/comments/comments.component.ts

@@ -52,8 +52,4 @@ export class CommentsComponent {
                 }
             });
     }
-
-    getOwnerName(comment: Comment): string {
-        return this._userService.getNameForId(comment.user);
-    }
 }

apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.html

@@ -4,7 +4,7 @@
             <mat-label>{{ 'assign-dossier-owner.dialog.single-user' | translate }}</mat-label>
             <mat-select formControlName="owner">
                 <mat-option *ngFor="let userId of ownersSelectOptions" [value]="userId">
-                    {{ userService.getNameForId(userId) }}
+                    {{ userId | name }}
                 </mat-option>
             </mat-select>
         </mat-form-field>

apps/red-ui/src/app/modules/dossier/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.html

@@ -14,7 +14,7 @@
                     <mat-label>{{ 'assign-owner.dialog.label' | translate: { type: data.mode } }}</mat-label>
                     <mat-select formControlName="singleUser">
                         <mat-option *ngFor="let userId of singleUsersSelectOptions" [value]="userId">
-                            {{ userService.getNameForId(userId) }}
+                            {{ userId | name }}
                         </mat-option>
                     </mat-select>
                 </mat-form-field>

apps/red-ui/src/app/modules/shared/pipes/name.pipe.ts

@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { UserService, UserWrapper } from '@services/user.service';
+import { TranslateService } from '@ngx-translate/core';
+
+@Pipe({
+    name: 'name'
+})
+export class NamePipe implements PipeTransform {
+    constructor(private readonly _userService: UserService, private readonly _translateService: TranslateService) {}
+
+    transform(value: UserWrapper | string): string {
+        if (typeof value === 'string') {
+            return this._userService.getNameForId(value) || this._translateService.instant('unknown');
+        }
+        return value.name;
+    }
+}

apps/red-ui/src/app/modules/shared/shared.module.ts

@@ -25,6 +25,7 @@ import { AssignUserDropdownComponent } from './components/assign-user-dropdown/a
 import { PageHeaderComponent } from './components/page-header/page-header.component';
 import { DatePipe } from '@shared/pipes/date.pipe';
 import { LongPressDirective } from '@shared/directives/long-press.directive';
+import { NamePipe } from '@shared/pipes/name.pipe';
 
 const buttons = [FileDownloadBtnComponent, UserButtonComponent];
 
@@ -45,7 +46,7 @@ const components = [
     ...buttons
 ];
 
-const utils = [DatePipe, NavigateLastDossiersScreenDirective, LongPressDirective];
+const utils = [DatePipe, NamePipe, NavigateLastDossiersScreenDirective, LongPressDirective];
 
 const modules = [MatConfigModule, ScrollingModule, IconsModule, FormsModule, ReactiveFormsModule, CommonUiModule];
 
@@ -68,4 +69,5 @@ const modules = [MatConfigModule, ScrollingModule, IconsModule, FormsModule, Rea
         }
     ]
 })
-export class SharedModule {}
+export class SharedModule {
+}

apps/red-ui/src/app/services/user.service.ts

@@ -106,8 +106,7 @@ export class UserService {
     }
 
     getNameForId(userId: string): string | undefined {
-        const user = this.getUserById(userId);
-        return user ? user.name : undefined;
+        return this.getUserById(userId)?.name;
     }
 
     isManager(user: UserWrapper = this._currentUser): boolean {