From 7058696030e2b92887c06d235511aaf91862e611 Mon Sep 17 00:00:00 2001 From: Oliver Date: Sat, 16 Dec 2023 21:48:14 +1100 Subject: [PATCH] [PUI] Price range formatting (#6107) * Implement price range formatter * Remove error message logging * Fix unused variable issue * Clean up more error messages --- .../src/components/images/ApiImage.tsx | 4 +-- src/frontend/src/components/nav/Header.tsx | 1 - .../src/components/nav/NotificationDrawer.tsx | 1 - .../src/components/tables/bom/BomTable.tsx | 11 ++---- .../src/components/tables/part/PartTable.tsx | 10 +++--- src/frontend/src/defaults/formatters.tsx | 35 ++++++++++++++++++- 6 files changed, 42 insertions(+), 20 deletions(-) diff --git a/src/frontend/src/components/images/ApiImage.tsx b/src/frontend/src/components/images/ApiImage.tsx index d06ee57f84..d8f457b427 100644 --- a/src/frontend/src/components/images/ApiImage.tsx +++ b/src/frontend/src/components/images/ApiImage.tsx @@ -49,14 +49,12 @@ export function ApiImage(props: ImageProps) { // User is not authorized to view this image, or the image is not available setImage(''); setAuthorized(false); - console.error(`Error fetching image ${props.src}:`, response); break; } return response; }) - .catch((error) => { - console.error(`Error fetching image ${props.src}:`, error); + .catch((_error) => { return null; }); }, diff --git a/src/frontend/src/components/nav/Header.tsx b/src/frontend/src/components/nav/Header.tsx index eb87b3baca..0e4e6b6c37 100644 --- a/src/frontend/src/components/nav/Header.tsx +++ b/src/frontend/src/components/nav/Header.tsx @@ -49,7 +49,6 @@ export function Header() { return response.data; }) .catch((error) => { - console.error('Error fetching notifications:', error); return error; }); }, diff --git a/src/frontend/src/components/nav/NotificationDrawer.tsx b/src/frontend/src/components/nav/NotificationDrawer.tsx index e5ec187592..d38abada8b 100644 --- a/src/frontend/src/components/nav/NotificationDrawer.tsx +++ b/src/frontend/src/components/nav/NotificationDrawer.tsx @@ -44,7 +44,6 @@ export function NotificationDrawer({ }) .then((response) => response.data) .catch((error) => { - console.error('Error fetching notifications:', error); return error; }), refetchOnMount: false, diff --git a/src/frontend/src/components/tables/bom/BomTable.tsx b/src/frontend/src/components/tables/bom/BomTable.tsx index c20039ba85..95139857d6 100644 --- a/src/frontend/src/components/tables/bom/BomTable.tsx +++ b/src/frontend/src/components/tables/bom/BomTable.tsx @@ -8,6 +8,7 @@ import { import { ReactNode, useCallback, useMemo } from 'react'; import { useNavigate } from 'react-router-dom'; +import { formatPriceRange } from '../../../defaults/formatters'; import { ApiPaths } from '../../../enums/ApiEndpoints'; import { UserRoles } from '../../../enums/Roles'; import { bomItemFields } from '../../../forms/BomForms'; @@ -142,14 +143,8 @@ export function BomTable({ title: t`Price Range`, sortable: false, - render: (row) => { - let min_price = row.pricing_min || row.pricing_max; - let max_price = row.pricing_max || row.pricing_min; - - // TODO: Custom price range rendering component - // TODO: Footer component for price range - return `${min_price} - ${max_price}`; - } + render: (record: any) => + formatPriceRange(record.pricing_min, record.pricing_max) }, { accessor: 'available_stock', diff --git a/src/frontend/src/components/tables/part/PartTable.tsx b/src/frontend/src/components/tables/part/PartTable.tsx index 1f887a1bdd..0e0bfe0a2a 100644 --- a/src/frontend/src/components/tables/part/PartTable.tsx +++ b/src/frontend/src/components/tables/part/PartTable.tsx @@ -3,6 +3,7 @@ import { Group, Text } from '@mantine/core'; import { ReactNode, useMemo } from 'react'; import { useNavigate } from 'react-router-dom'; +import { formatPriceRange } from '../../../defaults/formatters'; import { ApiPaths } from '../../../enums/ApiEndpoints'; import { shortenString } from '../../../functions/tables'; import { useTable } from '../../../hooks/UseTable'; @@ -136,7 +137,7 @@ function partTableColumns(): TableColumn[] { return ( + {text} {record.units && ( @@ -155,11 +156,8 @@ function partTableColumns(): TableColumn[] { accessor: 'price_range', title: t`Price Range`, sortable: false, - - render: function (record: any) { - // TODO: Render price range - return '-- price --'; - } + render: (record: any) => + formatPriceRange(record.pricing_min, record.pricing_max) }, LinkColumn() ]; diff --git a/src/frontend/src/defaults/formatters.tsx b/src/frontend/src/defaults/formatters.tsx index f5992b793a..069ecfcf1b 100644 --- a/src/frontend/src/defaults/formatters.tsx +++ b/src/frontend/src/defaults/formatters.tsx @@ -21,7 +21,7 @@ interface formatCurrencyOptionsType { * - digits: Maximum number of significant digits (default = 10) */ export function formatCurrency( - value: number, + value: number | null, options: formatCurrencyOptionsType = {} ) { if (value == null) { @@ -53,6 +53,39 @@ export function formatCurrency( return formatter.format(value); } +/* + * Render the price range for the provided values + */ +export function formatPriceRange( + minValue: number | null, + maxValue: number | null, + options: formatCurrencyOptionsType = {} +) { + // If neither values are provided, return a dash + if (minValue == null && maxValue == null) { + return '-'; + } + + if (minValue == null) { + return formatCurrency(maxValue!, options); + } + + if (maxValue == null) { + return formatCurrency(minValue!, options); + } + + // If both values are the same, return a single value + if (minValue == maxValue) { + return formatCurrency(minValue, options); + } + + // Otherwise, return a range + return `${formatCurrency(minValue, options)} - ${formatCurrency( + maxValue, + options + )}`; +} + interface renderDateOptionsType { showTime?: boolean; }