Merge pull request #1704 from Northeastern-Electric-Racing/#1325-refactor-editprojectcontainer

#1325 refactor editprojectcontainer

Author: RChandler234

src/backend/src/routes/projects.routes.ts

@@ -36,7 +36,7 @@ projectRouter.post(
   '/create',
   intMinZero(body('carNumber')),
   body('teamIds').isArray(),
-  intMinZero(body('teamIds.*')),
+  nonEmptyString(body('teamIds.*')),
   body('budget').optional().isInt({ min: 0 }).default(0),
   ...projectValidators,
   validateInputs,

src/backend/src/services/projects.services.ts

@@ -85,7 +85,7 @@ export default class ProjectsService {
     teamIds: string[],
     budget: number | null,
     linkCreateArgs: LinkCreateArgs[] | null,
-    rules: string[] | null,
+    rules: string[],
     goals: { id: number; detail: string }[] | null,
     features: { id: number; detail: string }[] | null,
     otherConstraints: { id: number; detail: string }[] | null,

src/frontend/src/components/Link/LinksEditView.tsx

@@ -1,17 +1,18 @@
 import { useAllLinkTypes } from '../../hooks/projects.hooks';
 import LoadingIndicator from '../LoadingIndicator';
 import ErrorPage from '../../pages/ErrorPage';
-import { Button, IconButton, MenuItem, Select, TextField } from '@mui/material';
+import { IconButton, MenuItem, Select, TextField } from '@mui/material';
 import { FieldArrayWithId, UseFieldArrayAppend, UseFieldArrayRemove, UseFormRegister, UseFormWatch } from 'react-hook-form';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { getRequiredLinkTypeNames } from '../../utils/link.utils';
-import { ProjectEditFormInput } from '../../pages/ProjectDetailPage/ProjectEdit/ProjectEditContainer';
+import { ProjectFormInput } from '../../pages/ProjectDetailPage/ProjectForm/ProjectForm';
 import { Box } from '@mui/system';
+import { NERButton } from '../NERButton';
 
 const LinksEditView: React.FC<{
   ls: FieldArrayWithId[];
-  register: UseFormRegister<ProjectEditFormInput>;
-  watch: UseFormWatch<ProjectEditFormInput>;
+  register: UseFormRegister<ProjectFormInput>;
+  watch: UseFormWatch<ProjectFormInput>;
   append: UseFieldArrayAppend<any, any>;
   remove: UseFieldArrayRemove;
 }> = ({ ls, register, append, remove, watch }) => {
@@ -66,14 +67,14 @@ const LinksEditView: React.FC<{
         );
       })}
       {availableOptions.length > 0 && (
-        <Button
+        <NERButton
           variant="contained"
-          color="success"
+          color="primary"
           onClick={() => append({ linkId: '-1', url: '', linkTypeName: '-1' })}
           sx={{ my: 2, width: 'max-content' }}
         >
           + Add New Link
-        </Button>
+        </NERButton>
       )}
     </>
   );

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/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}>