Merge pull request #3968 from Northeastern-Electric-Racing/#3942-update-gantt-dropdown

#3942 update gantt dropdown

Author: chpy04

src/backend/src/prisma/seed.ts

@@ -284,6 +284,23 @@ const performSeed: () => Promise<void> = async () => {
     }
   });
 
+  const miles = await prisma.car.create({
+    data: {
+      wbsElement: {
+        create: {
+          name: 'Miles',
+          carNumber: 1,
+          projectNumber: 0,
+          workPackageNumber: 0,
+          organizationId
+        }
+      }
+    },
+    include: {
+      wbsElement: true
+    }
+  });
+
   /**
    * Make an initial change request for car 1 using the wbs of the genesis project
    */

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, TextField } 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,20 +42,33 @@ 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"
       showCloseButton
+      paperProps={{ width: '350px' }}
     >
-      <FormControl sx={{ marginRight: '10px' }}>
+      <FormControl>
         <FormLabel>Project Name</FormLabel>
         <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 } }) => (
+            <TextField select onChange={onChange} value={value} fullWidth>
+              {cars?.toReversed().map((car) => (
+                <MenuItem key={car.wbsElementId} value={car.wbsNum.carNumber}>
+                  {car.name}
+                </MenuItem>
+              ))}
+            </TextField>
+          )}
+        />
         <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}
       />
     );
   };