Merge pull request #1707 from Northeastern-Electric-Racing/#1329-wp-form-refactor

#1329 WP Form Refactor

Author: RChandler234

src/backend/src/controllers/work-packages.controllers.ts

@@ -71,8 +71,8 @@ export default class WorkPackagesController {
         blockedBy,
         expectedActivities,
         deliverables,
-        projectLead,
-        projectManager
+        projectLeadId,
+        projectManagerId
       } = req.body;
 
       let { stage } = req.body;
@@ -93,8 +93,8 @@ export default class WorkPackagesController {
         blockedBy,
         expectedActivities,
         deliverables,
-        projectLead,
-        projectManager
+        projectLeadId,
+        projectManagerId
       );
       return res.status(200).json({ message: 'Work package updated successfully' });
     } catch (error: unknown) {

src/backend/src/routes/work-packages.routes.ts

@@ -42,8 +42,8 @@ workPackagesRouter.post(
   body('deliverables').isArray(),
   body('deliverables.*.id').isInt({ min: -1 }).not().isString(),
   nonEmptyString(body('deliverables.*.detail')),
-  intMinZero(body('projectLead').optional()),
-  intMinZero(body('projectManager').optional()),
+  intMinZero(body('projectLeadId').optional()),
+  intMinZero(body('projectManagerId').optional()),
   validateInputs,
   WorkPackagesController.editWorkPackage
 );

src/frontend/src/components/ChangeRequestDropdown.tsx

@@ -49,6 +49,10 @@ const ChangeRequestDropdown = ({ control, name, errors, changeHeight = 1 }: Chan
     value: cr.crId
   }));
 
+  const renderValues = new Map<number, string>();
+
+  changeRequests.forEach((cr) => renderValues.set(cr.crId, `${cr.crId} - ${wbsPipe(cr.wbsNum)}`));
+
   return (
     <Box>
       <FormControl fullWidth>
@@ -60,7 +64,7 @@ const ChangeRequestDropdown = ({ control, name, errors, changeHeight = 1 }: Chan
             <Select
               id="cr-autocomplete"
               displayEmpty
-              renderValue={(value) => value}
+              renderValue={(value) => renderValues.get(Number(value))}
               value={value}
               onChange={(event: SelectChangeEvent<number>) => onChange(event.target.value)}
               size={'small'}

src/frontend/src/components/PageLayout.tsx

@@ -15,6 +15,7 @@ interface PageLayoutProps {
   previousPages?: LinkItem[];
   headerRight?: ReactNode;
   tabs?: ReactElement;
+  stickyHeader?: boolean;
 }
 
 const PageLayout: React.FC<PageLayoutProps> = ({
@@ -23,15 +24,16 @@ const PageLayout: React.FC<PageLayoutProps> = ({
   hidePageTitle = false,
   previousPages = [],
   headerRight,
-  tabs
+  tabs,
+  stickyHeader
 }) => {
   return (
     <Box>
       <Helmet>
         <title>{`FinishLine ${title && `| ${title}`}`}</title>
         <meta name="description" content="FinishLine Project Management Dashboard" />
       </Helmet>
-      {!hidePageTitle && title && <PageTitle {...{ title, previousPages, headerRight, tabs }} />}
+      {!hidePageTitle && title && <PageTitle sticky={stickyHeader} {...{ title, previousPages, headerRight, tabs }} />}
       {children}
     </Box>
   );

src/frontend/src/hooks/work-packages.hooks.ts

@@ -80,7 +80,7 @@ export const useEditWorkPackage = (wbsNum: WbsNumber) => {
     },
     {
       onSuccess: () => {
-        queryClient.invalidateQueries(['work packages', wbsNum]);
+        queryClient.invalidateQueries(['work packages']);
       }
     }
   );

src/frontend/src/layouts/PageTitle/PageTitle.tsx

@@ -3,7 +3,7 @@
  * See the LICENSE file in the repository root folder for details.
  */
 
-import { Typography, Box, Grid } from '@mui/material';
+import { Typography, Box, Grid, useTheme } from '@mui/material';
 import { ReactElement, ReactNode } from 'react';
 import { LinkItem } from '../../utils/types';
 import PageBreadcrumbs from './PageBreadcrumbs';
@@ -13,6 +13,7 @@ interface PageTitleProps {
   previousPages: LinkItem[];
   headerRight?: ReactNode;
   tabs?: ReactElement;
+  sticky?: boolean;
 }
 
 /**
@@ -22,11 +23,22 @@ interface PageTitleProps {
  * @param headerRight The button to display on the right side of the page title
  * @param tabs The tabs on the page to display.
  */
-const PageTitle: React.FC<PageTitleProps> = ({ title, previousPages, headerRight, tabs }) => {
+const PageTitle: React.FC<PageTitleProps> = ({ title, previousPages, headerRight, tabs, sticky }) => {
+  const theme = useTheme();
+
   return (
     <>
-      <PageBreadcrumbs currentPageTitle={title} previousPages={previousPages} />
-      <Box sx={{ mb: 2 }}>
+      <Box mb={sticky ? -1 : 0}>
+        <PageBreadcrumbs currentPageTitle={title} previousPages={previousPages} />
+      </Box>
+      <Box
+        mb={2}
+        position={sticky ? 'sticky' : 'initial'}
+        top={65}
+        pt={sticky ? 1 : 0}
+        zIndex={1}
+        bgcolor={theme.palette.background.default}
+      >
         <Grid container>
           <Grid item xs={6} md={8}>
             <Typography variant="h4" fontSize={30}>

src/frontend/src/pages/ChangeRequestDetailPage/ChangeRequestDetailsView.tsx

@@ -164,7 +164,7 @@ const ChangeRequestDetailsView: React.FC<ChangeRequestDetailsProps> = ({
         <MenuItem
           component={RouterLink}
           to={`${routes.WORK_PACKAGE_NEW}?crId=${changeRequest.crId}&wbs=${projectWbsPipe(changeRequest.wbsNum)}`}
-          disabled={!isUserAllowedToImplement}
+          disabled={!isUserAllowedToImplement || !isProject(changeRequest.wbsNum)}
           onClick={handleDropdownClose}
         >
           <ListItemIcon>

src/frontend/src/pages/ProjectsPage/Projects.tsx

@@ -8,12 +8,14 @@ import { routes } from '../../utils/routes';
 import WBSDetails from '../WBSDetails';
 import CreateProjectForm from '../CreateProjectPage/CreateProjectForm';
 import ProjectsPage from './ProjectsPage';
+import CreateWorkPackageForm from '../WorkPackageForm/CreateWorkPackageForm';
 
 const Projects: React.FC = () => {
   return (
     <Switch>
       <Route path={routes.PROJECTS_OVERVIEW} component={ProjectsPage} />
       <Route path={routes.PROJECTS_ALL} component={ProjectsPage} />
+      <Route path={routes.WORK_PACKAGE_NEW} component={CreateWorkPackageForm} />
       <Route path={routes.PROJECTS_NEW} component={CreateProjectForm} />
       <Route path={routes.PROJECTS_BY_WBS} component={WBSDetails} />
       <Route path={routes.PROJECTS} component={ProjectsPage} />