UI consolidation (#8450)

* UI consolidation - Combine "suppliers" and "manufactuers" onto same tab * Update StylishText.tsx Remove unused import
inventree · Nov 8, 2024 · 656950a · 656950a
1 parent cd9f491
commit 656950a
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 25 deletions.
diff --git a/src/frontend/src/pages/part/PartDetail.tsx b/src/frontend/src/pages/part/PartDetail.tsx
@@ -12,7 +12,6 @@ import {
 import {
   IconBookmarks,
   IconBuilding,
-  IconBuildingFactory2,
   IconCalendarStats,
   IconClipboardList,
   IconCurrencyDollar,
@@ -93,8 +92,6 @@ import PartPurchaseOrdersTable from '../../tables/part/PartPurchaseOrdersTable';
 import PartTestTemplateTable from '../../tables/part/PartTestTemplateTable';
 import { PartVariantTable } from '../../tables/part/PartVariantTable';
 import { RelatedPartTable } from '../../tables/part/RelatedPartTable';
-import { ManufacturerPartTable } from '../../tables/purchasing/ManufacturerPartTable';
-import { SupplierPartTable } from '../../tables/purchasing/SupplierPartTable';
 import { ReturnOrderTable } from '../../tables/sales/ReturnOrderTable';
 import { SalesOrderTable } from '../../tables/sales/SalesOrderTable';
 import { StockItemTable } from '../../tables/stock/StockItemTable';
@@ -103,6 +100,7 @@ import PartAllocationPanel from './PartAllocationPanel';
 import PartPricingPanel from './PartPricingPanel';
 import PartSchedulingDetail from './PartSchedulingDetail';
 import PartStocktakeDetail from './PartStocktakeDetail';
+import PartSupplierDetail from './PartSupplierDetail';
 
 /**
  * Detail view for a single Part instance
@@ -651,31 +649,17 @@ export default function PartDetail() {
         icon: <IconCurrencyDollar />,
         content: part ? <PartPricingPanel part={part} /> : <Skeleton />
       },
-      {
-        name: 'manufacturers',
-        label: t`Manufacturers`,
-        icon: <IconBuildingFactory2 />,
-        hidden: !part.purchaseable,
-        content: part.pk && (
-          <ManufacturerPartTable
-            params={{
-              part: part.pk
-            }}
-          />
-        )
-      },
       {
         name: 'suppliers',
         label: t`Suppliers`,
         icon: <IconBuilding />,
         hidden:
           !part.purchaseable || !user.hasViewRole(UserRoles.purchase_order),
-        content: part.pk && (
-          <SupplierPartTable
-            params={{
-              part: part.pk
-            }}
-          />
+
+        content: part.pk ? (
+          <PartSupplierDetail partId={part.pk} />
+        ) : (
+          <Skeleton />
         )
       },
       {

diff --git a/src/frontend/src/pages/part/PartSupplierDetail.tsx b/src/frontend/src/pages/part/PartSupplierDetail.tsx
@@ -0,0 +1,29 @@
+import { t } from '@lingui/macro';
+import { Accordion, Skeleton } from '@mantine/core';
+
+import { StylishText } from '../../components/items/StylishText';
+import { ManufacturerPartTable } from '../../tables/purchasing/ManufacturerPartTable';
+import { SupplierPartTable } from '../../tables/purchasing/SupplierPartTable';
+
+export default function PartSupplierDetail({ partId }: { partId: number }) {
+  return (
+    <Accordion multiple defaultValue={['part-suppliers', 'part-manufacturers']}>
+      <Accordion.Item value="part-suppliers">
+        <Accordion.Control>
+          <StylishText size="lg">{t`Suppliers`}</StylishText>
+        </Accordion.Control>
+        <Accordion.Panel>
+          <SupplierPartTable params={{ part: partId }} />
+        </Accordion.Panel>
+      </Accordion.Item>
+      <Accordion.Item value="part-manufacturers">
+        <Accordion.Control>
+          <StylishText size="lg">{t`Manufacturers`}</StylishText>
+        </Accordion.Control>
+        <Accordion.Panel>
+          <ManufacturerPartTable params={{ part: partId }} />
+        </Accordion.Panel>
+      </Accordion.Item>
+    </Accordion>
+  );
+}
diff --git a/src/frontend/tests/pages/pui_part.spec.ts b/src/frontend/tests/pages/pui_part.spec.ts
@@ -17,7 +17,6 @@ test('Parts - Tabs', async ({ page }) => {
   await page.getByRole('tab', { name: 'Allocations' }).click();
   await page.getByRole('tab', { name: 'Used In' }).click();
   await page.getByRole('tab', { name: 'Pricing' }).click();
-  await page.getByRole('tab', { name: 'Manufacturers' }).click();
   await page.getByRole('tab', { name: 'Suppliers' }).click();
   await page.getByRole('tab', { name: 'Purchase Orders' }).click();
   await page.getByRole('tab', { name: 'Scheduling' }).click();
@@ -48,9 +47,9 @@ test('Parts - Tabs', async ({ page }) => {
 test('Parts - Manufacturer Parts', async ({ page }) => {
   await doQuickLogin(page);
 
-  await page.goto(`${baseUrl}/part/84/manufacturers`);
+  await page.goto(`${baseUrl}/part/84/suppliers`);
 
-  await page.getByRole('tab', { name: 'Manufacturers' }).click();
+  await page.getByRole('tab', { name: 'Suppliers' }).click();
   await page.getByText('Hammond Manufacturing').click();
   await page.getByRole('tab', { name: 'Parameters' }).click();
   await page.getByRole('tab', { name: 'Suppliers' }).click();