Avatar initials color depending on role

apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.html

@@ -1,4 +1,4 @@
 <div class="flex-row">
-  <div [className]="color + ' oval ' + size">{{initials}}</div>
+  <div [className]="colorClass + ' oval ' + size">{{initials}}</div>
   <div *ngIf="withName" class="clamp-2">{{username || ('initials-avatar.unassigned.label' | translate)}}</div>
 </div>

apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.ts

@@ -1,16 +1,18 @@
-import {Component, Input, OnInit} from '@angular/core';
+import { Component, Input, OnChanges, OnInit } from '@angular/core';
+import { UserService } from '../../user/user.service';
+import { User } from '@redaction/red-ui-http';
 
 @Component({
   selector: 'redaction-initials-avatar',
   templateUrl: './initials-avatar.component.html',
   styleUrls: ['./initials-avatar.component.scss']
 })
-export class InitialsAvatarComponent implements OnInit {
+export class InitialsAvatarComponent implements OnInit, OnChanges {
   @Input()
-  public username: string;
+  public userId: string;
 
   @Input()
-  public color = 'lightgray-dark';
+  public color = 'lightgray';
 
   @Input()
   public size: 'small' | 'large' = 'small';
@@ -18,21 +20,40 @@ export class InitialsAvatarComponent implements OnInit {
   @Input()
   public withName = false;
 
-  constructor() {
+  public _user: User;
+
+  constructor(private readonly _userService: UserService) {
   }
 
   ngOnInit(): void {
   }
 
+  ngOnChanges(): void {
+    this._user = this._userService.getUserById(this.userId);
+  }
+
+  public get username(): string {
+    return this._userService.getName(this._user);
+  }
+
   public get initials(): string {
-    if (!this.username) {
+    if (!this._user) {
       return '?'
     }
 
-    return this.username
+    return this._userService.getName(this._user)
       .split(' ')
+      .filter(value => value !== ' ')
       .filter((value, idx) => idx < 2)
       .map((str) => str[0])
       .join('');
   }
+
+  public get colorClass() {
+    if (this.color.includes('-')) {
+      return this.color;
+    }
+    const textColor = !this._user || !this._userService.isManager(this._user) ? 'dark' : 'red';
+    return `${this.color}-${textColor}`
+  }
 }

apps/red-ui/src/app/screens/base-screen/base-screen.component.html

@@ -40,7 +40,7 @@
     </div>
     <div class="menu right flex-2">
       <button [matMenuTriggerFor]="menu" mat-button class="arrow-button">
-          <redaction-initials-avatar color="red-white" size="small" [username]="user?.name" [withName]="true"></redaction-initials-avatar>
+          <redaction-initials-avatar color="red-white" size="small" [userId]="user?.id" [withName]="true"></redaction-initials-avatar>
           <mat-icon svgIcon="red:arrow-down"></mat-icon>
       </button>
       <mat-menu #menu="matMenu">

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

@@ -85,8 +85,7 @@
           </div>
         </div>
         <div>
-          <redaction-initials-avatar [username]="getOwnerName(pw)"
-                                     color="lightgray-red"
+          <redaction-initials-avatar [userId]="pw.project.ownerId"
                                      withName="true"
           ></redaction-initials-avatar>
         </div>

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

@@ -68,10 +68,6 @@ export class ProjectListingScreenComponent implements OnInit {
     return this.appStateService.allProjects.length - this.activeProjects;
   }
 
-  public getOwnerName(pw: ProjectWrapper) {
-    return this._userService.getNameForId(pw.project.ownerId);
-  }
-
   public documentCount(project: ProjectWrapper) {
     return project.files.length;
   }
@@ -107,6 +103,6 @@ export class ProjectListingScreenComponent implements OnInit {
       return acc;
     }, {})
 
-    return Object.keys(obj).map(status => ({ length: obj[status], color: status }));
+    return Object.keys(obj).sort().map(status => ({ length: obj[status], color: status }));
   }
 }

apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html

@@ -108,7 +108,7 @@
         <div class="assigned-to">
           <redaction-initials-avatar
             withName="true"
-            [username]="getFileOwnerUsername(fileStatus)"
+            [userId]="fileStatus.currentReviewer"
           ></redaction-initials-avatar>
         </div>
 
@@ -178,9 +178,8 @@
     </div>
 
     <div class="owner flex-row mt-20">
-      <redaction-initials-avatar [username]="ownerName"
+      <redaction-initials-avatar [userId]="activeProject.ownerId"
                                  size="large"
-                                 color="lightgray-red"
                                  withName="true"
       ></redaction-initials-avatar>
     </div>
@@ -192,8 +191,8 @@
     <div class="project-team mt-20">
       <div class="all-caps-label" translate="project-overview.project-details.project-team.label"></div>
       <div class="flex mt-20 members-container">
-        <div *ngFor="let username of displayMembers" class="member">
-          <redaction-initials-avatar [username]="username" size="large"></redaction-initials-avatar>
+        <div *ngFor="let userId of displayMembers" class="member">
+          <redaction-initials-avatar [userId]="userId" size="large"></redaction-initials-avatar>
         </div>
         <div class="member" *ngIf="overflowCount">
           <div class="oval large white-dark">+{{overflowCount}}</div>

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

@@ -69,20 +69,12 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
     return this._userService.user;
   }
 
-  public get members() {
-    return this.activeProject.memberIds.map(m => this._userService.getName(this._userService.getUserById(m)));
-  }
-
   public get displayMembers() {
-    return this.members.slice(0, 6);
+    return this.activeProject.memberIds.slice(0, 6);
   }
 
   public get overflowCount() {
-    return this.members.length > 6 ? this.members.length - 6 : 0;
-  }
-
-  public get ownerName() {
-    return this._userService.getNameForId(this.activeProject.ownerId);
+    return this.activeProject.memberIds.length > 6 ? this.activeProject.memberIds.length - 6 : 0;
   }
 
   private _getFileStatus() {
@@ -190,10 +182,6 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
     return fileStatus === 'PROCESSING' || fileStatus === 'REVIEWED' || true;
   }
 
-  public getFileOwnerUsername(fileStatus: FileStatus) {
-    return this._userService.getNameForId(fileStatus.currentReviewer);
-  }
-
   public toggleSortByAddedOn() {
     const sortedByRecent: boolean = (this.sortingOption === this.sortingOptions[0]);
     this.sortingOption = sortedByRecent ? this.sortingOptions[1] : this.sortingOptions[0];