Add pagination support to Web UI entity listing pages#672
Add pagination support to Web UI entity listing pages#672mhmdk0 wants to merge 4 commits intomlcommons:mainfrom
Conversation
|
MLCommons CLA bot All contributors have signed the MLCommons CLA ✍️ ✅ |
| owner = "owner" in filters and filters["owner"] == get_medperf_user_data()["id"] | ||
| return config.comms.get_benchmarks_count, owner |
There was a problem hiding this comment.
it's cleaner to have this "is_owner" logic written in the get_count method, not here. This method should be just "get_comms_counter" define in the top (beside get_comms_retriever etc...)
| if ordering == "created_at_asc": | ||
| order = "created_at" | ||
| elif ordering == "name_asc": | ||
| order = "name" | ||
| elif ordering == "name_desc": | ||
| order = "-name" | ||
| else: | ||
| order = "-created_at" | ||
|
|
There was a problem hiding this comment.
let's move this to a common util file
| "page": page, | ||
| "page_size": page_size, | ||
| "total_pages": total_pages, | ||
| "ordering": ordering, | ||
| "total_count": total_count, | ||
| "start_index": start_index, | ||
| "end_index": end_index, |
There was a problem hiding this comment.
can we move all the ordering/pagination logic to a common file and have it return a dictionary (page page_size total_pages ordering total_count start_index end_index)?
| {% if benchmarks %} | ||
| <div class="container mt-5"> | ||
| <div class="row align-items-end justify-content-between g-3"> | ||
| <div class="col-md-3"> | ||
| <label class="form-label fw-semibold">Sort by</label> | ||
| <select class="form-select" id="ordering"> | ||
| <option value="created_at_desc" {% if ordering == "created_at_desc" %}selected{% endif %}> | ||
| Newest first | ||
| </option> | ||
| <option value="created_at_asc" {% if ordering == "created_at_asc" %}selected{% endif %}> | ||
| Oldest first | ||
| </option> | ||
| <option value="name_asc" {% if ordering == "name_asc" %}selected{% endif %}> | ||
| Name (A → Z) | ||
| </option> | ||
| <option value="name_desc" {% if ordering == "name_desc" %}selected{% endif %}> | ||
| Name (Z → A) | ||
| </option> | ||
| </select> | ||
| </div> | ||
| <div class="col-md-3"> | ||
| <label class="form-label fw-semibold">Items per page</label> | ||
| <select class="form-select" id="page-size"> | ||
| {% for size in [6, 9, 12, 24] %} | ||
| <option value="{{ size }}" {% if page_size == size %}selected{% endif %}> | ||
| {{ size }} | ||
| </option> | ||
| {% endfor %} | ||
| </select> | ||
| </div> | ||
| <div class="col-md-6 text-md-end text-muted"> | ||
| {% if total_count %} | ||
| <small> | ||
| Showing | ||
| <strong>{{ start_index }}</strong>-<strong>{{ end_index }}</strong> | ||
| of <strong>{{ total_count }}</strong> benchmarks | ||
| </small> | ||
| {% endif %} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {% endif %} |
There was a problem hiding this comment.
can we move this to a common partial?
| {% if benchmarks and total_pages > 1 %} | ||
| <nav class="mt-4"> | ||
| <ul class="pagination justify-content-center"> | ||
| <li class="page-item {% if page == 1 %}disabled{% endif %}"> | ||
| <a class="page-link" href="#" data-page="{{ page - 1 }}">Previous</a> | ||
| </li> | ||
| {% for p in range(1, total_pages + 1) %} | ||
| <li class="page-item {% if p == page %}active{% endif %}"> | ||
| <a class="page-link" href="#" data-page="{{ p }}">{{ p }}</a> | ||
| </li> | ||
| {% endfor %} | ||
| <li class="page-item {% if page == total_pages %}disabled{% endif %}"> | ||
| <a class="page-link" href="#" data-page="{{ page + 1 }}">Next</a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| {% endif %} |
There was a problem hiding this comment.
can we move this to a common partial?
| function reloadUi(page = 1) { | ||
| if (page < 1 || !Number.isInteger(page)) return; | ||
|
|
||
| const params = new URLSearchParams({page: page, mine_only: $("#switch").is(":checked")}); | ||
| const locParams = new URLSearchParams(window.location.search); | ||
|
|
||
| const pageSize = $("#page-size").val(); | ||
| if (pageSize !== undefined && pageSize !== "") { | ||
| params.append("page_size", pageSize); | ||
| } | ||
| else if (locParams.get("page_size")) { | ||
| params.append("page_size", locParams.get("page_size")); | ||
| } | ||
|
|
||
| const ordering = $("#ordering").val(); | ||
| if (ordering !== undefined && ordering !== "") { | ||
| params.append("ordering", ordering); | ||
| } | ||
| else if (locParams.get("ordering")) { | ||
| params.append("ordering", locParams.get("ordering")); | ||
| } | ||
|
|
||
| window.location = `/benchmarks/ui?${params.toString()}`; | ||
| } | ||
|
|
||
| $("#ordering, #page-size, #switch").on("change", () => reloadUi(1)); | ||
|
|
||
| $(".page-link").on("click", function (e) { | ||
| e.preventDefault(); | ||
| const page = $(this).data("page"); | ||
| if (page) reloadUi(page); | ||
| }); |
There was a problem hiding this comment.
can we move this to a common js file?
limitandoffset