FEAT: Improve Pagiation Display for Knowledge Center

[chrissantillan]

User Story

As a Resident, I want to clearly understand the number of items being displayed and the total available items, so that I don’t mistake the items-per-page indicator for the total number of pages.

Description

Currently, the pagination component on the Knowledge Center page shows a single number that indicates the items per page. However, residents have reported confusion, mistakenly interpreting this number as the total number of items.

To improve clarity, we propose updating the pagination display to match the approach used in the Search Results view. Specifically:

• Replace the single number with a range display (e.g., "Libraries 21–40 of 900").
• Retain the tooltip indicating "items per page" but ensure it complements the new format.

This change should improve usability and reduce user confusion about the pagination controls.

Tasks

• Update Pagination Display
  • Replace the current items-per-page number with a dynamic range display:
    • Format: "{ItemType} X–Y of Z"
    • Examples:
      • "Libraries 21–40 of 900"
      • "Helpful Links 1–20 of 120"
  • Ensure the item type (e.g., Libraries, Videos, Helpful Links) matches the active tab.
• Tooltip Adjustment
  • Adjust the tooltip language if necessary to avoid redundancy.
  • Ensure the tooltip clarifies the purpose of the pagination range display.
• Code Reusability
  • Reuse the existing logic from the Search Results view if possible to maintain consistency and reduce development time.

User Flow

1. Resident navigates to the Knowledge Center.
2. Resident sees the pagination display updated from a single number to a range of items.
3. Resident understands the number of items currently displayed and the total number of available items.
4. If necessary, the Resident hovers over the pagination display and sees the tooltip explanation.

Acceptance Criteria

• Pagination displays the correct range of items (e.g., "Libraries 21–40 of 900").
• The item type dynamically updates based on the active tab (Libraries, Videos, Helpful Links).
• The tooltip provides a clear and accurate description of the pagination functionality.

Technical Considerations

• The Search Results view logic can be repurposed here, as it already implements the desired range-based pagination display.
• Ensure that any item counts are correctly retrieved and displayed based on the current tab and filtering options.

Attachments

• Current Pagination View (Knowledge Center)

• Desired Pagination View (Search Results Reference)