Merge pull request #2024 from Northeastern-Electric-Racing/#2004-Roge…

…rHuang-BoM-manufacturer-autocomplete

#2004 - Make BOM manufacturer select an autocomplete

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

@@ -6,6 +6,9 @@ import ReactHookTextField from '../../../../../components/ReactHookTextField';
 import { MaterialFormInput } from './MaterialForm';
 import NERFormModal from '../../../../../components/NERFormModal';
 import DetailDisplay from '../../../../../components/DetailDisplay';
+import NERAutocomplete from '../../../../../components/NERAutocomplete';
+import { NERButton } from '../../../../../components/NERButton';
+import AddIcon from '@mui/icons-material/Add';
 
 export interface MaterialFormViewProps {
   submitText: 'Add' | 'Edit';
@@ -24,6 +27,10 @@ export interface MaterialFormViewProps {
   setValue: UseFormSetValue<MaterialFormInput>;
 }
 
+const manufacturersToAutocomplete = (manufacturer: Manufacturer): { label: string; id: string } => {
+  return { label: manufacturer.name, id: manufacturer.name };
+};
+
 const MaterialFormView: React.FC<MaterialFormViewProps> = ({
   submitText,
   handleSubmit,
@@ -71,7 +78,7 @@ const MaterialFormView: React.FC<MaterialFormViewProps> = ({
             />
           </FormControl>
         </Grid>
-        <Grid item xs={4}>
+        <Grid item xs={6}>
           <FormControl fullWidth>
             <FormLabel>Status</FormLabel>
             <Controller
@@ -90,7 +97,7 @@ const MaterialFormView: React.FC<MaterialFormViewProps> = ({
             />
           </FormControl>
         </Grid>
-        <Grid item xs={4}>
+        <Grid item xs={6}>
           <FormControl fullWidth>
             <FormLabel>Type</FormLabel>
             <Controller
@@ -115,44 +122,53 @@ const MaterialFormView: React.FC<MaterialFormViewProps> = ({
             />
           </FormControl>
         </Grid>
-        <Grid item xs={4}>
+        <Grid item xs={6}>
           <FormControl fullWidth>
             <FormLabel>Manufacturer</FormLabel>
             <Controller
               name="manufacturerName"
               control={control}
-              defaultValue={control._defaultValues.manufacturerName}
-              render={({ field }) => (
-                <TextField
-                  {...field}
-                  select
-                  variant="outlined"
-                  error={!!errors.manufacturerName}
-                  helperText={errors.manufacturerName?.message}
-                  onChange={(event) => {
-                    const selectedValue = event.target.value;
-                    if (selectedValue === 'createManufacturer') {
-                      const manufacturerName = prompt('Enter Manufacturer Name');
-                      if (manufacturerName) {
-                        createManufacturer(manufacturerName);
-                        field.onChange(event);
-                      }
-                    } else {
-                      field.onChange(event);
-                    }
-                  }}
-                >
-                  {allManufacturers.map((manufacturer) => (
-                    <MenuItem key={manufacturer.name} value={manufacturer.name}>
-                      {manufacturer.name}
-                    </MenuItem>
-                  ))}
-                  <MenuItem value="createManufacturer">+ Create Manufacturer</MenuItem>
-                </TextField>
-              )}
+              render={({ field: { onChange, value } }) => {
+                const mappedManufacturers = allManufacturers
+                  .sort((a, b) => a.name.localeCompare(b.name))
+                  .map(manufacturersToAutocomplete);
+                const onClear = () => {
+                  setValue('manufacturerName', '');
+                  onChange('');
+                };
+                return (
+                  <Box sx={{ alignItems: 'center' }}>
+                    <NERAutocomplete
+                      sx={{ bgcolor: 'inherit' }}
+                      id={'manufacturer'}
+                      size="medium"
+                      options={mappedManufacturers}
+                      value={mappedManufacturers.find((manufacturer) => manufacturer.label === value) || null}
+                      placeholder="Select Manufacturer"
+                      onChange={(_event, newValue) => {
+                        newValue ? onChange(newValue.id) : onClear();
+                      }}
+                    />
+                  </Box>
+                );
+              }}
             />
           </FormControl>
         </Grid>
+        <Grid item xs={6} sx={{ display: 'flex', alignItems: 'center', marginTop: '20px' }}>
+          <NERButton
+            sx={{ width: '100%', height: '56px' }}
+            variant="contained"
+            onClick={() => {
+              const newManufacturerName = prompt('Enter New Manufacturer Name');
+              if (newManufacturerName !== null) {
+                createManufacturer(newManufacturerName);
+              }
+            }}
+          >
+            Add New Manufacturer <AddIcon sx={{ paddingLeft: '7px' }}></AddIcon>
+          </NERButton>
+        </Grid>
         <Grid item xs={6}>
           <FormControl fullWidth>
             <FormLabel>Manufacturer Part Number</FormLabel>