Merge pull request #65 from pvdthings/dev

Web: Thing Details - Iteration 1

apps/api/apps/catalog/routes/things.js

@@ -1,6 +1,7 @@
 const express = require('express');
 const router = express.Router();
 const { getCatalogData } = require('../services/catalog');
+const { getThingDetails } = require('../services/thingDetails');
 
 router.get('/', async (req, res) => {
     try {
@@ -11,4 +12,14 @@ router.get('/', async (req, res) => {
     }
 });
 
+router.get('/things/:id', async (req, res) => {
+    const { id } = req.params;
+    try {
+        res.send(await getThingDetails(id));
+    } catch (error) {
+        console.error(error);
+        res.status(error.status || 500).send({ errors: [error] });
+    }
+});
+
 module.exports = router;

apps/api/apps/catalog/services/thingDetails.js

@@ -0,0 +1,35 @@
+const { fetchThing } = require("../../../services/things");
+
+async function getThingDetails(id) {
+  const details = await fetchThing(id);
+
+  return {
+    id: details.id,
+    name: details.name,
+    spanishName: details.name_es,
+    categories: details.categories,
+    availableDate: details.availableDate,
+    available: details.available,
+    stock: details.stock,
+    image: details.images?.length ? details.images[0].url : undefined,
+    items: details.items.filter((i) => i.location !== 'Providence Public Library').map(item => ({
+      id: item.id,
+      number: item.number,
+      brand: item.brand,
+      hidden: item.hidden,
+      status: mapItemStatus(item)
+    }))
+  };
+}
+
+function mapItemStatus(item) {
+  if (item.available) {
+    return 'available';
+  }
+
+  return 'checkedOut';
+}
+
+module.exports = {
+  getThingDetails
+}

apps/api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pvdthings-api",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "description": "",
   "main": "server.js",
   "scripts": {

apps/api/server.js

@@ -27,6 +27,7 @@ app.all('*', (req, res, next) => {
 app.get('/', (_, res) => {
     res.send('You have reached the Things API');
 });
+app.use('/web', things);
 app.use('/things', things);
 app.use('/lending', lending);
 app.use('/auth', auth);

apps/api/services/things/mapThingDetails.js

@@ -7,6 +7,7 @@ function mapThingDetails(record, items = [], linkedThings = []) {
       name_es: record.get('name_es'),
       stock: Number(record.get('Stock')),
       available: Number(record.get('Available')),
+      availableDate: record.get('Next Due Back')?.[0],
       hidden: Boolean(record.get('Hidden')),
       categories: record.get('Category') || [],
       eyeProtection: Boolean(record.get('Eye Protection')),

apps/web/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@library_os/web",
-	"version": "0.15.7",
+	"version": "0.16.0",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",
@@ -32,5 +32,8 @@
 		"typescript": "^5.0.0",
 		"vite": "^5.2.10"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"@phosphor-icons/web": "^2.1.1"
+	}
 }

apps/web/src/lib/components/AbsoluteCenter.svelte

@@ -0,0 +1,3 @@
+<div class="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2">
+  <slot />
+</div>

apps/web/src/lib/components/Badge/Badge.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { style, type BadgeType } from "./type";
+
+  export let type: BadgeType = 'neutral';
+</script>
+
+<div class="badge {style(type)} badge-lg">
+  <slot />
+</div>

apps/web/src/lib/components/Badge/index.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from './Badge.svelte';
+export * from './type';

apps/web/src/lib/components/Badge/type.ts

@@ -0,0 +1,21 @@
+export type BadgeType =
+  'neutral'
+  | 'primary'
+  | 'warning'
+  | 'success'
+  | 'error';
+
+export function style(type: BadgeType) {
+  switch (type) {
+    case 'neutral':
+      return 'badge-neutral';
+    case 'primary':
+      return 'badge-primary';
+    case 'warning':
+      return 'badge-warning';
+    case 'success':
+      return 'badge-success'
+    case 'error':
+      return 'badge-error';
+  }
+}

apps/web/src/lib/components/CloseButton.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import CloseIcon from "$lib/icons/x-mark.svg";
+
+  let className: string;
+  export { className as class };
+</script>
+
+<button class="btn btn-circle btn-ghost outline-none {className}" on:click>
+  <img src={CloseIcon} alt="Close" height="24" width="24" />
+</button>

apps/web/src/lib/components/Divider.svelte

@@ -0,0 +1 @@
+<div class="divider" />

apps/web/src/lib/components/LoadingSpinner.svelte

@@ -0,0 +1 @@
+<span class="loading loading-spinner loading-lg text-indigo-500" />

apps/web/src/lib/components/Modal/Modal.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import CloseIcon from "$lib/icons/x-mark.svg";
 	import { createEventDispatcher, onMount } from "svelte";
+	import CloseButton from "../CloseButton.svelte";
 
   export let show: boolean = false;
   export let title: string = undefined;
@@ -21,9 +21,7 @@
 
 <dialog bind:this={dialog} class="modal modal-bottom sm:modal-middle">
   <div class="modal-box relative modal-responsive">
-    <button class="btn btn-circle btn-ghost outline-none absolute right-2 top-2" on:click={closeModal}>
-      <img src={CloseIcon} alt="Close" height="24" width="24" />
-    </button>
+    <CloseButton class="absolute right-2 top-2" on:click={closeModal} />
     {#if title}
       <h2 class="font-bold font-display text-2xl mb-3">{title}</h2>
     {/if}

apps/web/src/lib/components/Shell/Shell.svelte

@@ -1,3 +1,38 @@
-<div class="flex flex-col w-screen h-screen overflow-hidden">
-	<slot />
+<script lang="ts">
+	import { setContext } from "svelte";
+
+	let drawerToggle: HTMLLabelElement;
+	let drawerContent: any;
+	let drawerContentProps: any;
+
+	const drawer = {
+		open: (content: any, props = {}) => {
+			drawerContent = content;
+			drawerContentProps = props;
+			drawerToggle.click();
+		},
+		close: () => {
+			drawerToggle.click();
+			drawerContent = null;
+			drawerContentProps = null;
+		}
+	};
+
+	setContext('shell', {
+		drawer
+	});
+</script>
+
+<div class="drawer drawer-end">
+	<input id="drawer-toggle" type="checkbox" class="drawer-toggle" />
+	<div class="flex flex-col h-dvh w-screen overflow-hidden drawer-content">
+		<label bind:this={drawerToggle} for="drawer-toggle" />
+		<slot />
+	</div>
+	<div class="drawer-side z-50">
+    <label for="drawer-toggle" aria-label="close sidebar" class="drawer-overlay"></label>
+    <div class="bg-base-200 text-base-content flex flex-col h-dvh w-screen overflow-hidden md:w-80 lg:w-96 relative">
+      <svelte:component this={drawerContent} {...drawerContentProps} />
+    </div>
+  </div>
 </div>

apps/web/src/lib/components/Shell/ShellContext.ts

@@ -0,0 +1,14 @@
+import { getContext } from "svelte";
+
+export type ShellContext = {
+  drawer: DrawerContext;
+};
+
+export type DrawerContext = {
+  open: (content: any, props: any) => void;
+  close: () => void;
+};
+
+export function getShellContext(): ShellContext {
+  return getContext('shell');
+}

apps/web/src/lib/components/Wrap.svelte

@@ -0,0 +1,3 @@
+<div class="flex flex-wrap gap-2">
+  <slot />
+</div>

apps/web/src/lib/components/things/Details/BookmarkButton.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { ThingID } from "$lib/models/Thing";
+	import { bookmarks } from "$lib/stores/bookmarks";
+
+  export let id: ThingID;
+
+  $: bookmarked = bookmarks.isBookmarked(id);
+  $: iconVariant = $bookmarked ? 'ph-fill' : 'ph-bold';
+
+  const toggle = () => {
+    bookmarks.addRemove(id);
+  };
+</script>
+
+<button on:click={toggle} class="fixed bottom-4 right-4 btn btn-circle btn-lg btn-primary shadow-lg z-50">
+  <span class="{iconVariant} ph-bookmark-simple text-white text-4xl" />
+</button>

apps/web/src/lib/components/things/Details/Details.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import BoxIcon from '$lib/icons/box.svg';
+	import CloseButton from '$lib/components/CloseButton.svelte';
+	import { getShellContext } from '$lib/components/Shell/ShellContext';
+	import InventoryItem from './InventoryItem.svelte';
+	import BookmarkButton from './BookmarkButton.svelte';
+	import { bookmarks } from '$lib/stores/bookmarks';
+	import { locale, t } from '$lib/language/translate';
+	import Divider from "$lib/components/Divider.svelte";
+	import Wrap from "$lib/components/Wrap.svelte";
+	import Title from "./Title.svelte";
+	import List from "./List.svelte";
+	import Section from "./Section.svelte";
+	import { Badge, type BadgeType } from "$lib/components/Badge";
+	import type { InventoryItemModel } from '$lib/models/ThingDetails';
+
+	export let id: string;
+	export let name: string;
+	export let image: string|undefined;
+	export let stock: number;
+	export let available: number;
+	export let availableDate: string|undefined;
+	export let categories: string[];
+	export let items: InventoryItemModel[];
+
+	const { drawer } = getShellContext();
+
+	$: stockBadgeVariant = (available ? 'success' : 'error') as BadgeType;
+
+	$: bookmarked = bookmarks.isBookmarked(id);
+	$: isBookmarked = $bookmarked;
+</script>
+
+<BookmarkButton {id} />
+<section class="flex-grow-0 flex-shrink-0 h-48 md:h-64 border-b border-base-300 overflow-hidden relative shadow-sm">
+	<img
+		src={image ?? BoxIcon}
+		alt={name}
+		class="object-center object-contain bg-white h-full w-full"
+	/>
+	<CloseButton class="absolute top-4 right-4" on:click={drawer.close} />
+</section>
+<div class="p-4 flex flex-col flex-grow overflow-y-scroll">
+	<section>
+		<Title>{name}</Title>
+		<Wrap>
+			<Badge type={stockBadgeVariant}>{available} / {stock}</Badge>
+			{#if !available && availableDate}
+				<Badge>{$t('Due Back')} {new Date(availableDate).toLocaleDateString($locale)}</Badge>
+			{/if}
+			{#if isBookmarked}
+				<Badge type='primary'>{$t('Bookmarked')}</Badge>
+			{/if}
+		</Wrap>
+	</section>
+	<Divider />
+	<Section title={$t('Categories')}>
+		<Wrap>
+			{#if categories.length}
+				{#each categories as category}
+					<Badge>{$t(category)}</Badge>
+				{/each}
+			{:else}
+				<div>None</div>
+			{/if}
+		</Wrap>
+	</Section>
+	<Divider />
+	<Section title={$t('Inventory')}>
+		{@const availableItems = items.filter((i) => i.status === 'available' && !i.hidden)}
+		{@const unavailableItems = items.filter((i) => i.status === 'checkedOut' || i.hidden)}
+
+		{#if availableItems.length}
+			<List title={$t('Available')}>
+				{#each availableItems as item}
+					<InventoryItem number={item.number} brand={item.brand} status={item.status} />
+				{/each}
+			</List>
+		{/if}
+
+		{#if unavailableItems.length}
+			<List title={$t('Unavailable')}>
+				{#each unavailableItems as item}
+					<InventoryItem number={item.number} brand={item.brand} status={item.status} />
+				{/each}
+			</List>
+		{/if}
+	</Section>
+</div>