Merge pull request #1283 from Northeastern-Electric-Racing/#1027-cr-dropdown

#1027 Create change request input component

Author: RChandler234

src/frontend/src/components/ChangeRequestDropdown.tsx

@@ -0,0 +1,91 @@
+import { Box, FormControl, FormLabel, MenuItem, Select, SelectChangeEvent } from '@mui/material';
+import { isWithinInterval, subDays } from 'date-fns';
+import { Control, Controller } from 'react-hook-form';
+import { AuthenticatedUser, ChangeRequest, wbsPipe } from 'shared';
+import { useAllChangeRequests } from '../hooks/change-requests.hooks';
+import { useCurrentUser } from '../hooks/users.hooks';
+import LoadingIndicator from './LoadingIndicator';
+
+// Filter and sort change requests to display in the dropdown
+const getFilteredChangeRequests = (changeRequests: ChangeRequest[], user: AuthenticatedUser): ChangeRequest[] => {
+  const today = new Date();
+  const fiveDaysAgo = subDays(today, 5);
+
+  const filteredRequests = changeRequests.filter(
+    (cr) => cr.dateReviewed && cr.accepted && isWithinInterval(cr.dateReviewed, { start: fiveDaysAgo, end: today })
+  );
+
+  // The current user's CRs should be at the top
+  filteredRequests.sort((a, b) => {
+    const isSubmitterAUser = a.submitter.userId === user.userId;
+    const isSubmitterBUser = b.submitter.userId === user.userId;
+
+    if (isSubmitterAUser && isSubmitterBUser) return 0;
+    if (isSubmitterAUser) return -1;
+    if (isSubmitterBUser) return 1;
+
+    return a.crId - b.crId;
+  });
+
+  return filteredRequests;
+};
+
+interface ChangeRequestDropdownProps {
+  control: Control<any, any>;
+  name: string;
+}
+
+const ChangeRequestDropdown = ({ control, name }: ChangeRequestDropdownProps) => {
+  const user = useCurrentUser();
+  const { isLoading, data: changeRequests } = useAllChangeRequests();
+  if (isLoading || !changeRequests) return <LoadingIndicator />;
+
+  const filteredRequests = getFilteredChangeRequests(changeRequests, user);
+
+  const approvedChangeRequestOptions = filteredRequests.map((cr) => ({
+    label: `${cr.crId} - ${wbsPipe(cr.wbsNum)} - ${cr.submitter.firstName} ${cr.submitter.lastName} - ${cr.type}`,
+    value: cr.crId
+  }));
+
+  return (
+    <Box sx={{ display: 'flex', justifyContent: 'end' }}>
+      <FormControl>
+        <FormLabel sx={{ alignSelf: 'start' }}>Change Request ID</FormLabel>
+        <Controller
+          control={control}
+          name={name}
+          render={({ field: { onChange, value } }) => (
+            <Select
+              id="cr-autocomplete"
+              displayEmpty
+              renderValue={(value) => value}
+              value={value}
+              onChange={(event: SelectChangeEvent<number>) => onChange(event.target.value)}
+              size={'small'}
+              placeholder={'Change Request Id'}
+              sx={{ width: 200, textAlign: 'left' }}
+              MenuProps={{
+                anchorOrigin: {
+                  vertical: 'bottom',
+                  horizontal: 'right'
+                },
+                transformOrigin: {
+                  vertical: 'top',
+                  horizontal: 'right'
+                }
+              }}
+            >
+              {approvedChangeRequestOptions.map((option) => (
+                <MenuItem key={option.value} value={option.value}>
+                  {option.label}
+                </MenuItem>
+              ))}
+            </Select>
+          )}
+        />
+      </FormControl>
+    </Box>
+  );
+};
+
+export default ChangeRequestDropdown;

src/frontend/src/pages/ProjectDetailPage/ProjectEdit/ProjectEditContainer.tsx

@@ -26,6 +26,7 @@ import NERFailButton from '../../../components/NERFailButton';
 import { useToast } from '../../../hooks/toasts.hooks';
 import { useState } from 'react';
 import PageLayout from '../../../components/PageLayout';
+import ChangeRequestDropdown from '../../../components/ChangeRequestDropdown';
 
 /* TODO: slide deck changed to confluence in frontend - needs to be updated in the backend */
 const schema = yup.object().shape({
@@ -155,7 +156,7 @@ const ProjectEditContainer: React.FC<ProjectEditContainerProps> = ({ project, ex
     <PageLayout
       title={`${wbsPipe(project.wbsNum)} - ${project.name}`}
       previousPages={[{ name: 'Projects', route: routes.PROJECTS }]}
-      headerRight={<ReactHookTextField name="crId" control={control} label="Change Request Id" type="number" size="small" />}
+      headerRight={<ChangeRequestDropdown control={control} name="crId" />}
     >
       <form
         id="project-edit-form"

src/frontend/src/pages/WorkPackageDetailPage/WorkPackageEditContainer/WorkPackageEditContainer.tsx

@@ -15,7 +15,6 @@ import { Controller, useFieldArray, useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import * as yup from 'yup';
 import { Box, TextField, Autocomplete, FormControl } from '@mui/material';
-import ReactHookTextField from '../../../components/ReactHookTextField';
 import ReactHookEditableList from '../../../components/ReactHookEditableList';
 import { useEditWorkPackage } from '../../../hooks/work-packages.hooks';
 import WorkPackageEditDetails from './WorkPackageEditDetails';
@@ -26,6 +25,7 @@ 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';
 
 const schema = yup.object().shape({
   name: yup.string().required('Name is required!'),
@@ -162,7 +162,6 @@ const WorkPackageEditContainer: React.FC<WorkPackageEditContainerProps> = ({ wor
       }
     }
   };
-
   const projectWbsString: string = projectWbsPipe(workPackage.wbsNum);
 
   return (
@@ -172,7 +171,7 @@ const WorkPackageEditContainer: React.FC<WorkPackageEditContainerProps> = ({ wor
         { name: 'Projects', route: routes.PROJECTS },
         { name: `${projectWbsString} - ${workPackage.projectName}`, route: `${routes.PROJECTS}/${projectWbsString}` }
       ]}
-      headerRight={<ReactHookTextField name="crId" control={control} label="Change Request Id" type="number" size="small" />}
+      headerRight={<ChangeRequestDropdown control={control} name="crId" />}
     >
       <form
         id="work-package-edit-form"