Merge pull request #1678 from Northeastern-Electric-Racing/#1322-Redesign-Details-Section-2

RChandler234 · web-flow · commit fe0d73a12b17 · 2023-11-02T15:51:42.000-04:00
#1322 redesigned project details section and created teams dropdown
diff --git a/src/frontend/src/components/ChangeRequestDropdown.tsx b/src/frontend/src/components/ChangeRequestDropdown.tsx
@@ -48,8 +48,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 +63,7 @@ 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={{ height: 56, width: '100%', textAlign: 'left' }}
               MenuProps={{
                 anchorOrigin: {
                   vertical: 'bottom',
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,24 +37,18 @@ const NERAutocomplete: React.FC<NERAutocompleteProps> = ({
   sx,
   value,
   listboxProps,
-  filterSelectedOptions
+  filterSelectedOptions,
+  errorMessage
 }) => {
   const theme = useTheme();
 
   const autocompleteStyle = {
-    height: '40px',
+    height: '50%',
     backgroundColor: theme.palette.background.default,
     width: '100%',
     borderRadius: '25px',
     border: 0,
-    '.MuiOutlinedInput-notchedOutline': {
-      borderColor: 'black',
-      borderRadius: '25px'
-    },
-    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-      borderColor: 'red'
-    },
-    ...sx
+    borderColor: 'black'
   };
 
   const autocompleteRenderInput = (params: AutocompleteRenderInputParams) => {
@@ -62,11 +57,7 @@ const NERAutocomplete: React.FC<NERAutocompleteProps> = ({
         {...params}
         InputProps={{
           ...params.InputProps,
-          startAdornment: (
-            <InputAdornment position="start">
-              <SearchIcon />
-            </InputAdornment>
-          )
+          sx: { height: '56px' }
         }}
         placeholder={placeholder}
         required
@@ -75,19 +66,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/components/TeamsDropdown.tsx b/src/frontend/src/components/TeamsDropdown.tsx
@@ -0,0 +1,58 @@
+import { Box, FormControl, FormLabel, MenuItem, Select, SelectChangeEvent } from '@mui/material';
+import { Control, Controller } from 'react-hook-form';
+import LoadingIndicator from './LoadingIndicator';
+import { useAllTeams } from '../hooks/teams.hooks';
+
+interface TeamDropdownProps {
+  control: Control<any, any>;
+  name: string;
+}
+
+const TeamDropdown = ({ control, name }: TeamDropdownProps) => {
+  const { isLoading, data: teams } = useAllTeams();
+  if (isLoading || !teams) return <LoadingIndicator />;
+
+  return (
+    <Box>
+      <FormControl fullWidth>
+        <FormLabel sx={{ alignSelf: 'start' }}>Team</FormLabel>
+        <Controller
+          control={control}
+          name={name}
+          render={({ field: { onChange, value } }) => (
+            <Select
+              id="team-autocomplete"
+              displayEmpty
+              renderValue={(value) => teams.find((team) => team.teamId === `${value}`)?.teamName}
+              value={value}
+              onChange={(event: SelectChangeEvent<number>) => onChange(event.target.value)}
+              size={'small'}
+              placeholder={'Change Team'}
+              sx={{ height: 56, width: '100%', textAlign: 'left' }}
+              MenuProps={{
+                anchorOrigin: {
+                  vertical: 'bottom',
+                  horizontal: 'right'
+                },
+                transformOrigin: {
+                  vertical: 'top',
+                  horizontal: 'right'
+                }
+              }}
+            >
+              {teams.map((team) => {
+                return (
+                  <MenuItem key={team.teamId} value={team.teamId}>
+                    {team.teamName}
+                  </MenuItem>
+                );
+              })}
+            </Select>
+          )}
+        />
+      </FormControl>
+    </Box>
+  );
+};
+
+export default TeamDropdown;
diff --git a/src/frontend/src/pages/ProjectDetailPage/ProjectEdit/ProjectEditContainer.tsx b/src/frontend/src/pages/ProjectDetailPage/ProjectEdit/ProjectEditContainer.tsx
@@ -15,8 +15,7 @@ import { useQuery } from '../../../hooks/utils.hooks';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import * as yup from 'yup';
-import { Grid, Box, FormControl, Stack, Typography } from '@mui/material';
-import ReactHookTextField from '../../../components/ReactHookTextField';
+import { Box, Stack, Typography } from '@mui/material';
 import ProjectEditDetails from './ProjectEditDetails';
 import ReactHookEditableList from '../../../components/ReactHookEditableList';
 import { bulletsToObject, mapBulletsToPayload } from '../../../utils/form';
@@ -27,7 +26,6 @@ import LinksEditView from '../../../components/Link/LinksEditView';
 import { EditSingleProjectPayload } from '../../../utils/types';
 import { useState } from 'react';
 import PageLayout from '../../../components/PageLayout';
-import ChangeRequestDropdown from '../../../components/ChangeRequestDropdown';
 
 const schema = yup.object().shape({
   name: yup.string().required('Name is required!'),
@@ -173,7 +171,16 @@ 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={
+        <Box textAlign="right">
+          <NERFailButton variant="contained" onClick={exitEditMode} sx={{ mx: 1 }}>
+            Cancel
+          </NERFailButton>
+          <NERSuccessButton variant="contained" type="submit" sx={{ mx: 1 }}>
+            Submit
+          </NERSuccessButton>
+        </Box>
+      }
     >
       <form
         id="project-edit-form"
@@ -195,20 +202,6 @@ const ProjectEditContainer: React.FC<ProjectEditContainerProps> = ({ project, ex
           setProjectLead={setProjectLeadId}
           setProjectManager={setprojectManagerId}
         />
-        <PageBlock title="Project Summary">
-          <Grid item sx={{ mt: 2 }}>
-            <FormControl fullWidth>
-              <ReactHookTextField
-                name="summary"
-                control={control}
-                placeholder="Summary"
-                multiline={true}
-                rows={5}
-                errorMessage={errors.summary}
-              />
-            </FormControl>
-          </Grid>
-        </PageBlock>
         <PageBlock title="Links">
           <LinksEditView watch={watch} ls={links} register={register} append={appendLink} remove={removeLink} />
         </PageBlock>
@@ -258,14 +251,6 @@ const ProjectEditContainer: React.FC<ProjectEditContainerProps> = ({ project, ex
             />
           </Box>
         </Stack>
-        <Box textAlign="right" sx={{ my: 2 }}>
-          <NERFailButton variant="contained" onClick={exitEditMode} sx={{ mx: 1 }}>
-            Cancel
-          </NERFailButton>
-          <NERSuccessButton variant="contained" type="submit" sx={{ mx: 1 }}>
-            Submit
-          </NERSuccessButton>
-        </Box>
       </form>
     </PageLayout>
   );
diff --git a/src/frontend/src/pages/ProjectDetailPage/ProjectEdit/ProjectEditDetails.tsx b/src/frontend/src/pages/ProjectDetailPage/ProjectEdit/ProjectEditDetails.tsx
@@ -1,12 +1,13 @@
 import { User } from 'shared';
-import { FormControl, FormLabel, Grid } from '@mui/material';
-import PageBlock from '../../../layouts/PageBlock';
+import { Box, FormControl, FormLabel, Grid, Typography } from '@mui/material';
 import ReactHookTextField from '../../../components/ReactHookTextField';
 import { fullNamePipe } from '../../../utils/pipes';
 import NERAutocomplete from '../../../components/NERAutocomplete';
 import { ProjectEditFormInput } from './ProjectEditContainer';
 import { Control, FieldErrorsImpl } from 'react-hook-form';
 import { AttachMoney } from '@mui/icons-material';
+import ChangeRequestDropdown from '../../../components/ChangeRequestDropdown';
+import TeamDropdown from '../../../components/TeamsDropdown';
 
 interface ProjectEditDetailsProps {
   users: User[];
@@ -33,9 +34,12 @@ const ProjectEditDetails: React.FC<ProjectEditDetailsProps> = ({
   setProjectManager
 }) => {
   return (
-    <PageBlock title="Project Details">
-      <Grid container spacing={2}>
-        <Grid item xs={8}>
+    <Box>
+      <Typography variant="h5" sx={{ marginBottom: '10px' }}>
+        Project Details
+      </Typography>
+      <Grid container spacing={3}>
+        <Grid item lg={2.4} md={6} xs={12}>
           <FormControl fullWidth>
             <FormLabel>Project Name</FormLabel>
             <ReactHookTextField
@@ -46,7 +50,28 @@ const ProjectEditDetails: React.FC<ProjectEditDetailsProps> = ({
             />
           </FormControl>
         </Grid>
-        <Grid item xs={4}>
+        <Grid item lg={2.4} md={6} xs={12}>
+          <FormControl fullWidth>
+            <ChangeRequestDropdown control={control} name="crId" />
+          </FormControl>
+        </Grid>
+        <Grid item lg={2.4} md={6} xs={12}>
+          <FormControl fullWidth>
+            <FormLabel>Car Number</FormLabel>
+            <ReactHookTextField
+              name="car-number"
+              control={control}
+              placeholder="Enter a car number..."
+              errorMessage={errors.name}
+            />
+          </FormControl>
+        </Grid>
+        <Grid item lg={2.4} md={6} xs={12}>
+          <FormControl fullWidth>
+            <TeamDropdown control={control} name="teamId" />
+          </FormControl>
+        </Grid>
+        <Grid item lg={2.4} md={6} xs={12}>
           <FormControl fullWidth>
             <FormLabel>Budget</FormLabel>
             <ReactHookTextField
@@ -59,7 +84,9 @@ const ProjectEditDetails: React.FC<ProjectEditDetailsProps> = ({
             />
           </FormControl>
         </Grid>
-        <Grid item xs={12} md={6} sx={{ mt: 1 }}>
+      </Grid>
+      <Grid container spacing={2}>
+        <Grid item lg={6} md={12} xs={12} mt={{ xs: 3, md: 3, lg: 2 }}>
           <FormLabel>Project Lead</FormLabel>
           <NERAutocomplete
             id="users-autocomplete"
@@ -70,7 +97,7 @@ const ProjectEditDetails: React.FC<ProjectEditDetailsProps> = ({
             value={userToAutocompleteOption(users.find((user) => user.userId.toString() === projectLead))}
           />
         </Grid>
-        <Grid item xs={12} md={6} sx={{ mt: 1 }}>
+        <Grid item lg={6} md={12} xs={12} mt={{ xs: 0, md: 0, lg: 2 }}>
           <FormLabel>Project Manager</FormLabel>
           <NERAutocomplete
             id="users-autocomplete"
@@ -81,8 +108,21 @@ const ProjectEditDetails: React.FC<ProjectEditDetailsProps> = ({
             value={userToAutocompleteOption(users.find((user) => user.userId.toString() === projectManager))}
           />
         </Grid>
+        <Grid item lg={12} md={12} xs={12}>
+          <FormControl fullWidth>
+            <FormLabel>Project Summary</FormLabel>
+            <ReactHookTextField
+              name="summary"
+              control={control}
+              type="number"
+              placeholder="Enter a summmary..."
+              multiline={true}
+              rows={5}
+            />
+          </FormControl>
+        </Grid>
       </Grid>
-    </PageBlock>
+    </Box>
   );
 };
 
