Metadata-editor/ Pagination

[cmoinier]

Issue

As a user, I want to be able to look through all available search results by selecting a different page.

Rules:

• The pagination component should be visible at the bottom of the search results list
• The pagination component should be composed of a list of clickable page numbers:
  - First page
  - "..." separator
  - Two previous pages
  - Current page
  - Two following pages
  - "..." separator
  - Final page
• Left and right arrow should be shown as buttons before and after the page numbers, and respectively change the current page by substracting/adding 1
• These arrow should appear as disabled if their respective action is not possible
• The current page number should be highlighted and not clickable
• Clicking on a page number immediately refresh the results list

Screenshot

[github-actions]

Affected libs: ui-elements, feature-catalog, feature-record, feature-router, feature-search, feature-map, feature-dataviz, ui-catalog, ui-search,
Affected apps: metadata-editor, datahub, demo, webcomponents, search, map-viewer,

• 🚀 Build and deploy storybook and demo on GitHub Pages
• 📦 Build and push affected docker images

[coveralls]

coverage: 85.634% (+1.4%) from 84.227% when pulling 795c316 on EDIT-14-pagination into a7c25ec on main.

[github-actions]

GitHub Pages links:

• (Documentation)[https://geonetwork.github.io/geonetwork-ui/EDIT-14-pagination/docs/]
• (Demo & web components)[https://geonetwork.github.io/geonetwork-ui/EDIT-14-pagination/demo/]
• (UI components storybook)[https://geonetwork.github.io/geonetwork-ui/EDIT-14-pagination/storybook/demo/]

[jahow]

Very good work! I noticed that when on the first page, too many pages were shown:

Instead on the last page it only shows the 3 last pages:

Also added a few comments, and I think you can get rid of all the CSS classes. 🙂

[cmoinier]

Thanks for the review :) I made the changes and added some e2e tests.

[jahow]

Well done! thanks for addressing everything 🙂 and for the e2e tests!