Merge pull request #2026 from Northeastern-Electric-Racing/#1763-make-cr-id-select-an-autocomplete

#1763 Make change request ID an autocomplete

Author: RChandler234

src/frontend/src/components/ChangeRequestDropdown.tsx

@@ -1,10 +1,11 @@
-import { Box, FormControl, FormHelperText, FormLabel, MenuItem, Select, SelectChangeEvent } from '@mui/material';
+import { Box, FormControl, FormLabel } from '@mui/material';
 import { isWithinInterval, subDays } from 'date-fns';
 import { Control, Controller, FieldErrors } from 'react-hook-form';
 import { AuthenticatedUser, ChangeRequest, wbsPipe } from 'shared';
 import { useAllChangeRequests } from '../hooks/change-requests.hooks';
 import { useCurrentUser } from '../hooks/users.hooks';
 import LoadingIndicator from './LoadingIndicator';
+import NERAutocomplete from './NERAutocomplete';
 
 // Filter and sort change requests to display in the dropdown
 const getFilteredChangeRequests = (changeRequests: ChangeRequest[], user: AuthenticatedUser): ChangeRequest[] => {
@@ -44,14 +45,12 @@ const ChangeRequestDropdown = ({ control, name, errors }: ChangeRequestDropdownP
 
   const filteredRequests = getFilteredChangeRequests(changeRequests, user);
 
-  const approvedChangeRequestOptions = filteredRequests.map((cr) => ({
+  const crIdToAutocompleteOption = (cr: ChangeRequest): { label: string; id: string } => ({
     label: `${cr.crId} - ${wbsPipe(cr.wbsNum)} - ${cr.submitter.firstName} ${cr.submitter.lastName} - ${cr.type}`,
-    value: cr.crId
-  }));
-
-  const renderValues = new Map<number, string>();
+    id: cr.crId.toString()
+  });
 
-  changeRequests.forEach((cr) => renderValues.set(cr.crId, `${cr.crId} - ${wbsPipe(cr.wbsNum)}`));
+  const approvedChangeRequestOptions = filteredRequests.map(crIdToAutocompleteOption);
 
   return (
     <Box>
@@ -61,36 +60,17 @@ const ChangeRequestDropdown = ({ control, name, errors }: ChangeRequestDropdownP
           control={control}
           name={name}
           render={({ field: { onChange, value } }) => (
-            <Select
+            <NERAutocomplete
               id="cr-autocomplete"
-              displayEmpty
-              renderValue={(value) => renderValues.get(Number(value))}
-              value={value}
-              onChange={(event: SelectChangeEvent<number>) => onChange(event.target.value)}
+              onChange={(_event, newValue) => onChange(newValue ? newValue.id : '')}
+              options={approvedChangeRequestOptions}
               size={'small'}
-              placeholder={'Change Request Id'}
-              sx={{ height: 56, width: '100%', textAlign: 'left' }}
-              error={!!errors.crId}
-              MenuProps={{
-                anchorOrigin: {
-                  vertical: 'bottom',
-                  horizontal: 'right'
-                },
-                transformOrigin: {
-                  vertical: 'top',
-                  horizontal: 'right'
-                }
-              }}
-            >
-              {approvedChangeRequestOptions.map((option) => (
-                <MenuItem key={option.value} value={option.value}>
-                  {option.label}
-                </MenuItem>
-              ))}
-            </Select>
+              placeholder={'Change Request ID'}
+              value={approvedChangeRequestOptions.find((cr) => cr.id === value) || { id: '', label: '' }}
+              errorMessage={errors.crId}
+            />
           )}
         />
-        <FormHelperText error>{errors.crId?.message}</FormHelperText>
       </FormControl>
     </Box>
   );

src/frontend/src/pages/ProjectDetailPage/ProjectForm/ProjectForm.tsx

@@ -72,7 +72,11 @@ const ProjectFormContainer: React.FC<ProjectFormContainerProps> = ({
   const schema = !project
     ? yup.object().shape({
         name: yup.string().required('Name is required!'),
-        crId: yup.number().min(1).required('crId must be a non-zero number!'),
+        crId: yup
+          .number()
+          .min(1)
+          .typeError('Change Request ID cannot be empty!')
+          .required('crId must be a non-zero number!'),
         carNumber: yup.number().min(0).required('A car number is required!'),
         teamId: yup.string().required('A Team Id is required'),
         budget: yup.number().optional(),
@@ -94,7 +98,11 @@ const ProjectFormContainer: React.FC<ProjectFormContainerProps> = ({
       })
     : yup.object().shape({
         name: yup.string().required('Name is required!'),
-        crId: yup.number().min(1).required('crId must be a non-zero number!'),
+        crId: yup
+          .number()
+          .min(1)
+          .typeError('Change Request ID cannot be empty!')
+          .required('crId must be a non-zero number!'),
         budget: yup.number().required('Budget is required!').min(0).integer('Budget must be an even dollar amount!'),
         summary: yup.string().required('Summary is required!'),
         links: yup.array().of(