Merge pull request #75 from pvdthings/dev

Release: Catalog > Item Details

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

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

apps/api/apps/catalog/services/itemDetails.js

@@ -0,0 +1,25 @@
+const { fetchItem } = require("../../../services/inventory");
+const mapItemStatus = require("./mapItemStatus");
+
+async function getItemDetails(id) {
+  const details = await fetchItem(null, { recordId: id });
+
+  return {
+    id: details.id,
+    name: details.name,
+    number: details.number,
+    spanishName: details.name_es,
+    available: details.available,
+    availableDate: details.dueBack,
+    condition: details.condition,
+    eyeProtection: details.eyeProtection,
+    totalLoans: details.totalLoans,
+    image: details.images.length ? details.images[0] : undefined,
+    manuals: details.manuals?.map((m) => m.url) || [],
+    status: mapItemStatus(details)
+  };
+}
+
+module.exports = {
+  getItemDetails
+}

apps/api/apps/catalog/services/mapItemStatus.js

@@ -0,0 +1,9 @@
+function mapItemStatus(item) {
+  if (item.available) {
+    return 'available';
+  }
+
+  return 'checkedOut';
+}
+
+module.exports = mapItemStatus;

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

@@ -1,4 +1,5 @@
 const { fetchThing } = require("../../../services/things");
+const mapItemStatus = require("./mapItemStatus");
 
 async function getThingDetails(id) {
   const details = await fetchThing(id);
@@ -22,14 +23,6 @@ async function getThingDetails(id) {
   };
 }
 
-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.20.1",
+  "version": "1.21.0",
   "description": "",
   "main": "server.js",
   "scripts": {

apps/api/services/inventory/mapItem.js

@@ -6,12 +6,14 @@ function mapItem(record) {
       id: record.id,
       number: Number(record.get('ID')),
       name: record.get('Name')[0],
+      name_es: record.get('name_es')?.[0],
       available: record.get('Active Loans') === 0
           && !hidden
           && !isThingHidden,
       hidden: hidden || isThingHidden,
       brand: record.get('Brand'),
       description: record.get('Description'),
+      dueBack: record.get('Due Back')?.[0],
       estimatedValue: record.get('Estimated Value'),
       eyeProtection: Boolean(record.get('Eye Protection')),
       condition: record.get('Condition'),

apps/api/services/inventory/service.js

@@ -7,6 +7,7 @@ const inventoryFields = [
   'Name', 
   'Brand',
   'Description',
+  'Due Back',
   'Eye Protection',
   'Active Loans', 
   'Total Loans',
@@ -30,7 +31,13 @@ const fetchItems = async () => {
   return records.map((r) => mapItem(r));
 }
 
-const fetchItem = async (id) => {
+// Tech Debt: "id" here is actually the item number
+const fetchItem = async (id, { recordId } = { recordId: undefined }) => {
+  if (recordId) {
+    const record = await items.find(recordId);
+    return mapItem(record);
+  }
+
   const records = await items.select({
       view: 'api_fetch_things',
       fields: inventoryFields,

apps/web/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@library_os/web",
-	"version": "0.16.1",
+	"version": "0.17.0",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",

apps/web/src/lib/components/Shell/Drawer/NavigationButton/BackButton.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { pop } from "../drawer";
+
+  let className: string = '';
+  export { className as class };
+</script>
+
+<button class="btn btn-circle bg-white outline-none shadow {className}" on:click={pop}>
+  <span class="ph-bold ph-arrow-left text-xl" />
+</button>

apps/web/src/lib/components/Shell/Drawer/NavigationButton/CloseButton.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { close } from "../drawer";
+
+  let className: string = '';
+  export { className as class };
+</script>
+
+<button class="btn btn-circle bg-white outline-none shadow {className}" on:click={close}>
+  <span class="ph-bold ph-x text-xl" />
+</button>

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

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import BackButton from "./BackButton.svelte";
+	import CloseButton from "./CloseButton.svelte";
+  import { poppable } from "../drawer";
+
+  let className: string = '';
+  export { className as class };
+</script>
+
+{#if $poppable}
+  <BackButton class={className} />
+{:else}
+  <CloseButton class={className} />
+{/if}

apps/web/src/lib/components/Shell/Drawer/NavigationButton/index.ts

@@ -0,0 +1 @@
+export { default as NavigationButton } from "./NavigationButton.svelte";

apps/web/src/lib/components/Shell/Drawer/drawer.ts

@@ -0,0 +1,53 @@
+import { derived, writable } from 'svelte/store';
+
+const emptyState = Object.freeze({ views: [] });
+
+let previousViewsLength = 0;
+
+export type DrawerState = {
+	views: DrawerContent[];
+};
+
+export type DrawerContent = {
+	component: any;
+	props: any;
+};
+
+const state = writable<DrawerState>(emptyState);
+
+export const view = derived(state, (s) => {
+	return s.views.length ? s.views[0] : undefined;
+});
+
+export const push = (component: any, props: any) => {
+	state.update((s) => ({
+		views: [{ component, props }, ...s.views]
+	}));
+};
+
+export const pop = () => {
+  state.update((s) => ({
+		views: s.views.slice(1)
+	}));
+};
+
+export const poppable = derived(state, (s) => s.views.length && s.views.length > 1);
+
+export const close = () => {
+	state.update((s) => emptyState);
+};
+
+// pushing second view does not work
+export const toggle = (callback: () => void) => {
+	return state.subscribe(s => {
+		if (previousViewsLength === 0 && s.views.length) {
+			callback();
+		}
+
+		if (previousViewsLength && !s.views.length) {
+			callback();
+		}
+
+		previousViewsLength = s.views.length;
+	});
+};

apps/web/src/lib/components/Shell/Drawer/index.ts

@@ -0,0 +1,2 @@
+export * from "./drawer";
+export * from "./NavigationButton";

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

@@ -1,26 +1,13 @@
 <script lang="ts">
-	import { setContext } from "svelte";
+	import { onDestroy } from "svelte";
+	import { NavigationButton } from "./Drawer/NavigationButton";
+	import { toggle, view } from "./Drawer";
 
 	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;
-		}
-	};
+	const unsubscribe = toggle(() => drawerToggle?.click());
 
-	setContext('shell', {
-		drawer
-	});
+	onDestroy(unsubscribe);
 </script>
 
 <div class="drawer drawer-end">
@@ -30,9 +17,12 @@
 		<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 class="drawer-overlay !cursor-default" />
+    <div class="bg-neutral-200 flex flex-col h-dvh w-screen overflow-hidden md:w-80 lg:w-96 relative">
+      {#if $view}
+				<NavigationButton class="absolute top-4 left-4 z-50" />
+				<svelte:component this={$view.component} {...$view.props} />
+			{/if}
     </div>
   </div>
 </div>