Get holding status working

libris · Jul 1, 2024 · 6fa59bc · 6fa59bc
1 parent 02d9677
commit 6fa59bc
Show file tree

Hide file tree

Showing 7 changed files with 134 additions and 22 deletions.
diff --git a/lxl-web/.env.example b/lxl-web/.env.example
@@ -3,3 +3,4 @@ API_URL=
 ID_URL=
 AUXD_SECRET=
 USE_LOCAL_DISPLAY_JSONLD=false
+HOLDING_STATUS_URL=
diff --git a/lxl-web/src/lib/types/api.ts b/lxl-web/src/lib/types/api.ts
@@ -5,3 +5,25 @@ export type ApiError = {
 	status_code: NumericRange<400, 599>;
 	status: string;
 };
+
+export interface HoldingStatus {
+	item_information: ItemInformation;
+}
+
+interface ItemInformation {
+	library_code: string;
+	count: number;
+	error?: string;
+	items: HoldingItem[] | [];
+}
+
+interface HoldingItem {
+	Item_No: string;
+	UniqueItemId: string;
+	Location: string;
+	Call_No: string;
+	Status: string;
+	Status_Date_Description: string;
+	Status_Date: string;
+	Loan_Policy: string;
+}
diff --git a/lxl-web/src/lib/utils/holdings.ts b/lxl-web/src/lib/utils/holdings.ts
@@ -53,6 +53,20 @@ export function getHoldingsByInstanceId(mainEntity) {
 	}, {});
 }
 
+export function getBibIdsByInstanceId(mainEntity) {
+	return mainEntity['@reverse']?.instanceOf?.reduce((acc, instanceOfItem) => {
+		const id = instanceOfItem['@id']?.replace('#it', '');
+		const bibId = instanceOfItem.sameAs?.[0]?.['@id'];
+		if (!id || !bibId) {
+			return acc;
+		}
+		return {
+			...acc,
+			[id]: bibId
+		};
+	}, {});
+}
+
 export function getHoldingsByType(mainEntity: FramedData) {
 	const holdingsByType = mainEntity['@reverse']?.instanceOf?.reduce((acc, instanceOfItem) => {
 		const type = instanceOfItem['@type'];

diff --git a/lxl-web/src/routes/(app)/[[lang=lang]]/[fnurgel=fnurgel]/+page.server.ts b/lxl-web/src/routes/(app)/[[lang=lang]]/[fnurgel=fnurgel]/+page.server.ts
@@ -14,7 +14,11 @@ import addDefaultSearchParams from '$lib/utils/addDefaultSearchParams.js';
 import getSortedSearchParams from '$lib/utils/getSortedSearchParams.js';
 import { asResult, displayPredicates } from '$lib/utils/search';
 import getAtPath from '$lib/utils/getAtPath';
-import { getHoldingsByInstanceId, getHoldingsByType } from '$lib/utils/holdings.js';
+import {
+	getHoldingsByInstanceId,
+	getHoldingsByType,
+	getBibIdsByInstanceId
+} from '$lib/utils/holdings.js';
 
 export const load = async ({ params, url, locals, fetch, isDataRequest }) => {
 	const displayUtil: DisplayUtil = locals.display;
@@ -55,6 +59,7 @@ export const load = async ({ params, url, locals, fetch, isDataRequest }) => {
 
 	const images = getImages(mainEntity).map((i) => toSecure(i, env.AUXD_SECRET));
 	const holdingsByInstanceId = getHoldingsByInstanceId(mainEntity);
+	const bibIdsByInstanceId = getBibIdsByInstanceId(mainEntity);
 	const holdingsByType = getHoldingsByType(mainEntity);
 	const holdersByType = Object.entries(holdingsByType).reduce((acc, [type, holdings]) => {
 		const heldBys = holdings.map((holdingItem) => holdingItem.heldBy);
@@ -72,6 +77,7 @@ export const load = async ({ params, url, locals, fetch, isDataRequest }) => {
 		details: displayUtil.lensAndFormat(mainEntity, LxlLens.PageDetails, locale),
 		instances: sortedInstances,
 		holdingsByInstanceId,
+		bibIdsByInstanceId,
 		holdersByType,
 		full: overview,
 		images,

diff --git a/lxl-web/src/routes/(app)/[[lang=lang]]/[fnurgel=fnurgel]/+page.svelte b/lxl-web/src/routes/(app)/[[lang=lang]]/[fnurgel=fnurgel]/+page.svelte
@@ -147,6 +147,7 @@
 		</div>
 	{/if}
 	{#if holdingUrl && selectedHoldingInstance}
+		{@const selectedBibId = data.bibIdsByInstanceId[selectedHoldingInstance['@id']]}
 		<Modal close={handleCloseHoldings}>
 			<span slot="title">{data.t('holdings.findAtYourNearestLibrary')}</span>
 			<div class="flex flex-col">
@@ -219,16 +220,13 @@
 							{#if data.holdingsByInstanceId[selectedHolding]}
 								{#each data.holdingsByInstanceId[selectedHolding] as holdingItem}
 									<li class="contents h-11 border-b-primary/16 [&:not(:last-child)]:border-b">
-										<HoldingStatus data={holdingItem}>
-											<details>
-												<summary>
-													{console.log(holdingItem)}
-													<span>{holdingItem?.heldBy?.name}</span>
-													<span class="text-right text-secondary">
-														{holdingItem?.heldBy?.sigel ? `(${holdingItem?.heldBy?.sigel})` : ''}
-													</span>
-												</summary>
-											</details>
+										<HoldingStatus data={holdingItem} bibId={selectedBibId}>
+											<summary>
+												<span>{holdingItem?.heldBy?.name}</span>
+												<span class="text-right text-secondary">
+													{holdingItem?.heldBy?.sigel ? `(${holdingItem?.heldBy?.sigel})` : ''}
+												</span>
+											</summary>
 										</HoldingStatus>
 									</li>
 								{/each}
@@ -243,7 +241,7 @@
 												>{holderItem?.sigel ? `(${holderItem?.sigel})` : ''}</span
 											>
 										</summary>
-										<!-- TODO -->
+										<!-- TODO, tricky when multiple instances -->
 										<!-- <HoldingStatus data={holderItem} /> -->
 									</details>
 								</li>

diff --git a/lxl-web/src/routes/(app)/[[lang=lang]]/[fnurgel=fnurgel]/HoldingStatus.svelte b/lxl-web/src/routes/(app)/[[lang=lang]]/[fnurgel=fnurgel]/HoldingStatus.svelte
@@ -1,16 +1,71 @@
 <script lang="ts">
-	// import { onMount } from "svelte";
+	import { type HoldingStatus } from '$lib/types/api';
+	import { relativizeUrl } from '$lib/utils/http';
+	export let data;
+	export let bibId;
 
-	// export let data;
+	let loading = false;
+	let statusData: HoldingStatus | null = null;
+	let error: string | null = null;
+	const sigel = data?.heldBy?.sigel;
+	const instanceId = relativizeUrl(bibId)?.replace('resourcebib', ''); // TODO better! (is there an existing lxljs util for this?)
 
-	// onMount(() => {
-	//   console.log('mounted!', data)
-	// })
+	async function getHoldingStatus() {
+		if (!sigel || !instanceId) {
+			error = 'could not retrieve data';
+		} else if (!statusData) {
+			loading = true;
+			const res = await fetch(`/api/holdingstatus?sigel=${sigel}&bib_id=${instanceId}`);
+			const resJson = await res.json();
 
-	// async function getHolddingStatus(){
-	//   console.log(data);
-	// }
+			if (resJson.item_information.error) {
+				error = resJson.item_information.error;
+			} else {
+				statusData = resJson;
+			}
+			loading = false;
+		}
+	}
 </script>
 
-<slot />
-<div>Hello</div>
+<details on:toggle={getHoldingStatus}>
+	<slot />
+	<div class="my-4">
+		{#if loading}
+			<span>Laddar....</span>
+		{/if}
+		{#if error}
+			{error}
+		{/if}
+		{#if statusData && statusData.item_information.items.length > 0}
+			<!-- TODO properly -->
+			<!-- ripped from https://github.com/libris/search4/blob/09180a39077619b2e4f4ba0887f9474679b40489/src/views/ProductPage/Work/Holding.vue#L124 -->
+			{#each statusData.item_information.items as item}
+				<table class="my-2">
+					<tbody>
+						<tr>
+							<th>Placering</th>
+							<td>{item.Location}</td>
+						</tr>
+						<tr>
+							<th>Hylla</th>
+							<td>{item.Call_No}</td>
+						</tr>
+						<tr>
+							<th>Lånepolitik</th>
+							<td>{item.Loan_Policy}</td>
+						</tr>
+						<tr>
+							<th>Status</th>
+							<td>{item.Status}</td>
+						</tr>
+						<tr>
+							<th>Datum</th>
+							<td>{item.Status_Date}</td>
+						</tr>
+					</tbody>
+				</table>
+			{/each}
+		{/if}
+	</div>
+</details>
diff --git a/lxl-web/src/routes/api/holdingstatus/+server.ts b/lxl-web/src/routes/api/holdingstatus/+server.ts
@@ -0,0 +1,16 @@
+import { env } from '$env/dynamic/private';
+import type { HoldingStatus } from '$lib/types/api';
+import { json } from '@sveltejs/kit';
+
+export async function GET({ url }) {
+	const sigel = url.searchParams.get('sigel');
+	const bib_id = url.searchParams.get('bib_id');
+	const res = await fetch(`${env.HOLDING_STATUS_URL}?output=json&sigel=${sigel}&bib_id=${bib_id}`);
+
+	// TODO error handling, map statuses
+	// see https://github.com/libris/search4/blob/09180a39077619b2e4f4ba0887f9474679b40489/src/views/ProductPage/Work/Holding.vue#L64
+
+	const data = (await res.json()) as HoldingStatus;
+
+	return json(data);
+}