[PUI] Tweaks (#7007)

* Allow pk field spec for row click * Fix row click-through for UsedInTable * Cleanup "details" view for part page * Add 'stock' column to parametric part table * Add details badges to some pages * Add extra badges to PartDetailPage
inventree · Apr 12, 2024 · f4d748e · f4d748e
1 parent cbbdb70
commit f4d748e
Show file tree

Hide file tree

Showing 11 changed files with 180 additions and 45 deletions.
diff --git a/src/frontend/src/components/details/DetailsBadge.tsx b/src/frontend/src/components/details/DetailsBadge.tsx
@@ -0,0 +1,26 @@
+import { Badge } from '@mantine/core';
+
+export type DetailsBadgeProps = {
+  color: string;
+  label: string;
+  size?: string;
+  visible?: boolean;
+  key?: any;
+};
+
+export default function DetailsBadge(props: DetailsBadgeProps) {
+  if (props.visible == false) {
+    return null;
+  }
+
+  return (
+    <Badge
+      key={props.key}
+      color={props.color}
+      variant="filled"
+      size={props.size ?? 'lg'}
+    >
+      {props.label}
+    </Badge>
+  );
+}
diff --git a/src/frontend/src/components/nav/PageDetail.tsx b/src/frontend/src/components/nav/PageDetail.tsx
@@ -1,6 +1,7 @@
 import { Group, Paper, Space, Stack, Text } from '@mantine/core';
 import { Fragment, ReactNode } from 'react';
 
+import DetailsBadge, { DetailsBadgeProps } from '../details/DetailsBadge';
 import { ApiImage } from '../images/ApiImage';
 import { StylishText } from '../items/StylishText';
 import { Breadcrumb, BreadcrumbList } from './BreadcrumbList';
@@ -15,6 +16,7 @@ export function PageDetail({
   title,
   subtitle,
   detail,
+  badges,
   imageUrl,
   breadcrumbs,
   breadcrumbAction,
@@ -24,6 +26,7 @@ export function PageDetail({
   subtitle?: string;
   imageUrl?: string;
   detail?: ReactNode;
+  badges?: ReactNode[];
   breadcrumbs?: Breadcrumb[];
   breadcrumbAction?: () => void;
   actions?: ReactNode[];
@@ -56,6 +59,9 @@ export function PageDetail({
             </Group>
             <Space />
             {detail}
+            <Group position="right" spacing="xs" noWrap>
+              {badges}
+            </Group>
             <Space />
             {actions && (
               <Group spacing={5} position="right">

diff --git a/src/frontend/src/pages/build/BuildDetail.tsx b/src/frontend/src/pages/build/BuildDetail.tsx
@@ -334,16 +334,17 @@ export default function BuildDetail() {
     ];
   }, [id, build, user]);
 
-  const buildDetail = useMemo(() => {
-    return build?.status ? (
-      StatusRenderer({
-        status: build.status,
-        type: ModelType.build
-      })
-    ) : (
-      <Skeleton />
-    );
-  }, [build, id]);
+  const buildBadges = useMemo(() => {
+    return instanceQuery.isFetching
+      ? []
+      : [
+          <StatusRenderer
+            status={build.status}
+            type={ModelType.build}
+            options={{ size: 'lg' }}
+          />
+        ];
+  }, [build, instanceQuery]);
 
   return (
     <>
@@ -353,7 +354,7 @@ export default function BuildDetail() {
         <PageDetail
           title={build.reference}
           subtitle={build.title}
-          detail={buildDetail}
+          badges={buildBadges}
           imageUrl={build.part_detail?.image ?? build.part_detail?.thumbnail}
           breadcrumbs={[
             { name: t`Build Orders`, url: '/build' },

diff --git a/src/frontend/src/pages/part/PartDetail.tsx b/src/frontend/src/pages/part/PartDetail.tsx
@@ -1,5 +1,6 @@
 import { t } from '@lingui/macro';
 import {
+  Badge,
   Grid,
   Group,
   LoadingOverlay,
@@ -30,11 +31,14 @@ import {
   IconVersions
 } from '@tabler/icons-react';
 import { useSuspenseQuery } from '@tanstack/react-query';
-import { useMemo, useState } from 'react';
+import { ReactNode, useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { api } from '../../App';
 import { DetailsField, DetailsTable } from '../../components/details/Details';
+import DetailsBadge, {
+  DetailsBadgeProps
+} from '../../components/details/DetailsBadge';
 import { DetailsImage } from '../../components/details/DetailsImage';
 import { ItemDetailsGrid } from '../../components/details/ItemDetails';
 import { PartIcons } from '../../components/details/PartIcons';
@@ -631,15 +635,34 @@ export default function PartDetail() {
     [part]
   );
 
-  const partDetail = useMemo(() => {
-    return (
-      <Group spacing="xs" noWrap={true}>
-        <Stack spacing="xs">
-          <Text>Stock: {part.in_stock}</Text>
-        </Stack>
-      </Group>
-    );
-  }, [part, id]);
+  const badges: ReactNode[] = useMemo(() => {
+    if (instanceQuery.isLoading || instanceQuery.isFetching) {
+      return [];
+    }
+
+    return [
+      <DetailsBadge
+        label={t`In Stock` + `: ${part.in_stock}`}
+        color={part.in_stock >= part.minimum_stock ? 'green' : 'orange'}
+        visible={part.in_stock > 0}
+      />,
+      <DetailsBadge
+        label={t`No Stock`}
+        color="red"
+        visible={part.in_stock == 0}
+      />,
+      <DetailsBadge
+        label={t`On Order` + `: ${part.ordering}`}
+        color="blue"
+        visible={part.on_order > 0}
+      />,
+      <DetailsBadge
+        label={t`In Production` + `: ${part.building}`}
+        color="blue"
+        visible={part.building > 0}
+      />
+    ];
+  }, [part, instanceQuery]);
 
   const partFields = usePartFields({ create: false });
 
@@ -740,7 +763,7 @@ export default function PartDetail() {
           title={t`Part` + ': ' + part.full_name}
           subtitle={part.description}
           imageUrl={part.image}
-          detail={partDetail}
+          badges={badges}
           breadcrumbs={breadcrumbs}
           breadcrumbAction={() => {
             setTreeOpen(true);

diff --git a/src/frontend/src/pages/purchasing/PurchaseOrderDetail.tsx b/src/frontend/src/pages/purchasing/PurchaseOrderDetail.tsx
@@ -1,5 +1,5 @@
 import { t } from '@lingui/macro';
-import { Grid, LoadingOverlay, Skeleton, Stack } from '@mantine/core';
+import { Grid, Group, LoadingOverlay, Skeleton, Stack } from '@mantine/core';
 import {
   IconDots,
   IconInfoCircle,
@@ -8,7 +8,7 @@ import {
   IconPackages,
   IconPaperclip
 } from '@tabler/icons-react';
-import { useMemo } from 'react';
+import { ReactNode, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { DetailsField, DetailsTable } from '../../components/details/Details';
@@ -25,6 +25,7 @@ import {
 } from '../../components/items/ActionDropdown';
 import { PageDetail } from '../../components/nav/PageDetail';
 import { PanelGroup, PanelType } from '../../components/nav/PanelGroup';
+import { StatusRenderer } from '../../components/render/StatusRenderer';
 import { NotesEditor } from '../../components/widgets/MarkdownEditor';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { ModelType } from '../../enums/ModelType';
@@ -297,6 +298,18 @@ export default function PurchaseOrderDetail() {
     ];
   }, [id, order, user]);
 
+  const orderBadges: ReactNode[] = useMemo(() => {
+    return instanceQuery.isLoading
+      ? []
+      : [
+          <StatusRenderer
+            status={order.status}
+            type={ModelType.purchaseorder}
+            options={{ size: 'lg' }}
+          />
+        ];
+  }, [order, instanceQuery]);
+
   return (
     <>
       {editPurchaseOrder.modal}
@@ -308,6 +321,7 @@ export default function PurchaseOrderDetail() {
           imageUrl={order.supplier_detail?.image}
           breadcrumbs={[{ name: t`Purchasing`, url: '/purchasing/' }]}
           actions={poActions}
+          badges={orderBadges}
         />
         <PanelGroup pageKey="purchaseorder" panels={orderPanels} />
       </Stack>

diff --git a/src/frontend/src/pages/sales/ReturnOrderDetail.tsx b/src/frontend/src/pages/sales/ReturnOrderDetail.tsx
@@ -6,14 +6,15 @@ import {
   IconNotes,
   IconPaperclip
 } from '@tabler/icons-react';
-import { useMemo } from 'react';
+import { ReactNode, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { DetailsField, DetailsTable } from '../../components/details/Details';
 import { DetailsImage } from '../../components/details/DetailsImage';
 import { ItemDetailsGrid } from '../../components/details/ItemDetails';
 import { PageDetail } from '../../components/nav/PageDetail';
 import { PanelGroup, PanelType } from '../../components/nav/PanelGroup';
+import { StatusRenderer } from '../../components/render/StatusRenderer';
 import { NotesEditor } from '../../components/widgets/MarkdownEditor';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { ModelType } from '../../enums/ModelType';
@@ -220,6 +221,18 @@ export default function ReturnOrderDetail() {
     ];
   }, [order, id]);
 
+  const orderBadges: ReactNode[] = useMemo(() => {
+    return instanceQuery.isLoading
+      ? []
+      : [
+          <StatusRenderer
+            status={order.status}
+            type={ModelType.returnorder}
+            options={{ size: 'lg' }}
+          />
+        ];
+  }, [order, instanceQuery]);
+
   return (
     <>
       <Stack spacing="xs">
@@ -228,6 +241,7 @@ export default function ReturnOrderDetail() {
           title={t`Return Order` + `: ${order.reference}`}
           subtitle={order.description}
           imageUrl={order.customer_detail?.image}
+          badges={orderBadges}
           breadcrumbs={[{ name: t`Sales`, url: '/sales/' }]}
         />
         <PanelGroup pageKey="returnorder" panels={orderPanels} />

diff --git a/src/frontend/src/pages/sales/SalesOrderDetail.tsx b/src/frontend/src/pages/sales/SalesOrderDetail.tsx
@@ -9,14 +9,15 @@ import {
   IconTruckDelivery,
   IconTruckLoading
 } from '@tabler/icons-react';
-import { useMemo } from 'react';
+import { ReactNode, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { DetailsField, DetailsTable } from '../../components/details/Details';
 import { DetailsImage } from '../../components/details/DetailsImage';
 import { ItemDetailsGrid } from '../../components/details/ItemDetails';
 import { PageDetail } from '../../components/nav/PageDetail';
 import { PanelGroup, PanelType } from '../../components/nav/PanelGroup';
+import { StatusRenderer } from '../../components/render/StatusRenderer';
 import { NotesEditor } from '../../components/widgets/MarkdownEditor';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { ModelType } from '../../enums/ModelType';
@@ -244,6 +245,18 @@ export default function SalesOrderDetail() {
     ];
   }, [order, id]);
 
+  const orderBadges: ReactNode[] = useMemo(() => {
+    return instanceQuery.isLoading
+      ? []
+      : [
+          <StatusRenderer
+            status={order.status}
+            type={ModelType.salesorder}
+            options={{ size: 'lg' }}
+          />
+        ];
+  }, [order, instanceQuery]);
+
   return (
     <>
       <Stack spacing="xs">
@@ -252,6 +265,7 @@ export default function SalesOrderDetail() {
           title={t`Sales Order` + `: ${order.reference}`}
           subtitle={order.description}
           imageUrl={order.customer_detail?.image}
+          badges={orderBadges}
           breadcrumbs={[{ name: t`Sales`, url: '/sales/' }]}
         />
         <PanelGroup pageKey="salesorder" panels={orderPanels} />

diff --git a/src/frontend/src/pages/stock/StockDetail.tsx b/src/frontend/src/pages/stock/StockDetail.tsx
@@ -1,7 +1,9 @@
 import { t } from '@lingui/macro';
 import {
   Alert,
+  Badge,
   Grid,
+  Group,
   LoadingOverlay,
   Skeleton,
   Stack,
@@ -20,10 +22,11 @@ import {
   IconPaperclip,
   IconSitemap
 } from '@tabler/icons-react';
-import { useMemo, useState } from 'react';
+import { ReactNode, useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { DetailsField, DetailsTable } from '../../components/details/Details';
+import DetailsBadge from '../../components/details/DetailsBadge';
 import { DetailsImage } from '../../components/details/DetailsImage';
 import { ItemDetailsGrid } from '../../components/details/ItemDetails';
 import {
@@ -38,6 +41,7 @@ import {
 import { PageDetail } from '../../components/nav/PageDetail';
 import { PanelGroup, PanelType } from '../../components/nav/PanelGroup';
 import { StockLocationTree } from '../../components/nav/StockLocationTree';
+import { StatusRenderer } from '../../components/render/StatusRenderer';
 import { NotesEditor } from '../../components/widgets/MarkdownEditor';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { ModelType } from '../../enums/ModelType';
@@ -437,6 +441,33 @@ export default function StockDetail() {
     [id, stockitem, user]
   );
 
+  const stockBadges: ReactNode[] = useMemo(() => {
+    return instanceQuery.isLoading
+      ? []
+      : [
+          <DetailsBadge
+            color="blue"
+            label={t`Serial Number` + `: ${stockitem.serial}`}
+            visible={!!stockitem.serial}
+          />,
+          <DetailsBadge
+            color="blue"
+            label={t`Quantity` + `: ${stockitem.quantity}`}
+            visible={!stockitem.serial}
+          />,
+          <DetailsBadge
+            color="blue"
+            label={t`Batch Code` + `: ${stockitem.batch}`}
+            visible={!!stockitem.batch}
+          />,
+          <StatusRenderer
+            status={stockitem.status}
+            type={ModelType.stockitem}
+            options={{ size: 'lg' }}
+          />
+        ];
+  }, [stockitem, instanceQuery]);
+
   return (
     <Stack>
       <LoadingOverlay visible={instanceQuery.isFetching} />
@@ -449,11 +480,7 @@ export default function StockDetail() {
         title={t`Stock Item`}
         subtitle={stockitem.part_detail?.full_name}
         imageUrl={stockitem.part_detail?.thumbnail}
-        detail={
-          <Alert color="teal" title="Stock Item">
-            <Text>Quantity: {stockitem.quantity ?? 'idk'}</Text>
-          </Alert>
-        }
+        badges={stockBadges}
         breadcrumbs={breadcrumbs}
         breadcrumbAction={() => {
           setTreeOpen(true);