[upstream] feat(layout): move all pagination controls together, use c…

…ommon interface

libs/ui/elements/src/index.ts

@@ -15,8 +15,6 @@ export * from './lib/metadata-info/metadata-info.component'
 export * from './lib/metadata-quality-item/metadata-quality-item.component'
 export * from './lib/metadata-quality/metadata-quality.component'
 export * from './lib/notification/notification.component'
-export * from './lib/pagination-buttons/pagination-buttons.component'
-export * from './lib/pagination/pagination.component'
 export * from './lib/record-api-form/record-api-form.component'
 export * from './lib/related-record-card/related-record-card.component'
 export * from './lib/thumbnail/thumbnail.component'

libs/ui/inputs/src/index.ts

@@ -21,7 +21,6 @@ export * from './lib/text-input/text-input.component'
 export * from './lib/ui-inputs.module'
 export * from './lib/url-input/url-input.component'
 export * from './lib/viewport-intersector/viewport-intersector.component'
-export * from './lib/previous-next-buttons/previous-next-buttons.component'
 export * from './lib/switch-toggle/switch-toggle.component'
 export * from './lib/file-input/file-input.component'
 export * from './lib/image-input/image-input.component'

libs/ui/layout/src/index.ts

@@ -10,4 +10,8 @@ export * from './lib/sticky-header/sticky-header.component'
 export * from './lib/block-list/block-list.component'
 export * from './lib/sortable-list/sortable-list.component'
 export * from './lib/modal-dialog/modal-dialog.component'
+export * from './lib/pagination/pagination.component'
+export * from './lib/pagination-buttons/pagination-buttons.component'
+export * from './lib/previous-next-buttons/previous-next-buttons.component'
+export * from './lib/paginable.interface'
 export * from './lib/ui-layout.module'

libs/ui/layout/src/lib/paginable.interface.ts

@@ -0,0 +1,14 @@
+/**
+ * This interface is used for components that want to offer pagination
+ * Note: pages indexes are 1-based!! so `isLastPage` means `currentPage === pagesCount`
+ * and `isFirstPage` means `currentPage === 1`
+ */
+export interface Paginable {
+  isFirstPage: boolean
+  isLastPage: boolean
+  pagesCount: number
+  currentPage: number
+  goToPage(index: number): void
+  goToNextPage(): void
+  goToPrevPage(): void
+}

libs/ui/elements/src/lib/pagination-buttons/pagination-buttons.component.html → libs/ui/layout/src/lib/pagination-buttons/pagination-buttons.component.html

@@ -2,8 +2,8 @@
   <div class="flex flex-row gap-[5px] items-center">
     <gn-ui-button
       type="light"
-      [disabled]="currentPage === 1"
-      (buttonClick)="previousPage()"
+      [disabled]="listComponent.isFirstPage"
+      (buttonClick)="listComponent.goToPrevPage()"
       extraClass="!px-[3px]"
     >
       <ng-icon name="iconoirNavArrowLeft"></ng-icon>
@@ -14,17 +14,17 @@
       </ng-container>
       <ng-container *ngIf="page !== '...'">
         <gn-ui-button
-          [type]="page === currentPage ? 'primary' : 'light'"
-          [disabled]="page === currentPage"
+          [type]="page === listComponent.currentPage ? 'primary' : 'light'"
+          [disabled]="page === listComponent.currentPage"
           (buttonClick)="changePage(page)"
           >{{ page }}</gn-ui-button
         >
       </ng-container>
     </ng-container>
     <gn-ui-button
       type="light"
-      [disabled]="currentPage === totalPages"
-      (buttonClick)="nextPage()"
+      [disabled]="listComponent.isLastPage"
+      (buttonClick)="listComponent.goToNextPage()"
       extraClass="!px-[3px]"
     >
       <ng-icon name="iconoirNavArrowRight"></ng-icon>

libs/ui/layout/src/lib/pagination-buttons/pagination-buttons.component.stories.ts

@@ -0,0 +1,21 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'
+import { PaginationButtonsComponent } from './pagination-buttons.component'
+import { MockListComponent } from '../pagination/pagination.component.stories'
+
+export default {
+  title: 'Layout/Pagination/PaginationButtonsComponent',
+  component: PaginationButtonsComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [MockListComponent],
+    }),
+  ],
+} as Meta<PaginationButtonsComponent>
+
+export const Primary: StoryObj<PaginationButtonsComponent> = {
+  render: () => ({
+    template: `
+<gn-ui-pagination-buttons [listComponent]="list"></gn-ui-pagination-buttons>
+<gn-ui-mock-list #list></gn-ui-mock-list>`,
+  }),
+}

libs/ui/elements/src/lib/pagination-buttons/pagination-buttons.component.ts → libs/ui/layout/src/lib/pagination-buttons/pagination-buttons.component.ts

@@ -1,14 +1,9 @@
-import {
-  Component,
-  EventEmitter,
-  Input,
-  OnChanges,
-  Output,
-} from '@angular/core'
+import { Component, Input, OnChanges } from '@angular/core'
 import { ButtonComponent } from '@geonetwork-ui/ui/inputs'
 import { NgIcon, provideIcons } from '@ng-icons/core'
 import { CommonModule } from '@angular/common'
 import { iconoirNavArrowLeft, iconoirNavArrowRight } from '@ng-icons/iconoir'
+import { Paginable } from '../paginable.interface'
 
 @Component({
   selector: 'gn-ui-pagination-buttons',
@@ -24,10 +19,8 @@ import { iconoirNavArrowLeft, iconoirNavArrowRight } from '@ng-icons/iconoir'
   ],
 })
 export class PaginationButtonsComponent implements OnChanges {
-  @Input() currentPage: number
-  @Input() totalPages: number
+  @Input() listComponent: Paginable
   visiblePages: (number | '...')[] = []
-  @Output() newCurrentPageEvent = new EventEmitter<number>()
 
   ngOnChanges(): void {
     this.calculateVisiblePages()
@@ -36,8 +29,11 @@ export class PaginationButtonsComponent implements OnChanges {
   calculateVisiblePages(): void {
     const maxVisiblePages = 5
     const halfVisible = Math.floor(maxVisiblePages / 2)
-    const startPage = Math.max(this.currentPage - halfVisible, 1)
-    const endPage = Math.min(this.currentPage + halfVisible, this.totalPages)
+    const startPage = Math.max(this.listComponent.currentPage - halfVisible, 1)
+    const endPage = Math.min(
+      this.listComponent.currentPage + halfVisible,
+      this.listComponent.pagesCount
+    )
 
     const visiblePages: (number | '...')[] = []
     if (startPage > 1) {
@@ -49,11 +45,11 @@ export class PaginationButtonsComponent implements OnChanges {
     for (let page = startPage; page <= endPage; page++) {
       visiblePages.push(page)
     }
-    if (endPage < this.totalPages) {
-      if (endPage < this.totalPages - 1) {
+    if (endPage < this.listComponent.pagesCount) {
+      if (endPage < this.listComponent.pagesCount - 1) {
         visiblePages.push('...')
       }
-      visiblePages.push(this.totalPages)
+      visiblePages.push(this.listComponent.pagesCount)
     }
 
     this.visiblePages = visiblePages
@@ -63,18 +59,9 @@ export class PaginationButtonsComponent implements OnChanges {
     this.setPage(page)
   }
 
-  nextPage() {
-    this.setPage(this.currentPage + 1)
-  }
-
-  previousPage() {
-    this.setPage(this.currentPage - 1)
-  }
-
   setPage(newPage) {
     if (!Number.isInteger(newPage)) return
-    this.currentPage = newPage
+    this.listComponent.goToPage(newPage)
     this.calculateVisiblePages()
-    this.newCurrentPageEvent.emit(this.currentPage)
   }
 }

libs/ui/elements/src/lib/pagination/pagination.component.html → libs/ui/layout/src/lib/pagination/pagination.component.html

@@ -1,9 +1,9 @@
 <div class="relative">
   <div class="sm:absolute sm:inset-0" *ngIf="!hideButton">
     <gn-ui-button
-      (buttonClick)="nextPage()"
+      (buttonClick)="listComponent.goToNextPage()"
       type="secondary"
-      [disabled]="currentPage === nPages"
+      [disabled]="listComponent.isLastPage"
       extraClass="lg:m-auto !p-[22px]"
     >
       <span class="uppercase font-medium tracking-widest" translate
@@ -20,28 +20,29 @@
       >
       <input
         type="number"
-        [ngModel]="currentPage"
+        [ngModel]="listComponent.currentPage"
         [min]="1"
-        [max]="nPages"
+        [max]="listComponent.pagesCount"
         (ngModelChange)="setPage($event)"
         class="border border-gray-300 rounded w-[54px] h-[34px] pl-[12px] mr-3 text-center"
       />
       <span class="mr-3 text-sm text-gray-900"
-        ><span translate>pagination.pageOf</span> {{ nPages }}</span
+        ><span translate>pagination.pageOf</span>
+        {{ listComponent.pagesCount }}</span
       >
       <gn-ui-button
-        (buttonClick)="previousPage()"
+        (buttonClick)="listComponent.goToPrevPage()"
         class="mr-2"
-        [disabled]="currentPage === 1"
+        [disabled]="listComponent.isFirstPage"
         [type]="'light'"
         extraClass="!px-[3px]"
         data-cy="prev-page"
       >
         <ng-icon name="matChevronLeft"></ng-icon>
       </gn-ui-button>
       <gn-ui-button
-        (buttonClick)="nextPage()"
-        [disabled]="currentPage === nPages"
+        (buttonClick)="listComponent.goToNextPage()"
+        [disabled]="listComponent.isLastPage"
         [type]="'light'"
         extraClass="!px-[3px]"
         data-cy="next-page"