#3880: Added Copy From Existing BOM Button

Author: Samuel Shrestha

src/frontend/src/components/NERFormModal.tsx

@@ -25,7 +25,8 @@ const NERFormModal = ({
   children,
   showCloseButton,
   hideBackDrop = false,
-  paperProps
+  paperProps,
+  copyFromExistingBomAction
 }: NERFormModalProps<any>) => {
   /**
    * Wrapper function for onSubmit so that form data is reset after submit
@@ -56,6 +57,7 @@ const NERFormModal = ({
       showCloseButton={showCloseButton}
       hideBackDrop={hideBackDrop}
       paperProps={paperProps}
+      copyFromExistingBomAction={copyFromExistingBomAction}
     >
       <form id={formId} onSubmit={handleFormSubmit} noValidate>
         {children}

src/frontend/src/components/NERModal.tsx

@@ -23,6 +23,7 @@ export interface NERModalProps {
   hideBackDrop?: boolean;
   icon?: JSX.Element | null;
   paperProps?: any;
+  copyFromExistingBomAction?: ReactNode;
 }
 
 const NERModal = ({
@@ -40,7 +41,8 @@ const NERModal = ({
   hideBackDrop = false,
   icon,
   paperProps,
-  titleChildren
+  titleChildren,
+  copyFromExistingBomAction
 }: NERModalProps) => {
   return (
     <Dialog
@@ -111,13 +113,19 @@ const NERModal = ({
       </DialogContent>
       {!hideFormButtons && (
         <DialogActions>
+          <Box sx={{ display: 'flex', alighItems: 'center', justifyContent: 'space-between', width: '100%' }}>
+            <Box sx={{ ml: 1 }}>
+              {copyFromExistingBomAction}
+            </Box>
+          
           <Box sx={{ display: 'flex', flexDirection: 'row', mb: 1 }}>
             <NERFailButton sx={{ mx: 1 }} form={formId} onClick={onHide}>
               {cancelText || 'Cancel'}
             </NERFailButton>
             <NERSuccessButton sx={{ mx: 1 }} type="submit" form={formId} onClick={onSubmit} disabled={disabled}>
               {submitText || 'Submit'}
             </NERSuccessButton>
+            </Box>
           </Box>
         </DialogActions>
       )}

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

@@ -1,4 +1,5 @@
 import {
+  Button,
   FormControl,
   FormHelperText,
   FormLabel,
@@ -39,6 +40,7 @@ export interface MaterialFormViewProps {
   watch: UseFormWatch<MaterialFormInput>;
   createManufacturer: (name: string) => void;
   setValue: UseFormSetValue<MaterialFormInput>;
+  copyFromExistingBomAction?: React.ReactNode;
 }
 
 const manufacturersToAutocomplete = (manufacturer: Manufacturer): { label: string; id: string } => {
@@ -80,6 +82,21 @@ const MaterialFormView: React.FC<MaterialFormViewProps> = ({
       onFormSubmit={onSubmit}
       formId={submitText + '-material-form'}
       showCloseButton
+      copyFromExistingBomAction={
+        <Button 
+          variant="contained"
+          onClick={() => {}} 
+          sx={{
+            mx: 1,
+            textTransform: 'none',
+            bgcolor: (t) => '#EF4345',
+            color: (t) => t.palette.getContrastText('#EF4345'),
+            '&:hover': { bgcolor: (t) => t.palette.error.dark }
+          }}
+        >
+          COPY FROM EXISTING BOM
+        </Button>
+      }
     >
       <Grid container spacing={2}>
         <Grid item xs={7}>