#4107 inline status dropdown

src/backend/src/controllers/projects.controllers.ts

@@ -397,7 +397,6 @@ export default class ProjectsController {
         quantity,
         unitName,
         price,
-        subtotal,
         linkUrl,
         notes
       } = req.body;
@@ -413,7 +412,6 @@ export default class ProjectsController {
         manufacturerPartNumber,
         quantity,
         price,
-        subtotal,
         notes,
         unitName,
         assemblyId,

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

@@ -631,7 +631,6 @@ export default class BillOfMaterialsService {
     manufacturerPartNumber?: string,
     quantity?: Decimal,
     price?: number,
-    subtotal?: number,
     notes?: string,
     unitName?: string,
     assemblyId?: string,
@@ -670,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: {
@@ -681,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/backend/tests/unmocked/project.test.ts

@@ -200,8 +200,7 @@ describe('Material Tests', () => {
         manufacturer.name,
         'lalsd',
         new Decimal(5),
-        10,
-        50
+        10
       );
 
       expect(newMaterial.name).toEqual('100k Resistor Updated');

src/frontend/src/hooks/bom.hooks.ts

@@ -313,6 +313,27 @@ export const useCreateMaterialType = () => {
   );
 };
 
+/**
+ * Custom React hook to edit a material's status inline.
+ * @param wbsNum The wbs element the material belongs to
+ * @returns mutation function to edit a material's status
+ */
+export const useEditMaterialById = (wbsNum: WbsNumber) => {
+  const queryClient = useQueryClient();
+  return useMutation<Material, Error, { materialId: string; payload: MaterialDataSubmission }>(
+    ['materials', 'edit'],
+    async ({ materialId, payload }) => {
+      const data = await editMaterial(materialId, payload);
+      return data;
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(['materials', wbsPipe(wbsNum)]);
+      }
+    }
+  );
+};
+
 export const useGetAssembliesForWbsElement = (wbsNum: WbsNumber) => {
   return useQuery<Assembly[], Error>(['assemblies', wbsPipe(wbsNum)], async () => {
     const { data } = await getAssembliesForWbsElement(wbsNum);

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);
 
@@ -146,6 +158,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/BOMTableCustomCells.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Box } from '@mui/system';
 import { GridRenderCellParams } from '@mui/x-data-grid';
 import { MaterialStatus } from 'shared';
-import { Typography } from '@mui/material';
+import { Menu, MenuItem, Typography } from '@mui/material';
 import { displayEnum } from '../../../../utils/pipes';
 
 const getStatusColor = (status: MaterialStatus) => {
@@ -33,6 +34,76 @@ const bomStatusChipStyle = (status: MaterialStatus) => ({
   textAlign: 'center'
 });
 
+interface StatusDropdownCellProps {
+  status: MaterialStatus;
+  disabled?: boolean;
+  onStatusChange: (newStatus: MaterialStatus) => void;
+}
+
+export const StatusDropdownCell: React.FC<StatusDropdownCellProps> = ({ status, disabled, onStatusChange }) => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    event.stopPropagation();
+    if (!disabled) setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => setAnchorEl(null);
+
+  const handleSelect = (newStatus: MaterialStatus) => {
+    onStatusChange(newStatus);
+    handleClose();
+  };
+
+  return (
+    <>
+      <Box
+        sx={{
+          ...bomStatusChipStyle(status),
+          cursor: disabled ? 'default' : 'pointer',
+          gap: '2px'
+        }}
+        onClick={handleClick}
+      >
+        <Typography fontSize={{ xs: '11px', sm: '14px' }} color="black">
+          {displayEnum(status)}
+        </Typography>
+      </Box>
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+        slotProps={{
+          paper: {
+            sx: {
+              padding: 0,
+              background: 'transparent',
+              borderRadius: '6px',
+              overflow: 'hidden'
+            }
+          },
+          list: { disablePadding: true }
+        }}
+      >
+        {Object.values(MaterialStatus)
+          .filter((s) => s !== status)
+          .map((s) => {
+            const chipStyle = bomStatusChipStyle(s);
+            return (
+              <MenuItem key={s} onClick={() => handleSelect(s)} sx={{ padding: 0 }}>
+                <Box sx={{ ...chipStyle, borderRadius: 0, minWidth: '130px', width: '100%' }}>
+                  <Typography fontSize="14px" color="black">
+                    {displayEnum(s)}
+                  </Typography>
+                </Box>
+              </MenuItem>
+            );
+          })}
+      </Menu>
+    </>
+  );
+};
+
 export const renderStatusBOM = (params: GridRenderCellParams) => {
   if (!params.value) return;
   const status = params.value as MaterialStatus;