feat(database): display entity counts

kingsdigitallab · Oct 31, 2024 · e3bfd74 · e3bfd74
1 parent 1d36136
commit e3bfd74
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 72 deletions.
diff --git a/src/routes/database/+layout.server.ts b/src/routes/database/+layout.server.ts
@@ -1,10 +1,16 @@
+import { handleLoadError } from '$lib/errorHandling';
 import { getMoments } from '$lib/moments';
-import { getRecordsBy } from '$lib/supabase';
+import { getDatabaseStats, getRecordsBy } from '$lib/supabase';
 import type { LayoutServerLoad } from './$types';
 
 export const load = (async () => {
-	return {
-		moments: await getMoments(),
-		placesBySlug: await getRecordsBy('place', 'slug')
-	};
+	try {
+		return {
+			stats: await getDatabaseStats(),
+			moments: await getMoments(),
+			placesBySlug: await getRecordsBy('place', 'slug')
+		};
+	} catch (error) {
+		handleLoadError('database', error);
+	}
 }) satisfies LayoutServerLoad;
diff --git a/src/routes/database/+page.svelte b/src/routes/database/+page.svelte
@@ -1,29 +1,34 @@
 <script lang="ts">
 	export let data;
-	const { url } = data;
+	const { stats, url } = data;
 
 	const items = [
 		{
+			count: stats.personCount,
 			title: 'People',
-			description: 'Explore the lives of Kings alumni',
+			description: 'Explore the lives of the people that helped shape Kings',
 			href: `${url}/people`
 		},
 		{
+			count: stats.organisationCount,
 			title: 'Organisations',
 			description: 'Explore the organisations that Kings has been associated with',
 			href: `${url}/organisations`
 		},
 		{
+			count: stats.placeCount,
 			title: 'Places',
 			description: 'Explore the places associated with Kings',
 			href: `${url}/places`
 		},
 		{
+			count: stats.eventCount,
 			title: 'Events',
 			description: 'Explore the events associated with Kings',
 			href: `${url}/events`
 		},
 		{
+			count: stats.donationCount,
 			title: 'Donations',
 			description: 'Explore the donations made to Kings',
 			href: `${url}/donations`
@@ -32,23 +37,26 @@
 </script>
 
 <article>
-	<h1>Database</h1>
+	<hgroup>
+		<h1>Database</h1>
+		<p>Explore the data that makes up the Kings history.</p>
+	</hgroup>
 
 	<section class="grid">
 		{#each items as item}
 			<article class="card">
-				<a href={item.href}>
-					<header>
-						<span>34</span>
+				<header>
+					<a href={item.href}>
+						<span>{item.count}</span>
 						<h2>{item.title}</h2>
-					</header>
-				</a>
-				<article>
+					</a>
+				</header>
+				<div class="content">
 					<p>{item.description}</p>
-					<footer>
-						<p>Stats?</p>
-					</footer>
-				</article>
+				</div>
+				<footer>
+					<p>More stats could be added here</p>
+				</footer>
 			</article>
 		{/each}
 	</section>
@@ -61,56 +69,6 @@
 		gap: var(--size-4);
 		height: 100%;
 	}
-	article.card {
-		padding: 0;
-		border: 0;
-		background-color: white;
-		border-radius: 0;
-		display: block;
-		box-shadow: var(--shadow-2);
-
-		& a {
-			display: block;
-			& header {
-				background-color: var(--midnight-blue);
-				padding: 0;
-				border-bottom: var(--size-2) solid var(--powder-blue);
-				transition: all 0.5s ease-out;
-				display:flex;
-				& span{
-					display:inline;
-					font-size:var(--font-size-8);
-					padding: 0 0 0 var(--size-4) ;
-					color: white;
-				}
-				& h2 {
-					color: white;
-					font-size: var(--font-size-5);
-					transition: all 0.5s ease-out;
-					padding: var(--size-4) var(--size-4) 0 var(--size-4);
-				}
-				&:hover {
-					border-bottom: var(--size-2) solid var(--yellow);
-					& h2 {
-						color: var(--yellow);
-						opacity: 1;
-					}
-				}
-			}
-			&:hover {
-				opacity: 1;
-			}
-		}
-		& > article {
-			background-color: white;
-			margin: 0 var(--size-1) var(--size-1) var(--size-1);
-			padding: var(--size-3);
-		}
-		&:hover {
-			transform: translateY(0);
-			box-shadow: var(--shadow-3);
-		}
-	}
 
 	@media (min-width: 768px) {
 		section {
@@ -128,24 +86,63 @@
 		background: var(--surface-1);
 		border-radius: var(--radius-2);
 		border: 1px solid var(--border-light);
+		box-shadow: var(--shadow-2);
 		color: inherit;
 		display: block;
-		padding: var(--size-4);
+		padding: 0;
 		transition: all 0.2s ease;
 	}
 
 	.card:hover {
-		box-shadow: var(--shadow-1);
+		box-shadow: var(--shadow-3);
 		transform: translateY(-2px);
 	}
 
-	.card a {
+	.card header {
+		background-color: var(--midnight-blue);
+		border-bottom: var(--size-2) solid var(--powder-blue);
+		transition: all 0.5s ease-out;
+	}
+
+	.card header a {
+		display: flex;
 		text-decoration: none;
 	}
 
+	.card header span {
+		color: white;
+		display: inline;
+		font-size: var(--font-size-8);
+		padding-left: var(--size-4);
+	}
+
+	.card header h2 {
+		color: white;
+		font-size: var(--font-size-5);
+		transition: all 0.5s ease-out;
+		padding: var(--size-4) var(--size-4) 0 var(--size-4);
+	}
+
+	.card header:hover {
+		border-bottom: var(--size-2) solid var(--yellow);
+	}
+
+	.card header:hover h2 {
+		color: var(--yellow);
+		opacity: 1;
+	}
+
+	.card .content {
+		background-color: white;
+		margin: 0 var(--size-1) var(--size-1) var(--size-1);
+		padding: var(--size-3);
+	}
+
 	.card footer {
 		display: flex;
+		flex-direction: column;
 		margin-top: auto;
-		padding-top: var(--size-4);
+		padding: var(--size-3);
+		width: 100%;
 	}
 </style>