TOMToolkit / tom_base

The base Django project for a Target and Observation Manager
https://tom-toolkit.readthedocs.io
GNU General Public License v3.0
26 stars 46 forks source link

Add Item Count Display to Pagination Component #949

Open davner opened 5 months ago

davner commented 5 months ago

Is your feature request related to a problem? Please describe. It’s difficult for users to quickly understand the total number of items and their position within the pagination. Users often need to see the range of items displayed on the current page out of the total items to get better context.

Describe the solution you'd like I propose adding a feature to the pagination component that displays the range of items currently being viewed (e.g., “Showing X-Y of N”). This message could be conditionally displayed based on a setting in Django (SHOW_ITEM_COUNT). When enabled, it will provide users with clear information about the number of items being viewed and their position within the total items.

Additional context Here is the solution I implemented. I override the bootstrap4 register so that we don't have to update all the html files that call this templatetag.

from typing import Any
from bootstrap4.templatetags.bootstrap4 import get_pagination_context, register
from django.core.paginator import Page

@register.inclusion_tag("pagination.html")
def bootstrap_pagination(page: Page, **kwargs) -> dict[str, Any]:
    """Render a Bootstrap pagination component with additional context. This function
    extends the default pagination context to include the start index, end index, and
    total count of items.

    Parameters
    ----------
    page : `Page`
        The page of results to show.

    Returns
    -------
    `dict`
        The context for rendering the pagination component, including
        pagination details and item counts.
    """
    pagination_kwargs = kwargs.copy()
    pagination_kwargs["page"] = page

    # Get the default pagination context.
    context = get_pagination_context(**pagination_kwargs)

    # Add item counts to the context.
    context["start_index"] = page.start_index()
    context["end_index"] = page.end_index()
    context["total_count"] = page.paginator.count

    return context

Then, in the pagination.html from bootstrap4 template, I added:

<span class="ms-2 small">Showing {{ start_index }}-{{ end_index }} of {{ total_count }}</span>

Which then does this: Screenshot 2024-05-29 at 5 19 41 PM

I would gladly create a PR with tests if the tomtoolkit team is interested.

Cheers!

jchate6 commented 5 months ago

We'd love to see a PR for this if you are willing to make one.