[Search page] : Pagination

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

@@ -224,4 +224,12 @@ describe('search', () => {
       )
     })
   })
+  describe.only('pagination', () => {
+    beforeEach(() => {
+      cy.visit('/search')
+    })
+    it('should display the pagination', () => {
+      cy.get('mel-datahub-pagination-buttons').should('be.visible')
+    })
+  })
 })

apps/datahub/src/app/search/search-results/search-results.component.html

@@ -8,17 +8,16 @@
     mel.datahub.search.hits.found
   </div>
   <mel-datahub-results-list-grid
-    [numberOfResults]="18"
+    [numberOfResults]="pageSize"
   ></mel-datahub-results-list-grid>
-  <div class="flex justify-center mt-8">
-    @if((searchFacade.isLoading$ | async) === false &&
-    (searchFacade.isEndOfResults$ | async) === false){
+  <div class="flex justify-center mt-16">
+    @if((searchFacade.isLoading$ | async) === false){
     <ng-container>
-      <button class="mel-primary-button" (click)="onShowMore()">
-        <span class="uppercase tracking-widest" translate
-          >mel.datahub.search.showMore</span
-        >
-      </button>
+      <mel-datahub-pagination-buttons
+        [totalPages]="searchFacade.totalPages$ | async"
+        [currentPage]="searchFacade.currentPage$ | async"
+        (newCurrentPageEvent)="searchService.setPage($any($event))"
+      ></mel-datahub-pagination-buttons>
     </ng-container>
     } @else if((searchFacade.isLoading$ | async) === true){
     <ng-container>

apps/datahub/src/app/search/search-results/search-results.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core'
-import { SearchFacade } from 'geonetwork-ui'
+import { SearchFacade, SearchService } from 'geonetwork-ui'
 
 @Component({
   selector: 'mel-datahub-search-results',
@@ -8,9 +8,20 @@ import { SearchFacade } from 'geonetwork-ui'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SearchResultsComponent {
-  constructor(protected searchFacade: SearchFacade) {}
+  pageSize = 18
+
+  constructor(
+    protected searchFacade: SearchFacade,
+    protected searchService: SearchService
+  ) {
+    this.searchFacade.setPageSize(this.pageSize)
+  }
 
   onShowMore() {
     this.searchFacade.scroll()
   }
+
+  onPageChange(page: number) {
+    this.searchService.setPage(page)
+  }
 }

libs/mel/src/lib/mel.module.ts

@@ -19,6 +19,7 @@ import { MelAutocompleteComponent } from './autocomplete/autocomplete.component'
 import {
   PopupAlertComponent,
   UiElementsModule,
+  UiInputsModule,
   UiLayoutModule,
   UiWidgetsModule,
 } from 'geonetwork-ui'
@@ -27,6 +28,7 @@ import { MatIconModule } from '@angular/material/icon'
 import { ReactiveFormsModule } from '@angular/forms'
 import { TranslateModule } from '@ngx-translate/core'
 import { StripHtmlPipe } from './strip-html.pipe'
+import { MelPaginationButtonsComponent } from './pagination-buttons/pagination-buttons.component'
 
 @NgModule({
   imports: [
@@ -39,6 +41,7 @@ import { StripHtmlPipe } from './strip-html.pipe'
     TranslateModule,
     ReactiveFormsModule,
     PopupAlertComponent,
+    UiInputsModule,
   ],
   declarations: [
     ResultsListComponent,
@@ -58,6 +61,7 @@ import { StripHtmlPipe } from './strip-html.pipe'
     MelFuzzySearchComponent,
     MelAutocompleteComponent,
     StripHtmlPipe,
+    MelPaginationButtonsComponent,
   ],
   exports: [
     ResultsListComponent,
@@ -76,6 +80,7 @@ import { StripHtmlPipe } from './strip-html.pipe'
     CustomCarouselComponent,
     MelFuzzySearchComponent,
     MelAutocompleteComponent,
+    MelPaginationButtonsComponent,
   ],
 })
 export class MelModule {}

libs/mel/src/lib/pagination-buttons/pagination-buttons.component.html

@@ -0,0 +1,44 @@
+<div class="relative">
+  <div class="flex flex-row items-center">
+    <gn-ui-button
+      type="outline"
+      [disabled]="currentPage === 1"
+      (buttonClick)="previousPage()"
+      extraClass="pagination-btn-nav mr-14"
+    >
+      <mat-icon class="pagination-btn-arrow material-symbols-outlined"
+        >chevron_left</mat-icon
+      >
+      <span class="font-bold ml-1" translate
+        >mel.datahub.search.pagination.previous</span
+      >
+    </gn-ui-button>
+    <ng-container *ngFor="let page of visiblePages">
+      <ng-container *ngIf="page === '...'">
+        <span class="mr-14">{{ page }}</span>
+      </ng-container>
+      <ng-container *ngIf="page !== '...'">
+        <gn-ui-button
+          [type]="page === currentPage ? 'outline' : 'light'"
+          [disabled]="page === currentPage"
+          (buttonClick)="changePage(page)"
+          extraClass="pagination-btn"
+          >{{ page }}</gn-ui-button
+        >
+      </ng-container>
+    </ng-container>
+    <gn-ui-button
+      type="outline"
+      [disabled]="currentPage === totalPages"
+      (buttonClick)="nextPage()"
+      extraClass="pagination-btn-nav"
+    >
+      <span class="font-bold mr-1" translate
+        >mel.datahub.search.pagination.next</span
+      >
+      <mat-icon class="pagination-btn-arrow material-symbols-outlined"
+        >chevron_right</mat-icon
+      >
+    </gn-ui-button>
+  </div>
+</div>

libs/mel/src/lib/pagination-buttons/pagination-buttons.component.ts

@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { PaginationButtonsComponent } from 'geonetwork-ui'
+
+@Component({
+  selector: 'mel-datahub-pagination-buttons',
+  templateUrl: './pagination-buttons.component.html',
+  styles: ``,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MelPaginationButtonsComponent extends PaginationButtonsComponent {}

package.json

@@ -13,7 +13,7 @@
     "e2e:datahub-dev": "nx e2e mel-datahub-e2e --watch",
     "e2e:home": "nx e2e home-e2e",
     "e2e:home-dev": "nx e2e home-e2e --watch",
-    "i18n:extract": "ngx-translate-extract -s --fi '  ' --input ./apps --output ./apps/datahub/src/assets/i18n/{en_MEL,fr_MEL}.json --clean --format json && npm run format"
+    "i18n:extract": "ngx-translate-extract -s --fi '  ' --input ./apps ./libs --output ./resources/translations/{en_MEL,fr_MEL}.json --clean --format json && npm run format"
   },
   "private": true,
   "dependencies": {

resources/styles.css

@@ -86,6 +86,21 @@
   .card-label {
     @apply group-hover:bg-primary-dark group-hover:border-white group-hover:text-white transition-colors;
   }
+  .pagination-btn {
+    @apply border-none bg-transparent mr-14;
+  }
+  .pagination-btn:disabled {
+    @apply border-none bg-transparent text-primary opacity-100;
+  }
+  .pagination-btn-nav {
+    @apply border-none bg-transparent text-primary opacity-100;
+  }
+  .pagination-btn-nav:disabled {
+    @apply text-black;
+  }
+  .pagination-btn-arrow {
+    @apply scale-[2] font-light;
+  }
 }
 html,
 body {

resources/translations/en_MEL.json

@@ -10,14 +10,15 @@
   "mel.datahub.home.title": "Métropole Européenne de Lille",
   "mel.datahub.multiselect.filter.placeholder": "",
   "mel.datahub.search.clear": "",
-  "mel.datahub.search.filters.categoryKeyword": "Category",
   "mel.datahub.search.filters.license": "",
+  "mel.datahub.search.filters.publicationYear": "",
   "mel.datahub.search.filters.publisher": "",
-  "mel.datahub.search.filters.revisionYear": "Date",
+  "mel.datahub.search.filters.topic": "",
   "mel.datahub.search.form.description": "",
   "mel.datahub.search.form.title": "",
   "mel.datahub.search.hits.found": "",
-  "mel.datahub.search.showMore": "",
+  "mel.datahub.search.pagination.next": "",
+  "mel.datahub.search.pagination.previous": "",
   "mel.datahub.search.title": "dataset catalog",
   "mel.dataset.abstract": "Abstract",
   "mel.dataset.api": "API",
@@ -72,5 +73,6 @@
   "mel.search.field.any.placeholder": "",
   "mel.search.filter.generatedByWfs": "",
   "mel.searchpage.subtitle.favorites": "",
-  "mel.tooltip.url.copy": ""
+  "mel.tooltip.url.copy": "",
+  "search.filters.categoryKeyword": ""
 }

resources/translations/fr_MEL.json

@@ -10,14 +10,15 @@
   "mel.datahub.home.title": "Métropole Européenne de Lille",
   "mel.datahub.multiselect.filter.placeholder": "Rechercher",
   "mel.datahub.search.clear": "Effacer",
-  "mel.datahub.search.filters.categoryKeyword": "Catégorie",
   "mel.datahub.search.filters.license": "Licence",
+  "mel.datahub.search.filters.publicationYear": "Date",
   "mel.datahub.search.filters.publisher": "Producteur",
-  "mel.datahub.search.filters.revisionYear": "Date",
+  "mel.datahub.search.filters.topic": "Thématique",
   "mel.datahub.search.form.description": "Vous pouvez utiliser la barre de recherche ou les différents filtres situés ci-dessous pour trouver un jeu de données plus rapidement.",
   "mel.datahub.search.form.title": "Trouver un jeu de données",
   "mel.datahub.search.hits.found": "{hits, plural, =0{Aucune correspondance.} one{1 enregistrement trouvé.} other{Ensemble des données: {hits}}}",
-  "mel.datahub.search.showMore": "Plus de résultats...",
+  "mel.datahub.search.pagination.next": "SUIVANT",
+  "mel.datahub.search.pagination.previous": "PRÉCÉDENT",
   "mel.datahub.search.title": "Catalogue de jeux de données",
   "mel.dataset.abstract": "Description",
   "mel.dataset.api": "API",
@@ -72,5 +73,6 @@
   "mel.search.field.any.placeholder": "Rechercher un jeu de données",
   "mel.search.filter.generatedByWfs": "généré par une API",
   "mel.searchpage.subtitle.favorites": "Jeux de données suivis",
-  "mel.tooltip.url.copy": "Copier l'URL"
+  "mel.tooltip.url.copy": "Copier l'URL",
+  "search.filters.categoryKeyword": "Mot clé"
 }