#2104 delete manufac

src/frontend/src/apis/bom.api.ts

@@ -37,6 +37,16 @@ export const createManufacturer = async (name: string) => {
   return data;
 };
 
+/**
+ * Requests to delete a manufacturer.
+ * @param manufacturer The manufacturer to delete
+ * @returns The deleted manufacturer
+ */
+export const deleteManufacturer = async (name: string) => {
+  const { data } = await axios.delete(apiUrls.bomDeleteManufacturer(name));
+  return data;
+};
+
 /**
  * Requests to create a material type.
  * @param materialType The material type to create

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

@@ -4,6 +4,7 @@ import {
   assignMaterialToAssembly,
   createAssembly,
   createManufacturer,
+  deleteManufacturer,
   createMaterial,
   createMaterialType,
   createUnit,
@@ -175,6 +176,27 @@ export const useCreateManufacturer = () => {
   );
 };
 
+/**
+ * Custom React hook to delete a material.
+ * @param materialId The material to delete's id
+ * @returns mutation function to delete a material
+ */
+export const useDeleteManufacturer = () => {
+  const queryClient = useQueryClient();
+  return useMutation<any, Error, { manufacturerName: string }>(
+    ['manufacturer', 'delete'],
+    async (payload: { manufacturerName: string }) => {
+      const data = await deleteManufacturer(payload.manufacturerName);
+      return data;
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(['materials', 'manufacturers']);
+      }
+    }
+  );
+};
+
 /**
  * Custom React hook to create a unit.
  * @returns mutation function to create a unit

src/frontend/src/pages/AdminToolsPage/BOMConfig/ManufacturerDeleteModal.tsx

@@ -0,0 +1,22 @@
+import { Typography } from '@mui/material';
+import NERModal from '../../../components/NERModal';
+
+interface ManufacturerDeleteModalProps {
+  name: string;
+  onDelete: () => void;
+  onHide: () => void;
+}
+
+const ManufacturerDeleteModal: React.FC<ManufacturerDeleteModalProps> = ({
+  name,
+  onDelete,
+  onHide
+}: ManufacturerDeleteModalProps) => {
+  return (
+    <NERModal open={true} onHide={onHide} title="Warning!" cancelText="Cancel" submitText="Delete" onSubmit={onDelete}>
+      <Typography>Are you sure you want to delete this manufacturer: {name}</Typography>
+    </NERModal>
+  );
+};
+
+export default ManufacturerDeleteModal;

src/frontend/src/pages/AdminToolsPage/BOMConfig/ManufacturerTable.tsx

@@ -1,35 +1,104 @@
-import { TableRow, TableCell, Box } from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { Box, Grid, IconButton, TableCell, TableRow } from '@mui/material';
 import LoadingIndicator from '../../../components/LoadingIndicator';
+import { NERButton } from '../../../components/NERButton';
+import { useDeleteManufacturer, useGetAllManufacturers } from '../../../hooks/bom.hooks';
+import { useToast } from '../../../hooks/toasts.hooks';
 import { datePipe } from '../../../utils/pipes';
 import ErrorPage from '../../ErrorPage';
-import { NERButton } from '../../../components/NERButton';
-import { useState } from 'react';
 import AdminToolTable from '../AdminToolTable';
-import { useGetAllManufacturers } from '../../../hooks/bom.hooks';
 import CreateManufacturerModal from './CreateManufacturerFormModal';
+import ManufacturerDeleteModal from './ManufacturerDeleteModal';
+import { useState } from 'react';
+
+interface ManufacturerDeleteButtonProps {
+  name: string;
+  onDelete: (name: string) => void;
+}
 
 const ManufacturerTable: React.FC = () => {
   const {
-    data: manufactureres,
-    isLoading: manufactureresIsLoading,
+    data: manufacturers,
+    isLoading: manufacturersIsLoading,
     isError: manufacturersIsError,
     error: manufacturersError
   } = useGetAllManufacturers();
   const [createModalShow, setCreateModalShow] = useState<boolean>(false);
+  const { mutateAsync } = useDeleteManufacturer();
+  const toast = useToast();
 
-  if (!manufactureres || manufactureresIsLoading) {
+  if (!manufacturers || manufacturersIsLoading) {
     return <LoadingIndicator />;
   }
   if (manufacturersIsError) {
     return <ErrorPage message={manufacturersError?.message} />;
   }
 
-  const manufacturersTableRows = manufactureres.map((manufacturer) => (
+  const handleDeleteManufacturer = async (manufacturerName: string) => {
+    try {
+      await mutateAsync({ manufacturerName: manufacturerName });
+      toast.success(`Manufacturer: ${manufacturerName} Deleted Successfully!`);
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        toast.error(error.message);
+      }
+    }
+  };
+
+  const ManufacturerDeleteButton: React.FC<ManufacturerDeleteButtonProps> = ({ name, onDelete }) => {
+    const [showDeleteModal, setShowDeleteModal] = useState(false);
+
+    const handleDeleteSubmit = () => {
+      onDelete(name);
+      setShowDeleteModal(false);
+    };
+
+    return (
+      <>
+        <IconButton
+          onClick={() => setShowDeleteModal(true)}
+          sx={{
+            color: 'Red',
+            width: 'auto',
+            height: 'auto',
+            padding: 0.1,
+            borderRadius: '5px'
+          }}
+        >
+          <Box
+            sx={{
+              border: '2px solid red',
+              borderRadius: '5px',
+              width: '24px',
+              height: '24px',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center'
+            }}
+          >
+            <DeleteIcon sx={{ fontSize: 'small' }} />
+          </Box>
+        </IconButton>
+        {showDeleteModal && (
+          <ManufacturerDeleteModal name={name} onDelete={handleDeleteSubmit} onHide={() => setShowDeleteModal(false)} />
+        )}
+      </>
+    );
+  };
+
+  const manufacturersTableRows = manufacturers.map((manufacturers) => (
     <TableRow>
       <TableCell align="left" sx={{ border: '2px solid black' }}>
-        {datePipe(manufacturer.dateCreated)}
+        {datePipe(manufacturers.dateCreated)}
+      </TableCell>
+      <TableCell sx={{ border: '2px solid black' }}>
+        <Grid container justifyContent="space-between">
+          <Grid sx={{ align: 'left' }}>{manufacturers.name}</Grid>
+          <Grid>
+            <ManufacturerDeleteButton name={manufacturers.name} onDelete={handleDeleteManufacturer} />
+          </Grid>
+        </Grid>
       </TableCell>
-      <TableCell sx={{ border: '2px solid black' }}>{manufacturer.name}</TableCell>
     </TableRow>
   ));
 

src/frontend/src/utils/urls.ts

@@ -128,6 +128,7 @@ const bomDeleteMaterial = (materialId: string) => `${materialEndpoints()}/${mate
 const bomCreateAssembly = (wbsNum: WbsNumber) => `${assemblyEndpoints()}/${wbsPipe(wbsNum)}/create`;
 const bomAssignAssembly = (materialId: string) => `${materialEndpoints()}/${materialId}/assign-assembly`;
 const bomCreateManufacturer = () => `${bomEndpoints()}/manufacturer/create`;
+const bomDeleteManufacturer = (manufacturerName: string) => `${bomEndpoints()}/manufacturer/${manufacturerName}/delete`;
 const bomCreateMaterialType = () => `${bomEndpoints()}/material-type/create`;
 const bomCreateUnit = () => `${bomEndpoints()}/units/create`;
 
@@ -243,6 +244,7 @@ export const apiUrls = {
   bomCreateAssembly,
   bomAssignAssembly,
   bomCreateManufacturer,
+  bomDeleteManufacturer,
   bomCreateMaterialType,
   bomCreateUnit,