[UI] Fixes (#10697)

* Fix for StockItemTestResultTable - Fix column alignment * Update rendering * Refactor <SupplierPartTable /> - Formalize parameter arguments
2025-10-29 12:27:41 +00:00 · 2025-10-28 20:18:56 +11:00
parent 2e4b1d65f7
commit f2b531bfbb
8 changed files with 55 additions and 36 deletions
--- a/src/frontend/src/forms/CompanyForms.tsx
+++ b/src/frontend/src/forms/CompanyForms.tsx
@@ -18,8 +18,12 @@ import { useMemo } from 'react';
 * Field set for SupplierPart instance
 */
 export function useSupplierPartFields({
+  manufacturerId,
+  manufacturerPartId,
  partId
 }: {
+  manufacturerId?: number;
+  manufacturerPartId?: number;
  partId?: number;
 }) {
  return useMemo(() => {
@@ -34,7 +38,9 @@ export function useSupplierPartFields({
        }
      },
      manufacturer_part: {
+        value: manufacturerPartId,
        filters: {
+          manufacturer: manufacturerId,
          part_detail: true,
          manufacturer_detail: true
        },
@@ -69,7 +75,7 @@ export function useSupplierPartFields({
    };

    return fields;
-  }, [partId]);
+  }, [manufacturerId, manufacturerPartId, partId]);
 }

 export function useManufacturerPartFields() {
--- a/src/frontend/src/pages/company/CompanyDetail.tsx
+++ b/src/frontend/src/pages/company/CompanyDetail.tsx
@@ -187,9 +187,7 @@ export default function CompanyDetail(props: Readonly<CompanyDetailProps>) {
        label: t`Supplied Parts`,
        icon: <IconPackageExport />,
        hidden: !company?.is_supplier,
-        content: company?.pk && (
-          <SupplierPartTable params={{ supplier: company.pk }} />
-        )
+        content: company?.pk && <SupplierPartTable supplierId={company.pk} />
      },
      {
        name: 'manufactured-parts',
--- a/src/frontend/src/pages/company/ManufacturerPartDetail.tsx
+++ b/src/frontend/src/pages/company/ManufacturerPartDetail.tsx
@@ -193,9 +193,9 @@ export default function ManufacturerPartDetail() {
        icon: <IconBuildingWarehouse />,
        content: manufacturerPart?.pk ? (
          <SupplierPartTable
-            params={{
-              manufacturer_part: manufacturerPart.pk
-            }}
+            partId={manufacturerPart.part}
+            manufacturerId={manufacturerPart.manufacturer}
+            manufacturerPartId={manufacturerPart.pk}
          />
        ) : (
          <Skeleton />
--- a/src/frontend/src/pages/company/SupplierPartDetail.tsx
+++ b/src/frontend/src/pages/company/SupplierPartDetail.tsx
@@ -198,7 +198,7 @@ export default function SupplierPartDetail() {
        icon: 'purchase_orders'
      },
      {
-        type: 'string',
+        type: 'number',
        name: 'available',
        label: t`Supplier Availability`,
        hidden: !data.availability_updated,
@@ -206,7 +206,7 @@ export default function SupplierPartDetail() {
        icon: 'packages'
      },
      {
-        type: 'string',
+        type: 'date',
        name: 'availability_updated',
        label: t`Availability Updated`,
        copy: true,
--- a/src/frontend/src/pages/part/PartSupplierDetail.tsx
+++ b/src/frontend/src/pages/part/PartSupplierDetail.tsx
@@ -15,7 +15,7 @@ export default function PartSupplierDetail({
          <StylishText size='lg'>{t`Suppliers`}</StylishText>
        </Accordion.Control>
        <Accordion.Panel>
-          <SupplierPartTable params={{ part: partId }} />
+          <SupplierPartTable partId={partId} />
        </Accordion.Panel>
      </Accordion.Item>
      <Accordion.Item value='part-manufacturers'>
--- a/src/frontend/src/pages/purchasing/PurchasingIndex.tsx
+++ b/src/frontend/src/pages/purchasing/PurchasingIndex.tsx
@@ -91,7 +91,7 @@ export default function PurchasingIndex() {
        name: 'supplier-parts',
        label: t`Supplier Parts`,
        icon: <IconPackageExport />,
-        content: <SupplierPartTable params={{}} />
+        content: <SupplierPartTable />
      },
      {
        name: 'manufacturer',
--- a/src/frontend/src/tables/purchasing/SupplierPartTable.tsx
+++ b/src/frontend/src/tables/purchasing/SupplierPartTable.tsx
@@ -13,6 +13,7 @@ import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
 import { UserRoles } from '@lib/enums/Roles';
 import { apiUrl } from '@lib/functions/Api';
+import { formatDecimal } from '@lib/functions/Formatting';
 import type { TableFilter } from '@lib/types/Filters';
 import type { TableColumn } from '@lib/types/Tables';
 import { IconPackageImport } from '@tabler/icons-react';
@@ -43,8 +44,16 @@ import { TableHoverCard } from '../TableHoverCard';
 */

 export function SupplierPartTable({
-  params
-}: Readonly<{ params: any }>): ReactNode {
+  manufacturerId,
+  manufacturerPartId,
+  partId,
+  supplierId
+}: Readonly<{
+  manufacturerId?: number;
+  manufacturerPartId?: number;
+  partId?: number;
+  supplierId?: number;
+}>): ReactNode {
  const table = useTable('supplierparts');

  const user = useUserState();
@@ -53,7 +62,7 @@ export function SupplierPartTable({
  const tableColumns: TableColumn[] = useMemo(() => {
    return [
      PartColumn({
-        switchable: 'part' in params,
+        switchable: !!partId,
        part: 'part_detail'
      }),
      {
@@ -119,7 +128,7 @@ export function SupplierPartTable({

          return (
            <TableHoverCard
-              value={record.pack_quantity}
+              value={formatDecimal(record.pack_quantity)}
              extra={extra}
              title={t`Pack Quantity`}
            />
@@ -147,10 +156,10 @@ export function SupplierPartTable({
        }
      }
    ];
-  }, [params]);
+  }, [partId]);

  const supplierPartFields = useSupplierPartFields({
-    partId: params?.part
+    partId: partId
  });

  const addSupplierPart = useCreateApiFormModal({
@@ -158,8 +167,9 @@ export function SupplierPartTable({
    title: t`Add Supplier Part`,
    fields: supplierPartFields,
    initialData: {
-      part: params?.part,
-      supplier: params?.supplier
+      part: partId,
+      supplier: supplierId,
+      manufacturer_part: manufacturerPartId
    },
    table: table,
    successMessage: t`Supplier part created`
@@ -167,7 +177,7 @@ export function SupplierPartTable({

  const supplierPlugins = usePluginsWithMixin('supplier');
  const importPartWizard = ImportPartWizard({
-    partId: params?.part
+    partId: partId
  });

  const tableActions = useMemo(() => {
@@ -187,11 +197,11 @@ export function SupplierPartTable({
        hidden={
          supplierPlugins.length === 0 ||
          !user.hasAddRole(UserRoles.part) ||
-          !params?.part
+          !partId
        }
      />
    ];
-  }, [user, supplierPlugins]);
+  }, [user, partId, supplierPlugins]);

  const tableFilters: TableFilter[] = useMemo(() => {
    return [
@@ -272,7 +282,10 @@ export function SupplierPartTable({
        columns={tableColumns}
        props={{
          params: {
-            ...params,
+            manufacturer: manufacturerId,
+            manufacturer_part: manufacturerPartId,
+            supplier: supplierId,
+            part: partId,
            part_detail: true,
            supplier_detail: true,
            manufacturer_detail: true
--- a/src/frontend/src/tables/stock/StockItemTestResultTable.tsx
+++ b/src/frontend/src/tables/stock/StockItemTestResultTable.tsx
@@ -153,19 +153,21 @@ export default function StockItemTestResultTable({

            return (
              <Group justify='space-between' wrap='nowrap'>
-                {!child && (
-                  <RowExpansionIcon
-                    enabled={multipleResults}
-                    expanded={table.isRowExpanded(record.pk)}
-                  />
-                )}
-                <Text
-                  style={{ fontStyle: installed ? 'italic' : undefined }}
-                  c={enabled ? undefined : 'red'}
-                >
-                  {!record.templateId && '- '}
-                  {record.test_name ?? record.template_detail?.test_name}
-                </Text>
+                <Group gap='xs'>
+                  {!child && (
+                    <RowExpansionIcon
+                      enabled={multipleResults}
+                      expanded={table.isRowExpanded(record.pk)}
+                    />
+                  )}
+                  <Text
+                    style={{ fontStyle: installed ? 'italic' : undefined }}
+                    c={enabled ? undefined : 'red'}
+                  >
+                    {!record.templateId && '- '}
+                    {record.test_name ?? record.template_detail?.test_name}
+                  </Text>
+                </Group>
                <Group justify='right'>
                  {record.results && record.results.length > 1 && (
                    <Tooltip label={t`Test Results`}>