rob
/
CmdForge
1
0
Fork 0
Code Issues Pull Requests Packages Projects 1 Releases Wiki Activity

Add improved pagination to admin pending tools page 

- Page number links with ellipsis for large ranges
- First/Last page buttons (« and »)
- "Go to page" input for direct page jumping
- Current page highlighted in indigo

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
rob 2026-01-16 14:46:35 -04:00
parent f22e95d119
commit cb9625d613
1 changed files with 48 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/cmdforge/web/templates/admin/pending.html
View File

@ -91,13 +91,48 @@
<div class="text-sm text-gray-700">
Page {{ meta.page }} of {{ meta.total_pages }} ({{ meta.total }} total)
</div>
<div class="flex space-x-2">
<div class="flex items-center space-x-2">
<!-- First/Previous -->
{% if meta.page > 1 %}
<a href="?page=1" class="px-2 py-1 border rounded text-sm hover:bg-gray-100" title="First page">&laquo;</a>
<a href="?page={{ meta.page - 1 }}" class="px-3 py-1 border rounded text-sm hover:bg-gray-100">Previous</a>
{% endif %}
<!-- Page numbers -->
{% set start_page = [1, meta.page - 2] | max %}
{% set end_page = [meta.total_pages, meta.page + 2] | min %}
{% if start_page > 1 %}
<span class="text-gray-400">...</span>
{% endif %}
{% for p in range(start_page, end_page + 1) %}
{% if p == meta.page %}
<span class="px-3 py-1 bg-indigo-600 text-white rounded text-sm">{{ p }}</span>
{% else %}
<a href="?page={{ p }}" class="px-3 py-1 border rounded text-sm hover:bg-gray-100">{{ p }}</a>
{% endif %}
{% endfor %}
{% if end_page < meta.total_pages %}
<span class="text-gray-400">...</span>
{% endif %}
<!-- Next/Last -->
{% if meta.page < meta.total_pages %}
<a href="?page={{ meta.page + 1 }}" class="px-3 py-1 border rounded text-sm hover:bg-gray-100">Next</a>
<a href="?page={{ meta.total_pages }}" class="px-2 py-1 border rounded text-sm hover:bg-gray-100" title="Last page">&raquo;</a>
{% endif %}
<!-- Jump to page -->
<span class="text-gray-400 mx-2">|</span>
<form class="flex items-center space-x-1" onsubmit="jumpToPage(event)">
<label class="text-sm text-gray-600">Go to:</label>
<input type="number" id="page-input" min="1" max="{{ meta.total_pages }}"
class="w-16 px-2 py-1 border rounded text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
placeholder="{{ meta.page }}">
<button type="submit" class="px-2 py-1 bg-indigo-600 text-white rounded text-sm hover:bg-indigo-700">Go</button>
</form>
</div>
</div>
{% endif %}
@ -134,6 +169,18 @@ function toggleFindings(toolId) {
el.classList.toggle('hidden');
}
function jumpToPage(event) {
event.preventDefault();
const input = document.getElementById('page-input');
const page = parseInt(input.value);
const maxPage = parseInt(input.max);
if (page && page >= 1 && page <= maxPage) {
window.location.href = `?page=${page}`;
} else if (page) {
alert(`Please enter a page number between 1 and ${maxPage}`);
}
}
async function approveTool(toolId) {
if (!confirm('Approve this tool?')) return;
try {