Merged in task/ux-plus-2023_02_x/UXP-205 (pull request #28)

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

Approved-by: Andrea Barbasso

Author: FrancescoMolinaro

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

@@ -1,24 +1,31 @@
-<div class="grid-container">
-  <div style="grid-area: title" class="bg-light p-5 border border-dark position-relative">
-    <p class="mb-3 text-muted main-content-badge">{{maincontentBadge}}</p>
-    <h1 class="text-muted main-content-title">
-      {{maincontentTitle}}
-    </h1>
-    <h1 class="text-dark main-content-subtitle">
-      {{maincontentSubtitle}}
-    </h1>
-    <p class="mt-3 pl-0 text-muted col-8">
-      {{maincontentAbstract}}
-    </p>
-    <button type="button" (click)="goToMainContentLink()" class="btn btn-dark position-absolute m-5">{{'explore.grid-section.seeAll' | translate}}</button>
+<div class="grid-container py-5">
+  <div class="cris-section-element-background path-title">
+    <div class="inner-container d-flex flex-column justify-content-center gap-3 h-100">
+      <div class="main-content-badge mb-3">{{maincontentBadge | translate}}</div>
+      <h2>
+        <div class="main-content-title-1">
+          {{ maincontentTitle | translate }}
+        </div>
+        <div class="main-content-title-2">
+          {{ maincontentSubtitle | translate }}
+        </div>
+      </h2>
+      <p class="main-content-text text-muted">
+        {{ maincontentAbstract | translate }}
+      </p>
+      <div class="align-self-end">
+        <button type="button" class="btn btn-dark" (click)="goToMainContentLink()">
+          {{'explore.grid-section.seeAll' | translate}}
+        </button>
+      </div>
+    </div>
   </div>
-  <div class="bg-light text-center position-relative border border-dark d-flex flex-column
-              justify-content-between align-items-center"
+  <div class="cris-section-element-background text-center position-relative d-flex flex-column
+              justify-content-between align-items-center path-item"
+       [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>
+    <a [routerLink]="[getItemPageRoute(item.indexableObject)]" class="mw-100 p-3">
+      <p class="text-center m-0 text-truncate">{{item.indexableObject?.firstMetadataValue('dc.title')}}</p>
+    </a>
   </div>
 </div>

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

@@ -1,39 +1,102 @@
+.main-content {
+  &-title, &-subtitle {
+    font-weight: var(--ds-home-page-title-size);
+  }
+
+  &-text {
+    overflow: hidden; // TODO find better solution
+    font-size: 1.15rem;
+  }
+
+  &-badge {
+    font-size: 1.2rem;
+  }
+
+  &-title-1 {
+    color: var(--bs-headings-color)
+  }
+
+  &-title-2 {
+    color: var(--bs-body-color)
+  }
+
+  &-badge, &-title-1, &-title-2 {
+    font-weight: 900;
+  }
+
+}
+
 .grid-container {
   width: 100%;
   display: grid;
-  grid-gap: 1em;
-
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  grid-template-rows: repeat(6, 1fr);
-  grid-template-areas:
-    "title title"
-    "title title"
-    "item-0 item-1"
-    "item-2 item-3"
-    "item-4 item-5"
-    "item-6 item-7";
-
-  @include media-breakpoint-up(lg) {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-    grid-template-rows: repeat(3, 1fr);
-    grid-template-areas:
-    "title title item-0 item-1"
-    "title title item-2 item-3"
-    "item-4 item-5 item-6 item-7";
+  grid-gap: 24px;
+
+  .path-title {
+    border: 1px solid var(--bs-link-hover-color) !important;
+    padding: 4rem;
+  }
+
+  @include media-breakpoint-up(xl) {
+    grid-template-columns: repeat(4, minmax(240px, 1fr));
+    .path-title, .path-item {
+      aspect-ratio: 1;
+    }
+    .path-title {
+      grid-row-end: span 2;
+      grid-column-end: span 2;
+    }
+  }
+
+  @include media-breakpoint-between(md, lg) {
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    .path-title, .path-item {
+      aspect-ratio: 1;
+    }
+    .path-title {
+      grid-row-end: span 2;
+      grid-column-end: span 2;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    grid-template-columns: 1fr;
+    .path-title {
+      aspect-ratio: unset;
+    }
+    .path-item {
+      aspect-ratio: 1;
+    }
+  }
+
+  @media (min-width: 4000px) {
+    // when the screen is zoomed out to 25%
+    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
+
+    .path-title {
+      aspect-ratio: 0;
+    }
+
+    .path-title {
+      grid-row-end: span 1;
+      grid-column-end: span 1;
+    }
   }
 }
 
-h5 {
+a {
+  position: absolute;
   bottom: 0.5em;
-  background-color: white;
   width: 90%;
+  background-color: rgba(255, 255, 255, .7);
+  padding: .6em;
+  border-radius: $border-radius;
+  z-index: 2;
 }
 
-.main-content-badge, .main-content-title, .main-content-subtitle {
+.main-content-badge, .main-content-title-1, .main-content-title-2 {
   font-weight: 900;
 }
 
-button {
-  bottom: 0;
-  right: 0;
+.main-content-title-1, .main-content-title-2 {
+  font-size: var(--ds-cris-path-section-title-font-size);
 }

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;
@@ -32,7 +43,6 @@ describe('GridSectionComponent', () => {
   });
 
   const firstSearchResult = Object.assign(new SearchResult(), {
-    _embedded: {
       indexableObject: Object.assign(new DSpaceObject(), {
         id: 'd317835d-7b06-4219-91e2-1191900cb897',
         uuid: 'd317835d-7b06-4219-91e2-1191900cb897',
@@ -46,11 +56,9 @@ describe('GridSectionComponent', () => {
           return '';
         },
       })
-    }
   });
 
   const secondSearchResult = Object.assign(new SearchResult(), {
-    _embedded: {
       indexableObject: Object.assign(new DSpaceObject(), {
         id: '0c34d491-b5ed-4a78-8b29-83d0bad80e5a',
         uuid: '0c34d491-b5ed-4a78-8b29-83d0bad80e5a',
@@ -59,7 +67,6 @@ describe('GridSectionComponent', () => {
           return '';
         },
       })
-    }
   });
 
   beforeEach(waitForAsync(() => {
@@ -81,6 +88,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,13 @@ 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';
+import { getItemPageRoute } from 'src/app/item-page/item-page-routing-paths';
 
 /**
  * Component representing the Grid component section.
@@ -41,8 +48,6 @@ export class GridSectionComponent implements OnInit {
 
   paginatedSearchOptions: PaginatedSearchOptions;
 
-  layoutMode: LayoutModeEnum = LayoutModeEnum.CARD;
-
   maincontentBadge: string;
 
   maincontentTitle: string;
@@ -53,13 +58,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 +120,55 @@ 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();
+    });
+
+  }
+
+
+  /**
+   * to get the route of the item
+   * @param item
+   * @returns route to the item as a string
+   */
+  getItemPageRoute(item: DSpaceObject) {
+    return getItemPageRoute(item as Item);
+  }
+
   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({