aboutsummaryrefslogtreecommitdiff
path: root/src/routes/catalog
diff options
context:
space:
mode:
Diffstat (limited to 'src/routes/catalog')
-rw-r--r--src/routes/catalog/+page.server.ts54
-rw-r--r--src/routes/catalog/+page.svelte129
2 files changed, 32 insertions, 151 deletions
diff --git a/src/routes/catalog/+page.server.ts b/src/routes/catalog/+page.server.ts
index a3a611e..69a775a 100644
--- a/src/routes/catalog/+page.server.ts
+++ b/src/routes/catalog/+page.server.ts
@@ -1,52 +1,28 @@
import { fail } from '@sveltejs/kit';
-import { db } from '$lib/server/db';
-import { groceries, categories, references } from '$lib/server/db/schema';
-import { eq, desc } from 'drizzle-orm';
+import { loadAll, toggle } from '$lib/server/services/groceries';
+import { numericId } 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 const load: PageServerLoad = async () => {
- const [items, cats, refs] = await Promise.all([
- db.select().from(groceries).orderBy(desc(groceries.createdAt)),
- db.select().from(categories).orderBy(desc(categories.name)),
- db.select().from(references).orderBy(desc(references.qualityScore)),
- ]);
-
- const catMap = new Map(cats.map((c) => [c.id, c.name]));
- const bestRef = new Map<number, (typeof refs)[number]>();
- for (const ref of refs) {
- if (!bestRef.has(ref.groceryId)) {
- bestRef.set(ref.groceryId, ref);
- }
- }
+export interface CatalogOutput {
+ items: EnrichedGrocery[];
+ categories: Category[];
+}
- return {
- items: items.map((i) => ({
- ...i,
- categoryName: i.categoryId ? (catMap.get(i.categoryId) ?? null) : null,
- bestRef: bestRef.get(i.id) ?? null,
- })),
- categories: cats,
- };
+export const load: PageServerLoad = async () => {
+ return loadAll();
};
export const actions: Actions = {
toggle: async ({ request }) => {
const data = await request.formData();
- const id = Number(data.get('id'));
-
- const [item] = await db
- .select()
- .from(groceries)
- .where(eq(groceries.id, id));
- if (!item) {
- return fail(404, { error: 'Article introuvable' });
+ try {
+ const id = numericId(data.get('id'));
+ await toggle(id);
+ } catch {
+ return fail(400, { error: 'ID invalide' });
}
-
- await db
- .update(groceries)
- .set({ checked: !item.checked })
- .where(eq(groceries.id, id));
-
return { success: true };
},
};
diff --git a/src/routes/catalog/+page.svelte b/src/routes/catalog/+page.svelte
index 0fda271..4b43c02 100644
--- a/src/routes/catalog/+page.svelte
+++ b/src/routes/catalog/+page.svelte
@@ -1,5 +1,4 @@
<script lang="ts">
- import '../../app.css';
import { enhance } from '$app/forms';
let { data, form } = $props();
@@ -24,20 +23,26 @@
<h3 class="category-name">{cat}</h3>
<ul class="item-list">
{#each items as item (item.id)}
- <li class="catalog-item">
- <button name="id" value={item.id} type="submit">
+ <li class="item-row item-row--fixed">
+ <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}
- &nbsp;{item.bestRef.price.toFixed(2)} {item.bestRef.unit}
- {/if}
- {#if item.bestRef.qualityScore != null}
- &nbsp;({item.bestRef.qualityScore}/100)
- {/if}
- </span>
+ <span class="best-ref"
+ >{item.bestRef.reference}
+ {#if item.bestRef.price && item.bestRef.unit}
+ &nbsp;{item.bestRef.price.toFixed(2)} {item.bestRef.unit}
+ {/if}
+ {#if item.bestRef.qualityScore != null}
+ &nbsp;({item.bestRef.qualityScore}/100)
+ {/if}
+ </span>
{/if}
</span>
</button>
@@ -50,114 +55,14 @@
{/if}
<style>
- .item-list {
- list-style: none;
- display: flex;
- flex-direction: column;
- gap: 0.375rem;
- }
-
- .item-list li button {
- width: 100%;
- text-align: left;
- padding: 0 0.875rem;
- height: 100%;
- border: none;
- border-radius: 0.75rem;
- background: var(--surface);
- font-size: 1rem;
- font-weight: 500;
- display: flex;
- align-items: center;
- transition: all 0.2s ease;
- box-shadow: 0 1px 2px var(--shadow);
- }
-
- .item-list li button:hover {
- background: #fff8f5;
- box-shadow: 0 2px 6px rgba(217, 119, 87, 0.1);
- transform: translateY(-1px);
- }
-
- .catalog-item {
- display: flex;
- gap: 0.5rem;
- align-items: center;
- height: 2.75rem;
- }
-
- .catalog-item button:first-child {
- flex-grow: 1;
- width: auto;
- display: flex;
- align-items: center;
- height: 100%;
- }
-
- .item-text {
- display: flex;
- flex-direction: column;
- text-align: left;
- line-height: 1.2;
- gap: 0.0625rem;
- overflow: hidden;
- }
-
.checked {
text-decoration: line-through;
color: var(--text-secondary);
font-weight: 400;
}
- .best-ref {
- font-size: 0.75rem;
- color: var(--text-secondary);
- font-weight: 400;
- }
-
- .ref-link {
- width: 2.75rem;
- flex-shrink: 0;
- height: 2.75rem;
- aspect-ratio: 1;
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 0.75rem;
- background: var(--surface);
- color: var(--text-secondary);
- text-decoration: none;
- font-size: 1rem;
- transition: all 0.2s ease;
- box-shadow: 0 1px 2px var(--shadow);
- }
-
- .ref-link:hover {
- background: #fff8f5;
- color: var(--accent);
- box-shadow: 0 2px 6px rgba(217, 119, 87, 0.1);
- transform: translateY(-1px);
- }
-
.empty {
- color: var(--text-secondary);
- font-size: 0.9375rem;
margin-top: 1rem;
- text-align: center;
padding: 2rem;
- background: var(--surface);
- border-radius: 0.75rem;
- box-shadow: 0 1px 2px var(--shadow);
- }
-
- .category-name {
- font-size: 0.75rem;
- font-weight: 700;
- text-transform: uppercase;
- letter-spacing: 0.08em;
- color: var(--accent);
- margin: 1.25rem 0 0.5rem;
- padding-left: 0.5rem;
- border-left: 3px solid var(--accent);
}
</style>
generated by cgit v1.3 (git 2.53.0) at 2026-10-18 21:54:00 +0000