Merge branch 'develop' into #2131-drc-create-modal

RChandler234 · RChandler234 · commit cdb2f096f7cc · 2024-03-18T22:03:12.000-04:00
diff --git a/src/frontend/src/apis/design-reviews.api.ts b/src/frontend/src/apis/design-reviews.api.ts
@@ -33,3 +33,14 @@ export const getAllTeamTypes = () => {
     transformResponse: (data) => JSON.parse(data)
   });
 };
+
+/**
+ * Gets a single design review
+ * @param id the ID of the design review to return
+ * @returns the request design review
+ */
+export const getSingleDesignReview = async (id: string) => {
+  return axios.get(apiUrls.designReviewById(id), {
+    transformResponse: (data) => designReviewTransformer(JSON.parse(data))
+  });
+};
diff --git a/src/frontend/src/hooks/design-reviews.hooks.ts b/src/frontend/src/hooks/design-reviews.hooks.ts
@@ -4,7 +4,12 @@
  */
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { DesignReview, TeamType, WbsNumber } from 'shared';
-import { createDesignReviews, getAllDesignReviews, getAllTeamTypes } from '../apis/design-reviews.api';
+import {
+  createDesignReviews,
+  getAllDesignReviews,
+  getAllTeamTypes,
+  getSingleDesignReview
+} from '../apis/design-reviews.api';
 
 export interface CreateDesignReviewsPayload {
   dateScheduled: Date;
@@ -54,3 +59,15 @@ export const useAllTeamTypes = () => {
     return data;
   });
 };
+
+/**
+ * Custom react hook to get a single design review
+ *
+ * @returns a single design review
+ */
+export const useSingleDesignReview = (id: string) => {
+  return useQuery<DesignReview, Error>(['design-reviews', id], async () => {
+    const { data } = await getSingleDesignReview(id);
+    return data;
+  });
+};
diff --git a/src/frontend/src/pages/AdminToolsPage/AdminToolsAttendeeDesignReviewInfo.tsx b/src/frontend/src/pages/AdminToolsPage/AdminToolsAttendeeDesignReviewInfo.tsx
@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import PageBlock from '../../layouts/PageBlock';
+import { TextField, FormControl, FormLabel, Select, MenuItem, SelectChangeEvent, TableCell, TableRow } from '@mui/material';
+import AdminToolTable from './AdminToolTable';
+
+const AdminToolsAttendeeDesignReviewInfo: React.FC = () => {
+  const [selectedTeam, setSelectedTeam] = useState('');
+  const [searchQuery, setSearchQuery] = useState('');
+
+  // TODO: to be deleted later, this is just stub data for filter options
+  const teams = ['All', 'Team A', 'Team B', 'Team C'];
+
+  // TODO: Stub data for team members, replace with dynamic data here
+  const teamMembers = [
+    { name: 'Batman', reviewsAttended: 2, missedReviews: 4 },
+    { name: 'Superman', reviewsAttended: 4, missedReviews: 1 }
+  ];
+
+  // TODO: Filtering team members based on search query here
+  const filteredMembers = teamMembers.filter((member) => member.name.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  // TODO: Filtering for teams backend logic comes here
+  const handleTeamChange = (event: SelectChangeEvent) => {
+    setSelectedTeam(event.target.value as string);
+  };
+
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchQuery(event.target.value);
+  };
+
+  const attendeeRows = filteredMembers.map((member, index) => (
+    <TableRow key={index}>
+      <TableCell sx={{ border: '2px solid black' }}>{member.name}</TableCell>
+      <TableCell sx={{ border: '2px solid black' }}>{member.reviewsAttended}</TableCell>
+      <TableCell sx={{ border: '2px solid black' }}>{member.missedReviews}</TableCell>
+    </TableRow>
+  ));
+
+  return (
+    <PageBlock title="Attendee Design Review Information">
+      <FormControl fullWidth sx={{ marginBottom: 2 }}>
+        <FormLabel htmlFor="search-by-name">Search by team member name</FormLabel>
+        <TextField id="search-by-name" variant="outlined" value={searchQuery} onChange={handleSearchChange} fullWidth />
+      </FormControl>
+      <FormControl fullWidth sx={{ marginBottom: 2 }}>
+        <FormLabel id="team-select-label">Team</FormLabel>
+        <Select
+          labelId="team-select-label"
+          id="team-select"
+          value={selectedTeam}
+          onChange={handleTeamChange}
+          displayEmpty
+          fullWidth
+        >
+          {teams.map((team) => (
+            <MenuItem key={team} value={team}>
+              {team}
+            </MenuItem>
+          ))}
+          {/* TODO: we'll have to change this here as well for backend logic, above is just a stub implementation. */}
+        </Select>
+      </FormControl>
+      <AdminToolTable
+        columns={[
+          { name: 'Team Member Name', width: '33%' },
+          { name: 'No. Of Design Reviews Attended', width: '33%' },
+          { name: 'Required to come but did not', width: '34%' }
+        ]}
+        rows={attendeeRows}
+      />
+    </PageBlock>
+  );
+};
+
+export default AdminToolsAttendeeDesignReviewInfo;
diff --git a/src/frontend/src/pages/AdminToolsPage/AdminToolsPage.tsx b/src/frontend/src/pages/AdminToolsPage/AdminToolsPage.tsx
@@ -5,6 +5,7 @@
 
 import AdminToolsUserManagement from './AdminToolsUserManagement';
 import AdminToolsSlackUpcomingDeadlines from './AdminToolsSlackUpcomingDeadlines';
+import AdminToolsAttendeeDesignReviewInfo from './AdminToolsAttendeeDesignReviewInfo';
 import { useCurrentUser } from '../../hooks/users.hooks';
 import { isAdmin, isHead } from 'shared';
 import PageLayout from '../../components/PageLayout';
@@ -81,7 +82,10 @@ const AdminToolsPage: React.FC = () => {
       ) : tabIndex === 2 ? (
         <AdminToolsFinanceConfig />
       ) : (
-        <AdminToolsSlackUpcomingDeadlines />
+        <>
+          <AdminToolsSlackUpcomingDeadlines />
+          <AdminToolsAttendeeDesignReviewInfo />
+        </>
       )}
     </PageLayout>
   );
diff --git a/src/frontend/src/pages/CalendarPage/Calendar.tsx b/src/frontend/src/pages/CalendarPage/Calendar.tsx
@@ -5,12 +5,12 @@
 import { Route, Switch } from 'react-router-dom';
 import { routes } from '../../utils/routes';
 import CalendarPage from './CalendarPage';
-import DesignReviewDetailPage from './DesignReviewDetailPage/DesignReviewDetailPage';
+import DesignReviewDetails from './DesignReviewDetailPage/DesignReviewDetails';
 
 const Calendar: React.FC = () => {
   return (
     <Switch>
-      <Route path={routes.DESIGN_REVIEW_BY_ID} component={DesignReviewDetailPage} />
+      <Route path={routes.DESIGN_REVIEW_BY_ID} component={DesignReviewDetails} />
       <Route path={routes.CALENDAR} component={CalendarPage} />
     </Switch>
   );
diff --git a/src/frontend/src/pages/CalendarPage/DesignReviewDetailPage/DesignReviewDetailPage.tsx b/src/frontend/src/pages/CalendarPage/DesignReviewDetailPage/DesignReviewDetailPage.tsx
@@ -10,19 +10,20 @@ import { useState } from 'react';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
 import { routes } from '../../../utils/routes';
+import { DesignReview, wbsPipe } from 'shared';
 
 interface DesignReviewDetailPageProps {
-  name: string;
+  designReview: DesignReview;
 }
 
-const DesignReviewDetailPage: React.FC<DesignReviewDetailPageProps> = ({ name }) => {
+const DesignReviewDetailPage: React.FC<DesignReviewDetailPageProps> = ({ designReview, designReview: { teamType } }) => {
   const theme = useTheme();
   const { isLoading: allUsersIsLoading, isError: allUsersIsError, error: allUsersError, data: allUsers } = useAllUsers();
   const [requiredUsers, setRequiredUsers] = useState([].map(userToAutocompleteOption));
   const [optionalUsers, setOptionalUsers] = useState([].map(userToAutocompleteOption));
   if (allUsersIsError) return <ErrorPage message={allUsersError?.message} />;
   if (allUsersIsLoading || !allUsers) return <LoadingIndicator />;
-
+  const designReviewName = `${wbsPipe(designReview.wbsNum)} - ${designReview.wbsName}`;
   const users = allUsers.map(userToAutocompleteOption);
 
   return (
@@ -52,7 +53,7 @@ const DesignReviewDetailPage: React.FC<DesignReviewDetailPageProps> = ({ name })
         </Grid>
         <Grid item xs={3}>
           <Box sx={{ padding: 1.5, fontSize: '1.2em', backgroundColor: 'grey', borderRadius: 3, textAlign: 'center' }}>
-            {name}
+            {designReviewName}
           </Box>
         </Grid>
         <Grid item xs={1}>
@@ -74,7 +75,7 @@ const DesignReviewDetailPage: React.FC<DesignReviewDetailPageProps> = ({ name })
         <Grid item xs={3}>
           <Box sx={{ padding: 1, backgroundColor: 'grey', borderRadius: 3, textAlign: 'center' }}>
             <Autocomplete
-              isOptionEqualToValue={(option, value) => option.id === value.id} // What is this for
+              isOptionEqualToValue={(option, value) => option.id === value.id}
               multiple
               disableCloseOnSelect
               limitTags={1}
@@ -120,7 +121,7 @@ const DesignReviewDetailPage: React.FC<DesignReviewDetailPageProps> = ({ name })
         <Grid item xs={3}>
           <Box sx={{ padding: 1, backgroundColor: 'grey', borderRadius: 3, textAlign: 'center' }}>
             <Autocomplete
-              isOptionEqualToValue={(option, value) => option.id === value.id} // What is this for
+              isOptionEqualToValue={(option, value) => option.id === value.id}
               multiple
               disableCloseOnSelect
               limitTags={1}
diff --git a/src/frontend/src/pages/CalendarPage/DesignReviewDetailPage/DesignReviewDetails.tsx b/src/frontend/src/pages/CalendarPage/DesignReviewDetailPage/DesignReviewDetails.tsx
@@ -0,0 +1,21 @@
+/*
+ * This file is part of NER's FinishLine and licensed under GNU AGPLv3.
+ * See the LICENSE file in the repository root folder for details.
+ */
+import LoadingIndicator from '../../../components/LoadingIndicator';
+import { useParams } from 'react-router-dom';
+import ErrorPage from '../../ErrorPage';
+import DesignReviewDetailPage from './DesignReviewDetailPage';
+import { useSingleDesignReview } from '../../../hooks/design-reviews.hooks';
+
+const DesignReviewDetails: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+  const { data: designReview, isError, error, isLoading } = useSingleDesignReview(id);
+
+  if (isError) return <ErrorPage error={error} />;
+  if (!designReview || isLoading) return <LoadingIndicator />;
+
+  return <DesignReviewDetailPage designReview={designReview} />;
+};
+
+export default DesignReviewDetails;
diff --git a/src/frontend/src/pages/CalendarPage/SummaryComponents/DesignReviewSummaryModalButtons.tsx b/src/frontend/src/pages/CalendarPage/SummaryComponents/DesignReviewSummaryModalButtons.tsx
@@ -74,7 +74,7 @@ const DesignReviewSummaryModalButtons: React.FC<DesignReviewSummaryModalButtonsP
             textDecoration: 'none'
           }}
           component={RouterLink}
-          to={`${routes.CALENDAR}/1`}
+          to={`${routes.CALENDAR}/${designReview.designReviewId}`}
         >
           <NERFailButton
             sx={{
diff --git a/src/frontend/src/tests/hooks/DesignReviews.hooks.test.tsx b/src/frontend/src/tests/hooks/DesignReviews.hooks.test.tsx
@@ -8,9 +8,9 @@ import { AxiosResponse } from 'axios';
 import { DesignReview } from 'shared';
 import wrapper from '../../app/AppContextQuery';
 import { mockPromiseAxiosResponse } from '../test-support/test-data/test-utils.stub';
-import { exampleAllDesignReviews } from '../test-support/test-data/design-reviews.stub';
-import { getAllDesignReviews } from '../../apis/design-reviews.api';
-import { useAllDesignReviews } from '../../hooks/design-reviews.hooks';
+import { exampleAllDesignReviews, exampleDesignReview1 } from '../test-support/test-data/design-reviews.stub';
+import { getAllDesignReviews, getSingleDesignReview } from '../../apis/design-reviews.api';
+import { useAllDesignReviews, useSingleDesignReview } from '../../hooks/design-reviews.hooks';
 
 vi.mock('../../apis/design-reviews.api');
 
@@ -23,4 +23,13 @@ describe('design review hooks', () => {
     await waitFor(() => result.current.isSuccess);
     expect(result.current.data).toEqual(exampleAllDesignReviews);
   });
+
+  it('handles getting a single design review', async () => {
+    const mockedGetSingleDesignReview = getSingleDesignReview as jest.Mock<Promise<AxiosResponse<DesignReview>>>;
+    mockedGetSingleDesignReview.mockReturnValue(mockPromiseAxiosResponse<DesignReview>(exampleDesignReview1));
+
+    const { result, waitFor } = renderHook(() => useSingleDesignReview('1'), { wrapper });
+    await waitFor(() => result.current.isSuccess);
+    expect(result.current.data).toEqual(exampleDesignReview1);
+  });
 });
diff --git a/src/frontend/src/utils/urls.ts b/src/frontend/src/utils/urls.ts
@@ -135,6 +135,7 @@ const bomCreateUnit = () => `${bomEndpoints()}/units/create`;
 const designReviews = () => `${API_URL}/design-reviews`;
 const designReviewsCreate = () => `${designReviews()}/create`;
 const teamTypes = () => `${designReviews()}/teamType/all`;
+const designReviewById = (id: string) => `${designReviews()}/${id}`;
 
 /**************** Other Endpoints ****************/
 const version = () => `https://api.github.com/repos/Northeastern-Electric-Racing/FinishLine/releases/latest`;
@@ -244,6 +245,7 @@ export const apiUrls = {
 
   designReviews,
   designReviewsCreate,
+  designReviewById,
   teamTypes,
 
   version

Original file line number	Diff line number	Diff line change
`@@ -74,7 +74,7 @@ const DesignReviewSummaryModalButtons: React.FC<DesignReviewSummaryModalButtonsP`
`74`	`74`	`textDecoration: 'none'`
`75`	`75`	`}}`
`76`	`76`	`component={RouterLink}`
`77`		- to={`${routes.CALENDAR}/1`}
	`77`	+ to={`${routes.CALENDAR}/${designReview.designReviewId}`}
`78`	`78`	`>`
`79`	`79`	`<NERFailButton`
`80`	`80`	`sx={{`