diff --git a/CHANGELOG.md b/CHANGELOG.md index e0414f5..74bfe79 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ - Updated `toggleAllCheckboxes(masterCheckbox)` to call `updateRowHighlight()` on each row so selections get the `.row-selected` highlight - **Master checkbox sync** in toolbar - Enhanced `updateFileActionButtons()` to set the header checkbox to checked, unchecked, or indeterminate based on how many files are selected +- Fixed Pagination controls & Items-per-page dropdown --- diff --git a/public/js/fileListView.js b/public/js/fileListView.js index 8cb2128..5e4ba7c 100644 --- a/public/js/fileListView.js +++ b/public/js/fileListView.js @@ -340,6 +340,32 @@ export function renderFileTable(folder, container) { fileListContent.innerHTML = combinedTopHTML + headerHTML + rowsHTML + bottomControlsHTML; + // pagination clicks + const prevBtn = document.getElementById("prevPageBtn"); + if (prevBtn) prevBtn.addEventListener("click", () => { + if (window.currentPage > 1) { + window.currentPage--; + renderFileTable(folder, container); + } + }); + const nextBtn = document.getElementById("nextPageBtn"); + if (nextBtn) nextBtn.addEventListener("click", () => { + // totalPages is computed above in this scope + if (window.currentPage < totalPages) { + window.currentPage++; + renderFileTable(folder, container); + } + }); + + // items-per-page selector + const itemsSelect = document.getElementById("itemsPerPageSelect"); + if (itemsSelect) itemsSelect.addEventListener("change", e => { + window.itemsPerPage = parseInt(e.target.value, 10); + localStorage.setItem("itemsPerPage", window.itemsPerPage); + window.currentPage = 1; + renderFileTable(folder, container); + }); + // hook up the master checkbox const selectAll = document.getElementById("selectAll"); if (selectAll) { @@ -637,6 +663,31 @@ export function renderGalleryView(folder, container) { // --- Now wire up all behaviors without inline handlers --- + // ADD: pagination buttons for gallery + const prevBtn = document.getElementById("prevPageBtn"); + if (prevBtn) prevBtn.addEventListener("click", () => { + if (window.currentPage > 1) { + window.currentPage--; + renderGalleryView(folder, container); + } + }); + const nextBtn = document.getElementById("nextPageBtn"); + if (nextBtn) nextBtn.addEventListener("click", () => { + if (window.currentPage < totalPages) { + window.currentPage++; + renderGalleryView(folder, container); + } + }); + + // ADD: items-per-page selector for gallery + const itemsSelect = document.getElementById("itemsPerPageSelect"); + if (itemsSelect) itemsSelect.addEventListener("change", e => { + window.itemsPerPage = parseInt(e.target.value, 10); + localStorage.setItem("itemsPerPage", window.itemsPerPage); + window.currentPage = 1; + renderGalleryView(folder, container); + }); + // cache images on load fileListContent.querySelectorAll('.gallery-thumbnail').forEach(img => { const key = img.dataset.cacheKey;