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

Author: jahow

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

@@ -11,21 +11,16 @@ 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,
+  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,

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">

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

@@ -6,8 +6,12 @@ import {
   ViewChild,
 } from '@angular/core'
 import { MdViewFacade } from '@geonetwork-ui/feature/record'
-import { BlockListComponent, CarouselComponent } from '@geonetwork-ui/ui/layout'
-import { PreviousNextButtonsComponent } from '@geonetwork-ui/ui/inputs'
+import {
+  BlockListComponent,
+  CarouselComponent,
+  Paginable,
+  PreviousNextButtonsComponent,
+} from '@geonetwork-ui/ui/layout'
 import { CommonModule } from '@angular/common'
 import { LinkCardComponent } from '@geonetwork-ui/ui/elements'
 import { LetDirective } from '@ngrx/component'
@@ -34,34 +38,15 @@ export class RecordOtherlinksComponent implements AfterViewInit {
 
   @ViewChild(CarouselComponent) carousel: CarouselComponent
   @ViewChild(BlockListComponent) list: BlockListComponent
+  get paginableElement(): Paginable {
+    return this.carousel || this.list
+  }
 
   constructor(
     public facade: MdViewFacade,
     private changeDetector: ChangeDetectorRef
   ) {}
 
-  get isFirstStepOrPage() {
-    return this.carousel?.isFirstStep ?? this.list?.isFirstPage ?? true
-  }
-
-  get isLastStepOrPage() {
-    return this.carousel?.isLastStep ?? this.list?.isLastPage ?? false
-  }
-
-  get hasPagination() {
-    return (this.carousel?.stepsCount || this.list?.pagesCount) > 1
-  }
-
-  changeStepOrPage(direction: string) {
-    if (direction === 'next') {
-      this.list?.nextPage()
-      this.carousel?.slideToNext()
-    } else {
-      this.carousel?.slideToPrevious()
-      this.list?.previousPage()
-    }
-  }
-
   updateView() {
     this.changeDetector.detectChanges()
   }

apps/metadata-editor/src/app/records/records-list.component.html

@@ -7,10 +7,6 @@
   ></gn-ui-results-table-container>
 
   <div class="px-5 py-5 flex justify-center gap-8 items-baseline">
-    <gn-ui-pagination-buttons
-      [currentPage]="searchFacade.currentPage$ | async"
-      [totalPages]="searchFacade.totalPages$ | async"
-      (newCurrentPageEvent)="paginate($event)"
-    ></gn-ui-pagination-buttons>
+    <gn-ui-pagination-buttons [listComponent]="this"></gn-ui-pagination-buttons>
   </div>
 </div>

apps/metadata-editor/src/app/records/records-list.component.spec.ts

@@ -10,7 +10,7 @@ import { Router } from '@angular/router'
 import { BehaviorSubject } from 'rxjs'
 import { datasetRecordsFixture } from '@geonetwork-ui/common/fixtures'
 import { MockBuilder } from 'ng-mocks'
-import { PaginationButtonsComponent } from '@geonetwork-ui/ui/elements'
+import { PaginationButtonsComponent } from '@geonetwork-ui/ui/layout'
 
 const results = [{ md: true }]
 const currentPage = 5

apps/metadata-editor/src/app/records/records-list.component.ts

@@ -8,12 +8,10 @@ import {
   SearchService,
 } from '@geonetwork-ui/feature/search'
 import { UiSearchModule } from '@geonetwork-ui/ui/search'
-import {
-  PaginationButtonsComponent,
-  UiElementsModule,
-} from '@geonetwork-ui/ui/elements'
+import { UiElementsModule } from '@geonetwork-ui/ui/elements'
 import { TranslateModule } from '@ngx-translate/core'
 import { UiInputsModule } from '@geonetwork-ui/ui/inputs'
+import { Paginable, PaginationButtonsComponent } from '@geonetwork-ui/ui/layout'
 
 export const allSearchFields = [
   'uuid',
@@ -41,7 +39,7 @@ export const allSearchFields = [
     PaginationButtonsComponent,
   ],
 })
-export class RecordsListComponent implements OnInit {
+export class RecordsListComponent implements OnInit, Paginable {
   constructor(
     private router: Router,
     public searchFacade: SearchFacade,
@@ -51,10 +49,13 @@ export class RecordsListComponent implements OnInit {
   ngOnInit(): void {
     this.searchFacade.setConfigRequestFields(allSearchFields)
     this.searchFacade.setPageSize(15)
-  }
 
-  paginate(page: number) {
-    this.searchService.setPage(page)
+    this.searchFacade.currentPage$.subscribe((page) => {
+      this.currentPage_ = page
+    })
+    this.searchFacade.totalPages$.subscribe((total) => {
+      this.totalPages_ = total
+    })
   }
 
   editRecord(record: CatalogRecord) {
@@ -64,4 +65,31 @@ export class RecordsListComponent implements OnInit {
   duplicateRecord(record: CatalogRecord) {
     this.router.navigate(['/duplicate', record.uniqueIdentifier])
   }
+
+  // these are 0 based
+  totalPages_: number
+  currentPage_: number
+
+  // Paginable API
+  get isFirstPage() {
+    return this.currentPage_ === 0
+  }
+  get isLastPage() {
+    return this.currentPage_ === this.totalPages_ - 1
+  }
+  get pagesCount() {
+    return this.totalPages_
+  }
+  get currentPage() {
+    return this.currentPage_ + 1 // this is 1-based for the Paginable API
+  }
+  goToPage(page: number) {
+    this.searchService.setPage(page - 1)
+  }
+  goToNextPage() {
+    this.searchService.setPage(this.currentPage_ + 1)
+  }
+  goToPrevPage() {
+    this.searchService.setPage(this.currentPage_ - 1)
+  }
 }

libs/feature/catalog/src/lib/organisations/organisations.component.html

@@ -26,9 +26,5 @@
   </gn-ui-content-ghost>
 </div>
 <div class="py-20">
-  <gn-ui-pagination
-    [currentPage]="currentPage$ | async"
-    [nPages]="totalPages"
-    (newCurrentPageEvent)="setCurrentPage($event)"
-  ></gn-ui-pagination>
+  <gn-ui-pagination [listComponent]="this"></gn-ui-pagination>
 </div>

libs/feature/catalog/src/lib/organisations/organisations.component.ts

@@ -14,16 +14,14 @@ import { OrganizationsServiceInterface } from '@geonetwork-ui/common/domain/orga
 import { SortByField } from '@geonetwork-ui/common/domain/model/search'
 import { createFuzzyFilter } from '@geonetwork-ui/util/shared'
 import { ORGANIZATION_PAGE_URL_TOKEN } from '../organization-url.token'
-import {
-  ContentGhostComponent,
-  PaginationComponent,
-} from '@geonetwork-ui/ui/elements'
+import { ContentGhostComponent } from '@geonetwork-ui/ui/elements'
 import { CommonModule } from '@angular/common'
 import {
   OrganisationPreviewComponent,
   OrganisationsFilterComponent,
   OrganisationsResultComponent,
 } from '@geonetwork-ui/ui/catalog'
+import { Paginable, PaginationComponent } from '@geonetwork-ui/ui/layout'
 
 @Component({
   selector: 'gn-ui-organisations',
@@ -40,7 +38,7 @@ import {
     PaginationComponent,
   ],
 })
-export class OrganisationsComponent {
+export class OrganisationsComponent implements Paginable {
   @Input() itemsOnPage = 12
   @Output() orgSelect = new EventEmitter<Organization>()
 
@@ -89,10 +87,6 @@ export class OrganisationsComponent {
     )
   )
 
-  protected setCurrentPage(page: number): void {
-    this.currentPage$.next(page)
-  }
-
   protected setFilterBy(value: string): void {
     this.currentPage$.next(1)
     this.filterBy$.next(value)
@@ -140,4 +134,27 @@ export class OrganisationsComponent {
     if (!this.urlTemplate) return null
     return this.urlTemplate.replace('${name}', organisation.name)
   }
+
+  // Paginable API
+  get isFirstPage() {
+    return this.currentPage === 1
+  }
+  get isLastPage() {
+    return this.currentPage === this.totalPages
+  }
+  get pagesCount() {
+    return this.totalPages
+  }
+  get currentPage() {
+    return this.currentPage$.value
+  }
+  goToPage(index: number) {
+    this.currentPage$.next(index)
+  }
+  goToNextPage() {
+    this.goToPage(this.currentPage - 1)
+  }
+  goToPrevPage() {
+    this.goToPage(this.currentPage + 1)
+  }
 }