Event sort

apps/www/src/routes/portal/arrangementer/+page.server.ts

@@ -5,10 +5,20 @@ export const load: PageServerLoad = async ({ locals }) => {
 		orderBy: (row, { asc }) => [asc(row.date)],
 		with: {
 			shifts: true
-		}
+		},
+		where: (events, { gte }) => gte(events.date, new Date())
+	});
+
+	const outdatedEvents = await locals.db.query.events.findMany({
+		orderBy: (row, { desc }) => [desc(row.date)],
+		with: {
+			shifts: true
+		},
+		where: (events, { lt }) => lt(events.date, new Date())
 	});
 
 	return {
-		events
+		events,
+		outdatedEvents
 	};
 };

apps/www/src/routes/portal/arrangementer/+page.svelte

@@ -2,10 +2,13 @@
 	import EventPreview from '$lib/components/portal/EventPreview.svelte';
 	import Heading from '$lib/components/ui/Heading.svelte';
 	import { getUser } from '$lib/context/user.context.js';
-
 	let { data } = $props();
-
 	let user = getUser();
+	let showOutdatedEvents = $state(false);
+
+	function toggleOutdatedEvents() {
+		showOutdatedEvents = !showOutdatedEvents;
+	}
 </script>
 
 <svelte:head>
@@ -28,3 +31,29 @@
 		<p>Ingen arrangementer</p>
 	{/each}
 </ul>
+
+<div class="mt-8">
+	<button
+		class="flex items-center rounded-md bg-gray-100 py-6 text-left hover:bg-gray-200 focus:outline-none"
+		onclick={toggleOutdatedEvents}
+		aria-expanded={showOutdatedEvents}
+	>
+		<h3 class="m0 text-lg font-medium">
+			{showOutdatedEvents ? 'Skjul tidligere arrangementer' : 'Vis tidligere arrangementer'}
+		</h3>
+	</button>
+</div>
+
+{#if showOutdatedEvents}
+	<div class="mt-4">
+		<ul class="mt-4 flex flex-col gap-4">
+			{#each data.outdatedEvents as event}
+				<li>
+					<EventPreview {event} />
+				</li>
+			{:else}
+				<p>Ingen tidligere arrangementer</p>
+			{/each}
+		</ul>
+	</div>
+{/if}