#4107 inline editing with error handling + pdm logic update

Author: cielbellerose

src/backend/src/services/boms.services.ts

@@ -669,6 +669,12 @@ export default class BillOfMaterialsService {
       manufacturer = await BillOfMaterialsService.getSingleManufacturerWithQueryArgs(manufacturerName, organization);
     }
 
+    // recalculate subtotal on edits
+    const finalPrice = price !== undefined ? price : (material.price ?? undefined);
+    const finalQuantity = quantity !== undefined ? quantity : (material.quantity ?? undefined);
+    const computedSubtotal =
+      finalPrice !== undefined && finalQuantity !== undefined ? Math.round(finalPrice * Number(finalQuantity)) : undefined;
+
     const updatedMaterial = await prisma.material.update({
       where: { materialId },
       data: {
@@ -680,12 +686,12 @@ export default class BillOfMaterialsService {
         quantity,
         unitId: unit ? unit.id : null,
         price,
-        subtotal,
+        subtotal: computedSubtotal,
         linkUrl,
         notes,
         wbsElementId: project.wbsElementId,
         assemblyId,
-        pdmFileName
+        pdmFileName: pdmFileName !== undefined ? pdmFileName || null : undefined
       },
       ...getMaterialQueryArgs(organization.organizationId)
     });

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/BOMTable.tsx

@@ -13,9 +13,21 @@ interface BOMTableProps {
   columns: GridColumns<BomRow>;
   materials: Material[];
   assemblies: Assembly[];
+  processRowUpdate: (newRow: BomRow, oldRow: BomRow) => Promise<BomRow>;
+  onProcessRowUpdateError: (error: unknown) => void;
+  editPerms: boolean;
 }
 
-const BOMTable: React.FC<BOMTableProps> = ({ setHideColumn, assignMaterial, columns, materials, assemblies }) => {
+const BOMTable: React.FC<BOMTableProps> = ({
+  setHideColumn,
+  assignMaterial,
+  columns,
+  materials,
+  assemblies,
+  processRowUpdate,
+  onProcessRowUpdateError,
+  editPerms
+}) => {
   const [openRows, setOpenRows] = useState<String[]>([]);
   const [draggedMaterial, setDraggedMaterial] = useState<Material | null>(null);
 
@@ -145,6 +157,12 @@ const BOMTable: React.FC<BOMTableProps> = ({ setHideColumn, assignMaterial, colu
         sx={bomTableStyles.datagrid}
         disableSelectionOnClick
         autoHeight={false}
+        experimentalFeatures={{ newEditingApi: true }}
+        processRowUpdate={
+          processRowUpdate as unknown as (newRow: GridValidRowModel, oldRow: GridValidRowModel) => Promise<GridValidRowModel>
+        }
+        onProcessRowUpdateError={onProcessRowUpdateError}
+        isCellEditable={(params) => editPerms && !String(params.row.id).startsWith('assembly')}
         onRowClick={openAssembly}
         componentsProps={{
           row: {

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/BOMTableWrapper.tsx

@@ -2,6 +2,7 @@ import { Box } from '@mui/system';
 import { GridActionsCellItem, GridColumns, GridRowParams } from '@mui/x-data-grid';
 import { useEffect, useState } from 'react';
 import { Assembly, Material, Project, isLeadership } from 'shared';
+import Decimal from 'decimal.js';
 import DeleteIcon from '@mui/icons-material/Delete';
 import EditIcon from '@mui/icons-material/Edit';
 import MoveToInboxIcon from '@mui/icons-material/MoveToInbox';
@@ -12,12 +13,15 @@ import {
   useAssignMaterialToAssembly,
   useDeleteAssembly,
   useDeleteMaterial,
-  useEditMaterialStatus
+  useEditMaterialStatus,
+  useGetAllManufacturers,
+  useGetAllMaterialTypes
 } from '../../../../hooks/bom.hooks';
 import LoadingIndicator from '../../../../components/LoadingIndicator';
 import EditMaterialModal from './MaterialForm/EditMaterialModal';
 import { Button, Link, Typography } from '@mui/material';
-import { bomBaseColDef } from '../../../../utils/bom.utils';
+import { BomRow, bomBaseColDef } from '../../../../utils/bom.utils';
+import { centsToDollar } from '../../../../utils/pipes';
 import NERModal from '../../../../components/NERModal';
 import { StatusDropdownCell } from './BOMTableCustomCells';
 import LinkIcon from '@mui/icons-material/Link';
@@ -49,6 +53,8 @@ const BOMTableWrapper: React.FC<BOMTableWrapperProps> = ({
   const { mutateAsync: deleteAssemblyMutateAsync, isLoading: deleteAssemblyIsLoading } = useDeleteAssembly(project.wbsNum);
   const { mutateAsync: editMaterialStatus } = useEditMaterialStatus(project.wbsNum);
   const { mutateAsync: assignMaterialToAssembly } = useAssignMaterialToAssembly();
+  const { data: materialTypes } = useGetAllMaterialTypes();
+  const { data: manufacturers } = useGetAllManufacturers();
 
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
 
@@ -120,6 +126,85 @@ const BOMTableWrapper: React.FC<BOMTableWrapperProps> = ({
     project.teams.some((team) => team.leads.map((lead) => lead.userId).includes(user.userId)) ||
     project.teams.some((team) => team.members.map((member) => member.userId).includes(user.userId));
 
+  const processRowUpdate = async (newRow: BomRow, oldRow: BomRow): Promise<BomRow> => {
+    // assemblies are not editable
+    if (String(newRow.id).startsWith('assembly')) return newRow;
+
+    const material = materials.find((m) => m.materialId === newRow.materialId);
+    if (!material) return newRow;
+
+    // MUI writes the edited number directly to the field, so we detect changes via typeof
+    const newQuantity = typeof newRow.quantity === 'number' ? (newRow.quantity as number) : null;
+    const newPriceDollars = typeof newRow.price === 'number' ? (newRow.price as number) : null;
+
+    if (
+      newRow.name === oldRow.name &&
+      newRow.type === oldRow.type &&
+      newRow.manufacturer === oldRow.manufacturer &&
+      newRow.manufacturerPN === oldRow.manufacturerPN &&
+      newRow.pdmFileName === oldRow.pdmFileName &&
+      newQuantity === null &&
+      newPriceDollars === null
+    )
+      return newRow;
+
+    if (newRow.name !== undefined && !newRow.name.trim()) {
+      toast.error('Name cannot be empty');
+      return oldRow;
+    }
+    if (newQuantity !== null && (isNaN(newQuantity) || newQuantity <= 0)) {
+      toast.error('Quantity must be a positive number');
+      return oldRow;
+    }
+    if (newPriceDollars !== null && (isNaN(newPriceDollars) || newPriceDollars < 0)) {
+      toast.error('Price must be a non-negative number');
+      return oldRow;
+    }
+
+    const changedFields: string[] = [];
+    if (newRow.name !== oldRow.name) changedFields.push('Name');
+    if (newRow.type !== oldRow.type) changedFields.push('Type');
+    if (newRow.manufacturer !== oldRow.manufacturer) changedFields.push('Manufacturer');
+    if (newRow.manufacturerPN !== oldRow.manufacturerPN) changedFields.push('Manufacturer PN');
+    if (newRow.pdmFileName !== oldRow.pdmFileName) changedFields.push('PDM File Name');
+    if (newQuantity !== null) changedFields.push('Quantity');
+    if (newPriceDollars !== null) changedFields.push('Price');
+
+    const priceInCents = newPriceDollars !== null ? Math.round(newPriceDollars * 100) : material.price;
+    const quantityValue = newQuantity !== null ? newQuantity : Number(material.quantity);
+
+    try {
+      await editMaterialStatus({
+        materialId: material.materialId,
+        payload: {
+          name: newRow.name,
+          status: material.status,
+          materialTypeName: newRow.type,
+          manufacturerName: newRow.manufacturer || undefined,
+          manufacturerPartNumber: newRow.manufacturerPN || undefined,
+          pdmFileName: newRow.pdmFileName,
+          price: priceInCents,
+          quantity: new Decimal(quantityValue),
+          unitName: material.unitName,
+          linkUrl: material.linkUrl,
+          notes: material.notes,
+          assemblyId: material.assemblyId
+        }
+      });
+      toast.success(`Material ${changedFields.join(', ')} updated successfully`);
+      return {
+        ...newRow,
+        quantity: material.unitName ? `${quantityValue} ${material.unitName}` : `${quantityValue}`,
+        quantityRaw: quantityValue,
+        price: priceInCents !== undefined ? `$${centsToDollar(priceInCents)}` : newRow.price,
+        priceRaw: priceInCents !== undefined ? priceInCents / 100 : newRow.priceRaw
+      };
+    } catch (e: unknown) {
+      if (e instanceof Error) toast.error(e.message, 6000);
+      return oldRow;
+    }
+  };
+
   const selectedMaterial = materials.find((material) => material.materialId === selectedMaterialId);
 
   const getActions = (params: GridRowParams) => {
@@ -327,7 +412,9 @@ const BOMTableWrapper: React.FC<BOMTableWrapperProps> = ({
       ...bomBaseColDef,
       field: 'type',
       headerName: 'Type',
-      type: 'string',
+      editable: editPerms,
+      type: 'singleSelect',
+      valueOptions: materialTypes?.map((mt) => mt.name) ?? [],
       sortable: false,
       filterable: false,
       hide: hideColumn[2]
@@ -337,7 +424,7 @@ const BOMTableWrapper: React.FC<BOMTableWrapperProps> = ({
       flex: 1.5,
       field: 'name',
       headerName: 'Name',
-      type: 'string',
+      editable: editPerms,
       sortable: false,
       filterable: false,
       hide: hideColumn[3]
@@ -347,7 +434,9 @@ const BOMTableWrapper: React.FC<BOMTableWrapperProps> = ({
       flex: 1.2,
       field: 'manufacturer',
       headerName: 'Manufacturer',
-      type: 'string',
+      editable: editPerms,
+      type: 'singleSelect',
+      valueOptions: ['', ...(manufacturers?.map((m) => m.name) ?? [])],
       sortable: false,
       filterable: false,
       hide: hideColumn[4]
@@ -357,7 +446,7 @@ const BOMTableWrapper: React.FC<BOMTableWrapperProps> = ({
       flex: 1.5,
       field: 'manufacturerPN',
       headerName: 'Manufacterer PN',
-      type: 'string',
+      editable: editPerms,
       sortable: false,
       filterable: false,
       colSpan: ({ row }) => {
@@ -373,7 +462,7 @@ const BOMTableWrapper: React.FC<BOMTableWrapperProps> = ({
       flex: 1.3,
       field: 'pdmFileName',
       headerName: 'PDM File Name',
-      type: 'string',
+      editable: editPerms,
       sortable: false,
       filterable: false,
       hide: hideColumn[6]
@@ -383,6 +472,9 @@ const BOMTableWrapper: React.FC<BOMTableWrapperProps> = ({
       field: 'quantity',
       headerName: 'Quantity',
       type: 'number',
+      editable: editPerms,
+      valueGetter: (params) => params.row.quantityRaw,
+      renderCell: (params) => params.row.quantity,
       sortable: false,
       filterable: false,
       hide: hideColumn[7]
@@ -392,6 +484,9 @@ const BOMTableWrapper: React.FC<BOMTableWrapperProps> = ({
       field: 'price',
       headerName: 'Price per Unit',
       type: 'number',
+      editable: editPerms,
+      valueGetter: (params) => params.row.priceRaw,
+      renderCell: (params) => params.row.price,
       sortable: false,
       filterable: false,
       hide: hideColumn[8]
@@ -400,7 +495,6 @@ const BOMTableWrapper: React.FC<BOMTableWrapperProps> = ({
       ...bomBaseColDef,
       field: 'subtotal',
       headerName: 'Subtotal',
-      type: 'number',
       sortable: false,
       filterable: false,
       hide: hideColumn[9]
@@ -449,6 +543,11 @@ const BOMTableWrapper: React.FC<BOMTableWrapperProps> = ({
         columns={columns}
         assemblies={assemblies}
         materials={materials}
+        processRowUpdate={processRowUpdate}
+        onProcessRowUpdateError={(error) => {
+          if (error instanceof Error) toast.error(error.message, 6000);
+        }}
+        editPerms={editPerms}
       />
     </Box>
   );

src/frontend/src/utils/bom.utils.ts

@@ -15,7 +15,9 @@ export interface BomRow extends GridValidRowModel {
   manufacturerPN: string;
   pdmFileName: string;
   quantity: string;
+  quantityRaw?: number;
   price: string;
+  priceRaw?: number;
   subtotal: string;
   link: string;
   notes: string | undefined;
@@ -32,9 +34,11 @@ export const materialToRow = (material: Material, idx: number): BomRow => {
     name: material.name,
     manufacturer: material.manufacturerName ?? '',
     manufacturerPN: material.manufacturerPartNumber ?? '',
-    pdmFileName: material.pdmFileName ?? 'None',
+    pdmFileName: material.pdmFileName ?? '',
     quantity: material.quantity + (material.unitName ? ' ' + material.unitName : ''),
+    quantityRaw: material.quantity !== undefined ? Number(material.quantity) : undefined,
     price: material.price !== undefined ? `$${centsToDollar(material.price)}` : '',
+    priceRaw: material.price !== undefined ? material.price / 100 : undefined,
     subtotal: material.subtotal !== undefined ? `$${centsToDollar(material.subtotal)}` : '',
     link: material.linkUrl,
     notes: material.notes,