From 56fdbc00c9fb289405441642044cdb86480ed9d8 Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Fri, 15 Sep 2023 00:49:58 +1000
Subject: [PATCH] [PUI] Improve search panel (#5538)

* Cleanup links in search bar

* Add renderer for stockitem model

* Add model renderer for build order
---
 .../src/components/nav/SearchDrawer.tsx       |  7 ++++---
 src/frontend/src/components/render/Build.tsx  | 20 +++++++++++++++++++
 .../src/components/render/Instance.tsx        |  7 ++++++-
 src/frontend/src/components/render/Stock.tsx  | 10 ++++++++++
 4 files changed, 40 insertions(+), 4 deletions(-)
 create mode 100644 src/frontend/src/components/render/Build.tsx

diff --git a/src/frontend/src/components/nav/SearchDrawer.tsx b/src/frontend/src/components/nav/SearchDrawer.tsx
index bff4997253..19f34a6120 100644
--- a/src/frontend/src/components/nav/SearchDrawer.tsx
+++ b/src/frontend/src/components/nav/SearchDrawer.tsx
@@ -2,6 +2,7 @@ import { Trans, t } from '@lingui/macro';
 import {
   ActionIcon,
   Alert,
+  Anchor,
   Center,
   Checkbox,
   Divider,
@@ -209,13 +210,13 @@ function QueryResultGroup({
         <Divider />
         <Stack>
           {query.results.results.map((result: any) => (
-            <div onClick={() => onResultClick(query.name, result.pk)}>
+            <Anchor onClick={() => onResultClick(query.name, result.pk)}>
               <RenderInstance
                 key={`${query.name}-${result.pk}`}
                 instance={result}
                 model={query.name}
               />
-            </div>
+            </Anchor>
           ))}
         </Stack>
         <Space />
@@ -340,7 +341,7 @@ export function SearchDrawer({
   return (
     <Drawer
       opened={opened}
-      size="lg"
+      size="md"
       onClose={closeDrawer}
       position="right"
       withCloseButton={false}
diff --git a/src/frontend/src/components/render/Build.tsx b/src/frontend/src/components/render/Build.tsx
new file mode 100644
index 0000000000..43cf73767a
--- /dev/null
+++ b/src/frontend/src/components/render/Build.tsx
@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+
+import { RenderInlineModel } from './Instance';
+
+/**
+ * Inline rendering of a single BuildOrder instance
+ */
+export function RenderBuildOrder({
+  buildorder
+}: {
+  buildorder: any;
+}): ReactNode {
+  return (
+    <RenderInlineModel
+      primary={buildorder.reference}
+      secondary={buildorder.title}
+      image={buildorder.part_detail?.thumbnail || buildorder.part_detail?.image}
+    />
+  );
+}
diff --git a/src/frontend/src/components/render/Instance.tsx b/src/frontend/src/components/render/Instance.tsx
index c70ceba162..b42151784a 100644
--- a/src/frontend/src/components/render/Instance.tsx
+++ b/src/frontend/src/components/render/Instance.tsx
@@ -4,6 +4,7 @@ import { Group, Text } from '@mantine/core';
 import { ReactNode } from 'react';
 
 import { Thumbnail } from '../items/Thumbnail';
+import { RenderBuildOrder } from './Build';
 import {
   RenderAddress,
   RenderCompany,
@@ -17,7 +18,7 @@ import {
   RenderSalesOrderShipment
 } from './Order';
 import { RenderPart, RenderPartCategory } from './Part';
-import { RenderStockLocation } from './Stock';
+import { RenderStockItem, RenderStockLocation } from './Stock';
 import { RenderOwner, RenderUser } from './User';
 
 // import { ApiFormFieldType } from "../forms/fields/ApiFormField";
@@ -35,6 +36,8 @@ export function RenderInstance({
   switch (model) {
     case 'address':
       return <RenderAddress address={instance} />;
+    case 'build':
+      return <RenderBuildOrder buildorder={instance} />;
     case 'company':
       return <RenderCompany company={instance} />;
     case 'contact':
@@ -55,6 +58,8 @@ export function RenderInstance({
       return <RenderSalesOrderShipment shipment={instance} />;
     case 'stocklocation':
       return <RenderStockLocation location={instance} />;
+    case 'stockitem':
+      return <RenderStockItem item={instance} />;
     case 'supplierpart':
       return <RenderSupplierPart supplierpart={instance} />;
     case 'user':
diff --git a/src/frontend/src/components/render/Stock.tsx b/src/frontend/src/components/render/Stock.tsx
index f475610bf7..4894b2f255 100644
--- a/src/frontend/src/components/render/Stock.tsx
+++ b/src/frontend/src/components/render/Stock.tsx
@@ -17,3 +17,13 @@ export function RenderStockLocation({
     />
   );
 }
+
+export function RenderStockItem({ item }: { item: any }): ReactNode {
+  return (
+    <RenderInlineModel
+      primary={item.part_detail?.full_name}
+      secondary={item.quantity}
+      image={item.part_detail?.thumbnail || item.part_detail?.image}
+    />
+  );
+}