From d5ee647c6e80a9c6547c52f0ffb2740bfc1b4362 Mon Sep 17 00:00:00 2001 From: Oliver Date: Fri, 21 Nov 2025 12:43:01 +1100 Subject: [PATCH] [ui] Label fix (#10874) * Fix for sales order allocations: - Improve UX - Clearer intent * Same fix for build order * Also for build line sub table --- src/frontend/src/hooks/UseForm.tsx | 4 +-- .../tables/build/BuildAllocatedStockTable.tsx | 27 ++++++++++++------- .../src/tables/build/BuildLineTable.tsx | 25 ++++++++++------- .../sales/SalesOrderAllocationTable.tsx | 21 ++++++++++----- 4 files changed, 50 insertions(+), 27 deletions(-) diff --git a/src/frontend/src/hooks/UseForm.tsx b/src/frontend/src/hooks/UseForm.tsx index 31e732b314..6213633e6b 100644 --- a/src/frontend/src/hooks/UseForm.tsx +++ b/src/frontend/src/hooks/UseForm.tsx @@ -161,8 +161,8 @@ export function useDeleteApiFormModal(props: ApiFormModalProps) { () => ({ ...props, method: props.method ?? 'DELETE', - submitText: t`Delete`, - submitColor: 'red', + submitText: props.submitText ?? t`Delete`, + submitColor: props.submitColor ?? 'red', successMessage: props.successMessage === null ? null diff --git a/src/frontend/src/tables/build/BuildAllocatedStockTable.tsx b/src/frontend/src/tables/build/BuildAllocatedStockTable.tsx index bdecc5d61b..0a67448029 100644 --- a/src/frontend/src/tables/build/BuildAllocatedStockTable.tsx +++ b/src/frontend/src/tables/build/BuildAllocatedStockTable.tsx @@ -1,11 +1,7 @@ import { t } from '@lingui/core/macro'; import { useCallback, useMemo, useState } from 'react'; -import { - type RowAction, - RowDeleteAction, - RowEditAction -} from '@lib/components/RowActions'; +import { type RowAction, RowEditAction } from '@lib/components/RowActions'; import { ApiEndpoints } from '@lib/enums/ApiEndpoints'; import { ModelType } from '@lib/enums/ModelType'; import { UserRoles } from '@lib/enums/Roles'; @@ -14,7 +10,8 @@ import { ActionButton } from '@lib/index'; import type { TableFilter } from '@lib/types/Filters'; import type { StockOperationProps } from '@lib/types/Forms'; import type { TableColumn } from '@lib/types/Tables'; -import { IconCircleDashedCheck } from '@tabler/icons-react'; +import { Alert } from '@mantine/core'; +import { IconCircleDashedCheck, IconCircleX } from '@tabler/icons-react'; import { useConsumeBuildItemsForm } from '../../forms/BuildForms'; import { useDeleteApiFormModal, @@ -177,8 +174,14 @@ export default function BuildAllocatedStockTable({ const deleteItem = useDeleteApiFormModal({ pk: selectedItemId, url: ApiEndpoints.build_item_list, - title: t`Delete Stock Allocation`, - table: table + title: t`Remove Allocated Stock`, + submitText: t`Remove`, + table: table, + preFormContent: ( + + {t`Are you sure you want to remove this allocated stock from the order?`} + + ) }); const [selectedItems, setSelectedItems] = useState([]); @@ -251,13 +254,17 @@ export default function BuildAllocatedStockTable({ editItem.open(); } }), - RowDeleteAction({ + { + title: t`Remove`, + tooltip: t`Remove allocated stock`, + icon: , + color: 'red', hidden: !user.hasDeleteRole(UserRoles.build), onClick: () => { setSelectedItemId(record.pk); deleteItem.open(); } - }) + } ]; }, [user] diff --git a/src/frontend/src/tables/build/BuildLineTable.tsx b/src/frontend/src/tables/build/BuildLineTable.tsx index a58c4ccca1..976f977c62 100644 --- a/src/frontend/src/tables/build/BuildLineTable.tsx +++ b/src/frontend/src/tables/build/BuildLineTable.tsx @@ -5,6 +5,7 @@ import { IconCircleCheck, IconCircleDashedCheck, IconCircleMinus, + IconCircleX, IconShoppingCart, IconTool, IconWand @@ -15,11 +16,7 @@ import { useNavigate } from 'react-router-dom'; import { ActionButton } from '@lib/components/ActionButton'; import { ProgressBar } from '@lib/components/ProgressBar'; -import { - RowDeleteAction, - RowEditAction, - RowViewAction -} from '@lib/components/RowActions'; +import { RowEditAction, RowViewAction } from '@lib/components/RowActions'; import { ApiEndpoints } from '@lib/enums/ApiEndpoints'; import { ModelType } from '@lib/enums/ModelType'; import { UserRoles } from '@lib/enums/Roles'; @@ -110,12 +107,16 @@ export function BuildLineSubTable({ onEditAllocation?.(record.pk); } }), - RowDeleteAction({ + { + title: t`Remove`, + tooltip: t`Remove allocated stock`, + icon: , + color: 'red', hidden: !onDeleteAllocation || !user.hasDeleteRole(UserRoles.build), onClick: () => { onDeleteAllocation?.(record.pk); } - }), + }, RowViewAction({ title: t`View Stock Item`, modelType: ModelType.stockitem, @@ -660,8 +661,14 @@ export default function BuildLineTable({ const deleteAllocation = useDeleteApiFormModal({ url: ApiEndpoints.build_item_list, pk: selectedAllocation, - title: t`Delete Stock Allocation`, - onFormSuccess: table.refreshTable + title: t`Remove Allocated Stock`, + submitText: t`Remove`, + onFormSuccess: table.refreshTable, + preFormContent: ( + + {t`Are you sure you want to remove this allocated stock from the order?`} + + ) }); const [partsToOrder, setPartsToOrder] = useState([]); diff --git a/src/frontend/src/tables/sales/SalesOrderAllocationTable.tsx b/src/frontend/src/tables/sales/SalesOrderAllocationTable.tsx index e67a0ee171..4355366ac9 100644 --- a/src/frontend/src/tables/sales/SalesOrderAllocationTable.tsx +++ b/src/frontend/src/tables/sales/SalesOrderAllocationTable.tsx @@ -4,7 +4,6 @@ import { useCallback, useMemo, useState } from 'react'; import { ActionButton } from '@lib/components/ActionButton'; import { type RowAction, - RowDeleteAction, RowEditAction, RowViewAction } from '@lib/components/RowActions'; @@ -15,7 +14,8 @@ import { apiUrl } from '@lib/functions/Api'; import type { TableFilter } from '@lib/types/Filters'; import type { StockOperationProps } from '@lib/types/Forms'; import type { TableColumn } from '@lib/types/Tables'; -import { IconTruckDelivery } from '@tabler/icons-react'; +import { Alert } from '@mantine/core'; +import { IconCircleX, IconTruckDelivery } from '@tabler/icons-react'; import { useNavigate } from 'react-router-dom'; import { formatDate } from '../../defaults/formatters'; import { useSalesOrderAllocationFields } from '../../forms/SalesOrderForms'; @@ -215,7 +215,13 @@ export default function SalesOrderAllocationTable({ const deleteAllocation = useDeleteApiFormModal({ url: ApiEndpoints.sales_order_allocation_list, pk: selectedAllocation, - title: t`Delete Allocation`, + title: t`Remove Allocated Stock`, + preFormContent: ( + + {t`Are you sure you want to remove this allocated stock from the order?`} + + ), + submitText: t`Remove`, onFormSuccess: () => table.refreshTable() }); @@ -237,8 +243,11 @@ export default function SalesOrderAllocationTable({ editAllocation.open(); } }), - RowDeleteAction({ - tooltip: t`Delete Allocation`, + { + title: t`Remove`, + tooltip: t`Remove allocated stock`, + icon: , + color: 'red', hidden: isShipped || !allowEdit || @@ -247,7 +256,7 @@ export default function SalesOrderAllocationTable({ setSelectedAllocation(record.pk); deleteAllocation.open(); } - }), + }, RowViewAction({ tooltip: t`View Shipment`, title: t`View Shipment`,