Merged in task/ux-plus-2023_02_x/UXP-240_squashed (pull request #50)

[UXP-240] use skeletons in ssr, get glam components

Approved-by: Francesco Molinaro

Author: Andrea Barbasso

src/app/core/layout/models/section.model.ts

@@ -5,6 +5,7 @@ import { autoserialize, deserialize } from 'cerialize';
 import { HALLink } from '../../shared/hal-link.model';
 import { excludeFromEquals } from '../../utilities/equals.decorators';
 import { ResourceType } from '../../shared/resource-type';
+import { SortDirection } from '../../cache/models/sort-options.model';
 
 /**
  * Describes a type of Section.
@@ -71,8 +72,10 @@ export interface TopSection extends SectionComponent {
 }
 
 export interface GridSection extends SectionComponent {
+  order: SortDirection;
+  sortField: string;
   discoveryConfigurationName: string;
-  'main-content-link': string;
+  mainContentLink: string;
 }
 
 export interface SearchSection extends SectionComponent {
@@ -110,14 +113,6 @@ export interface TopSectionColumn {
   titleKey: string;
 }
 
-/**
- * Represents the type of template to use for the section
- */
-export enum TopSectionTemplateType {
-  DEFAULT = 'default', // CRIS default template
-  CARD = 'card', // Card template
-}
-
 export enum LayoutModeEnum {
   LIST = 'list',
   CARD = 'card'
@@ -142,4 +137,53 @@ export interface CarouselSection extends SectionComponent {
   captionStyle: string;
   titleStyle: string;
   bundle: string;
+  showBlurryBackdrop: boolean;
+}
+
+
+
+export interface SliderSection extends SectionComponent {
+  discoveryConfigurationName: string;
+  order: string;
+  sortField: string;
+  numberOfItems: number;
+  style: string;
+  title: string;
+  link: string;
+  description: string;
+  componentType: 'slider';
+  targetBlank: boolean ;
+  fitWidth: boolean;
+  fitHeight: boolean;
+  keepAspectRatio: boolean;
+  aspectRatio: number;
+  carouselHeightPx: number;
+  captionStyle: string;
+  titleStyle: string;
+  showBlurryBackdrop: boolean;
+}
+
+/**
+ * Represents an advanced top section in the layout.
+ */
+export interface AdvancedTopSection extends Omit<TopSection, 'discoveryConfigurationName'|'componentType'> {
+  /**
+   * The names of the discovery configurations.
+   */
+  discoveryConfigurationName: string[];
+
+  /**
+   * The component type, which is always 'advanced-top-component'.
+   */
+  componentType: 'advanced-top-component';
+}
+
+/*
+ * Represents the type of template to use for the section
+ */
+export enum TopSectionTemplateType {
+  DEFAULT = 'default',  // CRIS default template
+  IMAGES = 'images',
+  SLIDER = 'slider',
+  CARD = 'card',
 }

src/app/core/services/bitstream-images.service.ts

@@ -0,0 +1,75 @@
+import { inject, Injectable } from '@angular/core';
+
+import { from, Observable } from 'rxjs';
+import { filter, map, mergeMap, reduce, switchMap, take } from 'rxjs/operators';
+
+import { followLink } from '../../shared/utils/follow-link-config.model';
+import { getFirstCompletedRemoteData } from '../shared/operators';
+import { RemoteData } from '../data/remote-data';
+import { PaginatedList } from '../data/paginated-list.model';
+import { Bitstream } from '../shared/bitstream.model';
+import { BitstreamFormat } from '../shared/bitstream-format.model';
+import { hasValue } from '../../shared/empty.util';
+import { BitstreamDataService } from '../data/bitstream-data.service';
+import { Item } from '../shared/item.model';
+import { DSpaceObject } from '../shared/dspace-object.model';
+
+interface ItemAndImage {
+  itemUUID: string;
+  imageHref: string;
+}
+
+@Injectable({ providedIn: 'root' })
+export class BitstreamImagesService {
+
+  private readonly bitstreamDataService = inject(BitstreamDataService);
+
+  /**
+   * Retrieve all items and their image bitstreams
+   * @param items
+   * @param bundleName
+   */
+  getItemToImageMap(items: Item[], bundleName = 'ORIGINAL'): Observable<Map<string, string>> {
+    return from(items).pipe(
+      mergeMap((item) => this.findImageBitstreams(item, bundleName).pipe(
+        take(1),
+        map((bitstream: Bitstream) => <ItemAndImage>{
+          itemUUID: item.uuid, imageHref: bitstream._links.content.href
+        }),
+      )),
+      reduce((acc: Map<string, string>, value: ItemAndImage) => {
+        acc.set(value.itemUUID, value.imageHref);
+        return acc;
+      }, new Map<string, string>()),
+    );
+  }
+
+  /**
+   * Find all image bitstreams for an item
+   * @param item the item for which the images should be retrieved
+   * @param bundleName the bundle name (ORIGINAL by default)
+   */
+  findImageBitstreams(item: Item | DSpaceObject, bundleName = 'ORIGINAL') {
+    const isImageMimetypeRegex = /^image\//;
+
+    // retrieve all bundle's bitstreams for the item
+    const bitstreamPayload$: Observable<Bitstream> = this.bitstreamDataService.showableByItem(
+      item.uuid, bundleName, [], {}, true, true, followLink('format'),
+    ).pipe(
+      getFirstCompletedRemoteData(),
+      switchMap((rd: RemoteData<PaginatedList<Bitstream>>) => rd.hasSucceeded ? rd.payload.page : new Array<Bitstream>()),
+    );
+
+    // filter bitstreams according to mime type
+    return bitstreamPayload$.pipe(
+      switchMap((bitstream: Bitstream) => bitstream.format.pipe(
+        getFirstCompletedRemoteData(),
+        filter((bitstreamFormatRD: RemoteData<BitstreamFormat>) =>
+          bitstreamFormatRD.hasSucceeded && hasValue(bitstreamFormatRD.payload) && hasValue(bitstream) &&
+          isImageMimetypeRegex.test(bitstreamFormatRD.payload.mimetype)
+        ),
+        map(() => bitstream)
+      )),
+    );
+  }
+}

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

@@ -1,4 +1,7 @@
 <div [class]="field.styleValue">
-  <img *ngIf="(imageUrl$ | async) as url" [src]="url">
+  <img *ngIf="isBrowser && !isLoading; else imageSkeleton" [src]="imageUrl$ | async">
+  <ng-template #imageSkeleton>
+    <ngx-skeleton-loader style="width: 100%; height: 100%;" [theme]="{height: '100%', width: '100%'}"></ngx-skeleton-loader>
+  </ng-template>
 </div>
 

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

@@ -1,11 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit, PLATFORM_ID } from '@angular/core';
 import { FieldRenderingType, MetadataBoxFieldRendering } from '../metadata-box.decorator';
 
 import { BitstreamRenderingModelComponent } from '../bitstream-rendering-model';
-import { map } from 'rxjs/operators';
+import { catchError, map } from 'rxjs/operators';
 import { Bitstream } from '../../../../../../../core/shared/bitstream.model';
-import { BehaviorSubject, Observable } from 'rxjs';
+import { BehaviorSubject, Observable, of } from 'rxjs';
 import { getPaginatedListPayload } from '../../../../../../../core/shared/operators';
+import { isPlatformBrowser } from '@angular/common';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -20,12 +21,23 @@ export class ImageComponent extends BitstreamRenderingModelComponent implements
 
   imageUrl$: Observable<string>;
 
+  platformId = inject(PLATFORM_ID);
+
+  isLoading = true;
+  isBrowser: boolean;
+
   ngOnInit(): void {
+    this.isBrowser = isPlatformBrowser(this.platformId);
     this.getBitstreamsByItem().pipe(
       getPaginatedListPayload(),
-      map((filteredBitstreams: Bitstream[]) => filteredBitstreams.length > 0 ? filteredBitstreams[0] : null)
+      map((filteredBitstreams: Bitstream[]) => filteredBitstreams.length > 0 ? filteredBitstreams[0] : null),
+      catchError(() => {
+        this.isLoading = false;
+        return of(null);
+      }),
     ).subscribe((image) => {
       this.bitstream.next(image);
+      this.isLoading = false;
     });
 
     this.imageUrl$ = this.bitstream.asObservable().pipe(
@@ -34,8 +46,4 @@ export class ImageComponent extends BitstreamRenderingModelComponent implements
 
   }
 
-  backgroundImageUrl(url: string) {
-    return `url('${url}')`;
-  }
-
 }

src/app/cris-layout/cris-layout.module.ts

@@ -161,6 +161,7 @@ import {
 import {
   ImageComponent
 } from './cris-layout-matrix/cris-layout-box-container/boxes/metadata/rendering-types/image/image.component';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 const ENTRY_COMPONENTS = [
   // put only entry components that use custom decorator
@@ -236,25 +237,26 @@ const ENTRY_COMPONENTS = [
     ImageComponent
   ],
   providers:[ LoadMoreService, NgbActiveModal ],
-  imports: [
-    CommonModule,
-    SharedModule,
-    SearchModule.withEntryComponents(),
-    GooglemapsModule,
-    OpenStreetMapModule,
-    MyDSpacePageModule,
-    ContextMenuModule.withEntryComponents(),
-    NgbAccordionModule,
-    ComcolModule,
-    MiradorViewerModule,
-    MarkdownViewerModule,
-    ItemSharedModule,
-    ViewersSharedModule,
-    MetricsModule,
-    AttachmentRenderingModule,
-    FormModule,
-    MediaPlayerModule,
-  ],
+    imports: [
+        CommonModule,
+        SharedModule,
+        SearchModule.withEntryComponents(),
+        GooglemapsModule,
+        OpenStreetMapModule,
+        MyDSpacePageModule,
+        ContextMenuModule.withEntryComponents(),
+        NgbAccordionModule,
+        ComcolModule,
+        MiradorViewerModule,
+        MarkdownViewerModule,
+        ItemSharedModule,
+        ViewersSharedModule,
+        MetricsModule,
+        AttachmentRenderingModule,
+        FormModule,
+        MediaPlayerModule,
+        NgxSkeletonLoaderModule,
+    ],
   exports: [
     CrisLayoutComponent,
     CrisrefComponent,

src/app/home-page/home-page.component.html

@@ -55,6 +55,10 @@
                                      [sectionId]="sectionId"
                                      [twitterSection]="$any(sectionComponent)"></ds-themed-twitter-section>
 
+          <ds-themed-advanced-top-section *ngSwitchCase="'advanced-top-component'"
+                                          [sectionId]="sectionId"
+                                          [advancedTopSection]="$any(sectionComponent)"></ds-themed-advanced-top-section>
+
         </div>
       </div>
     </div>

src/app/shared/browse-most-elements/abstract-browse-elements.component.ts

@@ -1,7 +1,7 @@
 import { followLink } from '../utils/follow-link-config.model';
 import { CollectionElementLinkType } from '../object-collection/collection-element-link.type';
 import { Component, Input, OnChanges, OnInit, PLATFORM_ID, inject } from '@angular/core';
-import { isPlatformServer } from '@angular/common';
+import { isPlatformBrowser } from '@angular/common';
 
 import { PaginatedSearchOptions } from '../search/models/paginated-search-options.model';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
@@ -21,6 +21,7 @@ import { Item } from '../../core/shared/item.model';
 import { getItemPageRoute } from '../../item-page/item-page-routing-paths';
 import { LayoutModeEnum, TopSection } from '../../core/layout/models/section.model';
 import { SearchManager } from '../../core/browse/search-manager';
+import { tap } from 'rxjs/operators';
 
 @Component({
   template: ''
@@ -79,12 +80,17 @@ export abstract class AbstractBrowseElementsComponent implements OnInit, OnChang
 
   searchResultArray$: Observable<DSpaceObject[]>;
 
+  isLoading = true;
+  isBrowser: boolean;
+
   ngOnChanges() {
     this.paginatedSearchOptions$?.next(this.paginatedSearchOptions);
   }
 
   ngOnInit() {
-    if (isPlatformServer(this.platformId)) {
+    this.isBrowser = isPlatformBrowser(this.platformId);
+
+    if (!this.isBrowser) {
       return;
     }
     const followLinks = [];
@@ -112,6 +118,9 @@ export abstract class AbstractBrowseElementsComponent implements OnInit, OnChang
       toDSpaceObjectListRD(),
       getRemoteDataPayload(),
       getPaginatedListPayload(),
+      tap(() => {
+        this.isLoading = false;
+      }),
     );
   }
 

src/app/shared/browse-most-elements/browse-most-elements.component.html

@@ -24,8 +24,7 @@
 </div>
 <div
   class="row justify-content-center"
-  *ngIf="topSection && topSection.showAllResults"
->
+  *ngIf="topSection.showAllResults && (discoveryConfigurationsTotalElementsMap == null || discoveryConfigurationsTotalElementsMap.get(paginatedSearchOptions.configuration)) > 0" class="d-flex justify-content-center">
   <button type="button" class="btn btn-link" (click)="showAllResults()">
     {{ "home.top-section.view-results" | translate }}
   </button>

src/app/shared/browse-most-elements/browse-most-elements.component.ts

@@ -53,6 +53,9 @@ export class BrowseMostElementsComponent implements OnInit, OnChanges {
    */
   @Input() topSection: TopSection;
 
+  @Input() discoveryConfigurationsTotalElementsMap: Map<string, number>;
+
+
   paginatedSearchOptions$ = new BehaviorSubject<PaginatedSearchOptions>(null);
 
   sectionTemplateType: TopSectionTemplateType;

src/app/shared/browse-most-elements/images-browse-elements/images-browse-elements.component.html

@@ -0,0 +1,21 @@
+<div class="grid-wrapper" [class.max-items-4]="(totalElements$ | async) < 4">
+  <ng-container *ngFor="let item of (searchResultArray$ | async); let i = index; let last = last">
+    <ng-container *ngIf="isBrowser && !isLoading; else imageSkeleton">
+      <img [src]="(itemToImageHrefMap$ | async)?.get(item.uuid)" alt="hidden-image" style="display: none" #image>
+      <div class="thumbnail-container"
+           [class.landscape]="(totalElements$ | async) > 6 && image.naturalWidth > maxSquareRatio * image.naturalHeight"
+           [class.portrait]="(totalElements$ | async) > 6 && image.naturalHeight > maxSquareRatio * image.naturalWidth">
+        <div class="thumbnail-inner-container w-100 h-100 position-relative"
+             [dsBackgroundImage]="(itemToImageHrefMap$ | async)?.get(item.uuid)">
+          <ds-type-badge [object]="item"></ds-type-badge>
+          <a [routerLink]="[getItemPageRoute(item)]" class="h-100 mw-100 p-3">
+            <p class="h4 text-center m-0">{{ item.firstMetadataValue('dc.title') }}</p>
+          </a>
+        </div>
+      </div>
+    </ng-container>
+    <ng-template #imageSkeleton>
+      <ngx-skeleton-loader class="thumbnail-container w-100 h-100" [theme]="{height: '100%', width: '100%'}"></ngx-skeleton-loader>
+    </ng-template>
+  </ng-container>
+</div>