diff --git a/src/frontend/src/pages/part/CategoryDetail.tsx b/src/frontend/src/pages/part/CategoryDetail.tsx
index 12f0622cef..90129ca538 100644
--- a/src/frontend/src/pages/part/CategoryDetail.tsx
+++ b/src/frontend/src/pages/part/CategoryDetail.tsx
@@ -29,7 +29,7 @@ export default function CategoryDetail({}: {}) {
instance: category,
refreshInstance,
instanceQuery
- } = useInstance('/part/category/', id);
+ } = useInstance('/part/category/', id, { path_detail: true });
const categoryPanels: PanelType[] = useMemo(
() => [
@@ -69,24 +69,24 @@ export default function CategoryDetail({}: {}) {
[category, id]
);
+ const breadcrumbs = useMemo(
+ () => [
+ { name: t`Parts`, url: '/part' },
+ ...(category.path ?? []).map((c: any) => ({
+ name: c.name,
+ url: `/part/category/${c.pk}`
+ }))
+ ],
+ [category]
+ );
+
return (
{category.name ?? 'Top level'}}
- breadcrumbs={
- category.pk
- ? [
- { name: t`Parts`, url: '/part' },
- { name: '...', url: '' },
- {
- name: category.name ?? t`Top level`,
- url: `/part/category/${category.pk}`
- }
- ]
- : []
- }
+ breadcrumbs={breadcrumbs}
/>
diff --git a/src/frontend/src/pages/part/PartDetail.tsx b/src/frontend/src/pages/part/PartDetail.tsx
index b14b2fe840..c813326ed2 100644
--- a/src/frontend/src/pages/part/PartDetail.tsx
+++ b/src/frontend/src/pages/part/PartDetail.tsx
@@ -16,22 +16,17 @@ import {
IconTruckDelivery,
IconVersions
} from '@tabler/icons-react';
-import { useQuery } from '@tanstack/react-query';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
import { useMemo } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
-import { api } from '../../App';
import { PlaceholderPanel } from '../../components/items/Placeholder';
import { PageDetail } from '../../components/nav/PageDetail';
import { PanelGroup, PanelType } from '../../components/nav/PanelGroup';
import { AttachmentTable } from '../../components/tables/AttachmentTable';
import { RelatedPartTable } from '../../components/tables/part/RelatedPartTable';
import { StockItemTable } from '../../components/tables/stock/StockItemTable';
-import {
- MarkdownEditor,
- NotesEditor
-} from '../../components/widgets/MarkdownEditor';
+import { NotesEditor } from '../../components/widgets/MarkdownEditor';
import { editPart } from '../../functions/forms/PartForms';
import { useInstance } from '../../hooks/UseInstance';
@@ -45,7 +40,7 @@ export default function PartDetail() {
instance: part,
refreshInstance,
instanceQuery
- } = useInstance('/part/', id);
+ } = useInstance('/part/', id, { path_detail: true });
// Part data panels (recalculate when part data changes)
const partPanels: PanelType[] = useMemo(() => {
@@ -174,6 +169,18 @@ export default function PartDetail() {
/>
);
}
+
+ const breadcrumbs = useMemo(
+ () => [
+ { name: t`Parts`, url: '/part' },
+ ...(part.category_path ?? []).map((c: any) => ({
+ name: c.name,
+ url: `/part/category/${c.pk}`
+ }))
+ ],
+ [part]
+ );
+
return (
<>
@@ -186,11 +193,7 @@ export default function PartDetail() {
TODO: Part details
}
- breadcrumbs={[
- { name: t`Parts`, url: '/part' },
- { name: '...', url: '' },
- { name: part.name, url: `/part/${part.pk}` }
- ]}
+ breadcrumbs={breadcrumbs}
actions={[