Merge pull request #4034 from Northeastern-Electric-Racing/#3885-BOM-Copy-Confirm

#3885 - Create Confirmation Modal for Bulk BOM Copy

Author: wavehassman

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/CopyBOM/CopyBOMModal.tsx

@@ -2,35 +2,58 @@ import { WbsNumber, wbsPipe } from 'shared';
 import CopyBOMView from './CopyBOMView';
 import { useGetAllCars } from '../../../../../hooks/cars.hooks';
 import { useAllProjects } from '../../../../../hooks/projects.hooks';
-import { useCopyMaterialsToProject } from '../../../../../hooks/bom.hooks';
-import React from 'react';
+import React, { useState } from 'react';
 import ErrorPage from '../../../../ErrorPage';
 import LoadingIndicator from '../../../../../components/LoadingIndicator';
+import BOMCopyConfirmModal from '../MaterialForm/BOMCopyConfirmModal';
 
 export interface CopyBOMModalProps {
   open: boolean;
   onHide: () => void;
   destinationWbsNum: WbsNumber;
+  currentProjectName: string;
 }
 
-const CopyBOMModal: React.FC<CopyBOMModalProps> = ({ open, onHide, destinationWbsNum }) => {
+const CopyBOMModal: React.FC<CopyBOMModalProps> = ({ open, onHide, destinationWbsNum, currentProjectName }) => {
   const { data: cars, isLoading: isLoadingCars, isError: carsIsError, error: carsError } = useGetAllCars();
   const { data: projects, isLoading: isLoadingProjects, isError: projectsIsError, error: projectsError } = useAllProjects();
-  const { mutateAsync: copyMaterials } = useCopyMaterialsToProject();
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [confirmedMaterialIds, setConfirmedMaterialIds] = useState<string[]>([]);
+  const [confirmedSourceProjectName, setConfirmedSourceProjectName] = useState('');
 
   if (isLoadingCars || !cars || isLoadingProjects || !projects) return <LoadingIndicator />;
   if (carsIsError) return <ErrorPage message={carsError?.message} />;
   if (projectsIsError) return <ErrorPage message={projectsError?.message} />;
 
-  const handleCopy = async (materialIds: string[]) => {
-    await copyMaterials({
-      materialIds,
-      destinationWbsNum: wbsPipe(destinationWbsNum)
-    });
-    onHide();
-  };
+  const destinationWbs = wbsPipe(destinationWbsNum);
 
-  return <CopyBOMView open={open} onHide={onHide} cars={cars} projects={projects} onCopy={handleCopy} />;
+  return (
+    <>
+      <CopyBOMView
+        open={open}
+        onHide={onHide}
+        cars={cars}
+        projects={projects}
+        onCopy={(materialIds, sourceProjectName) => {
+          setConfirmedMaterialIds(materialIds);
+          setConfirmedSourceProjectName(sourceProjectName);
+          setConfirmOpen(true);
+        }}
+      />
+      <BOMCopyConfirmModal
+        open={confirmOpen}
+        onHide={() => setConfirmOpen(false)}
+        onSuccess={() => {
+          onHide();
+          setConfirmOpen(false);
+        }}
+        materialIds={confirmedMaterialIds}
+        sourceProjectName={confirmedSourceProjectName}
+        currentProjectName={`${wbsPipe(destinationWbsNum)} - ${currentProjectName}`}
+        destinationWbsNum={destinationWbs}
+      />
+    </>
+  );
 };
 
 export default CopyBOMModal;

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/CopyBOM/CopyBOMView.tsx

@@ -10,7 +10,7 @@ interface CopyBOMViewProps {
   onHide: () => void;
   cars: Car[];
   projects: ProjectPreview[];
-  onCopy: (materialIds: string[]) => Promise<void>;
+  onCopy: (materialIds: string[], sourceProjectName: string) => void;
 }
 
 const CopyBOMView: React.FC<CopyBOMViewProps> = ({ open, onHide, cars, projects, onCopy }) => {
@@ -34,7 +34,9 @@ const CopyBOMView: React.FC<CopyBOMViewProps> = ({ open, onHide, cars, projects,
   }));
 
   const handleSubmit = async () => {
-    await onCopy(selectedMaterialIdsRef.current);
+    if (!selectedProject) return;
+    const sourceProjectName = `${wbsPipe(selectedProject.wbsNum)} - ${selectedProject.name}`;
+    onCopy(selectedMaterialIdsRef.current, sourceProjectName);
   };
 
   return (

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

@@ -0,0 +1,48 @@
+import NERModal from '../../../../../components/NERModal';
+import { useCopyMaterialsToProject } from '../../../../../hooks/bom.hooks';
+
+export interface BOMCopyConfirmModalProps {
+  open: boolean;
+  onHide: () => void;
+  onSuccess: () => void;
+  materialIds: string[];
+  sourceProjectName: string;
+  currentProjectName: string;
+  destinationWbsNum: string;
+}
+
+const BOMCopyConfirmModal = ({
+  open,
+  onHide,
+  onSuccess,
+  materialIds,
+  sourceProjectName,
+  currentProjectName,
+  destinationWbsNum
+}: BOMCopyConfirmModalProps) => {
+  const copyMaterials = useCopyMaterialsToProject();
+
+  const handleConfirm = () => {
+    copyMaterials.mutate(
+      {
+        materialIds,
+        destinationWbsNum
+      },
+      {
+        onSuccess: () => {
+          onSuccess();
+          onHide();
+        }
+      }
+    );
+  };
+
+  const message = `Are you sure you want to copy ${materialIds.length} materials from ${sourceProjectName} to ${currentProjectName}?`;
+  return (
+    <NERModal open={open} onHide={onHide} onSubmit={handleConfirm} title="Confirm Copy">
+      <p>{message}</p>
+    </NERModal>
+  );
+};
+
+export default BOMCopyConfirmModal;

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';
@@ -31,8 +31,8 @@ const BOMTab = ({ project }: { project: Project }) => {
   const [showAddAssembly, setShowAddAssembly] = useState(false);
   const [showCopyBOM, setShowCopyBOM] = useState(false);
   const [showImportBOM, setShowImportBOM] = useState(false);
-  const theme = useTheme();
 
+  const theme = useTheme();
   const user = useCurrentUser();
 
   const {
@@ -99,7 +99,12 @@ const BOMTab = ({ project }: { project: Project }) => {
         allUnits={units}
         assemblies={assemblies}
       />
-      <CopyBOMModal open={showCopyBOM} onHide={() => setShowCopyBOM(false)} destinationWbsNum={project.wbsNum} />
+      <CopyBOMModal
+        open={showCopyBOM}
+        onHide={() => setShowCopyBOM(false)}
+        destinationWbsNum={project.wbsNum}
+        currentProjectName={project.name}
+      />
       <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
         <BOMTableWrapper
           project={project}