Merge branch 'ux-plus-2023_02_x' into ux-plus-cris-2024_02_x

# Conflicts:
#	package.json
#	src/app/core/layout/models/section.model.ts
#	src/app/cris-layout/cris-layout-matrix/cris-layout-box-container/boxes/metadata/rendering-types/image/image.component.ts
#	src/app/cris-layout/cris-layout.module.ts
#	src/app/item-page/mirador-viewer/mirador-viewer.component.spec.ts
#	src/app/item-page/mirador-viewer/mirador-viewer.component.ts
#	src/app/shared/browse-most-elements/abstract-browse-elements.component.ts
#	src/app/shared/browse-most-elements/browse-most-elements.component.ts
#	src/app/shared/browse-most-elements/themed-browse-most-elements.component.ts
#	src/app/shared/carousel/carousel.component.html
#	src/app/shared/carousel/carousel.component.spec.ts
#	src/app/shared/carousel/carousel.component.ts
#	src/app/shared/carousel/carousel.module.ts
#	src/app/shared/explore/explore.module.ts
#	src/app/shared/explore/section-component/carousel-section/carousel-section.component.spec.ts
#	src/app/shared/explore/section-component/carousel-section/carousel-section.component.ts
#	src/app/shared/explore/section-component/grid-section/grid-section.component.spec.ts
#	src/app/shared/explore/section-component/grid-section/grid-section.component.ts
#	src/app/shared/open-street-map/open-street-map.component.ts
#	src/app/shared/shared.module.ts
#	src/app/shared/utils/background-image.directive.ts
#	src/app/thumbnail/thumbnail.component.html
#	src/app/thumbnail/thumbnail.component.spec.ts
#	src/config/default-app-config.ts

Author: atarix83

package.json

@@ -158,6 +158,7 @@
     "quill": "2.0.3",
     "quill-emoji": "^0.2.0",
     "react-copy-to-clipboard": "^5.1.0",
+    "redux-saga": "^1.3.0",
     "reflect-metadata": "^0.2.2",
     "rxjs": "^7.8.0",
     "sanitize-html": "^2.14.0",

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

@@ -5,6 +5,7 @@ import {
 
 import { typedObject } from '../../cache/builders/build-decorators';
 import { CacheableObject } from '../../cache/cacheable-object.model';
+import { SortDirection } from '../../cache/models/sort-options.model';
 import { HALLink } from '../../shared/hal-link.model';
 import { ResourceType } from '../../shared/resource-type';
 import { excludeFromEquals } from '../../utilities/equals.decorators';
@@ -75,8 +76,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 {
@@ -114,14 +117,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'
@@ -146,4 +141,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,87 @@
+import {
+  inject,
+  Injectable,
+} from '@angular/core';
+import {
+  from,
+  Observable,
+} from 'rxjs';
+import {
+  filter,
+  map,
+  mergeMap,
+  reduce,
+  switchMap,
+  take,
+} from 'rxjs/operators';
+
+import { hasValue } from '../../shared/empty.util';
+import { followLink } from '../../shared/utils/follow-link-config.model';
+import { BitstreamDataService } from '../data/bitstream-data.service';
+import { PaginatedList } from '../data/paginated-list.model';
+import { RemoteData } from '../data/remote-data';
+import { Bitstream } from '../shared/bitstream.model';
+import { BitstreamFormat } from '../shared/bitstream-format.model';
+import { DSpaceObject } from '../shared/dspace-object.model';
+import { Item } from '../shared/item.model';
+import { getFirstCompletedRemoteData } from '../shared/operators';
+
+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,13 +1,23 @@
-import { AsyncPipe } from '@angular/common';
+import {
+  AsyncPipe,
+  isPlatformBrowser,
+} from '@angular/common';
 import {
   Component,
+  inject,
   OnInit,
+  PLATFORM_ID,
 } from '@angular/core';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import {
   BehaviorSubject,
   Observable,
+  of,
 } from 'rxjs';
-import { map } from 'rxjs/operators';
+import {
+  catchError,
+  map,
+} from 'rxjs/operators';
 
 import { Bitstream } from '../../../../../../../core/shared/bitstream.model';
 import { getPaginatedListPayload } from '../../../../../../../core/shared/operators';
@@ -21,6 +31,7 @@ import { BitstreamRenderingModelComponent } from '../bitstream-rendering-model';
   standalone: true,
   imports: [
     AsyncPipe,
+    NgxSkeletonLoaderModule,
   ],
 })
 export class ImageComponent extends BitstreamRenderingModelComponent implements OnInit {
@@ -29,12 +40,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),
+      catchError(() => {
+        this.isLoading = false;
+        return of(null);
+      }),
     ).subscribe((image) => {
       this.bitstream.next(image);
+      this.isLoading = false;
     });
 
     this.imageUrl$ = this.bitstream.asObservable().pipe(
@@ -43,8 +65,4 @@ export class ImageComponent extends BitstreamRenderingModelComponent implements
 
   }
 
-  backgroundImageUrl(url: string) {
-    return `url('${url}')`;
-  }
-
 }

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

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

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

@@ -50,6 +50,7 @@ import {
   isEmpty,
   isNotEmpty,
 } from '../shared/empty.util';
+import { ThemedAdvancedTopSectionComponent } from '../shared/explore/section-component/advanced-top-section/themed-advanced-top-section.component';
 import { ThemedBrowseSectionComponent } from '../shared/explore/section-component/browse-section/themed-browse-section.component';
 import { ThemedCarouselSectionComponent } from '../shared/explore/section-component/carousel-section/themed-carousel-section.component';
 import { ThemedCountersSectionComponent } from '../shared/explore/section-component/counters-section/themed-counters-section.component';
@@ -87,6 +88,7 @@ import { ThemedHomeNewsComponent } from './home-news/themed-home-news.component'
     ThemedCarouselSectionComponent,
     ThemedGridSectionComponent,
     ThemedTwitterSectionComponent,
+    ThemedAdvancedTopSectionComponent,
   ],
 })
 export class HomePageComponent implements OnInit, OnDestroy {