Use URL as input to be able to show avatars for groups, too

frontend/src/app/components/user/user-avatar/user-avatar.component.ts

@@ -30,6 +30,8 @@ import {UserResource} from 'core-app/modules/hal/resources/user-resource';
 import {AfterViewInit, ChangeDetectorRef, Component, ElementRef} from "@angular/core";
 import {UserCacheService} from "core-components/user/user-cache.service";
 import {DynamicBootstrapper} from "core-app/globals/dynamic-bootstrapper";
+import {WorkPackageResource} from "core-app/modules/hal/resources/work-package-resource";
+import {HalResourceService} from "core-app/modules/hal/services/hal-resource.service";
 
 @Component({
   selector: 'user-avatar',
@@ -37,31 +39,46 @@ import {DynamicBootstrapper} from "core-app/globals/dynamic-bootstrapper";
 })
 export class UserAvatarComponent implements AfterViewInit {
   public $element:JQuery;
+
+  public user:string;
   public userInitials:string;
   public userAvatar:string;
   public userName:string;
   public colorCode:string;
   public userID:string;
   public classes:string;
+
   public useFallback:boolean;
+  public isGroup:boolean = false;
 
   constructor(readonly userCacheService:UserCacheService,
               protected elementRef:ElementRef,
-              protected ref:ChangeDetectorRef) {
+              protected ref:ChangeDetectorRef,
+              readonly halResourceService:HalResourceService) {
   }
 
   public ngAfterViewInit() {
     this.$element = jQuery(this.elementRef.nativeElement);
 
-    this.userID = this.$element.data('user-id')!;
+    this.user = this.$element.data('user')!;
     this.classes = this.$element.data('class-list')!;
     this.useFallback = this.$element.data('use-fallback')!;
     this.userAvatar = this.$element.data('user-avatar-src')!;
     this.userName = this.$element.data('user-name')!;
 
-    // When a userID is given,
+    this.isGroup = this.isUserAGroup();
+    if (this.isGroup) {
+      this.showGroupAvatar();
+    } else {
+      this.showUserAvatar();
+    }
+  }
+
+  public showUserAvatar() {
+    // When a user url is given,
     // we have to get the information from the database
-    if (this.userID) {
+    if (this.user) {
+      this.userID = WorkPackageResource.idFromLink(this.user);
       this.userCacheService
         .require(this.userID)
         .then((user:UserResource) => {
@@ -69,12 +86,24 @@ export class UserAvatarComponent implements AfterViewInit {
           this.userAvatar = user.avatar;
           this.userName = user.name;
           this.colorCode = this.computeColor(user.name);
+          this.ref.detectChanges();
         });
     } else {
       this.userInitials = this.getInitials(this.userName);
       this.colorCode = this.computeColor(this.userName);
+      this.ref.detectChanges();
     }
-    this.ref.detectChanges();
+  }
+
+  public showGroupAvatar() {
+    this.halResourceService.get(this.user, {})
+      .subscribe(res => {
+        this.useFallback = true;
+        this.userName = res.name;
+        this.userInitials = this.getInitials(this.userName);
+        this.colorCode = this.computeColor(this.userName);
+        this.ref.detectChanges();
+      });
   }
 
   public replaceWithDefault() {
@@ -82,7 +111,7 @@ export class UserAvatarComponent implements AfterViewInit {
     this.ref.detectChanges();
   }
 
-  public getInitials(name:string) {
+  private getInitials(name:string) {
     var names = name.split(' '),
       initials = names[0].substring(0, 1).toUpperCase();
 
@@ -93,7 +122,7 @@ export class UserAvatarComponent implements AfterViewInit {
     return initials;
   }
 
-  public computeColor(name:string) {
+  private computeColor(name:string) {
     let hash = 0;
     for (var i = 0; i < name.length; i++) {
       hash = name.charCodeAt(i) + ((hash << 5) - hash);
@@ -103,6 +132,12 @@ export class UserAvatarComponent implements AfterViewInit {
 
     return 'hsl('+ h +', 50%, 50%)';
   }
+
+  private isUserAGroup() {
+    // When an ID or an avatar is given, it must be a user.
+    // Otherwise we have to check the url
+    return !this.userID && !this.userAvatar && this.user.includes('group');
+  }
 }
 
 DynamicBootstrapper.register({ selector: 'user-avatar', cls: UserAvatarComponent  });

frontend/src/app/components/wp-activity/revision/revision-activity.component.html

@@ -8,7 +8,7 @@
     </activity-link>
   </div>
 
-  <user-avatar [attr.data-user-id]="userId" data-class-list="avatar"></user-avatar>
+  <user-avatar [attr.data-user]="userPath" data-class-list="avatar"></user-avatar>
 
   <span class="user" *ngIf="userActive">
     <a [attr.href]="userPath"

frontend/src/app/components/wp-activity/user/user-activity.component.html

@@ -4,7 +4,7 @@
      [attr.aria-label]="fieldLabel || activityLabel"
      (mouseenter)="focus()"
      (mouseleave)="blur()">
-  <user-avatar [attr.data-user-id]="activity.user.idFromLink" data-class-list="avatar"></user-avatar>
+  <user-avatar [attr.data-user]="activity.user.$href" data-class-list="avatar"></user-avatar>
   <span class="user" *ngIf="userActive">
     <a [attr.href]="userPath"
        [attr.aria-label]="userLabel"

frontend/src/app/components/wp-card-view/wp-card-view.component.html

@@ -35,7 +35,7 @@
       </div>
     </wp-edit-field-group>
     <user-avatar *ngIf="hasAssignee(wp)"
-                 [attr.data-user-id]="wp.assignee.idFromLink"
+                 [attr.data-user]="wp.assignee.$href"
                  data-class-list="avatar-mini"
                  class="work-package--card--assignee">
     </user-avatar>

frontend/src/app/components/wp-single-view-tabs/watchers-tab/wp-watcher-entry.html

@@ -2,7 +2,7 @@
   <span class="form--selected-value">
     <span [ngClass]="{'deleting': deleting }">
       <a [attr.href]="watcher.showUser.href">
-        <user-avatar [attr.data-user-id]="watcher.idFromLink" data-class-list="avatar-mini"></user-avatar>
+        <user-avatar [attr.data-user]="watcher.$href" data-class-list="avatar-mini"></user-avatar>
         <span class="work-package--watcher-name" [textContent]="watcher.name"></span>
       </a>
     </span>

frontend/src/app/modules/common/autocomplete/user-autocompleter.component.ts

@@ -42,7 +42,7 @@ import {NgSelectComponent} from "@ng-select/ng-select/dist";
                (search)="onSearch($event)"
                (change)="onModelChange($event)" >
       <ng-template ng-option-tmp let-item="item" let-index="index">
-        <user-avatar [attr.data-user-id]="item.id"
+        <user-avatar [attr.data-user]="item.$href"
                      data-class-list="avatar-mini">
         </user-avatar>
         {{ item.name }}

modules/avatars/lib/open_project/avatars/patches/avatar_helper_patch.rb

@@ -142,7 +142,7 @@ AvatarHelper.class_eval do
     content_tag 'user-avatar',
                 '',
                 'data-class-list': tag_options[:class],
-                'data-user-id': user.id.to_s,
+                'data-user': ::API::V3::Utilities::PathHelper::ApiV3Path.user(user.id),
                 'data-use-fallback': 'true'
   end