ulfr/recipe-mockup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Keep checked items in place within their category
All checks were successful
Build and Deploy / build-and-push (push) Successful in 1m16s
Details

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Rafał
2026-04-12 00:04:07 +02:00
parent bb529b7bac
commit 71b91b50b4
1 changed files with 11 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
js/views/ShoppingList.js
View File

@@ -123,8 +123,6 @@ function renderBoard() {
if (!root) return; if (!root) return;
const items = getKitchenItems(); const items = getKitchenItems();
const unchecked = items.filter((i) => !i.checked);
const checked = items.filter((i) => i.checked);
if (items.length === 0) { if (items.length === 0) {
root.innerHTML = ` root.innerHTML = `
@@ -138,37 +136,20 @@ function renderBoard() {
return; return;
} }
let html = ''; const groups = groupItemsByCategory(items);
const html = groups.map(({ cat, items: catItems }) => {
// Unchecked items grouped by category
if (unchecked.length > 0) {
const groups = groupItemsByCategory(unchecked);
html += groups.map(({ cat, items: catItems }) => {
const icon = CATEGORY_ICONS[cat] || 'fa-jar'; const icon = CATEGORY_ICONS[cat] || 'fa-jar';
const uncheckedCount = catItems.filter((i) => !i.checked).length;
return ` return `
<section class="mb-4"> <section class="mb-4">
<div class="flex items-center gap-1.5 mb-2 px-1"> <div class="flex items-center gap-1.5 mb-2 px-1">
<i class="fas ${icon} text-[10px]" style="color:#9b978f;"></i> <i class="fas ${icon} text-[10px]" style="color:#9b978f;"></i>
<p class="text-[10px] font-bold uppercase tracking-wider" style="color:#9b978f;">${esc(categoryLabel(cat))}</p> <p class="text-[10px] font-bold uppercase tracking-wider" style="color:#9b978f;">${esc(categoryLabel(cat))}</p>
<span class="text-[10px]" style="color:#6d6c67;">${catItems.length}</span> <span class="text-[10px]" style="color:#6d6c67;">${uncheckedCount}/${catItems.length}</span>
</div> </div>
${catItems.map((item) => itemRowHtml(item)).join('')} ${catItems.map((item) => itemRowHtml(item)).join('')}
</section>`; </section>`;
}).join(''); }).join('');
}
// Checked items at the bottom
if (checked.length > 0) {
html += `
<section class="mt-4 pt-3" style="border-top:1px solid #3a3a38;">
<div class="flex items-center gap-1.5 mb-2 px-1">
<i class="fas fa-check text-[10px]" style="color:#6d6c67;"></i>
<p class="text-[10px] font-bold uppercase tracking-wider" style="color:#6d6c67;">Kupione</p>
<span class="text-[10px]" style="color:#6d6c67;">${checked.length}</span>
</div>
${checked.map((item) => itemRowHtml(item)).join('')}
</section>`;
}
root.innerHTML = html; root.innerHTML = html;
bindRowEvents(root); bindRowEvents(root);