Merge pull request #1541 from Northeastern-Electric-Racing/#1182-create-team-endpoint

#1182 - Create Team Endpoint/Admin Tool

Author: RChandler234

src/backend/src/controllers/teams.controllers.ts

@@ -63,6 +63,17 @@ export default class TeamsController {
     }
   }
 
+  static async createTeam(req: Request, res: Response, next: NextFunction) {
+    try {
+      const { teamName, headId, slackId, description } = req.body;
+      const submitter = await getCurrentUser(res);
+      const team = await TeamsService.createTeam(submitter, teamName, headId, slackId, description);
+      return res.status(200).json(team);
+    } catch (error: unknown) {
+      next(error);
+    }
+  }
+
   static async setTeamLeads(req: Request, res: Response, next: NextFunction) {
     try {
       const { userIds } = req.body;

src/backend/src/routes/teams.routes.ts

@@ -2,7 +2,7 @@ import express from 'express';
 import TeamsController from '../controllers/teams.controllers';
 import { body } from 'express-validator';
 import { validateInputs } from '../utils/utils';
-import { intMinZero } from '../utils/validation.utils';
+import { intMinZero, nonEmptyString } from '../utils/validation.utils';
 
 const teamsRouter = express.Router();
 
@@ -29,5 +29,13 @@ teamsRouter.post(
   TeamsController.editDescription
 );
 teamsRouter.post('/:teamId/set-head', intMinZero(body('userId')), validateInputs, TeamsController.setTeamHead);
+teamsRouter.post(
+  '/create',
+  nonEmptyString(body('teamName')),
+  intMinZero(body('headId')),
+  nonEmptyString(body('slackId')),
+  nonEmptyString(body('description')),
+  TeamsController.createTeam
+);
 
 export default teamsRouter;

src/backend/src/services/teams.services.ts

@@ -164,6 +164,61 @@ export default class TeamsService {
   }
 
   /**
+   * Creates a new team in the database
+   * @param submitter The submitter who is trying to create a new team
+   * @param teamName the name of the new team
+   * @param headId the id of the user who will be the head on the new team
+   * @param slackId the slack id for the slack channel for the team
+   * @param description a short description of the team (must be less than 300 words)
+   * @returns The newly created team
+   */
+  static async createTeam(
+    submitter: User,
+    teamName: string,
+    headId: number,
+    slackId: string,
+    description: string
+  ): Promise<Team> {
+    if (!isAdmin(submitter.role)) {
+      throw new AccessDeniedException('You must be an admin or higher to create a new team!');
+    }
+
+    if (!isUnderWordCount(description, 300)) throw new HttpException(400, 'Description must be less than 300 words');
+
+    const newHead = await prisma.user.findUnique({
+      where: { userId: headId }
+    });
+
+    if (!newHead) throw new NotFoundException('User', headId);
+    if (!isHead(newHead.role)) throw new HttpException(400, 'The team head must be at least a head');
+
+    // checking to see if any other teams have the new head as their current head
+    const newHeadTeam = await prisma.team.findFirst({
+      where: { headId }
+    });
+
+    if (newHeadTeam) throw new HttpException(400, 'The new team head must not be a head of another team');
+
+    const duplicateName = await prisma.team.findFirst({
+      where: { teamName }
+    });
+
+    if (duplicateName) throw new HttpException(400, 'The new team name must not be the name of another team');
+
+    const createdTeam = await prisma.team.create({
+      data: {
+        teamName,
+        slackId,
+        description,
+        head: { connect: { userId: headId } }
+      },
+      ...teamQueryArgs
+    });
+
+    return teamTransformer(createdTeam);
+  }
+
+  /*
    * Update the given teamId's team's leads
    * @param submitter a user who's making this request
    * @param teamId a id of team to be updated

src/frontend/src/apis/teams.api.ts

@@ -6,6 +6,7 @@
 import axios from '../utils/axios';
 import { Team } from 'shared';
 import { apiUrls } from '../utils/urls';
+import { CreateTeamPayload } from '../hooks/teams.hooks';
 
 export const getAllTeams = () => {
   return axios.get<Team[]>(apiUrls.teams(), {
@@ -37,6 +38,10 @@ export const setTeamHead = (id: string, userId: number) => {
   });
 };
 
+export const createTeam = (payload: CreateTeamPayload) => {
+  return axios.post<Team>(apiUrls.teamsCreate(), payload);
+};
+
 export const setTeamLeads = (id: string, userIds: number[]) => {
   return axios.post<Team>(apiUrls.teamsSetLeads(id), {
     userIds

src/frontend/src/components/NERAutocomplete.tsx

@@ -3,8 +3,17 @@
  * See the LICENSE file in the repository root folder for details.
  */
 
-import { Autocomplete, AutocompleteRenderInputParams, SxProps, TextField, Theme, useTheme } from '@mui/material';
+import {
+  Autocomplete,
+  AutocompleteRenderInputParams,
+  FormHelperText,
+  SxProps,
+  TextField,
+  Theme,
+  useTheme
+} from '@mui/material';
 import { HTMLAttributes } from 'react';
+import { FieldError } from 'react-hook-form';
 
 interface NERAutocompleteProps {
   id: string;
@@ -16,6 +25,7 @@ interface NERAutocompleteProps {
   value?: { label: string; id: string } | null;
   listboxProps?: HTMLAttributes<HTMLUListElement>;
   filterSelectedOptions?: boolean;
+  errorMessage?: FieldError;
 }
 
 const NERAutocomplete: React.FC<NERAutocompleteProps> = ({
@@ -27,7 +37,8 @@ const NERAutocomplete: React.FC<NERAutocompleteProps> = ({
   sx,
   value,
   listboxProps,
-  filterSelectedOptions
+  filterSelectedOptions,
+  errorMessage
 }) => {
   const theme = useTheme();
 
@@ -54,19 +65,22 @@ const NERAutocomplete: React.FC<NERAutocompleteProps> = ({
   };
 
   return (
-    <Autocomplete
-      isOptionEqualToValue={(option, value) => option.id === value.id}
-      disablePortal
-      id={id}
-      onChange={onChange}
-      options={options}
-      sx={autocompleteStyle}
-      size={size}
-      renderInput={autocompleteRenderInput}
-      value={value}
-      filterSelectedOptions={filterSelectedOptions}
-      ListboxProps={listboxProps}
-    />
+    <>
+      <Autocomplete
+        isOptionEqualToValue={(option, value) => option.id === value.id}
+        disablePortal
+        id={id}
+        onChange={onChange}
+        options={options}
+        sx={autocompleteStyle}
+        size={size}
+        renderInput={autocompleteRenderInput}
+        value={value}
+        filterSelectedOptions={filterSelectedOptions}
+        ListboxProps={listboxProps}
+      />
+      <FormHelperText error={!!errorMessage}>{errorMessage?.message}</FormHelperText>
+    </>
   );
 };
 

src/frontend/src/components/ReactHookTextField.tsx

@@ -4,6 +4,7 @@
  */
 import { Control, Controller, FieldError } from 'react-hook-form';
 import { TextField, InputAdornment, SxProps, Theme, SvgIconProps } from '@mui/material';
+import { countWords, isUnderWordCount } from 'shared';
 
 interface ReactHookTextFieldProps {
   name: string;
@@ -20,6 +21,7 @@ interface ReactHookTextFieldProps {
   rows?: number;
   endAdornment?: React.ReactElement;
   errorMessage?: FieldError;
+  maxLength?: number;
 }
 
 const ReactHookTextField: React.FC<ReactHookTextFieldProps> = ({
@@ -36,7 +38,8 @@ const ReactHookTextField: React.FC<ReactHookTextFieldProps> = ({
   multiline,
   rows,
   endAdornment,
-  errorMessage
+  errorMessage,
+  maxLength
 }) => {
   const defaultRules = { required: true };
 
@@ -70,10 +73,11 @@ const ReactHookTextField: React.FC<ReactHookTextFieldProps> = ({
           sx={sx}
           type={type}
           InputProps={inputProps}
+          inputProps={maxLength ? { ...inputProps, maxLength: isUnderWordCount(value, maxLength) ? null : 0 } : undefined}
           multiline={multiline}
           rows={rows}
           error={!!errorMessage}
-          helperText={errorMessage?.message}
+          helperText={errorMessage ? errorMessage.message : maxLength ? `${countWords(value)}/300 words` : undefined}
         />
       )}
     />

src/frontend/src/hooks/teams.hooks.ts

@@ -11,9 +11,17 @@ import {
   setTeamMembers,
   setTeamDescription,
   setTeamHead,
+  createTeam,
   setTeamLeads
 } from '../apis/teams.api';
 
+export interface CreateTeamPayload {
+  teamName: string;
+  headId: number;
+  slackId: string;
+  description: string;
+}
+
 export const useAllTeams = () => {
   return useQuery<Team[], Error>(['teams'], async () => {
     const { data } = await getAllTeams();
@@ -75,6 +83,22 @@ export const useEditTeamDescription = (teamId: string) => {
   );
 };
 
+export const useCreateTeam = () => {
+  const queryClient = useQueryClient();
+  return useMutation<Team, Error, CreateTeamPayload>(
+    ['teams', 'create'],
+    async (formData: CreateTeamPayload) => {
+      const { data } = await createTeam(formData);
+      return data;
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(['teams']);
+      }
+    }
+  );
+};
+
 export const useSetTeamLeads = (teamId: string) => {
   const queryClient = useQueryClient();
   return useMutation<Team, Error, any>(

src/frontend/src/pages/AdminToolsPage/AdminToolTable.tsx

@@ -0,0 +1,33 @@
+import { Paper, Table, TableBody, TableCell, TableContainer, TableHead } from '@mui/material';
+
+interface AdminToolTableProps {
+  columns: {
+    name: string;
+    width?: string;
+  }[];
+  rows: JSX.Element[];
+}
+
+const AdminToolTable = ({ columns, rows }: AdminToolTableProps) => {
+  return (
+    <TableContainer component={Paper}>
+      <Table>
+        <TableHead>
+          {columns.map((column, idx) => (
+            <TableCell
+              key={`${column.name}-${idx}`}
+              align="left"
+              sx={{ fontSize: '16px', fontWeight: 600, border: '2px solid black' }}
+              width={column.width}
+            >
+              {column.name}
+            </TableCell>
+          ))}
+        </TableHead>
+        <TableBody>{rows}</TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default AdminToolTable;

src/frontend/src/pages/AdminToolsPage/AdminToolsPage.tsx

@@ -9,6 +9,7 @@ import { useCurrentUser } from '../../hooks/users.hooks';
 import { isAdmin } from 'shared';
 import PageLayout from '../../components/PageLayout';
 import AdminToolsFinanceConfig from './AdminToolsFinanceConfig';
+import TeamsTools from './TeamsTools';
 
 const AdminToolsPage: React.FC = () => {
   const currentUser = useCurrentUser();
@@ -18,6 +19,7 @@ const AdminToolsPage: React.FC = () => {
       <AdminToolsUserManagement />
       {isAdmin(currentUser.role) && <AdminToolsSlackUpcomingDeadlines />}
       {isAdmin(currentUser.role) && <AdminToolsFinanceConfig />}
+      {isAdmin(currentUser.role) && <TeamsTools />}
     </PageLayout>
   );
 };

src/frontend/src/pages/AdminToolsPage/AdminToolsUserManagement.tsx

@@ -82,7 +82,7 @@ const AdminToolsUserManagement: React.FC = () => {
     }
   };
 
-  const userToAutocompleteOption = (user: User): { label: string; id: string } => {
+  const userToAutocompleteOptionWithRole = (user: User): { label: string; id: string } => {
     return { label: `${fullNamePipe(user)} (${user.email}) - ${user.role}`, id: user.userId.toString() };
   };
 
@@ -93,10 +93,10 @@ const AdminToolsUserManagement: React.FC = () => {
           <NERAutocomplete
             id="users-autocomplete"
             onChange={usersSearchOnChange}
-            options={users.filter((user) => rankUserRole(user.role) < currentUserRank).map(userToAutocompleteOption)}
+            options={users.filter((user) => rankUserRole(user.role) < currentUserRank).map(userToAutocompleteOptionWithRole)}
             size="small"
             placeholder="Select a User"
-            value={user ? userToAutocompleteOption(user) : null}
+            value={user ? userToAutocompleteOptionWithRole(user) : null}
           />
         </Grid>
         <Grid item xs={12} md={4}>