Merged in UXP-34-carousel-pagination (pull request #2)

UXP-34 carousel pagination

Approved-by: Andrea Barbasso

Author: FrancescoMolinaro

src/app/shared/carousel/carousel-options.model.ts

@@ -1,3 +1,5 @@
+import { SortDirection } from '../../core/cache/models/sort-options.model';
+
 export interface CarouselOptions {
   /**
    * The title of the item
@@ -58,4 +60,27 @@ export interface CarouselOptions {
    * Classes to be applied to the bundle
    */
   bundle: string;
+
+  /**
+   * The discovery configuration name for search results
+   */
+  discoveryConfiguration: string;
+  /**
+   * The search sortOrder
+   */
+  order: string;
+  /**
+   * The search sortField
+   */
+  sortField: string;
+
+  /**
+   * The search sort direction
+   */
+  sortDirection: SortDirection;
+
+  /**
+   * The number of items to be searched
+   */
+  numberOfItems: number;
 }

src/app/shared/carousel/carousel.component.html

@@ -1,5 +1,5 @@
 <ngb-carousel #carousel [interval]="2000" (slide)="onSlide($event)" class="ds-carousel">
-  <ng-template ngbSlide *ngFor="let item of items; let i = index; let last = last">
+  <ng-template ngbSlide *ngFor="let item of currentPageItems(); let i = index; let last = last">
     <ng-container *ngIf="getItemLink(item.indexableObject); let currentLink; else carouselContent">
       <a *ngIf="internalLinkService.isLinkInternal(currentLink)" [routerLink]="internalLinkService.getRelativePath(currentLink)">
         <ng-container *ngTemplateOutlet="carouselContent"></ng-container>
@@ -39,3 +39,38 @@
     <i class="fas fa-pause" *ngIf="!paused"></i>
   </button>
 </div>
+<div class="mt-4 w-100 d-flex justify-content-center align-items-center" *ngIf="totalPages > 1">
+  <button (click)="previousPage()" [disabled]="currentPage === 1" class="prev border-0 bg-transparent">
+    <i class="fa fa-arrow-left"></i>
+  </button>
+  <button
+    *ngFor="let page of pages()"
+    class="number"
+    (click)="changePage(page)"
+    style="border: none; background: none; margin: 0 5px"
+    [style.color]="page === currentPage ? '#000000' : '#7c7c7c'">
+    {{ page < 10 ? '0' + page : page }}
+  </button>
+  <button (click)="nextPage()" [disabled]="currentPage === pages().length" class="next border-0 bg-transparent">
+    <i class="fa fa-arrow-right"></i>
+  </button>
+</div>
+
+<div
+  class="carousel-content-wrapper"
+  [ngStyle]="{
+                'height': carouselOptions.keepAspectRatio ? null : carouselOptions.carouselHeightPx + 'px',
+                'aspect-ratio': carouselOptions.keepAspectRatio ? carouselOptions.aspectRatio : null
+           }"
+  *ngIf="(isLoading$ | async)"
+>
+  <a
+    href="#"
+    target="_blank"
+    class="img-container-el">
+    <div class="picsum-img-wrapper flex-column">
+      <img class="img-fluid" src="assets/images/replacement_image.svg">
+      {{'loading.default' | translate}}
+    </div>
+  </a>
+</div>

src/app/shared/carousel/carousel.component.spec.ts

@@ -35,7 +35,10 @@ import { createPaginatedList } from '../testing/utils.test';
 import { ItemSearchResult } from '../object-collection/shared/item-search-result.model';
 import { BitstreamFormat } from '../../core/shared/bitstream-format.model';
 import { CarouselOptions } from './carousel-options.model';
-import { InternalLinkService } from 'src/app/core/services/internal-link.service';
+import { SortDirection } from '../../core/cache/models/sort-options.model';
+import { SearchManager } from '../../core/browse/search-manager';
+import { toRemoteData } from '../../browse-by/browse-by-metadata-page/browse-by-metadata-page.component.spec';
+import { InternalLinkService } from '../../core/services/internal-link.service';
 
 describe('CarouselComponent', () => {
     let component: CarouselComponent;
@@ -64,7 +67,12 @@ describe('CarouselComponent', () => {
       aspectRatio: 1,
       captionStyle: '',
       titleStyle: '',
-      bundle: 'ORIGINAL'
+      bundle: 'ORIGINAL',
+      discoveryConfiguration: 'person',
+      sortField: 'testField',
+      sortDirection: SortDirection.DESC,
+      numberOfItems: 5,
+      order: 'testOrder'
     };
 
     const firstItemResult = Object.assign(new ItemSearchResult(), {
@@ -154,6 +162,10 @@ describe('CarouselComponent', () => {
       }))
     });
 
+    const mockSearchManager = {
+      search: (options: any) => toRemoteData([firstItemResult])
+    };
+
     beforeEach(waitForAsync(() => {
         notificationService = new NotificationsServiceStub();
         TestBed.configureTestingModule({
@@ -169,8 +181,8 @@ describe('CarouselComponent', () => {
             providers: [
                 CarouselComponent,
                 { provide: ObjectCacheService, useValue: {} },
-                { provide: InternalLinkService, useValue: {} },
-                { provide: UUIDService, useValue: {} },
+              { provide: InternalLinkService, useValue: {} },
+              { provide: UUIDService, useValue: {} },
                 { provide: Store, useValue: {} },
                 { provide: RemoteDataBuildService, useValue: {} },
                 { provide: HALEndpointService, useValue: {} },
@@ -180,6 +192,7 @@ describe('CarouselComponent', () => {
                 { provide: DefaultChangeAnalyzer, useValue: {} },
                 { provide: BitstreamDataService, useValue: mockBitstreamDataService },
                 { provide: NativeWindowService, useValue: new NativeWindowRef() },
+                { provide: SearchManager, useValue: mockSearchManager },
             ],
             schemas: [NO_ERRORS_SCHEMA]
         }).compileComponents();
@@ -190,7 +203,6 @@ describe('CarouselComponent', () => {
         fixture = TestBed.createComponent(CarouselComponent);
         component = fixture.componentInstance;
         mockBitstreamDataService.findAllByItemAndBundleName.and.returnValue(createSuccessfulRemoteDataObject$(createPaginatedList([mockBitstream1])));
-        component.items = [firstItemResult];
         component.carouselOptions = carouselOptions;
 
         fixture.detectChanges();
@@ -224,7 +236,6 @@ describe('CarouselComponent', () => {
             fixture = TestBed.createComponent(CarouselComponent);
             component = fixture.componentInstance;
             mockBitstreamDataService.findAllByItemAndBundleName.and.returnValue(createSuccessfulRemoteDataObject$(createPaginatedList([mockBitstream2])));
-            component.items = [secondItemResult];
             component.carouselOptions = carouselOptions;
 
             fixture.detectChanges();