[UXP-205] port glam implementation for grid section bg, adapt tests

Author: FrancescoMolinaro

src/app/shared/explore/section-component/grid-section/grid-section.component.html

@@ -14,11 +14,8 @@ <h1 class="text-dark main-content-subtitle">
   </div>
   <div class="bg-light text-center position-relative border border-dark d-flex flex-column
               justify-content-between align-items-center"
+       [dsBackgroundImage]="(itemToImageHrefMap$ | async).get(item.indexableObject?.uuid)"
        *ngFor="let item of searchResults | slice:0:8; index as i">
-    <ds-thumbnail [thumbnail]="item.indexableObject?.thumbnail | async" [limitWidth]="false"
-                  [defaultImage]="'assets/images/replacement_image.svg'"
-                  [alt]="'menu.header.image.logo' | translate" [keepAspectRatio]="true">
-    </ds-thumbnail>
     <h5 class="text-dark text-truncate position-absolute py-3 px-1">{{item.indexableObject?.firstMetadataValue('dc.title')}}</h5>
   </div>
 </div>

src/app/shared/explore/section-component/grid-section/grid-section.component.spec.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ChangeDetectorRef, NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, inject, TestBed, waitForAsync } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
@@ -17,6 +17,17 @@ import { createSuccessfulRemoteDataObject$ } from '../../../remote-data.utils';
 import { LocaleService } from '../../../../core/locale/locale.service';
 import { Site } from '../../../../core/shared/site.model';
 import { of } from 'rxjs';
+import { ObjectCacheService } from '../../../../core/cache/object-cache.service';
+import { getMockObjectCacheService } from '../../../mocks/object-cache.service.mock';
+import { UUIDService } from '../../../../core/shared/uuid.service';
+import { getMockUUIDService } from '../../../mocks/uuid.service.mock';
+import { provideMockStore } from '@ngrx/store/testing';
+import { RemoteDataBuildService } from '../../../../core/cache/builders/remote-data-build.service';
+import { getMockRemoteDataBuildService } from '../../../mocks/remote-data-build.service.mock';
+import { HALEndpointService } from '../../../../core/shared/hal-endpoint.service';
+import { DSOChangeAnalyzer } from '../../../../core/data/dso-change-analyzer.service';
+import { BitstreamFormatDataService } from '../../../../core/data/bitstream-format-data.service';
+import { NotificationsService } from '../../../notifications/notifications.service';
 
 describe('GridSectionComponent', () => {
   let component: GridSectionComponent;
@@ -81,6 +92,19 @@ describe('GridSectionComponent', () => {
       providers: [GridSectionComponent,
         { provide: SearchService, useValue: searchServiceStub },
         { provide: LocaleService, useValue: mockLocaleService },
+        { provide: ObjectCacheService, useValue: getMockObjectCacheService() },
+        { provide: UUIDService, useValue: getMockUUIDService() },
+        { provide: RemoteDataBuildService, useValue: getMockRemoteDataBuildService() },
+        { provide: HALEndpointService, useValue: {} },
+        { provide: DSOChangeAnalyzer, useValue: {} },
+        { provide: BitstreamFormatDataService, useValue: {} },
+        { provide: NotificationsService, useValue: {} },
+        {
+          provide: ChangeDetectorRef, useValue: {
+            detectChanges: () => fixture.detectChanges()
+          }
+        },
+        provideMockStore({ core: { auth: { loading: false } } } as any),
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();

src/app/shared/explore/section-component/grid-section/grid-section.component.ts

@@ -1,5 +1,5 @@
-import { LayoutModeEnum, GridSection } from '../../../../core/layout/models/section.model';
-import { Component, Input, OnInit } from '@angular/core';
+import { GridSection } from '../../../../core/layout/models/section.model';
+import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
 
 import { SortDirection, SortOptions } from '../../../../core/cache/models/sort-options.model';
 import { PaginationComponentOptions } from '../../../pagination/pagination-component-options.model';
@@ -16,6 +16,12 @@ import { Site } from '../../../../core/shared/site.model';
 import { LocaleService } from '../../../../core/locale/locale.service';
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
+import { BehaviorSubject, filter, from, map, mergeMap, scan, switchMap, take } from 'rxjs';
+import { BitstreamDataService } from 'src/app/core/data/bitstream-data.service';
+import { Item } from 'src/app/core/shared/item.model';
+import { Bitstream } from 'src/app/core/shared/bitstream.model';
+import { BitstreamFormat } from 'src/app/core/shared/bitstream-format.model';
+import { hasValue } from 'src/app/shared/empty.util';
 
 /**
  * Component representing the Grid component section.
@@ -41,8 +47,6 @@ export class GridSectionComponent implements OnInit {
 
   paginatedSearchOptions: PaginatedSearchOptions;
 
-  layoutMode: LayoutModeEnum = LayoutModeEnum.CARD;
-
   maincontentBadge: string;
 
   maincontentTitle: string;
@@ -53,13 +57,17 @@ export class GridSectionComponent implements OnInit {
 
   maincontentLink: string;
 
-  searchResults;
+  searchResults: SearchResult<DSpaceObject>[];
+
+  itemToImageHrefMap$ = new BehaviorSubject<Map<string, string>>(new Map<string, string>());
 
   constructor(
     private searchService: SearchService,
     private locale: LocaleService,
     private router: Router,
-    private translateService: TranslateService
+    private translateService: TranslateService,
+    private bitstreamDataService: BitstreamDataService,
+    private cdr: ChangeDetectorRef
   ) {
   }
 
@@ -111,11 +119,46 @@ export class GridSectionComponent implements OnInit {
       .pipe(getFirstCompletedRemoteData())
       .subscribe(
         (response: RemoteData<PaginatedList<SearchResult<DSpaceObject>>>) => {
-          this.searchResults = response.payload.page as any;
+          this.searchResults = response.payload.page;
+          this.getAllBitstreams();
         }
       );
   }
 
+  private getAllBitstreams() {
+    from(this.searchResults).pipe(
+      map((itemSR) => itemSR.indexableObject),
+      mergeMap((item: Item) => this.bitstreamDataService.showableByItem(
+          item.uuid, 'ORIGINAL', [], {}, true, true, followLink('format')
+        ).pipe(
+          getFirstCompletedRemoteData(),
+          switchMap((rd: RemoteData<PaginatedList<Bitstream>>) => rd.hasSucceeded ? rd.payload.page : []),
+          mergeMap((bitstream: Bitstream) => bitstream.format.pipe(
+            getFirstCompletedRemoteData(),
+            filter((formatRemoteData: RemoteData<BitstreamFormat>) =>
+              formatRemoteData.hasSucceeded && hasValue(formatRemoteData.payload) && hasValue(bitstream) &&
+              formatRemoteData.payload.mimetype.includes('image/')
+            ),
+            map(() => bitstream)
+          )),
+          take(1),
+          map((bitstream: Bitstream) => {
+            return [item.uuid, bitstream._links.content.href];
+          })
+        )
+      ),
+      scan((acc: Map<string, string>, value: [string, string]) => {
+        acc.set(value[0], value[1]);
+        return acc;
+      }, new Map<string, string>())
+    ).subscribe((res) => {
+      this.itemToImageHrefMap$.next(res);
+      this.cdr.detectChanges();
+    });
+
+  }
+
+
   goToMainContentLink() {
     this.router.navigateByUrl(this.maincontentLink);
   }

src/app/shared/shared.module.ts

@@ -364,6 +364,7 @@ import { CardsBrowseElementsComponent } from './browse-most-elements/cards-brows
 import {
   ThemedCardsBrowseElementsComponent
 } from './browse-most-elements/cards-browse-elements/themed-cards-browse-elements.component';
+import { BackgroundImageDirective } from './utils/background-image.directive';
 
 const MODULES = [
   CommonModule,
@@ -637,7 +638,8 @@ const DIRECTIVES = [
   ContextHelpDirective,
   EntityIconDirective,
   MarkdownDirective,
-  StickyPopoverDirective
+  StickyPopoverDirective,
+  BackgroundImageDirective
 ];
 
 @NgModule({

src/app/shared/utils/background-image.directive.ts

@@ -0,0 +1,33 @@
+import { Directive, ElementRef, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Bitstream } from '../../core/shared/bitstream.model';
+import { RemoteData } from '../../core/data/remote-data';
+
+@Directive({
+  selector: '[dsBackgroundImage]'
+})
+export class BackgroundImageDirective implements OnChanges {
+
+  @Input() dsBackgroundImage: Bitstream | RemoteData<Bitstream> | string;
+
+  constructor(private el: ElementRef) {
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    this.setBackground();
+  }
+
+  private setBackground() {
+    let thumbnailSrc: string;
+    if (this.dsBackgroundImage instanceof Bitstream) {
+      thumbnailSrc = this.dsBackgroundImage?._links?.content?.href;
+    } else if (this.dsBackgroundImage instanceof RemoteData) {
+      thumbnailSrc = this.dsBackgroundImage?.payload?._links?.content?.href;
+    } else {
+      thumbnailSrc = this.dsBackgroundImage;
+    }
+    this.el.nativeElement.style.backgroundImage = `url("${thumbnailSrc ?? 'assets/images/replacement_image.svg'}")`;
+    this.el.nativeElement.style.backgroundPosition = `center`;
+    this.el.nativeElement.style.backgroundSize = `cover`;
+    this.el.nativeElement.style.backgroundRepeat = `no-repeat`;
+  }
+}