✨ Products listing in admin

src/hooks.server.ts

@@ -1,11 +1,11 @@
-import { users } from '$lib/server/db';
+import { collections } from '$lib/server/db';
 import type { Handle } from '@sveltejs/kit';
 
 export const handle: Handle = async ({ event, resolve }) => {
 	const token = event.cookies.get('bergereToken');
 
 	if (token) {
-		event.locals.user = await users.findOne({ token });
+		event.locals.user = await collections.users.findOne({ token });
 	}
 
 	const response = await resolve(event);

src/lib/server/db/index.ts

@@ -18,5 +18,5 @@ const users = createUserCollection(db, client);
 const products = createProductCollection(db);
 const { pictures, picturesFs } = createPictureCollections(db);
 
-export { client, db, pages, users, pictures, picturesFs, products };
-export const collections = { products, pictures, pages, users };
+export { client, db };
+export const collections = { products, pictures, pages, users, picturesFs };

src/lib/types/Product.ts

@@ -6,7 +6,7 @@ export interface Product extends Timestamps {
 	name: string;
 	description: string;
 	price: number;
-	kind: 'armchair' | 'cushion';
+	kind: 'armchair' | 'cushion' | 'chair' | 'couch' | 'tufting';
 	state: 'draft' | 'published' | 'retired';
 
 	photos: Picture[];

src/routes/+layout.server.ts

@@ -3,7 +3,7 @@ import '$lib/server/db';
 import { pages } from '$lib/server/db/page';
 import type { Picture } from '$lib/types/Picture';
 import { filterNullish } from '$lib/utils/filterNullish';
-import { pictures } from '$lib/server/db';
+import { collections } from '$lib/server/db';
 
 export const load: LayoutServerLoad = async (input) => {
 	const pageId = input.url.pathname;
@@ -12,7 +12,7 @@ export const load: LayoutServerLoad = async (input) => {
 		const pageData = pages[pageId as keyof typeof pages];
 
 		const pictureIds = filterNullish(Object.values(pageData.pictures));
-		const pics = await pictures.find({ _id: { $in: pictureIds } }).toArray();
+		const pics = await collections.pictures.find({ _id: { $in: pictureIds } }).toArray();
 
 		return {
 			pageData,

src/routes/+layout.svelte

@@ -348,6 +348,14 @@
 		}
 	}
 
+	select.input {
+		cursor: pointer;
+	}
+
+	textarea.input {
+		max-width: calc(100% - 1rem);
+	}
+
 	/*
 @media (min-width: 1280px) { ... }
 @media (min-width: 1536px) { ... }

src/routes/admin/pages/+page.server.ts

@@ -1,10 +1,10 @@
-import { pictures } from '$lib/server/db';
+import { collections } from '$lib/server/db';
 import { pages } from '$lib/server/db/page';
 import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async () => {
 	return {
 		pages: Object.values(pages),
-		photos: await pictures.find({ productId: { $exists: false } }).toArray()
+		photos: await collections.pictures.find({ productId: { $exists: false } }).toArray()
 	};
 };

src/routes/admin/photos/[id]/+page.server.ts

@@ -1,10 +1,10 @@
 import type { Picture } from '$lib/types/Picture';
-import { client, pictures, picturesFs } from '$lib/server/db';
+import { client, collections } from '$lib/server/db';
 import { error, redirect } from '@sveltejs/kit';
 import type { PageServerLoad, Actions } from './$types';
 
 export const load: PageServerLoad = async ({ params }) => {
-	const picture = await pictures.findOne({ _id: params.id });
+	const picture = await collections.pictures.findOne({ _id: params.id });
 
 	if (!picture) {
 		throw error(404, 'Photo non trouvée');
@@ -18,7 +18,7 @@ export const load: PageServerLoad = async ({ params }) => {
 export const actions: Actions = {
 	update: async function (input) {
 		const name = String((await input.request.formData()).get('name'));
-		await pictures.updateOne(
+		await collections.pictures.updateOne(
 			{ _id: input.params.id },
 			{
 				$set: {
@@ -34,8 +34,9 @@ export const actions: Actions = {
 		let picture: Picture | null = null;
 
 		await client.withSession(async (session) => {
-			picture = (await pictures.findOneAndDelete({ _id: params.id }, { session })).value;
-			await picturesFs.deleteMany({ picture: params.id }, { session });
+			picture = (await collections.pictures.findOneAndDelete({ _id: params.id }, { session }))
+				.value;
+			await collections.picturesFs.deleteMany({ picture: params.id }, { session });
 		});
 
 		if (!picture) {

src/routes/admin/produits/+page.server.ts

@@ -0,0 +1,20 @@
+import type { PageServerLoad } from './$types';
+import { collections } from '$lib/server/db';
+
+export const load: PageServerLoad = async () => {
+	const products = await collections.products.find({}).toArray();
+	const pictures = await collections.pictures
+		.find({ productId: { $in: products.map((p) => p._id) } })
+		.sort({ createdAt: 1 })
+		.toArray();
+
+	const byId = Object.fromEntries(products.map((p) => [p._id, p]));
+
+	for (const picture of pictures) {
+		byId[picture.productId!].photos = [...(byId[picture.productId!].photos || []), picture];
+	}
+
+	return {
+		products
+	};
+};

src/routes/admin/produits/+page.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import Picture from '$lib/components/Picture.svelte';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+</script>
+
+<a href="/admin/produits/nouveau" class="link">Nouveau produit</a>
+
+<h1 class="text-sunray mt-10">Liste des produits</h1>
+
+<div class="flex flex-row flex-wrap gap-6 mt-6">
+	{#each data.products as product}
+		<div class="flex flex-col text-center">
+			<a href="/admin/produits/{product._id}" class="flex flex-col items-center">
+				<Picture picture={product.photos[0]} class="h-36 block" style="object-fit: scale-down;" />
+				<span class="mt-2">{product.name}</span>
+			</a>
+		</div>
+	{/each}
+</div>

src/routes/admin/produits/[id]/+page.server.ts

@@ -0,0 +1,52 @@
+import { collections } from '$lib/server/db';
+import type { Product } from '$lib/types/Product';
+import { error } from '@sveltejs/kit';
+import type { Actions, PageServerLoad } from './$types';
+import { omit } from 'lodash';
+
+export const load: PageServerLoad = async ({ params }) => {
+	const product = await collections.products.findOne({ _id: params.id });
+
+	if (!product) {
+		throw error(404, 'Produit non trouvé');
+	}
+
+	const pictures = await collections.pictures
+		.find({ productId: params.id })
+		.sort({ createdAt: 1 })
+		.toArray();
+	product.photos = pictures;
+
+	return {
+		product
+	};
+};
+
+export const actions: Actions = {
+	default: async ({ request, params }) => {
+		const formData = await request.formData();
+
+		const update = {
+			...(formData.get('name') && { name: formData.get('name') as string }),
+			...(formData.get('state') && { state: formData.get('state') as Product['state'] }),
+			...(formData.get('kind') && { kind: formData.get('kind') as Product['kind'] }),
+			...(formData.get('description') && {
+				description: (formData.get('description') as string).replaceAll('\r', '')
+			}),
+			...(formData.get('price') && { price: Number(formData.get('price')) }),
+			updatedAt: new Date()
+		};
+
+		const product = await collections.products.findOneAndUpdate(
+			{ _id: params.id },
+			{ $set: update },
+			{ returnDocument: 'after' }
+		);
+
+		if (!product.value) {
+			throw error(404, 'Produit non trouvé');
+		}
+
+		return {};
+	}
+};

src/routes/admin/produits/[id]/+page.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import PictureComponent from '$lib/components/Picture.svelte';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+</script>
+
+<h1 class="text-sunray">Modifier un produit</h1>
+
+<div class="flex flex-col">
+	<form method="post">
+		<label class="block w-full mt-4 leading-8">
+			Nom
+			<input type="text" name="name" class="input block" value={data.product.name} />
+		</label>
+		<label class="block w-full mt-4 leading-8">
+			Prix
+			<input type="number" name="price" class="input block" value={data.product.price} />
+		</label>
+		<label class="block w-full mt-4 leading-8">
+			Etat
+			<select name="state" value={data.product.state} class="block input">
+				<option value="draft" selected={data.product.state === 'draft'}>Privé</option>
+				<option value="published" selected={data.product.state === 'published'}>Public</option>
+				<option value="retired" selected={data.product.state === 'retired'}>Vendu</option>
+			</select>
+		</label>
+		<label class="block w-full mt-4 leading-8">
+			Type
+
+			<select name="kind" value={data.product.kind} class="block input">
+				<option value="armchair" selected={data.product.kind === 'armchair'}>Fauteuil</option>
+				<option value="chair" selected={data.product.kind === 'chair'}>Chaise</option>
+				<option value="couch" selected={data.product.kind === 'couch'}>Canapé</option>
+				<option value="cushion" selected={data.product.kind === 'cushion'}>Coussin</option>
+				<option value="tufting" selected={data.product.kind === 'tufting'}>Tufting</option>
+			</select>
+		</label>
+
+		<label class="block my-4 w-full">
+			Description
+			<textarea name="description" cols="30" rows="10" class="block input"
+				>{data.product.description}</textarea
+			>
+		</label>
+
+		<button type="submit" class="mt-4 btn">Valider</button>
+	</form>
+</div>
+
+<h2 class="text-sunray my-4">Photos</h2>
+
+<a href="/admin/photos/nouveau?productId={data.product._id}" class="link">Nouvelle photo</a>
+
+<div class="flex flex-row flex-wrap gap-6 mt-6">
+	{#each data.product.photos as photo}
+		<div class="flex flex-col text-center">
+			<a href="/admin/photos/{photo._id}" class="flex flex-col items-center">
+				<PictureComponent picture={photo} class="h-36 block" style="object-fit: scale-down;" />
+				<span>{photo.name}</span>
+			</a>
+		</div>
+	{/each}
+</div>

src/routes/admin/produits/nouveau/+page.svelte

@@ -0,0 +1,36 @@
+<h1 class="text-sunray">Ajouter un produit</h1>
+
+<form method="post" enctype="multipart/form-data" action="/admin/produits">
+	<label class="block my-4 leading-8">
+		Nom du produit
+		<input class="input block" type="text" name="name" placeholder="Nom définitif" required />
+	</label>
+
+	<label class="block my-4 leading-8">
+		Prix
+		<input class="input block" type="number" name="price" placeholder="Prix (€)" required />
+	</label>
+
+	<label class="block w-full mt-4">
+		Description
+		<textarea name="description" cols="30" rows="10" class="block w-full" />
+	</label>
+
+	<label class="block my-4 leading-8">
+		Photo de garde
+		<input type="file" name="photo" accept="image/jpeg" class="block" required />
+	</label>
+
+	<label class="block my-4 leading-8">
+		Type
+		<select name="kind">
+			<option value="armchair">Fauteuil</option>
+			<option value="chair">Chaise</option>
+			<option value="couch">Canapé</option>
+			<option value="cushion">Coussin</option>
+			<option value="tufting">Tufting</option>
+		</select>
+	</label>
+
+	<input type="submit" class="btn" />
+</form>

src/routes/compte/+page.server.ts

@@ -1,7 +1,7 @@
 import { redirect } from '@sveltejs/kit';
-import type { ServerLoad } from './$types';
+import type { PageServerLoad } from './$types';
 
-export const load: ServerLoad = (event) => {
+export const load: PageServerLoad = (event) => {
 	if (!event.locals.user) {
 		throw redirect(303, `/connexion?suivant=${encodeURIComponent(event.url.href)}`);
 	}

src/routes/compte/+page.svelte

@@ -15,11 +15,7 @@
 		<p><a href="/admin" class="link">Admin</a></p>
 	{/if}
 
-	<form
-		action="/deconnexion"
-		method="post"
-		class="text-sunray text-3xl inline-block cursor-pointer"
-	>
-		<input type="submit" value="Déconnexion" class="cursor-pointer btn" />
+	<form action="/deconnexion" method="post" class="text-sunray text-3xl inline-block">
+		<input type="submit" value="Déconnexion" class="btn" />
 	</form>
 </Container>

src/routes/connexion/+page.server.ts

@@ -1,8 +1,8 @@
 import { error, redirect } from '@sveltejs/kit';
-import { users } from '$lib/server/db';
 import bcrypt from 'bcryptjs';
 import type { Actions } from './$types';
 import { addYears } from 'date-fns';
+import { collections } from '$lib/server/db';
 
 export const actions: Actions = {
 	default: async (event) => {
@@ -14,7 +14,10 @@ export const actions: Actions = {
 
 		const email = data.get('email')!.toString().trim();
 
-		const user = await users.findOne({ email }, { collation: { locale: 'en', strength: 1 } });
+		const user = await collections.users.findOne(
+			{ email },
+			{ collation: { locale: 'en', strength: 1 } }
+		);
 
 		if (!user) {
 			throw error(404, "Utilisateur non trouvé pour l'email: " + email);
@@ -30,7 +33,7 @@ export const actions: Actions = {
 
 		if (!token) {
 			token = crypto.randomUUID();
-			await users.updateOne({ _id: user._id }, { $set: { token } });
+			await collections.users.updateOne({ _id: user._id }, { $set: { token } });
 		}
 
 		event.cookies.set('bergereToken', token, {

src/routes/contact/+page.server.ts

@@ -18,10 +18,10 @@ export const actions: Actions = {
 			};
 		}
 
-		const firstName = body.get('firstName').toString().trim();
-		const lastName = body.get('lastName').toString().trim();
-		const message = body.get('message').toString().trim();
-		const email = body.get('email').toString().trim();
+		const firstName = body.get('firstName')!.toString().trim();
+		const lastName = body.get('lastName')!.toString().trim();
+		const message = body.get('message')!.toString().trim();
+		const email = body.get('email')!.toString().trim();
 
 		await mg.messages.create('mails.bergereenchantee.fr', {
 			from: 'Formulaire de contact <contact@mails.bergereenchantee.fr>',

src/routes/contact/+page.svelte

@@ -113,7 +113,7 @@
 			</div>
 
 			<div class="w-full flex mt-4">
-				<button type="submit" class="btn ml-auto cursor-pointer"> Envoyer </button>
+				<button type="submit" class="btn ml-auto"> Envoyer </button>
 			</div>
 		</form>
 	{/if}

src/routes/photos/raw/[id]/+server.ts

@@ -1,9 +1,9 @@
-import { picturesFs } from '$lib/server/db';
+import { collections } from '$lib/server/db';
 import { error } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
 
 export const GET: RequestHandler = async ({ params }) => {
-	const fs = await picturesFs.findOne({ _id: params.id });
+	const fs = await collections.picturesFs.findOne({ _id: params.id });
 
 	if (!fs) {
 		throw error(404, 'Image non trouvée');

vite.config.ts

@@ -27,8 +27,8 @@ const config: UserConfig = {
 			shortcuts: {
 				input: 'w-full max-w-80 text-lg pl-2 border border-solid border-2 rounded-xl',
 				link: 'underline text-brunswick',
-				btn: 'text-white bg-oxford px-4 py-2 rounded-3xl font-bold border-0',
-				'btn-sunray': 'text-white bg-sunray px-4 py-2 rounded-3xl font-bold border-0'
+				btn: 'text-white bg-oxford px-4 py-2 rounded-3xl font-bold border-0 cursor-pointer',
+				'btn-sunray': 'text-white bg-sunray px-4 py-2 rounded-3xl font-bold border-0 cursor-pointer'
 			},
 			theme: {
 				colors: {