Merge pull request #1687 from Northeastern-Electric-Racing/#1327-WorkPackage-Form-Details

RChandler234 · web-flow · commit fc92838cec3c · 2023-11-06T00:24:44.000-05:00
#1327 work package redesign details
diff --git a/src/frontend/src/components/ChangeRequestDropdown.tsx b/src/frontend/src/components/ChangeRequestDropdown.tsx
@@ -1,6 +1,6 @@
-import { Box, FormControl, FormLabel, MenuItem, Select, SelectChangeEvent } from '@mui/material';
+import { Box, FormControl, FormHelperText, FormLabel, MenuItem, Select, SelectChangeEvent } from '@mui/material';
 import { isWithinInterval, subDays } from 'date-fns';
-import { Control, Controller } from 'react-hook-form';
+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';
@@ -12,7 +12,7 @@ const getFilteredChangeRequests = (changeRequests: ChangeRequest[], user: Authen
   const fiveDaysAgo = subDays(today, 5);
 
   const filteredRequests = changeRequests.filter(
-    (cr) => cr.dateReviewed && cr.accepted && isWithinInterval(cr.dateReviewed, { start: fiveDaysAgo, end: today })
+    (cr) => cr.dateImplemented && cr.accepted && isWithinInterval(cr.dateImplemented, { start: fiveDaysAgo, end: today })
   );
 
   // The current user's CRs should be at the top
@@ -33,9 +33,11 @@ const getFilteredChangeRequests = (changeRequests: ChangeRequest[], user: Authen
 interface ChangeRequestDropdownProps {
   control: Control<any, any>;
   name: string;
+  errors: FieldErrors<ChangeRequest>;
+  changeHeight?: number;
 }
 
-const ChangeRequestDropdown = ({ control, name }: ChangeRequestDropdownProps) => {
+const ChangeRequestDropdown = ({ control, name, errors, changeHeight = 1 }: ChangeRequestDropdownProps) => {
   const user = useCurrentUser();
   const { isLoading, data: changeRequests } = useAllChangeRequests();
   if (isLoading || !changeRequests) return <LoadingIndicator />;
@@ -48,8 +50,8 @@ const ChangeRequestDropdown = ({ control, name }: ChangeRequestDropdownProps) =>
   }));
 
   return (
-    <Box sx={{ display: 'flex', justifyContent: 'end' }}>
-      <FormControl>
+    <Box>
+      <FormControl fullWidth>
         <FormLabel sx={{ alignSelf: 'start' }}>Change Request ID</FormLabel>
         <Controller
           control={control}
@@ -63,7 +65,8 @@ const ChangeRequestDropdown = ({ control, name }: ChangeRequestDropdownProps) =>
               onChange={(event: SelectChangeEvent<number>) => onChange(event.target.value)}
               size={'small'}
               placeholder={'Change Request Id'}
-              sx={{ width: 200, textAlign: 'left' }}
+              sx={{ textAlign: 'left', height: changeHeight }}
+              error={!!errors.crId}
               MenuProps={{
                 anchorOrigin: {
                   vertical: 'bottom',
@@ -83,6 +86,7 @@ const ChangeRequestDropdown = ({ control, name }: ChangeRequestDropdownProps) =>
             </Select>
           )}
         />
+        <FormHelperText error>{errors.crId?.message}</FormHelperText>
       </FormControl>
     </Box>
   );
diff --git a/src/frontend/src/components/NERAutocomplete.tsx b/src/frontend/src/components/NERAutocomplete.tsx
@@ -6,14 +6,14 @@
 import {
   Autocomplete,
   AutocompleteRenderInputParams,
-  InputAdornment,
+  FormHelperText,
   SxProps,
   TextField,
   Theme,
   useTheme
 } from '@mui/material';
-import SearchIcon from '@mui/icons-material/Search';
 import { HTMLAttributes } from 'react';
+import { FieldError } from 'react-hook-form';
 
 interface NERAutocompleteProps {
   id: string;
@@ -25,6 +25,7 @@ interface NERAutocompleteProps {
   value?: { label: string; id: string } | null;
   listboxProps?: HTMLAttributes<HTMLUListElement>;
   filterSelectedOptions?: boolean;
+  errorMessage?: FieldError;
 }
 
 const NERAutocomplete: React.FC<NERAutocompleteProps> = ({
@@ -36,23 +37,16 @@ const NERAutocomplete: React.FC<NERAutocompleteProps> = ({
   sx,
   value,
   listboxProps,
-  filterSelectedOptions
+  filterSelectedOptions,
+  errorMessage
 }) => {
   const theme = useTheme();
 
   const autocompleteStyle = {
-    height: '40px',
     backgroundColor: theme.palette.background.default,
     width: '100%',
-    borderRadius: '25px',
     border: 0,
-    '.MuiOutlinedInput-notchedOutline': {
-      borderColor: 'black',
-      borderRadius: '25px'
-    },
-    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-      borderColor: 'red'
-    },
+    borderColor: 'black',
     ...sx
   };
 
@@ -62,11 +56,7 @@ const NERAutocomplete: React.FC<NERAutocompleteProps> = ({
         {...params}
         InputProps={{
           ...params.InputProps,
-          startAdornment: (
-            <InputAdornment position="start">
-              <SearchIcon />
-            </InputAdornment>
-          )
+          sx: { height: '56px' }
         }}
         placeholder={placeholder}
         required
@@ -75,19 +65,22 @@ const NERAutocomplete: React.FC<NERAutocompleteProps> = ({
   };
 
   return (
-    <Autocomplete
-      isOptionEqualToValue={(option, value) => option.id === value.id}
-      disablePortal
-      id={id}
-      onChange={onChange}
-      options={options}
-      sx={autocompleteStyle}
-      size={size}
-      renderInput={autocompleteRenderInput}
-      value={value}
-      filterSelectedOptions={filterSelectedOptions}
-      ListboxProps={listboxProps}
-    />
+    <>
+      <Autocomplete
+        isOptionEqualToValue={(option, value) => option.id === value.id}
+        disablePortal
+        id={id}
+        onChange={onChange}
+        options={options}
+        sx={autocompleteStyle}
+        size={size}
+        renderInput={autocompleteRenderInput}
+        value={value}
+        filterSelectedOptions={filterSelectedOptions}
+        ListboxProps={listboxProps}
+      />
+      <FormHelperText error={!!errorMessage}>{errorMessage?.message}</FormHelperText>
+    </>
   );
 };
 
diff --git a/src/frontend/src/pages/ProjectDetailPage/ProjectEdit/ProjectEditContainer.tsx b/src/frontend/src/pages/ProjectDetailPage/ProjectEdit/ProjectEditContainer.tsx
@@ -174,7 +174,7 @@ const ProjectEditContainer: React.FC<ProjectEditContainerProps> = ({ project, ex
     <PageLayout
       title={`${wbsPipe(project.wbsNum)} - ${project.name}`}
       previousPages={[{ name: 'Projects', route: routes.PROJECTS }]}
-      headerRight={<ChangeRequestDropdown control={control} name="crId" />}
+      headerRight={<ChangeRequestDropdown control={control} name="crId" errors={errors} />}
     >
       <form
         id="project-edit-form"
diff --git a/src/frontend/src/pages/WorkPackageDetailPage/WorkPackageEditContainer/WorkPackageEditContainer.tsx b/src/frontend/src/pages/WorkPackageDetailPage/WorkPackageEditContainer/WorkPackageEditContainer.tsx
@@ -14,18 +14,18 @@ import { useQuery } from '../../../hooks/utils.hooks';
 import { Controller, useFieldArray, useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import * as yup from 'yup';
-import { Box, TextField, Autocomplete, FormControl, Typography } from '@mui/material';
+import { TextField, Autocomplete, FormControl, Typography } from '@mui/material';
 import ReactHookEditableList from '../../../components/ReactHookEditableList';
 import { useEditWorkPackage } from '../../../hooks/work-packages.hooks';
-import WorkPackageEditDetails from './WorkPackageEditDetails';
+import WorkPackageFormDetails from './WorkPackageFormDetails';
 import { bulletsToObject, mapBulletsToPayload, startDateTester } from '../../../utils/form';
 import NERSuccessButton from '../../../components/NERSuccessButton';
 import NERFailButton from '../../../components/NERFailButton';
 import { useToast } from '../../../hooks/toasts.hooks';
 import { useState } from 'react';
 import { useSingleProject } from '../../../hooks/projects.hooks';
 import PageLayout from '../../../components/PageLayout';
-import ChangeRequestDropdown from '../../../components/ChangeRequestDropdown';
+import { Box } from '@mui/system';
 
 const schema = yup.object().shape({
   name: yup.string().required('Name is required!'),
@@ -171,7 +171,6 @@ const WorkPackageEditContainer: React.FC<WorkPackageEditContainerProps> = ({ wor
         { name: 'Projects', route: routes.PROJECTS },
         { name: `${projectWbsString} - ${workPackage.projectName}`, route: `${routes.PROJECTS}/${projectWbsString}` }
       ]}
-      headerRight={<ChangeRequestDropdown control={control} name="crId" />}
     >
       <form
         id="work-package-edit-form"
@@ -184,7 +183,7 @@ const WorkPackageEditContainer: React.FC<WorkPackageEditContainerProps> = ({ wor
           e.key === 'Enter' && e.preventDefault();
         }}
       >
-        <WorkPackageEditDetails
+        <WorkPackageFormDetails
           control={control}
           errors={errors}
           usersForProjectLead={users}
diff --git a/src/frontend/src/pages/WorkPackageDetailPage/WorkPackageEditContainer/WorkPackageFormDetails.tsx b/src/frontend/src/pages/WorkPackageDetailPage/WorkPackageEditContainer/WorkPackageFormDetails.tsx
@@ -5,13 +5,14 @@
 
 import { User, WorkPackageStage } from 'shared';
 import { fullNamePipe } from '../../../utils/pipes';
-import PageBlock from '../../../layouts/PageBlock';
-import { FormControl, FormLabel, Grid, MenuItem, TextField } from '@mui/material';
+import { FormControl, FormLabel, Grid, MenuItem, TextField, Typography } from '@mui/material';
 import ReactHookTextField from '../../../components/ReactHookTextField';
 import { Control, Controller, FieldErrorsImpl } from 'react-hook-form';
 import { DatePicker } from '@mui/x-date-pickers';
 import NERAutocomplete from '../../../components/NERAutocomplete';
 import { WorkPackageEditFormPayload } from './WorkPackageEditContainer';
+import ChangeRequestDropdown from '../../../components/ChangeRequestDropdown';
+import { Box } from '@mui/system';
 
 interface Props {
   lead?: string;
@@ -24,7 +25,7 @@ interface Props {
   errors: Partial<FieldErrorsImpl<WorkPackageEditFormPayload>>;
 }
 
-const WorkPackageEditDetails: React.FC<Props> = ({
+const WorkPackageFormDetails: React.FC<Props> = ({
   lead,
   manager,
   setManager,
@@ -45,7 +46,7 @@ const WorkPackageEditDetails: React.FC<Props> = ({
 
   const StageSelect = () => (
     <FormControl fullWidth>
-      <FormLabel>Stage Select</FormLabel>
+      <FormLabel>Work Package Stage</FormLabel>
       <Controller
         name="stage"
         control={control}
@@ -64,9 +65,12 @@ const WorkPackageEditDetails: React.FC<Props> = ({
   );
 
   return (
-    <PageBlock title="Work Package Details">
-      <Grid container xs={12}>
-        <Grid item xs={12} md={5} sx={{ mt: 2, mr: 2 }}>
+    <Box>
+      <Typography variant="h5" sx={{ marginBottom: '10px', color: 'white' }}>
+        Project Details
+      </Typography>
+      <Grid container spacing={1} xs={12}>
+        <Grid item xs={12} md={4}>
           <FormControl fullWidth>
             <FormLabel>Work Package Name</FormLabel>
             <ReactHookTextField
@@ -77,7 +81,13 @@ const WorkPackageEditDetails: React.FC<Props> = ({
             />
           </FormControl>
         </Grid>
-        <Grid item xs={12} md={2} sx={{ mt: 2, mr: 2 }}>
+        <Grid item xs={12} md={3}>
+          <ChangeRequestDropdown control={control} name="crId" errors={errors} changeHeight={56} />
+        </Grid>
+        <Grid item xs={12} md={3}>
+          <StageSelect />
+        </Grid>
+        <Grid item xs={12} md={2}>
           <FormControl fullWidth sx={{ overflow: 'hidden' }}>
             <FormLabel sx={{ whiteSpace: 'noWrap' }}>Start Date (YYYY-MM-DD)</FormLabel>
             <Controller
@@ -99,10 +109,7 @@ const WorkPackageEditDetails: React.FC<Props> = ({
             />
           </FormControl>
         </Grid>
-        <Grid item xs={12} md={2} sx={{ mt: 2, mr: 2 }}>
-          <StageSelect />
-        </Grid>
-        <Grid item xs={12} md={2} sx={{ mt: 2, mr: 2 }}>
+        <Grid item xs={12} md={2}>
           <FormControl fullWidth>
             <FormLabel>Duration</FormLabel>
             <ReactHookTextField
@@ -114,10 +121,10 @@ const WorkPackageEditDetails: React.FC<Props> = ({
             />
           </FormControl>
         </Grid>
-        <Grid item xs={12} md={6} sx={{ mt: 1 }}>
+        <Grid item xs={12} md={5}>
           <FormLabel> Project Lead</FormLabel>
           <NERAutocomplete
-            sx={{ mt: 1, width: '90%' }}
+            sx={{ width: '100%' }}
             id="project-lead-autocomplete"
             onChange={(_event, value) => setLead(value?.id)}
             options={usersForProjectLead.map(userToOption)}
@@ -126,10 +133,10 @@ const WorkPackageEditDetails: React.FC<Props> = ({
             value={userToOption(usersForProjectLead.find((user) => user.userId.toString() === lead))}
           />
         </Grid>
-        <Grid item xs={12} md={6} sx={{ mt: 1 }}>
+        <Grid item xs={12} md={5}>
           <FormLabel>Project Manager</FormLabel>
           <NERAutocomplete
-            sx={{ mt: 1, width: '90%' }}
+            sx={{ width: '100%' }}
             id="project-manager-autocomplete"
             onChange={(_event, value) => setManager(value?.id)}
             options={usersForProjectManager.map(userToOption)}
@@ -139,8 +146,8 @@ const WorkPackageEditDetails: React.FC<Props> = ({
           />
         </Grid>
       </Grid>
-    </PageBlock>
+    </Box>
   );
 };
 
-export default WorkPackageEditDetails;
+export default WorkPackageFormDetails;

Original file line number	Diff line number	Diff line change
`@@ -174,7 +174,7 @@ const ProjectEditContainer: React.FC<ProjectEditContainerProps> = ({ project, ex`
`174`	`174`	`<PageLayout`
`175`	`175`	title={`${wbsPipe(project.wbsNum)} - ${project.name}`}
`176`	`176`	`previousPages={[{ name: 'Projects', route: routes.PROJECTS }]}`
`177`		`- headerRight={<ChangeRequestDropdown control={control} name="crId" />}`
	`177`	`+ headerRight={<ChangeRequestDropdown control={control} name="crId" errors={errors} />}`
`178`	`178`	`>`
`179`	`179`	`<form`
`180`	`180`	`id="project-edit-form"`