feat(frontend): add table view

kingsdigitallab · Jul 18, 2024 · 7aef6da · 7aef6da
1 parent 876761c
commit 7aef6da
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 5 deletions.
diff --git a/frontend/src/lib/components/InscriptionTable.svelte b/frontend/src/lib/components/InscriptionTable.svelte
@@ -0,0 +1,31 @@
+<script>
+	import InscriptionTableRow from './InscriptionTableRow.svelte';
+	import InscriptionDate from './InscriptionDate.svelte';
+	import InscriptionLink from './InscriptionLink.svelte';
+	import InscriptionPlace from './InscriptionPlace.svelte';
+
+	export let inscriptions;
+</script>
+
+<table>
+	<thead>
+		<tr>
+			<th>ID</th>
+			<th>Title</th>
+			<th>Date</th>
+			<th>Place</th>
+			<th>Status</th>
+			<th>Type</th>
+			<th>Language</th>
+		</tr>
+	</thead>
+	{#each inscriptions as inscription}
+		<InscriptionTableRow {inscription} />
+	{/each}
+</table>
+
+<style>
+	table {
+		width: 100%;
+	}
+</style>
diff --git a/frontend/src/lib/components/InscriptionTableRow.svelte b/frontend/src/lib/components/InscriptionTableRow.svelte
@@ -0,0 +1,21 @@
+<script>
+	import InscriptionDate from './InscriptionDate.svelte';
+	import InscriptionLink from './InscriptionLink.svelte';
+	import InscriptionPlace from './InscriptionPlace.svelte';
+
+	export let inscription;
+</script>
+
+<tr>
+	<td><InscriptionLink id={inscription.file}>{inscription.file}</InscriptionLink></td>
+	<td><InscriptionLink id={inscription.file}>{inscription.title}</InscriptionLink></td>
+	<td><InscriptionDate {inscription} /></td>
+	<td><InscriptionPlace {inscription} /></td>
+	<td>{inscription.status}</td>
+	{#if inscription.type.ref}
+		<td><a href={inscription.type.ref}>{inscription.type?._}</a></td>
+	{:else}
+		<td>{inscription.type?._ || 'N/A'}</td>
+	{/if}
+	<td>{inscription.textLang?._ || 'N/A'}</td>
+</tr>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
@@ -2,6 +2,7 @@
 	import InscriptionList from '$lib/components/InscriptionList.svelte';
 	import InscriptionMap from '$lib/components/InscriptionMap.svelte';
 	import InscriptionPagination from '$lib/components/InscriptionPagination.svelte';
+	import InscriptionTable from '$lib/components/InscriptionTable.svelte';
 	import * as config from '$lib/config';
 	import { getInscriptions } from '$lib/inscriptions';
 	import { Button } from 'bits-ui';
@@ -15,6 +16,7 @@
 	let { query, limit, total, results } = data;
 
 	let isLoading = false;
+	let showList = true;
 	let showMap = true;
 
 	const searchQuery = queryParam('q', ssp.string(''));
@@ -92,9 +94,14 @@
 		</h2>
 		<InscriptionMap inscriptions={results.inscriptions} show={showMap} />
 		<section class="controls">
-			<Button.Root on:click={() => (showMap = !showMap)}
-				>{#if showMap}Hide map{:else}Show map{/if}</Button.Root
-			>
+			<div class="toggles">
+				<Button.Root on:click={() => (showList = !showList)}
+					>{#if showList}View table{:else}View list{/if}</Button.Root
+				>
+				<Button.Root on:click={() => (showMap = !showMap)}
+					>{#if showMap}Hide map{:else}Show map{/if}</Button.Root
+				>
+			</div>
 		</section>
 		{#if isLoading}
 			<LoaderCircle />
@@ -105,7 +112,11 @@
 				perPage={limit}
 				onPageChange={handlePageChange}
 			/>
-			<InscriptionList inscriptions={results.inscriptions} />
+			{#if showList}
+				<InscriptionList inscriptions={results.inscriptions} />
+			{:else}
+				<InscriptionTable inscriptions={results.inscriptions} />
+			{/if}
 			<InscriptionPagination
 				page={$searchPage}
 				count={total}
@@ -159,7 +170,7 @@
 		margin-block: var(--size-4);
 		width: 100%;
 
-		& button {
+		& .toggles {
 			margin-block-end: var(--size-2);
 			margin-left: auto;
 		}