Merge pull request #3109 from Northeastern-Electric-Racing/#3104-Add-…

…Dropdowns-for-All-Team-Types #3104 add dropdowns for all team types
Northeastern-Electric-Racing · Jan 10, 2025 · 6a83bbf · 6a83bbf
2 parents a05c93f + a39ca39
commit 6a83bbf
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 28 deletions.
diff --git a/src/frontend/src/pages/AdminToolsPage/OnboardingConfig/AdminToolsOnboardingConfig.tsx b/src/frontend/src/pages/AdminToolsPage/OnboardingConfig/AdminToolsOnboardingConfig.tsx
@@ -1,10 +1,15 @@
-import { Box, Grid, Typography } from '@mui/material';
-import OnboardingInfoSection from './OnboardingInfoSection';
-import { useAllChecklists } from '../../../hooks/onboarding.hook';
+import { Typography, Grid } from '@mui/material';
+import { Box } from '@mui/system';
 import LoadingIndicator from '../../../components/LoadingIndicator';
+import { useAllChecklists } from '../../../hooks/onboarding.hook';
+import { useAllTeamTypes } from '../../../hooks/team-types.hooks';
+import { groupChecklists, sortGroupNames } from '../../../utils/onboarding.utils';
 import ErrorPage from '../../ErrorPage';
-import { groupChecklists } from '../../../utils/onboarding.utils';
 import { AdminChecklist } from './Checklists/AdminChecklist';
+import OnboardingInfoSection from './OnboardingInfoSection';
+import { Checklist } from 'shared';
+
+type GroupedChecklists = Record<string, Checklist[]>; // Change made here
 
 const AdminToolsOnboardingConfig: React.FC = () => {
   const {
@@ -14,15 +19,35 @@ const AdminToolsOnboardingConfig: React.FC = () => {
     error: allChecklistsError
   } = useAllChecklists();
 
+  const {
+    data: teamTypes,
+    isLoading: teamTypesIsLoading,
+    isError: teamTypesIsError,
+    error: teamTypesError
+  } = useAllTeamTypes();
+
   if (allChecklistsIsError) {
     return <ErrorPage error={allChecklistsError} />;
   }
 
-  if (!allChecklists || allChecklistsIsLoading) {
+  if (teamTypesIsError) {
+    return <ErrorPage error={teamTypesError} />;
+  }
+
+  if (!allChecklists || allChecklistsIsLoading || !teamTypes || teamTypesIsLoading) {
     return <LoadingIndicator />;
   }
 
-  const groupedChecklists = groupChecklists(allChecklists);
+  const existingGroupedChecklists = groupChecklists(allChecklists);
+
+  const groupedChecklists: GroupedChecklists = teamTypes.reduce((acc, teamType) => {
+    acc[teamType.name] = existingGroupedChecklists[teamType.name] || [];
+    return acc;
+  }, {} as GroupedChecklists);
+
+  groupedChecklists['General'] = existingGroupedChecklists['General'] || [];
+
+  const sortedGroupNames = sortGroupNames(groupedChecklists);
 
   return (
     <Box padding="5px">
@@ -32,11 +57,15 @@ const AdminToolsOnboardingConfig: React.FC = () => {
       <Grid container spacing={2} padding={1} sx={{ width: '100%' }}>
         <Grid item xs={12} md={7}>
           <Box>
-            {Object.entries(groupedChecklists).map(([checklistName, checklists]) => (
-              <Grid item xs={12} key={checklistName}>
-                <AdminChecklist parentChecklists={checklists} checklistName={checklistName} />
-              </Grid>
-            ))}
+            {Object.entries(sortedGroupNames).map(([checklistName, checklists]) => {
+              const teamType = teamTypes.find((team) => team.name === checklistName);
+
+              return (
+                <Grid item xs={12} key={checklistName}>
+                  <AdminChecklist parentChecklists={checklists} checklistName={checklistName} teamType={teamType} />
+                </Grid>
+              );
+            })}
           </Box>
         </Grid>
         <Grid item xs={12} md={5} sx={{ width: '100%', mt: 0.5 }}>

diff --git a/src/frontend/src/pages/AdminToolsPage/OnboardingConfig/Checklists/AdminChecklist.tsx b/src/frontend/src/pages/AdminToolsPage/OnboardingConfig/Checklists/AdminChecklist.tsx
@@ -2,7 +2,7 @@ import { KeyboardArrowDown, KeyboardArrowRight } from '@mui/icons-material';
 import { Grid, Typography, IconButton } from '@mui/material';
 import { Box } from '@mui/system';
 import { useState } from 'react';
-import { Checklist } from 'shared';
+import { Checklist, TeamType } from 'shared';
 import AdminTask from './AdminTask';
 import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
 import CreateChecklistModal from './CreateChecklistModal';
@@ -11,9 +11,10 @@ import { useToast } from '../../../../hooks/toasts.hooks';
 import { useDeleteChecklist } from '../../../../hooks/onboarding.hook';
 import NERDeleteModal from '../../../../components/NERDeleteModal';
 
-export const AdminChecklist: React.FC<{ parentChecklists: Checklist[]; checklistName?: string }> = ({
+export const AdminChecklist: React.FC<{ parentChecklists: Checklist[]; checklistName?: string; teamType?: TeamType }> = ({
   parentChecklists,
-  checklistName
+  checklistName,
+  teamType
 }) => {
   const [showTasks, setShowTasks] = useState(false);
   const [showCreateModal, setShowCreateModal] = useState(false);
@@ -103,8 +104,8 @@ export const AdminChecklist: React.FC<{ parentChecklists: Checklist[]; checklist
         <CreateChecklistModal
           open={showCreateModal}
           handleClose={() => setShowCreateModal(false)}
-          teamId={parentChecklists[0].team?.teamId}
-          teamTypeId={parentChecklists[0].teamType?.teamTypeId}
+          teamId={parentChecklists[0]?.team?.teamId}
+          teamTypeId={teamType?.teamTypeId || parentChecklists[0]?.teamType?.teamTypeId}
         />
       )}
       {tasksToDelete && (

diff --git a/src/frontend/src/utils/onboarding.utils.ts b/src/frontend/src/utils/onboarding.utils.ts
@@ -1,5 +1,23 @@
 import { Checklist } from 'shared';
 
+export const sortGroupNames = (groupedChecklists: Record<string, Checklist[]>): Record<string, Checklist[]> => {
+  const groupNames = Object.keys(groupedChecklists);
+
+  groupNames.sort((group1, group2) => {
+    if (group1 === 'General') return -1;
+    if (group2 === 'General') return 1;
+
+    return group1.localeCompare(group2);
+  });
+
+  const sortedGroupedChecklists: Record<string, Checklist[]> = {};
+  groupNames.forEach((groupName) => {
+    sortedGroupedChecklists[groupName] = groupedChecklists[groupName];
+  });
+
+  return sortedGroupedChecklists;
+};
+
 export const groupChecklists = (checklists: Checklist[]) => {
   const groupedChecklists = checklists.reduce<Record<string, Checklist[]>>((groupedChecklists, checklist) => {
     let checklistName: string;
@@ -18,16 +36,5 @@ export const groupChecklists = (checklists: Checklist[]) => {
     return groupedChecklists;
   }, {});
 
-  const sortedGroupNames = Object.keys(groupedChecklists).sort((group1, group2) => {
-    if (group1 === 'General') return -1;
-    if (group2 === 'General') return 1;
-    return group1.localeCompare(group2);
-  });
-
-  const sortedGroupedChecklists: Record<string, Checklist[]> = {};
-  sortedGroupNames.forEach((groupName) => {
-    sortedGroupedChecklists[groupName] = groupedChecklists[groupName];
-  });
-
-  return sortedGroupedChecklists;
+  return sortGroupNames(groupedChecklists);
 };