feat(layout): use pagination controls in components with lists

apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts

@@ -529,12 +529,12 @@ describe('dataset pages', () => {
       })
       it('should not display carousel dot button for 4 link cards', () => {
         cy.get('datahub-record-otherlinks')
-          .find('.carousel-step-dot')
+          .find('.pagination-dot')
           .should('exist')
       })
       it('should not display carousel dot button for 2 API cards', () => {
         cy.get('datahub-record-apis')
-          .find('.carousel-step-dot')
+          .find('.pagination-dot')
           .should('not.exist')
       })
     })

apps/datahub/src/app/organization/organization-details/organization-details.component.html

@@ -77,9 +77,7 @@
                 <gn-ui-previous-next-buttons
                   data-test="orgDetailsNavBtn"
                   *ngIf="hasPagination"
-                  [isFirst]="isFirstPage"
-                  [isLast]="isLastPage"
-                  (directionButtonClicked)="changeStepOrPage($event)"
+                  [listComponent]="this"
                 ></gn-ui-previous-next-buttons>
                 <div class="ml-auto">
                   <a
@@ -107,20 +105,11 @@
                     [extraClass]="'w-[300px]'"
                   ></gn-ui-related-record-card>
                 </div>
-                <div
-                  *ngIf="totalPages > 1"
-                  class="flex flex-row justify-center gap-[14px] p-1 mx-auto"
-                  [ngClass]="paginationContainerClass"
+                <gn-ui-pagination-dots
+                  [listComponent]="this"
+                  [containerClass]="paginationContainerClass"
                 >
-                  <button
-                    *ngFor="let page of pages"
-                    class="list-page-dot"
-                    (click)="goToPage(page)"
-                    [ngClass]="
-                      currentPage === page ? 'bg-primary' : 'bg-gray-400'
-                    "
-                  ></button>
-                </div>
+                </gn-ui-pagination-dots>
               </ng-container>
 
               <ng-container *ngIf="isSearchFacadeLoading">

apps/datahub/src/app/organization/organization-details/organization-details.component.spec.ts

@@ -1,9 +1,4 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  DebugElement,
-  NO_ERRORS_SCHEMA,
-} from '@angular/core'
+import { ChangeDetectionStrategy, DebugElement } from '@angular/core'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { SearchFacade } from '@geonetwork-ui/feature/search'
 import { TranslateModule } from '@ngx-translate/core'
@@ -14,33 +9,13 @@ import {
   datasetRecordsFixture,
   someOrganizationsFixture,
 } from '@geonetwork-ui/common/fixtures'
-import { AsyncPipe, NgForOf, NgIf } from '@angular/common'
-import {
-  ButtonComponent,
-  PreviousNextButtonsComponent,
-} from '@geonetwork-ui/ui/inputs'
-import {
-  BlockListComponent,
-  CarouselComponent,
-  MaxLinesComponent,
-} from '@geonetwork-ui/ui/layout'
-import { LetDirective } from '@ngrx/component'
-import { LinkCardComponent, UiElementsModule } from '@geonetwork-ui/ui/elements'
-import { UiSearchModule } from '@geonetwork-ui/ui/search'
-import { UiDatavizModule } from '@geonetwork-ui/ui/dataviz'
-import { RouterLink } from '@angular/router'
-import { UiWidgetsModule } from '@geonetwork-ui/ui/widgets'
 import { Organization } from '@geonetwork-ui/common/domain/model/record'
 import { RouterTestingModule } from '@angular/router/testing'
 import { By } from '@angular/platform-browser'
 import { ROUTER_ROUTE_SEARCH } from '@geonetwork-ui/feature/router'
 
 let getHTMLElement: (dataTest: string) => HTMLElement | undefined
 
-const changeDetectorRefMock: Partial<ChangeDetectorRef> = {
-  markForCheck: jest.fn(),
-}
-
 class OrganisationsServiceMock {
   getFiltersForOrgs = jest.fn((orgs) =>
     of({
@@ -58,7 +33,7 @@ const manyDatasets = datasetRecordsFixture().concat(datasetRecordsFixture()[0])
 
 const organizationIsLoading = new BehaviorSubject(false)
 const totalPages = new BehaviorSubject(10)
-const currentPage = new BehaviorSubject(0)
+const currentPage = new BehaviorSubject(1)
 const results = new BehaviorSubject(manyDatasets)
 
 const desiredPageSize = 3
@@ -72,11 +47,9 @@ class SearchFacadeMock {
   results$ = results.asObservable()
   isLoading$ = organizationIsLoading.asObservable()
   totalPages$ = totalPages.asObservable()
-  isBeginningOfResults$ = of(currentPage.getValue() === 1)
-  isEndOfResults$ = of(totalPages.getValue() === currentPage.getValue())
   currentPage$ = currentPage.asObservable()
-  paginate = jest.fn(() => {
-    currentPage.next(currentPage.getValue() + 1)
+  paginate = jest.fn((newPage) => {
+    currentPage.next(newPage)
     return new SearchFacadeMock()
   })
 }
@@ -89,25 +62,8 @@ describe('OrganizationDetailsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [],
-      schemas: [NO_ERRORS_SCHEMA],
       imports: [
-        AsyncPipe,
-        NgIf,
-        ButtonComponent,
-        TranslateModule,
-        CarouselComponent,
-        BlockListComponent,
-        LetDirective,
-        LinkCardComponent,
-        NgForOf,
-        PreviousNextButtonsComponent,
-        UiElementsModule,
-        UiSearchModule,
-        MaxLinesComponent,
-        UiDatavizModule,
-        RouterLink,
-        UiWidgetsModule,
+        OrganizationDetailsComponent,
         TranslateModule.forRoot(),
         RouterTestingModule,
       ],
@@ -120,10 +76,6 @@ describe('OrganizationDetailsComponent', () => {
           provide: SearchFacade,
           useClass: SearchFacadeMock,
         },
-        {
-          provide: ChangeDetectorRef,
-          useValue: changeDetectorRefMock,
-        },
       ],
     })
       .overrideComponent(OrganizationDetailsComponent, {

apps/datahub/src/app/organization/organization-details/organization-details.component.ts

@@ -4,28 +4,23 @@ import {
   Input,
   OnDestroy,
   OnInit,
-  ViewChild,
 } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import {
   CatalogRecord,
   Organization,
 } from '@geonetwork-ui/common/domain/model/record'
-import {
-  ButtonComponent,
-  PreviousNextButtonsComponent,
-} from '@geonetwork-ui/ui/inputs'
 import { TranslateModule } from '@ngx-translate/core'
 import {
-  BlockListComponent,
-  CarouselComponent,
   MaxLinesComponent,
+  Paginable,
+  PaginationDotsComponent,
+  PreviousNextButtonsComponent,
 } from '@geonetwork-ui/ui/layout'
 import { LetDirective } from '@ngrx/component'
 import {
   ErrorComponent,
   ErrorType,
-  LinkCardComponent,
   RelatedRecordCardComponent,
   UiElementsModule,
 } from '@geonetwork-ui/ui/elements'
@@ -57,12 +52,8 @@ import { startWith } from 'rxjs/operators'
   standalone: true,
   imports: [
     CommonModule,
-    ButtonComponent,
     TranslateModule,
-    CarouselComponent,
-    BlockListComponent,
     LetDirective,
-    LinkCardComponent,
     PreviousNextButtonsComponent,
     UiElementsModule,
     UiSearchModule,
@@ -73,33 +64,25 @@ import { startWith } from 'rxjs/operators'
     ErrorComponent,
     SpinningLoaderComponent,
     RelatedRecordCardComponent,
+    PaginationDotsComponent,
   ],
 })
-export class OrganizationDetailsComponent implements OnInit, OnDestroy {
+export class OrganizationDetailsComponent
+  implements OnInit, OnDestroy, Paginable
+{
   protected readonly ErrorType = ErrorType
   protected readonly ROUTER_ROUTE_SEARCH = ROUTER_ROUTE_SEARCH
 
-  protected get pages() {
-    return new Array(this.totalPages).fill(0).map((_, i) => i + 1)
-  }
-
   subscriptions$: Subscription = new Subscription()
 
   isSearchFacadeLoading = true
 
-  totalPages = 0
-  currentPage = 1
-  isFirstPage = this.currentPage === 1
-  isLastPage = false
-
   currentOrganization$ = new BehaviorSubject<Organization>(null)
   @Input() set organization(value: Organization) {
     this.currentOrganization$.next(value)
   }
   @Input() paginationContainerClass = 'w-full bottom-0 top-auto'
 
-  @ViewChild(BlockListComponent) list: BlockListComponent
-
   lastPublishedDatasets$: Observable<CatalogRecord[]> =
     this.currentOrganization$.pipe(
       switchMap((organization) =>
@@ -129,17 +112,31 @@ export class OrganizationDetailsComponent implements OnInit, OnDestroy {
   }
 
   get hasPagination() {
-    return this.totalPages > 1
+    return this.pagesCount > 1
   }
 
-  changeStepOrPage(direction: string) {
-    if (direction === 'next') {
-      this.searchFacade.paginate(this.currentPage + 1)
-    } else {
-      this.searchFacade.paginate(this.currentPage - 1)
-    }
-  }
+  pagesCount_ = 0
+  currentPage_ = 1
 
+  // Paginable API
+  get currentPage() {
+    return this.currentPage_
+  }
+  get pagesCount() {
+    return this.pagesCount_
+  }
+  get isFirstPage() {
+    return this.currentPage === 1
+  }
+  get isLastPage() {
+    return this.currentPage === this.pagesCount
+  }
+  goToPrevPage() {
+    this.searchFacade.paginate(this.currentPage - 1)
+  }
+  goToNextPage() {
+    this.searchFacade.paginate(this.currentPage + 1)
+  }
   goToPage(page: number) {
     this.searchFacade.paginate(page)
   }
@@ -149,24 +146,12 @@ export class OrganizationDetailsComponent implements OnInit, OnDestroy {
       combineLatest([
         this.searchFacade.isLoading$.pipe(distinctUntilChanged()),
         this.searchFacade.totalPages$.pipe(distinctUntilChanged()),
-        this.searchFacade.isBeginningOfResults$.pipe(distinctUntilChanged()),
-        this.searchFacade.isEndOfResults$.pipe(distinctUntilChanged()),
         this.searchFacade.currentPage$.pipe(distinctUntilChanged()),
-      ]).subscribe(
-        ([
-          isSearchFacadeLoading,
-          totalPages,
-          isBeginningOfResults,
-          isEndOfResults,
-          currentPage,
-        ]) => {
-          this.isSearchFacadeLoading = isSearchFacadeLoading
-          this.totalPages = totalPages
-          this.isFirstPage = isBeginningOfResults
-          this.isLastPage = isEndOfResults
-          this.currentPage = currentPage
-        }
-      )
+      ]).subscribe(([isSearchFacadeLoading, totalPages, currentPage]) => {
+        this.isSearchFacadeLoading = isSearchFacadeLoading
+        this.pagesCount_ = totalPages
+        this.currentPage_ = currentPage
+      })
     )
   }
 

apps/datahub/src/app/record/record-apis/record-apis.component.html

@@ -6,13 +6,15 @@
     record.metadata.api
   </p>
   <gn-ui-previous-next-buttons
-    *ngIf="hasPagination"
-    [isFirst]="isFirstStep"
-    [isLast]="isLastStep"
-    (directionButtonClicked)="changeStepOrPage($event)"
+    *ngIf="carousel.pagesCount > 1"
+    [listComponent]="carousel"
   ></gn-ui-previous-next-buttons>
 </div>
-<gn-ui-carousel (currentStepChange)="updateView()" containerClass="gap-4 py-10">
+<gn-ui-carousel
+  (currentStepChange)="updateView()"
+  containerClass="gap-4 py-10"
+  #carousel
+>
   <gn-ui-api-card
     *ngFor="let link of apiLinks$ | async"
     [title]="link.name"

apps/datahub/src/app/record/record-apis/record-apis.component.ts

@@ -7,8 +7,10 @@ import {
 } from '@angular/core'
 import { DatasetServiceDistribution } from '@geonetwork-ui/common/domain/model/record'
 import { MdViewFacade } from '@geonetwork-ui/feature/record'
-import { CarouselComponent } from '@geonetwork-ui/ui/layout'
-import { PreviousNextButtonsComponent } from '@geonetwork-ui/ui/inputs'
+import {
+  CarouselComponent,
+  PreviousNextButtonsComponent,
+} from '@geonetwork-ui/ui/layout'
 import {
   ApiCardComponent,
   RecordApiFormComponent,
@@ -58,22 +60,10 @@ export class RecordApisComponent implements OnInit {
     this.selectedApiLink = undefined
   }
 
-  get hasPagination() {
-    return this.carousel?.stepsCount > 1
-  }
-
   updateView() {
     this.changeDetector.detectChanges()
   }
 
-  get isFirstStep() {
-    return this.carousel?.isFirstStep
-  }
-
-  get isLastStep() {
-    return this.carousel?.isLastStep
-  }
-
   openRecordApiForm(link: DatasetServiceDistribution) {
     this.selectedApiLink = link
     this.setStyle(link)
@@ -88,12 +78,4 @@ export class RecordApisComponent implements OnInit {
     this.maxHeight = link === undefined ? '0px' : '500px'
     this.opacity = link === undefined ? 0 : 1
   }
-
-  changeStepOrPage(direction: string) {
-    if (direction === 'next') {
-      this.carousel?.slideToNext()
-    } else {
-      this.carousel?.slideToPrevious()
-    }
-  }
 }

apps/datahub/src/app/record/record-otherlinks/record-otherlinks.component.html

@@ -6,10 +6,8 @@
     record.metadata.links
   </p>
   <gn-ui-previous-next-buttons
-    *ngIf="hasPagination"
-    [isFirst]="isFirstStepOrPage"
-    [isLast]="isLastStepOrPage"
-    (directionButtonClicked)="changeStepOrPage($event)"
+    *ngIf="paginableElement?.pagesCount > 1"
+    [listComponent]="paginableElement"
   ></gn-ui-previous-next-buttons>
 </div>
 <ng-container *ngrxLet="otherLinks$ as otherLinks">