jukka/tykkaa.fi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add pagination to admin post list (20 per page)

Browse Source 
Shows 20 posts at a time with 'Näytä lisää' button. Search also filters by author/category and resets pagination.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jukka Lampikoski
2026-03-08 19:38:56 +02:00
parent 9c4d222e9d
commit ccd3762524
1 changed files with 29 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
admin.html
View File

@@ -402,10 +402,13 @@
<!-- POST LIST --> <!-- POST LIST -->
<section class="admin-panel"> <section class="admin-panel">
<h2 id="lbl_all_posts">Kaikki julkaisut</h2> <h2 id="lbl_all_posts">Kaikki julkaisut</h2>
<input type="text" id="postSearch" placeholder="Hae julkaisuja..." oninput="filterPostList()" <input type="text" id="postSearch" placeholder="Hae julkaisuja..." oninput="adminVisible=ADMIN_PER_PAGE;filterPostList()"
style="width:100%;padding:9px 13px;border:2px solid #e8d5c0;border-radius:8px;font-size:0.95rem; style="width:100%;padding:9px 13px;border:2px solid #e8d5c0;border-radius:8px;font-size:0.95rem;
font-family:Georgia,serif;color:#3b2a1a;outline:none;margin-bottom:12px;box-sizing:border-box;" /> font-family:Georgia,serif;color:#3b2a1a;outline:none;margin-bottom:12px;box-sizing:border-box;" />
<div class="post-list" id="postList"></div> <div class="post-list" id="postList"></div>
<div id="adminLoadMore" style="text-align:center;margin:12px 0;display:none">
<button onclick="adminShowMore()" style="padding:8px 28px;font-size:0.9rem;border:2px solid #c4956a;background:#fff;color:#8b5e3c;border-radius:20px;cursor:pointer;font-weight:600">Näytä lisää</button>
</div>
</section> </section>
</div> </div>
@@ -884,9 +887,13 @@
// =========================== // ===========================
// RENDER POST LIST // RENDER POST LIST
// =========================== // ===========================
const ADMIN_PER_PAGE = 20;
let adminVisible = ADMIN_PER_PAGE;
function renderPostList() { function renderPostList() {
const posts = ADMIN.posts; const posts = ADMIN.posts;
const el = document.getElementById('postList'); const el = document.getElementById('postList');
adminVisible = ADMIN_PER_PAGE;
if (!posts.length) { el.innerHTML = `<p class="empty-state">${at('empty')}</p>`; return; } if (!posts.length) { el.innerHTML = `<p class="empty-state">${at('empty')}</p>`; return; }
el.innerHTML = posts.map(p => ` el.innerHTML = posts.map(p => `
<div class="post-item"> <div class="post-item">
@@ -901,14 +908,31 @@
</div> </div>
</div> </div>
`).join(''); `).join('');
filterPostList();
} }
function filterPostList() { function filterPostList() {
const q = document.getElementById('postSearch').value.toLowerCase(); const q = document.getElementById('postSearch')?.value.toLowerCase() || '';
document.querySelectorAll('#postList .post-item').forEach(el => { const items = document.querySelectorAll('#postList .post-item');
const text = el.querySelector('h3').textContent.toLowerCase(); let matched = 0, shown = 0;
el.style.display = text.includes(q) ? '' : 'none'; items.forEach(el => {
const text = (el.querySelector('h3')?.textContent || '').toLowerCase() +
(el.querySelector('.post-item-info p')?.textContent || '').toLowerCase();
if (!q || text.includes(q)) {
matched++;
el.style.display = matched <= adminVisible ? '' : 'none';
if (matched <= adminVisible) shown++;
} else {
el.style.display = 'none';
}
}); });
const wrap = document.getElementById('adminLoadMore');
if (wrap) wrap.style.display = matched > shown ? '' : 'none';
}
function adminShowMore() {
adminVisible += ADMIN_PER_PAGE;
filterPostList();
} }
// =========================== // ===========================