#3942: add dropdown

Author: hayliepedersen

src/frontend/src/pages/GanttPage/ProjectGanttChart/AddGanttProjectModal.tsx

@@ -1,6 +1,7 @@
 import { yupResolver } from '@hookform/resolvers/yup';
-import { FormControl, FormHelperText, FormLabel } from '@mui/material';
-import { useForm } from 'react-hook-form';
+import { FormControl, FormHelperText, FormLabel, MenuItem, Select } from '@mui/material';
+import { Controller, useForm } from 'react-hook-form';
+import { Car } from 'shared';
 import * as yup from 'yup';
 import NERFormModal from '../../../components/NERFormModal';
 import ReactHookTextField from '../../../components/ReactHookTextField';
@@ -14,9 +15,10 @@ interface AddGanttProjectModalProps {
   showModal: boolean;
   handleClose: () => void;
   addProject: (project: { name: string; carNumber: number }) => void;
+  cars: Car[];
 }
 
-const AddGanttProjectModal: React.FC<AddGanttProjectModalProps> = ({ showModal, handleClose, addProject }) => {
+const AddGanttProjectModal: React.FC<AddGanttProjectModalProps> = ({ showModal, handleClose, addProject, cars }) => {
   const onSubmit = async (data: { name: string; carNumber: number }) => {
     addProject(data);
     handleClose();
@@ -40,7 +42,7 @@ const AddGanttProjectModal: React.FC<AddGanttProjectModalProps> = ({ showModal,
       open={showModal}
       onHide={handleClose}
       title="New Project"
-      reset={() => reset({ name: '' })}
+      reset={() => reset({ name: '', carNumber: 0 })}
       handleUseFormSubmit={handleSubmit}
       onFormSubmit={onSubmit}
       formId="new-project-form"
@@ -51,9 +53,22 @@ const AddGanttProjectModal: React.FC<AddGanttProjectModalProps> = ({ showModal,
         <ReactHookTextField name="name" control={control} sx={{ width: 1 }} />
         <FormHelperText error>{errors.name?.message}</FormHelperText>
       </FormControl>
-      <FormControl>
-        <FormLabel>Car Number</FormLabel>
-        <ReactHookTextField name="carNumber" control={control} sx={{ width: 1 }} />
+      <FormControl fullWidth>
+        <FormLabel>Car</FormLabel>
+        <Controller
+          name="carNumber"
+          control={control}
+          render={({ field: { onChange, value } }) => (
+            <Select error={!!errors.carNumber} value={value} onChange={onChange}>
+              {cars &&
+                cars.toReversed().map((car) => (
+                  <MenuItem key={car.wbsElementId} value={car.wbsNum.carNumber}>
+                    {car.name}
+                  </MenuItem>
+                ))}
+            </Select>
+          )}
+        />
         <FormHelperText error>{errors.carNumber?.message}</FormHelperText>
       </FormControl>
     </NERFormModal>

src/frontend/src/pages/GanttPage/ProjectGanttChart/ProjectGanttChartPage.tsx

@@ -465,6 +465,7 @@ const ProjectGanttChartPage: FC = () => {
             toast.error('No Team Selected');
           }
         }}
+        cars={cars}
       />
     );
   };