[DSC-2309] improve fallback mechanism for avatar

Author: FrancescoMolinaro

src/app/shared/metadata-link-view/metadata-link-view-avatar-popover/metadata-link-view-avatar-popover.component.html

@@ -10,6 +10,6 @@
   <img *ngIf="src !== null" class="thumbnail-content img-fluid" [ngClass]="{'d-none': isLoading}"
        [src]="src | dsSafeUrl" [alt]="alt | translate" (error)="errorHandler()" (load)="successHandler()">
   <div *ngIf="src === null && !isLoading" class="thumbnail-content outer" #thumbnailBox>
-    <img [src]="fallbackImage" [alt]="placeholder | translate">
+    <img [src]="placeholderImageUrl" [alt]="placeholder | translate" (error)="onImageError($event)">
   </div>
 </div>

src/app/shared/metadata-link-view/metadata-link-view-avatar-popover/metadata-link-view-avatar-popover.component.spec.ts

@@ -57,4 +57,10 @@ describe('MetadataLinkViewAvatarPopoverComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should set placeholder image based on entity type', () => {
+    component.entityType = 'testEntityType';
+    component.ngOnInit();
+    expect(component.placeholderImageUrl).toBe('assets/images/testentitytype-placeholder.svg');
+  });
 });

src/app/shared/metadata-link-view/metadata-link-view-avatar-popover/metadata-link-view-avatar-popover.component.ts

@@ -1,15 +1,38 @@
-import { Component } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { ThumbnailComponent } from 'src/app/thumbnail/thumbnail.component';
 
 @Component({
   selector: 'ds-metadata-link-view-avatar-popover',
   templateUrl: './metadata-link-view-avatar-popover.component.html',
   styleUrls: ['./metadata-link-view-avatar-popover.component.scss']
 })
-export class MetadataLinkViewAvatarPopoverComponent extends ThumbnailComponent {
+export class MetadataLinkViewAvatarPopoverComponent extends ThumbnailComponent implements OnInit {
 
   /**
    * The fallback image to use when the thumbnail is not available
    */
-  fallbackImage = 'assets/images/person-placeholder.svg';
+  fallbackImageUrl = 'assets/images/replacement_image.svg';
+
+  /**
+   * Placeholder image url that changes based on entity type
+   */
+  placeholderImageUrl: string;
+
+  /**
+   * The entity type of the item which the avatar belong
+   */
+  @Input() entityType: string;
+
+  ngOnInit() {
+    this.placeholderImageUrl = this.entityType ? `assets/images/${this.entityType.toLowerCase()}-placeholder.svg` : this.fallbackImageUrl;
+  }
+
+  /**
+   * Handle error loading image placeholder, e.g. missing placeholder image for specific entity type.
+   * @param event
+   */
+  onImageError(event: Event) {
+    const target = event.target as HTMLImageElement;
+    target.src = this.fallbackImageUrl;
+  }
 }

src/app/shared/metadata-link-view/metadata-link-view-popover/metadata-link-view-popover.component.html

@@ -4,6 +4,7 @@
     <ds-metadata-link-view-avatar-popover
       *ngIf="item.thumbnail | async"
       [thumbnail]="item.thumbnail | async"
+      [entityType]="item.entityType"
     ></ds-metadata-link-view-avatar-popover>
     <span class="font-weight-bold h4"> {{item.firstMetadataValue('dc.title')}} </span>
   </div>