openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(shopping): custom categories - add, rename, delete and reorder (#26)

Browse Source 
- New DB table shopping_categories (migration v5) seeds 9 default
  categories with Lucide icons and sort_order
- Backend CRUD routes: GET/POST/PUT/DELETE /shopping/categories
  plus PATCH /shopping/categories/reorder
- Category validation now uses DB instead of hardcoded constant;
  items of deleted category are moved to the next available one
- Frontend shopping page loads categories from API, dropdown and
  grouping reflect custom order dynamically
- Settings -> Shopping section: list categories with up/down buttons,
  click-to-rename, delete with confirmation; add new categories inline
- i18n keys added in de/en/sv/it
This commit is contained in:
Ulas
2026-04-05 17:24:06 +02:00
parent 517e4454d0
commit 2dc8984c3e
11 changed files with 545 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/pages/settings.js
+165 -3
View File
@@ -40,18 +40,21 @@ export async function render(container, { user }) {
let googleStatus = { configured: false, connected: false, lastSync: null };
let appleStatus = { configured: false, lastSync: null };
let prefs = { visible_meal_types: ['breakfast', 'lunch', 'dinner', 'snack'], currency: 'EUR' };
let categories = [];
try {
const [usersRes, gStatus, aStatus, prefsRes] = await Promise.allSettled([
const [usersRes, gStatus, aStatus, prefsRes, catsRes] = await Promise.allSettled([
user.role === 'admin' ? auth.getUsers() : Promise.resolve({ data: [] }),
api.get('/calendar/google/status'),
api.get('/calendar/apple/status'),
api.get('/preferences'),
api.get('/shopping/categories'),
]);
if (usersRes.status === 'fulfilled') users = usersRes.value.data ?? [];
if (gStatus.status === 'fulfilled') googleStatus = gStatus.value;
if (aStatus.status === 'fulfilled') appleStatus = aStatus.value;
if (prefsRes.status === 'fulfilled') prefs = prefsRes.value.data ?? prefs;
if (catsRes.status === 'fulfilled') categories = catsRes.value.data ?? [];
} catch (_) { /* non-critical */ }
const googleStatusText = googleStatus.connected
@@ -142,6 +145,24 @@ export async function render(container, { user }) {
</div>
</section>
<!-- Einkauf: Kategorien -->
<section class="settings-section">
<h2 class="settings-section__title">${t('settings.sectionShopping')}</h2>
<div class="settings-card">
<h3 class="settings-card__title">${t('settings.shoppingCategoriesLabel')}</h3>
<p class="form-hint" style="margin-bottom:var(--space-3)">${t('settings.shoppingCategoriesHint')}</p>
<ul class="cat-list" id="cat-list">
${categories.map((c, i) => categoryRowHtml(c, i === 0, i === categories.length - 1)).join('')}
</ul>
<form class="cat-add-form" id="cat-add-form" novalidate autocomplete="off">
<input class="form-input" type="text" id="cat-add-input"
placeholder="${t('settings.shoppingCategoryPlaceholder')}"
maxlength="60" />
<button type="submit" class="btn btn--primary">${t('common.add')}</button>
</form>
</div>
</section>
<!-- Mein Konto -->
<section class="settings-section">
<h2 class="settings-section__title">${t('settings.sectionAccount')}</h2>
@@ -317,14 +338,15 @@ export async function render(container, { user }) {
});
}
bindEvents(container, user);
bindEvents(container, user, categories);
}
// --------------------------------------------------------
// Event-Binding
// --------------------------------------------------------
function bindEvents(container, user) {
function bindEvents(container, user, categories) {
bindCategoryEvents(container);
// Theme-Toggle
const themeToggle = container.querySelector('#theme-toggle');
if (themeToggle) {
@@ -585,6 +607,146 @@ function bindDeleteButtons(container, user) {
}
// --------------------------------------------------------
// Kategorie-Verwaltung
// --------------------------------------------------------
function categoryRowHtml(cat, isFirst, isLast) {
return `
<li class="cat-row" data-cat-id="${cat.id}">
<i data-lucide="${esc(cat.icon)}" class="cat-row__icon" aria-hidden="true"></i>
<span class="cat-row__name" data-action="rename-cat" title="${t('settings.shoppingCategoryRenameHint')}">${esc(cat.name)}</span>
<div class="cat-row__actions">
<button class="btn btn--icon btn--ghost" data-action="move-cat-up" data-id="${cat.id}"
aria-label="${t('settings.shoppingCategoryMoveUp')}"
${isFirst ? 'disabled' : ''}>
<i data-lucide="chevron-up" style="width:16px;height:16px" aria-hidden="true"></i>
</button>
<button class="btn btn--icon btn--ghost" data-action="move-cat-down" data-id="${cat.id}"
aria-label="${t('settings.shoppingCategoryMoveDown')}"
${isLast ? 'disabled' : ''}>
<i data-lucide="chevron-down" style="width:16px;height:16px" aria-hidden="true"></i>
</button>
<button class="btn btn--icon btn--danger-outline" data-action="delete-cat" data-id="${cat.id}"
aria-label="${t('settings.shoppingCategoryDelete')}">
<i data-lucide="trash-2" style="width:14px;height:14px" aria-hidden="true"></i>
</button>
</div>
</li>`;
}
function renderCatList(container, cats) {
const list = container.querySelector('#cat-list');
if (!list) return;
// DOM-API statt innerHTML (Security-Constraint des Projekts)
list.replaceChildren();
cats.forEach((c, i) => {
const tmp = document.createElement('template');
tmp.innerHTML = categoryRowHtml(c, i === 0, i === cats.length - 1);
list.appendChild(tmp.content.firstElementChild);
});
if (window.lucide) window.lucide.createIcons();
}
function bindCategoryEvents(container) {
let cats = [];
api.get('/shopping/categories').then((res) => {
cats = res.data ?? [];
renderCatList(container, cats);
}).catch(() => {});
const addForm = container.querySelector('#cat-add-form');
if (addForm) {
addForm.addEventListener('submit', async (e) => {
e.preventDefault();
const input = container.querySelector('#cat-add-input');
const name = input.value.trim();
if (!name) return;
try {
const res = await api.post('/shopping/categories', { name });
cats.push(res.data);
renderCatList(container, cats);
input.value = '';
input.focus();
window.oikos?.showToast(t('settings.shoppingCategoryAdded'), 'success');
} catch (err) {
window.oikos?.showToast(err.message, 'danger');
}
});
}
const catList = container.querySelector('#cat-list');
if (!catList) return;
catList.addEventListener('click', async (e) => {
const target = e.target.closest('[data-action]');
if (!target) return;
const action = target.dataset.action;
const rowEl = target.closest('[data-cat-id]');
const id = rowEl ? Number(rowEl.dataset.catId) : Number(target.dataset.id);
if (action === 'rename-cat') {
const cat = cats.find((c) => c.id === id);
if (!cat) return;
const { promptModal } = await import('/components/modal.js');
const newName = await promptModal(t('settings.shoppingCategoryRenamePrompt'), cat.name);
if (!newName || newName === cat.name) return;
try {
const res = await api.put(`/shopping/categories/${id}`, { name: newName });
const idx = cats.findIndex((c) => c.id === id);
if (idx >= 0) cats[idx] = res.data;
renderCatList(container, cats);
window.oikos?.showToast(t('settings.shoppingCategoryRenamed'), 'success');
} catch (err) {
window.oikos?.showToast(err.message, 'danger');
}
}
if (action === 'move-cat-up') {
const idx = cats.findIndex((c) => c.id === id);
if (idx <= 0) return;
[cats[idx - 1], cats[idx]] = [cats[idx], cats[idx - 1]];
renderCatList(container, cats);
try {
await api.patch('/shopping/categories/reorder', { order: cats.map((c) => c.id) });
} catch (err) {
window.oikos?.showToast(err.message, 'danger');
}
}
if (action === 'move-cat-down') {
const idx = cats.findIndex((c) => c.id === id);
if (idx < 0 || idx >= cats.length - 1) return;
[cats[idx], cats[idx + 1]] = [cats[idx + 1], cats[idx]];
renderCatList(container, cats);
try {
await api.patch('/shopping/categories/reorder', { order: cats.map((c) => c.id) });
} catch (err) {
window.oikos?.showToast(err.message, 'danger');
}
}
if (action === 'delete-cat') {
const cat = cats.find((c) => c.id === id);
if (!cat) return;
const { confirmModal: confirmDel } = await import('/components/modal.js');
if (!await confirmDel(
t('settings.shoppingCategoryDeleteConfirm', { name: cat.name }),
{ danger: true, confirmLabel: t('common.delete') }
)) return;
try {
await api.delete(`/shopping/categories/${id}`);
cats = cats.filter((c) => c.id !== id);
renderCatList(container, cats);
window.oikos?.showToast(t('settings.shoppingCategoryDeleted'), 'default');
} catch (err) {
window.oikos?.showToast(err.message, 'danger');
}
}
});
}
function memberHtml(u) {
return `
<li class="settings-member" data-id="${u.id}">
public/pages/shopping.js
+49 -37
View File
@@ -19,35 +19,35 @@ const SWIPE_THRESHOLD = 80; // px - Mindestweg für Aktion
const SWIPE_MAX_VERT = 12; // px - vertikaler Toleranzbereich
const SWIPE_LOCK_VERT = 30; // px - ab diesem Weg gilt es als Scroll
const ITEM_CATEGORIES = [
'Obst & Gemüse', 'Backwaren', 'Milchprodukte', 'Fleisch & Fisch',
'Tiefkühl', 'Getränke', 'Haushalt', 'Drogerie', 'Sonstiges',
];
const CATEGORY_LABELS = () => ({
'Obst & Gemüse': t('shopping.catFruitVeg'),
'Backwaren': t('shopping.catBakery'),
'Milchprodukte': t('shopping.catDairy'),
'Fleisch & Fisch': t('shopping.catMeatFish'),
'Tiefkühl': t('shopping.catFrozen'),
'Getränke': t('shopping.catDrinks'),
'Haushalt': t('shopping.catHousehold'),
'Drogerie': t('shopping.catDrugstore'),
'Sonstiges': t('shopping.catMisc'),
});
const CATEGORY_ICONS = {
'Obst & Gemüse': 'apple',
'Backwaren': 'wheat',
'Milchprodukte': 'milk',
'Fleisch & Fisch':'beef',
'Tiefkühl': 'snowflake',
'Getränke': 'cup-soda',
'Haushalt': 'spray-can',
'Drogerie': 'pill',
'Sonstiges': 'shopping-basket',
// Übersetzungs-Map für die Standard-Kategorien (DB-Name → i18n-Key)
const DEFAULT_CATEGORY_I18N = {
'Obst & Gemüse': 'shopping.catFruitVeg',
'Backwaren': 'shopping.catBakery',
'Milchprodukte': 'shopping.catDairy',
'Fleisch & Fisch': 'shopping.catMeatFish',
'Tiefkühl': 'shopping.catFrozen',
'Getränke': 'shopping.catDrinks',
'Haushalt': 'shopping.catHousehold',
'Drogerie': 'shopping.catDrugstore',
'Sonstiges': 'shopping.catMisc',
};
/** Übersetzten Label für eine Kategorie zurückgeben. */
function catLabel(name) {
const key = DEFAULT_CATEGORY_I18N[name];
return key ? t(key) : name;
}
/** Icon für eine Kategorie (aus state.categories, Fallback 'tag'). */
function catIcon(name) {
return state.categories.find((c) => c.name === name)?.icon ?? 'tag';
}
/** Kategorienamen in DB-Reihenfolge. */
function categoryNames() {
return state.categories.map((c) => c.name);
}
// --------------------------------------------------------
// State
// --------------------------------------------------------
@@ -57,6 +57,7 @@ const state = {
activeListId: null,
items: [],
activeList: null,
categories: [], // { id, name, icon, sort_order }[]
};
// --------------------------------------------------------
@@ -66,13 +67,14 @@ const state = {
function groupItemsByCategory(items) {
const grouped = {};
for (const item of items) {
const cat = item.category || 'Sonstiges';
const cat = item.category || (state.categories[0]?.name ?? 'Sonstiges');
(grouped[cat] = grouped[cat] || []).push(item);
}
// In Supermarkt-Gang-Reihenfolge zurückgeben
return ITEM_CATEGORIES
.filter((c) => grouped[c])
.map((c) => [c, grouped[c]]);
// In DB-Reihenfolge zurückgeben; unbekannte Kategorien ans Ende
const names = categoryNames();
const known = names.filter((c) => grouped[c]).map((c) => [c, grouped[c]]);
const unknown = Object.keys(grouped).filter((c) => !names.includes(c)).map((c) => [c, grouped[c]]);
return [...known, ...unknown];
}
// --------------------------------------------------------
@@ -155,7 +157,7 @@ function renderListContent(container) {
<div class="autocomplete-dropdown" id="autocomplete-dropdown" hidden></div>
</div>
<select class="quick-add__cat" id="item-cat-select" aria-label="${t('shopping.categoryLabel')}">
${(() => { const labels = CATEGORY_LABELS(); return ITEM_CATEGORIES.map((c) => `<option value="${c}">${labels[c] || c}</option>`).join(''); })()}
${state.categories.map((c) => `<option value="${esc(c.name)}">${esc(catLabel(c.name))}</option>`).join('')}
</select>
<button class="quick-add__btn" type="submit" aria-label="${t('shopping.addItemLabel')}">
<i data-lucide="plus" style="width:20px;height:20px" aria-hidden="true"></i>
@@ -189,13 +191,12 @@ function renderItems() {
</div>`;
}
const catLabels = CATEGORY_LABELS();
const groups = groupItemsByCategory(state.items);
return groups.map(([cat, items]) => `
<div class="item-category">
<div class="item-category__header">
<i data-lucide="${CATEGORY_ICONS[cat] ?? 'tag'}" class="item-category__icon" aria-hidden="true"></i>
${catLabels[cat] || cat}
<i data-lucide="${catIcon(cat)}" class="item-category__icon" aria-hidden="true"></i>
${esc(catLabel(cat))}
</div>
${items.map(renderItem).join('')}
</div>`).join('');
@@ -592,10 +593,21 @@ async function loadLists() {
}
}
async function loadCategories() {
try {
const data = await api.get('/shopping/categories');
state.categories = data.data ?? [];
} catch {
state.categories = [];
}
}
async function loadItems(listId) {
const data = await api.get(`/shopping/${listId}/items`);
state.items = data.data ?? [];
state.activeList = data.list ?? null;
// Kategorien aus API-Antwort übernehmen wenn vorhanden (immer aktuell)
if (data.categories?.length) state.categories = data.categories;
}
async function switchList(listId, container) {
@@ -835,7 +847,7 @@ export async function render(container, { user }) {
`;
try {
await loadLists();
await Promise.all([loadCategories(), loadLists()]);
if (state.lists.length) {
state.activeListId = state.lists[0].id;
await loadItems(state.activeListId);