#4107 inline status dropdown

Author: cielbellerose

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 useEditMaterialStatus = (wbsNum: WbsNumber) => {
+  const queryClient = useQueryClient();
+  return useMutation<Material, Error, { materialId: string; payload: MaterialDataSubmission }>(
+    ['materials', 'edit', 'status'],
+    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/BOMTableCustomCells.tsx

@@ -1,7 +1,13 @@
+/*
+ * This file is part of NER's FinishLine and licensed under GNU AGPLv3.
+ * See the LICENSE file in the repository root folder for details.
+ */
+
+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) => {
@@ -16,8 +22,6 @@ const getStatusColor = (status: MaterialStatus) => {
       return '#1b537a';
     case MaterialStatus.ReadyToOrder:
       return '#D34B27';
-    default:
-      return 'grey';
   }
 };
 
@@ -33,6 +37,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;

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

@@ -8,13 +8,18 @@ import MoveToInboxIcon from '@mui/icons-material/MoveToInbox';
 import { useCurrentUser } from '../../../../hooks/users.hooks';
 import BOMTable from './BOMTable';
 import { useToast } from '../../../../hooks/toasts.hooks';
-import { useAssignMaterialToAssembly, useDeleteAssembly, useDeleteMaterial } from '../../../../hooks/bom.hooks';
+import {
+  useAssignMaterialToAssembly,
+  useDeleteAssembly,
+  useDeleteMaterial,
+  useEditMaterialStatus
+} 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 NERModal from '../../../../components/NERModal';
-import { renderStatusBOM } from './BOMTableCustomCells';
+import { StatusDropdownCell } from './BOMTableCustomCells';
 import LinkIcon from '@mui/icons-material/Link';
 import NotesIcon from '@mui/icons-material/Notes';
 import { routes } from '../../../../utils/routes';
@@ -42,6 +47,7 @@ const BOMTableWrapper: React.FC<BOMTableWrapperProps> = ({
   const [modalShow, setModalShow] = useState(false);
   const { mutateAsync: deleteMaterialMutateAsync, isLoading: deleteMaterialIsLoading } = useDeleteMaterial(project.wbsNum);
   const { mutateAsync: deleteAssemblyMutateAsync, isLoading: deleteAssemblyIsLoading } = useDeleteAssembly(project.wbsNum);
+  const { mutateAsync: editMaterialStatus } = useEditMaterialStatus(project.wbsNum);
   const { mutateAsync: assignMaterialToAssembly } = useAssignMaterialToAssembly();
 
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
@@ -275,10 +281,44 @@ const BOMTableWrapper: React.FC<BOMTableWrapperProps> = ({
     },
     {
       ...bomBaseColDef,
-      flex: 1.2,
+      flex: 1.4,
       field: 'status',
       headerName: 'Status',
-      renderCell: renderStatusBOM,
+      renderCell: (params) => {
+        if (!params.value || String(params.row.id).startsWith('assembly')) return null;
+        const material = materials.find((m) => m.materialId === params.row.materialId);
+        if (!material) return null;
+        return (
+          <StatusDropdownCell
+            status={params.value}
+            disabled={!editPerms}
+            onStatusChange={async (newStatus) => {
+              try {
+                await editMaterialStatus({
+                  materialId: material.materialId,
+                  payload: {
+                    name: material.name,
+                    status: newStatus,
+                    materialTypeName: material.materialTypeName,
+                    manufacturerName: material.manufacturerName,
+                    manufacturerPartNumber: material.manufacturerPartNumber,
+                    pdmFileName: material.pdmFileName,
+                    price: material.price,
+                    quantity: material.quantity,
+                    unitName: material.unitName,
+                    linkUrl: material.linkUrl,
+                    notes: material.notes,
+                    assemblyId: material.assemblyId
+                  }
+                });
+                toast.success('Status updated successfully');
+              } catch (e: unknown) {
+                if (e instanceof Error) toast.error(e.message, 6000);
+              }
+            }}
+          />
+        );
+      },
       sortable: false,
       filterable: false,
       hide: hideColumn[1]