✨ Admin photos list

src/routes/admin/pages/[id]/+server.ts

@@ -22,7 +22,15 @@ export const POST: RequestHandler = async (input) => {
 
 	await collections.pages.updateOne(
 		{ _id: id },
-		{ $set: { [`${type}.${body.key}`]: String(body.value).replaceAll('\r', '') } },
+		{
+			$set: {
+				[`${type}.${body.key}`]: String(body.value).replaceAll('\r', ''),
+				updatedAt: new Date()
+			},
+			$setOnInsert: {
+				createdAt: new Date()
+			}
+		},
 		{ upsert: true }
 	);
 

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

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

src/routes/admin/photos/+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>
+
+<h1 class="text-sunray">Liste des photos</h1>
+
+<a href="/admin/photos/nouveau" class="my-4 block link">Nouvelle photo</a>
+
+<div class="flex flex-row flex-wrap gap-6 mt-6">
+	{#each data.photos as photo}
+		<div class="flex flex-col text-center">
+			<a href="/admin/photos/{photo._id}" class="flex flex-col items-center">
+				<Picture picture={photo} class="h-36 block" style="object-fit: scale-down;" />
+				<span>{photo.name}</span>
+			</a>
+		</div>
+	{/each}
+</div>

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

@@ -0,0 +1,50 @@
+import type { Picture } from '$lib/types/Picture';
+import { client, pictures, picturesFs } 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 });
+
+	if (!picture) {
+		throw error(404, 'Photo non trouvée');
+	}
+
+	return {
+		photo: picture
+	};
+};
+
+export const actions: Actions = {
+	update: async function (input) {
+		const name = String((await input.request.formData()).get('name'));
+		await pictures.updateOne(
+			{ _id: input.params.id },
+			{
+				$set: {
+					name,
+					updatedAt: new Date()
+				}
+			}
+		);
+
+		return {};
+	},
+	delete: async function ({ params }) {
+		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 });
+		});
+
+		if (!picture) {
+			throw error(404);
+		}
+
+		throw redirect(
+			303,
+			picture?.productId ? '/admin/produits/' + picture.productId : '/admin/photos'
+		);
+	}
+};

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

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import PictureComponent from '$lib/components/Picture.svelte';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+</script>
+
+<div class="flex flex-col items-center">
+	<form method="post" action="?/update" use:enhance>
+		<input type="text" name="name" class="input" value={data.photo.name} />
+		<input type="submit" hidden />
+	</form>
+	<PictureComponent picture={data.photo} class="mt-2 max-w-full" style="max-height: 500px" />
+	<form method="post" action="?/delete" use:enhance>
+		<input type="submit" value="Supprimer" class="mt-2" />
+	</form>
+</div>

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

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import { page } from '$app/stores';
+
+	const productId = $page.url.searchParams.get('productId');
+</script>
+
+<h1 class="text-sunray">Ajouter une photo</h1>
+
+<form method="post" action="/admin/photos" enctype="multipart/form-data" use:enhance>
+	<label class="block my-4 leading-8">
+		Nom de la photo
+		<input class="input block" type="text" name="name" placeholder="Nom définitif" required />
+	</label>
+
+	<label class="block my-4 leading-8">
+		Fichier JPEG
+		<input type="file" name="photo" accept="image/jpeg" class="block required" />
+	</label>
+
+	{#if productId}
+		<p>Produit associé: <a href="/admin/produits/{productId}" class="link">{productId}</a></p>
+	{/if}
+
+	<input type="hidden" name="productId" value={productId || ''} />
+
+	<input type="submit" hidden />
+</form>