feat(pagination): improve pagination buttons

Better reaction to change, style matches mockup

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

@@ -1,22 +1,40 @@
 <div class="relative">
-  <div class="flex flex-row gap-[5px] items-center">
+  <div
+    class="flex flex-row gap-[4px] items-center"
+    style="
+      --gn-ui-button-width: 28px;
+      --gn-ui-button-height: 28px;
+      --gn-ui-button-padding: 0;
+    "
+  >
     <gn-ui-button
       type="light"
       [disabled]="listComponent.isFirstPage"
       (buttonClick)="listComponent.goToPrevPage()"
-      extraClass="!px-[3px]"
+      extraClass="text-gray-950"
     >
-      <ng-icon name="iconoirNavArrowLeft"></ng-icon>
+      <ng-icon name="iconoirNavArrowLeft" [strokeWidth]="3"></ng-icon>
     </gn-ui-button>
-    <ng-container *ngFor="let page of visiblePages">
-      <ng-container *ngIf="page === '...'">
-        <span class="mx-[5px]">{{ page }}</span>
+    <ng-container *ngFor="let page of visiblePages" [ngSwitch]="page">
+      <ng-container *ngSwitchCase="listComponent.currentPage">
+        <div
+          class="gn-ui-btn-black bg-gray-950 border-gray-950 pointer-events-none select-none"
+          [attr.data-test]="'page-' + page"
+        >
+          {{ page }}
+        </div>
+      </ng-container>
+      <ng-container *ngSwitchCase="'...'">
+        <span class="mx-[5px] text-gray-950" [attr.data-test]="'page-' + page"
+          >...</span
+        >
       </ng-container>
-      <ng-container *ngIf="page !== '...'">
+      <ng-container *ngSwitchDefault>
         <gn-ui-button
-          [type]="page === listComponent.currentPage ? 'primary' : 'light'"
-          [disabled]="page === listComponent.currentPage"
-          (buttonClick)="changePage(page)"
+          type="light"
+          extraClass="text-gray-950"
+          (buttonClick)="listComponent.goToPage(page)"
+          [attr.data-test]="'page-' + page"
           >{{ page }}</gn-ui-button
         >
       </ng-container>
@@ -25,9 +43,9 @@
       type="light"
       [disabled]="listComponent.isLastPage"
       (buttonClick)="listComponent.goToNextPage()"
-      extraClass="!px-[3px]"
+      extraClass="text-gray-950"
     >
-      <ng-icon name="iconoirNavArrowRight"></ng-icon>
+      <ng-icon name="iconoirNavArrowRight" [strokeWidth]="3"></ng-icon>
     </gn-ui-button>
   </div>
 </div>

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

@@ -24,7 +24,6 @@ describe('PaginationButtonsComponent', () => {
     fixture = TestBed.createComponent(PaginationButtonsComponent)
     component = fixture.componentInstance
     component.listComponent = new MockPaginable()
-    component.calculateVisiblePages()
     fixture.detectChanges()
   })
 
@@ -98,18 +97,11 @@ describe('PaginationButtonsComponent', () => {
   })
   describe('when clicking on page button', () => {
     beforeEach(() => {
-      const paginationButtons =
-        fixture.nativeElement.querySelectorAll('gn-ui-button')
-      const pageBtnList = []
-      paginationButtons.forEach((buttonElement) => {
-        const ngIcon = buttonElement.querySelector('ng-icon')
-        if (!ngIcon) {
-          pageBtnList.push(buttonElement)
-        }
-      })
-      pageBtnList[1].dispatchEvent(new Event('buttonClick'))
+      const paginationButton =
+        fixture.nativeElement.querySelector('[data-test=page-2]')
+      paginationButton.dispatchEvent(new Event('buttonClick'))
     })
-    it('is should access the requested page', () => {
+    it('should access the requested page', () => {
       expect(component.listComponent.goToPage).toHaveBeenCalledWith(2)
     })
   })

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

@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges } from '@angular/core'
+import { Component, Input } from '@angular/core'
 import { ButtonComponent } from '@geonetwork-ui/ui/inputs'
 import { NgIcon, provideIcons } from '@ng-icons/core'
 import { CommonModule } from '@angular/common'
@@ -18,15 +18,10 @@ import { Paginable } from '../paginable.interface'
     }),
   ],
 })
-export class PaginationButtonsComponent implements OnChanges {
+export class PaginationButtonsComponent {
   @Input() listComponent: Paginable
-  visiblePages: (number | '...')[] = []
 
-  ngOnChanges(): void {
-    this.calculateVisiblePages()
-  }
-
-  calculateVisiblePages(): void {
+  get visiblePages(): (number | '...')[] {
     const maxVisiblePages = 5
     const halfVisible = Math.floor(maxVisiblePages / 2)
     const startPage = Math.max(this.listComponent.currentPage - halfVisible, 1)
@@ -35,33 +30,21 @@ export class PaginationButtonsComponent implements OnChanges {
       this.listComponent.pagesCount
     )
 
-    const visiblePages: (number | '...')[] = []
-    if (startPage > 1) {
-      visiblePages.push(1)
-      if (startPage > 2) {
-        visiblePages.push('...')
+    const allPages = new Array(this.listComponent.pagesCount)
+      .fill(0)
+      .map((_, i) => i + 1) // pages are 1-based
+    return allPages.reduce((pages, page) => {
+      if (page === 1 || page === this.listComponent.pagesCount) {
+        // first and last page
+        pages.push(page)
+      } else if (page >= startPage && page <= endPage) {
+        // pages around current one
+        pages.push(page)
+      } else if (pages[pages.length - 1] !== '...') {
+        // dots between pages
+        pages.push('...')
       }
-    }
-    for (let page = startPage; page <= endPage; page++) {
-      visiblePages.push(page)
-    }
-    if (endPage < this.listComponent.pagesCount) {
-      if (endPage < this.listComponent.pagesCount - 1) {
-        visiblePages.push('...')
-      }
-      visiblePages.push(this.listComponent.pagesCount)
-    }
-
-    this.visiblePages = visiblePages
-  }
-
-  changePage(page) {
-    this.setPage(page)
-  }
-
-  setPage(newPage) {
-    if (!Number.isInteger(newPage)) return
-    this.listComponent.goToPage(newPage)
-    this.calculateVisiblePages()
+      return pages
+    }, [])
   }
 }