Pagination enhancement

[AnthonyLaw]

There are some limitations from REST, some of the data is unable to get the total records. symbol/catapult-rest#682

If the explorer is unable to get the last page from the data, it will display ..

Update

• merged pagination and paginationTimeline in pagination method

Add

• go to the first-page button
• go to the last page button
• input field allows the user to put page numbers on a specific page
• add totalRecords properties on pageInfo use for calculate last page.
• advance flag to change pagination interface, default is true
• some validation for the input field prevents going to a page which non-exist if last page is included

advance

advance false (it use for block detail page)

Remove

• more / less button

[netlify]

✔️ Deploy Preview for explorer-dev ready!

🔨 Explore the source changes: 67f4127

🔍 Inspect the deploy log: https://app.netlify.com/sites/explorer-dev/deploys/61aec7ecc6bc460007aaf514

😎 Browse the preview: https://deploy-preview-985--explorer-dev.netlify.app/

[0x6861746366574]

There are some limitations from REST, some of the data is unable to get the total records. symbol/catapult-rest#682

If the explorer is unable to get the last page from the data, it will display ..

I would not include .. here. If you cannot retrieve the last page of data, simply have the "Last" button greyed out (which is already a UX pattern you have).

Update

• merged pagination and paginationTimeline in pagination method

Add

• go to the first-page button
• go to the last page button
• input field allows the user to put page numbers on a specific page

You will want to reduce the size the input field takes up on the UI. See the attached screenshot - the width is quite large in comparison to the entry. Even if it is prescaled to fit the max entry size, there's still quite a lot of padding on the left and right margins.

I would also not allow input at the moment. If a user doesn't know the maximum amount of pages, their input might not be valid which can lead to confusion. For example, if I navigate to namespaces, it does not display the total amount of pages possible - if I enter '700', it just reloads the page.

I would cap the pages at 50 for Namespaces & Mosaics (to match the limit present in the Transactions tab) until we've either moved Explorer to an independent DB, or fixed Issue #682 in REST.

• add totalRecords properties on pageInfo use for calculate last page.
• advance flag to change pagination interface, default is true
• some validation for the input field prevents going to a page which non-exist if last page is included

A user can still input an incorrect field if the last page is not cached.

[AnthonyLaw]

I would cap the pages at 50 for Namespaces & Mosaics (to match the limit present in the Transactions tab).

@0x6861746366574 Checked on Mainnet, we have less than 50 pages of data for Namespaces (16 pages) & Mosaics (41 pages).
maybe that is not a good idea to cap pages on Namespaces and Mosaics for now

Update Preview

• Reduce input width
• remove of .. if the last page is undefined.
• disable input if the last page is undefined.

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication