diff options
Diffstat (limited to 'src/routes/groceries/catalog')
| -rw-r--r-- | src/routes/groceries/catalog/+page.server.ts | 49 | ||||
| -rw-r--r-- | src/routes/groceries/catalog/+page.svelte | 211 |
2 files changed, 260 insertions, 0 deletions
diff --git a/src/routes/groceries/catalog/+page.server.ts b/src/routes/groceries/catalog/+page.server.ts new file mode 100644 index 0000000..22464dc --- /dev/null +++ b/src/routes/groceries/catalog/+page.server.ts @@ -0,0 +1,49 @@ +import { fail } from '@sveltejs/kit'; +import { + loadAll, + toggle, + bulkUpdateGroceryCategory, +} from '$lib/server/services/groceries'; +import { + numericId, + parseOptionalNumber, +} from '$lib/server/services/validation'; +import type { EnrichedGrocery } from '$lib/server/services/groceries'; +import type { Category } from '$lib/server/services/types'; +import type { Actions, PageServerLoad } from './$types'; + +export interface CatalogOutput { + items: EnrichedGrocery[]; + categories: Category[]; +} + +export const load: PageServerLoad = async () => { + return loadAll(); +}; + +export const actions: Actions = { + toggle: async ({ request }) => { + const data = await request.formData(); + try { + const id = numericId(data.get('id')); + await toggle(id); + } catch { + return fail(400, { error: 'ID invalide' }); + } + return { success: true }; + }, + + bulkUpdateCategory: async ({ request }) => { + const data = await request.formData(); + const ids = data.getAll('ids').map(numericId); + const rawCategoryId = parseOptionalNumber(data.get('category_id')); + const categoryId = rawCategoryId === -1 ? null : rawCategoryId; + + if (ids.length === 0) { + return fail(400, { error: 'Aucun article sélectionné' }); + } + + await bulkUpdateGroceryCategory(ids, categoryId); + return { success: true, type: 'bulkUpdate' as const }; + }, +}; diff --git a/src/routes/groceries/catalog/+page.svelte b/src/routes/groceries/catalog/+page.svelte new file mode 100644 index 0000000..4cbcc27 --- /dev/null +++ b/src/routes/groceries/catalog/+page.svelte @@ -0,0 +1,211 @@ +<script lang="ts"> + import { enhance } from '$app/forms'; + import { SvelteSet } from 'svelte/reactivity'; + + let { data, form } = $props(); + + let catalogItems = $derived(data?.items ?? []); + let selectedIds = new SvelteSet<number>(); + let searchQuery = $state(''); + + let filteredItems = $derived( + searchQuery.trim() === '' + ? catalogItems + : catalogItems.filter((item) => + item.name.toLowerCase().includes(searchQuery.toLowerCase()), + ), + ); + + function toggleId(id: number) { + if (selectedIds.has(id)) selectedIds.delete(id); + else selectedIds.add(id); + } + + function groupByCategory(items: typeof catalogItems) { + const groups: Record<string, typeof catalogItems> = {}; + for (const item of items) { + const key = item.categoryName ?? 'Non catégorisé'; + (groups[key] ??= []).push(item); + } + const result: [string, typeof catalogItems][] = []; + for (const cat of data.categories) { + if (groups[cat.name]?.length > 0) { + result.push([cat.name, groups[cat.name]]); + } + } + if (groups['Non catégorisé']?.length > 0) { + result.unshift(['Non catégorisé', groups['Non catégorisé']]); + } + return result; + } +</script> + +{#if catalogItems.length > 0} + <div class="bulk-bar"> + <form + method="POST" + action="?/bulkUpdateCategory" + use:enhance={() => { + return async ({ update }) => { + await update({ reset: false }); + selectedIds.clear(); + }; + }} + > + {#each Array.from(selectedIds) as id (id)} + <input type="hidden" name="ids" value={id} /> + {/each} + <select name="category_id" class="form-select"> + <option value={-1}>Non catégorisé</option> + {#each data.categories as cat (cat.id)} + <option value={cat.id}>{cat.name}</option> + {/each} + </select> + <button + class="btn-primary" + type="submit" + disabled={selectedIds.size === 0} + > + Mettre à jour ({selectedIds.size}) + </button> + </form> + </div> +{/if} + +<main> + {#if form?.error} + <p class="error">{form.error}</p> + {/if} + + {#if catalogItems.length === 0} + <p class="empty">Aucun article</p> + {:else} + <input + type="search" + bind:value={searchQuery} + placeholder="Rechercher un article..." + class="search-input" + /> + + {#if filteredItems.length === 0} + <p class="empty">Aucun résultat</p> + {:else} + <form method="POST" action="?/toggle" use:enhance> + {#each groupByCategory(filteredItems) as [cat, items] (cat)} + <h3 class="category-name">{cat}</h3> + <ul class="item-list"> + {#each items as item (item.id)} + <li class="item-row item-row--fixed"> + <input + type="checkbox" + class="item-check" + checked={selectedIds.has(item.id)} + onchange={() => toggleId(item.id)} + /> + <button + class="item-btn item-btn--grow" + name="id" + value={item.id} + type="submit" + aria-pressed={item.checked} + > + <span class="item-text"> + <span class:checked={item.checked}>{item.name}</span> + {#if item.bestRef} + <span class="best-ref" + >{item.bestRef.reference} + {#if item.bestRef.price && item.bestRef.unit} + {item.bestRef.price.toFixed(2)} + {item.bestRef.unit} + {/if} + {#if item.bestRef.qualityScore != null} + ({item.bestRef.qualityScore}/100) + {/if} + </span> + {/if} + </span> + </button> + <a + class="ref-link" + href="/grocery/{item.id}?from=/groceries/catalog">→</a + > + </li> + {/each} + </ul> + {/each} + </form> + {/if} + {/if} +</main> + +<style> + .bulk-bar { + display: flex; + gap: 0.5rem; + padding: 0.5rem 1rem; + position: sticky; + top: var(--nav-height); + background: var(--bg); + border-bottom: 1px solid var(--border); + z-index: 10; + } + + .bulk-bar form { + display: flex; + gap: 0.5rem; + align-items: center; + width: 100%; + } + + .bulk-bar .form-select { + flex: 1; + min-width: 0; + } + + .bulk-bar .btn-primary { + padding: 0.75rem 1rem; + align-self: center; + white-space: nowrap; + } + + .bulk-bar .btn-primary:disabled { + opacity: 0.5; + cursor: not-allowed; + transform: none; + box-shadow: none; + } + + .item-check { + width: 1.25rem; + height: 1.25rem; + accent-color: var(--accent); + cursor: pointer; + flex-shrink: 0; + } + + .checked { + text-decoration: line-through; + color: var(--text-secondary); + font-weight: 400; + } + + .error { + margin-bottom: 1rem; + } + + .empty { + margin-top: 1rem; + padding: 2rem; + } + + .search-input { + width: 100%; + padding: 0.75rem 1rem; + border: 1px solid var(--border); + border-radius: 0.5rem; + background: var(--surface); + color: var(--text); + font-size: 1rem; + margin-top: 1rem; + } +</style> |