Merged in task/main-cris/DSC-2309 (pull request DSpace#3137)

Task/main cris/DSC-2309

Approved-by: Vincenzo Mecca

Author: FrancescoMolinaro

src/app/core/shared/image.utils.ts

@@ -0,0 +1,34 @@
+import {
+  Observable,
+  of,
+} from 'rxjs';
+import { map } from 'rxjs/operators';
+
+export const getDefaultImageUrlByEntityType = (entityType: string): Observable<string> => {
+  const fallbackImage = 'assets/images/file-placeholder.svg';
+
+  if (!entityType) {
+    return of(fallbackImage);
+  }
+
+  const defaultImage = `assets/images/${entityType.toLowerCase()}-placeholder.svg`;
+  return checkImageExists(defaultImage).pipe(map((exists) => exists ? defaultImage : fallbackImage));
+};
+
+const checkImageExists = (url: string): Observable<boolean> =>  {
+  return new Observable<boolean>((observer) => {
+    const img = new Image();
+
+    img.onload = () => {
+      observer.next(true);
+      observer.complete();
+    };
+
+    img.onerror = () => {
+      observer.next(false);
+      observer.complete();
+    };
+
+    img.src = url;
+  });
+};

src/app/cris-layout/cris-layout-matrix/cris-layout-box-container/boxes/metadata/rendering-types/thumbnail/thumbnail.component.html

@@ -1,4 +1,4 @@
 <ds-thumbnail *ngIf="(initialized | async)" data-test="thumbnail"
               [thumbnail]="thumbnail$ | async"
-              [defaultImage]="default">
+              [defaultImage]="default$ | async">
 </ds-thumbnail>

src/app/cris-layout/cris-layout-matrix/cris-layout-box-container/boxes/metadata/rendering-types/thumbnail/thumbnail.component.spec.ts

@@ -169,10 +169,12 @@ describe('', () => {
         expect(thumbnail).toBeTruthy();
       }));
 
-      it('should show default thumbnail', () => {
-        expect(component.default).toBe('assets/images/file-placeholder.svg');
+      it('should show default thumbnail', (done) => {
+        component.default$.subscribe(image => {
+          expect(image).toBe('assets/images/file-placeholder.svg');
+          done();
+        });
       });
-
     });
 
     describe('When bitstreams are only original', () => {
@@ -189,10 +191,12 @@ describe('', () => {
         expect(thumbnail).toBeTruthy();
       }));
 
-      it('should show default thumbnail', () => {
-        expect(component.default).toBe('assets/images/file-placeholder.svg');
+      it('should show default thumbnail', (done) => {
+        component.default$.subscribe(image => {
+          expect(image).toBe('assets/images/file-placeholder.svg');
+          done();
+        });
       });
-
     });
 
     describe('When bitstreams are only thumbnail', () => {
@@ -263,10 +267,12 @@ describe('', () => {
         expect(thumbnail).toBeTruthy();
       });
 
-      it('should show default thumbnail', () => {
-        expect(component.default).toBe('assets/images/file-placeholder.svg');
+      it('should show default thumbnail', (done) => {
+        component.default$.subscribe(image => {
+          expect(image).toBe('assets/images/file-placeholder.svg');
+          done();
+        });
       });
-
     });
 
     describe('When bitstreams are only original without the right metadata information', () => {
@@ -278,8 +284,11 @@ describe('', () => {
         fixture.detectChanges();
       });
 
-      it('should not show bitstream content image src but the default image', () => {
-        expect(component.default).toBe('assets/images/file-placeholder.svg');
+      it('should not show bitstream content image src but the default image', (done) => {
+        component.default$.subscribe(image => {
+          expect(image).toBe('assets/images/file-placeholder.svg');
+          done();
+        });
       });
 
     });
@@ -293,10 +302,12 @@ describe('', () => {
         fixture.detectChanges();
       });
 
-      it('should not show thumbnail content image src but the default image', () => {
-        expect(component.default).toBe('assets/images/file-placeholder.svg');
+      it('should not show thumbnail content image src but the default image', (done) => {
+        component.default$.subscribe(image => {
+          expect(image).toBe('assets/images/file-placeholder.svg');
+          done();
+        });
       });
-
     });
 
     describe('When bitstreams are only original with the right metadata information', () => {
@@ -308,8 +319,11 @@ describe('', () => {
         fixture.detectChanges();
       });
 
-      it('should not show thumbnail content image src but the default image', () => {
-        expect(component.default).toBe('assets/images/file-placeholder.svg');
+      it('should not show thumbnail content image src but the default image', (done) => {
+        component.default$.subscribe(image => {
+          expect(image).toBe('assets/images/file-placeholder.svg');
+          done();
+        });
       });
 
     });

src/app/cris-layout/cris-layout-matrix/cris-layout-box-container/boxes/metadata/rendering-types/thumbnail/thumbnail.component.ts

@@ -10,6 +10,8 @@ import {
 import { TranslateService } from '@ngx-translate/core';
 import {
   BehaviorSubject,
+  combineLatest,
+  Observable,
   of as observableOf,
 } from 'rxjs';
 import {
@@ -21,10 +23,10 @@ import { BitstreamDataService } from '../../../../../../../core/data/bitstream-d
 import { PaginatedList } from '../../../../../../../core/data/paginated-list.model';
 import { LayoutField } from '../../../../../../../core/layout/models/box.model';
 import { Bitstream } from '../../../../../../../core/shared/bitstream.model';
+import { getDefaultImageUrlByEntityType } from '../../../../../../../core/shared/image.utils';
 import { Item } from '../../../../../../../core/shared/item.model';
 import { getFirstCompletedRemoteData } from '../../../../../../../core/shared/operators';
 import {
-  hasValue,
   isEmpty,
   isNotEmpty,
 } from '../../../../../../../shared/empty.util';
@@ -56,7 +58,7 @@ export class ThumbnailRenderingComponent extends BitstreamRenderingModelComponen
   /**
    * Default image to be shown in the thumbnail
    */
-  default: string;
+  default$: Observable<string>;
 
   /**
    * Item rendering initialization state
@@ -83,9 +85,14 @@ export class ThumbnailRenderingComponent extends BitstreamRenderingModelComponen
    * Get the thumbnail information from api for this item
    */
   ngOnInit(): void {
-    this.setDefaultImage();
-    this.getBitstreamsByItem().pipe(
-      map((bitstreamList: PaginatedList<Bitstream>) => bitstreamList.page),
+    const eType = this.item.firstMetadataValue('dspace.entity.type');
+    this.default$ = getDefaultImageUrlByEntityType(eType);
+
+    combineLatest([
+      this.default$,
+      this.getBitstreamsByItem(),
+    ]).pipe(
+      map(([_, bitstreamList]: [string, PaginatedList<Bitstream>]) => bitstreamList.page),
       switchMap((filteredBitstreams: Bitstream[]) => {
         if (filteredBitstreams.length > 0) {
           if (isEmpty(filteredBitstreams[0].thumbnail)) {
@@ -113,19 +120,4 @@ export class ThumbnailRenderingComponent extends BitstreamRenderingModelComponen
       this.initialized.next(true);
     });
   }
-
-  /**
-   * Set the default image src depending on item entity type
-   */
-  setDefaultImage(): void {
-    const eType = this.item.firstMetadataValue('dspace.entity.type');
-    this.default = 'assets/images/file-placeholder.svg';
-    if (hasValue(eType) && eType.toUpperCase() === 'PROJECT') {
-      this.default = 'assets/images/project-placeholder.svg';
-    } else if (hasValue(eType) && eType.toUpperCase() === 'ORGUNIT') {
-      this.default = 'assets/images/orgunit-placeholder.svg';
-    } else if (hasValue(eType) && eType.toUpperCase() === 'PERSON') {
-      this.default = 'assets/images/person-placeholder.svg';
-    }
-  }
 }

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$ | async" [alt]="placeholder | translate">
   </div>
 </div>

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

@@ -62,4 +62,30 @@ describe('MetadataLinkViewAvatarPopoverComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should set fallback image if no entity type', (done) => {
+    component.ngOnInit();
+    component.placeholderImageUrl$.subscribe((url) => {
+      expect(url).toBe('assets/images/file-placeholder.svg');
+      done();
+    });
+  });
+
+  it('should set correct placeholder image based on entity type if image exists', (done) => {
+    component.entityType = 'OrgUnit';
+    component.ngOnInit();
+    component.placeholderImageUrl$.subscribe((url) => {
+      expect(url).toBe('assets/images/orgunit-placeholder.svg');
+      done();
+    });
+  });
+
+  it('should set correct fallback image if image does not exists', (done) => {
+    component.entityType = 'missingEntityType';
+    component.ngOnInit();
+    component.placeholderImageUrl$.subscribe((url) => {
+      expect(url).toBe('assets/images/file-placeholder.svg');
+      done();
+    });
+  });
 });

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

@@ -3,10 +3,16 @@ import {
   NgClass,
   NgIf,
 } from '@angular/common';
-import { Component } from '@angular/core';
+import {
+  Component,
+  Input,
+  OnInit,
+} from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
+import { Observable } from 'rxjs';
 import { ThumbnailComponent } from 'src/app/thumbnail/thumbnail.component';
 
+import { getDefaultImageUrlByEntityType } from '../../../core/shared/image.utils';
 import { ThemedLoadingComponent } from '../../loading/themed-loading.component';
 import { SafeUrlPipe } from '../../utils/safe-url-pipe';
 import { VarDirective } from '../../utils/var.directive';
@@ -26,10 +32,20 @@ import { VarDirective } from '../../utils/var.directive';
   ],
   standalone: true,
 })
-export class MetadataLinkViewAvatarPopoverComponent extends ThumbnailComponent {
+export class MetadataLinkViewAvatarPopoverComponent extends ThumbnailComponent implements OnInit {
+
+
+  /**
+   * Placeholder image url that changes based on entity type
+   */
+  placeholderImageUrl$: Observable<string>;
 
   /**
-   * The fallback image to use when the thumbnail is not available
+   * The entity type of the item which the avatar belong
    */
-  fallbackImage = 'assets/images/person-placeholder.svg';
+  @Input() entityType: string;
+
+  ngOnInit() {
+    this.placeholderImageUrl$ = getDefaultImageUrlByEntityType(this.entityType);
+  }
 }

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>