#3885: Refactored and finished UI

Author: nunnyu

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/BOMCopyConfirmModal.tsx

@@ -1,17 +1,26 @@
-import { Console } from 'console';
 import NERModal from '../../../../../components/NERModal';
 
 export interface BOMCopyConfirmModalProps {
   open: boolean;
   onHide: () => void;
   onSuccess?: () => void;
+  materialsCount: number;
+  sourceProjectName: string;
+  currentProjectName: string;
 }
 
-const BOMCopyConfirmModal = ({ open, onHide, onSuccess }: BOMCopyConfirmModalProps) => {
-  // TODO: make the actual message
+const BOMCopyConfirmModal = ({
+  open,
+  onHide,
+  onSuccess,
+  materialsCount,
+  sourceProjectName,
+  currentProjectName
+}: BOMCopyConfirmModalProps) => {
+  const message = `Are you sure you want to copy ${materialsCount} materials from ${sourceProjectName} to ${currentProjectName}?`;
   return (
     <NERModal open={open} onHide={onHide} onSubmit={onSuccess} title="Confirm Copy">
-      Are you sure you want to copy [X] materials from [Source Project Name] to [Current Project Name]?
+      <p>{message}</p>
     </NERModal>
   );
 };

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx

@@ -1,5 +1,4 @@
 import {
-  Button,
   FormControl,
   FormHelperText,
   FormLabel,
@@ -23,7 +22,6 @@ import { displayEnum } from '../../../../../utils/pipes';
 import { MaterialStatus } from 'shared';
 import React from 'react';
 import { AddCircle } from '@mui/icons-material';
-import BOMCopyConfirmModal from './BOMCopyConfirmModal';
 
 export interface MaterialFormViewProps {
   submitText: 'Add' | 'Edit';
@@ -72,7 +70,6 @@ const MaterialFormView: React.FC<MaterialFormViewProps> = ({
   const quantity = watch('quantity');
   const price = watch('price');
   const subtotal = quantity && price ? quantity * price : 0;
-  const [bomConfirmOpen, setBomConfirmOpen] = React.useState(false);
 
   return (
     <NERFormModal
@@ -487,7 +484,7 @@ const MaterialFormView: React.FC<MaterialFormViewProps> = ({
               pt: 1
             }}
           >
-            <Button
+            {/* <Button
               variant="contained"
               disableElevation
               onClick={() => {
@@ -503,17 +500,10 @@ const MaterialFormView: React.FC<MaterialFormViewProps> = ({
               }}
             >
               COPY FROM EXISTING BOM
-            </Button>
+            </Button> */}
           </Box>
         </Grid>
       )}
-      <BOMCopyConfirmModal
-        open={bomConfirmOpen}
-        onHide={() => {
-          setBomConfirmOpen(false);
-        }}
-        onSuccess={() => {}}
-      ></BOMCopyConfirmModal>
     </NERFormModal>
   );
 };

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOMTab.tsx

@@ -2,8 +2,8 @@ import { Box } from '@mui/system';
 import { MaterialPreview, Project, isGuest } from 'shared';
 import { NERButton } from '../../../components/NERButton';
 import WarningIcon from '@mui/icons-material/Warning';
+import React, { useState } from 'react';
 import { Tooltip, useTheme } from '@mui/material';
-import { useState } from 'react';
 import BOMTableWrapper from './BOM/BOMTableWrapper';
 import CreateMaterialModal from './BOM/MaterialForm/CreateMaterialModal';
 import CreateAssemblyModal from './BOM/AssemblyForm/CreateAssemblyModal';
@@ -13,6 +13,7 @@ import { useCurrentUser } from '../../../hooks/users.hooks';
 import LoadingIndicator from '../../../components/LoadingIndicator';
 import ErrorPage from '../../ErrorPage';
 import { useGetAssembliesForWbsElement, useGetMaterialsForWbsElement } from '../../../hooks/bom.hooks';
+import BOMCopyConfirmModal from './BOM/MaterialForm/BOMCopyConfirmModal';
 
 export const addMaterialCosts = (accumulator: number, currentMaterial: MaterialPreview) =>
   currentMaterial.subtotal ?? 0 + accumulator;
@@ -22,8 +23,9 @@ const BOMTab = ({ project }: { project: Project }) => {
   const [hideColumn, setHideColumn] = useState<boolean[]>(initialHideColumn);
   const [showAddMaterial, setShowAddMaterial] = useState(false);
   const [showAddAssembly, setShowAddAssembly] = useState(false);
-  const theme = useTheme();
+  const [bomConfirmOpen, setBomConfirmOpen] = React.useState(false);
 
+  const theme = useTheme();
   const user = useCurrentUser();
 
   const {
@@ -93,12 +95,26 @@ const BOMTab = ({ project }: { project: Project }) => {
             >
               Show All Columns
             </NERButton>
-            {/*
-            <NERButton variant="contained" onClick={() => {}} disabled={isGuest(user.role)}>
+            <NERButton
+              variant="contained"
+              onClick={() => {
+                setBomConfirmOpen(true);
+              }}
+              disabled={isGuest(user.role)}
+            >
               Copy Existing BOM
             </NERButton>
-            */}
           </Box>
+          <BOMCopyConfirmModal
+            open={bomConfirmOpen}
+            onHide={() => {
+              setBomConfirmOpen(false);
+            }}
+            onSuccess={() => {}}
+            materialsCount={1}
+            sourceProjectName={'Source Project'}
+            currentProjectName={'Target Project'}
+          ></BOMCopyConfirmModal>
           <Box display="flex" gap="20px" alignItems="center">
             <Box sx={{ backgroundColor: theme.palette.background.paper, padding: '8px 14px 8px 14px', borderRadius: '6px' }}>
               Budget: ${project.budget}