Merge branch 'develop' into #1183-delete-team-endpoint

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/prisma/seed.ts

@@ -12,6 +12,7 @@ import {
   Task_Priority,
   Task_Status,
   Team,
+  Vendor,
   WBS_Element_Status
 } from '@prisma/client';
 import { dbSeedAllUsers } from './seed-data/users.seed';
@@ -684,6 +685,10 @@ const performSeed: () => Promise<void> = async () => {
   );
 
   const vendor = await ReimbursementRequestService.createVendor(thomasEmrax, 'Tesla');
+  const vendor2 = await ReimbursementRequestService.createVendor(thomasEmrax, 'Amazon');
+  const vendor3 = await ReimbursementRequestService.createVendor(thomasEmrax, 'Google');
+
+  const vendors: Vendor[] = [vendor, vendor2, vendor3];
 
   const expenseType = await ReimbursementRequestService.createExpenseType(thomasEmrax, 'Equipment', 123, true);
 

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();
 
@@ -30,5 +30,13 @@ teamsRouter.post(
 );
 teamsRouter.post('/:teamId/set-head', intMinZero(body('userId')), validateInputs, TeamsController.setTeamHead);
 teamsRouter.post('/:teamId/delete', TeamsController.deleteTeam);
+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

@@ -182,6 +182,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(), {
@@ -41,6 +42,10 @@ export const deleteTeam = (id: string) => {
   return axios.post<{ message: string }>(apiUrls.teamsDelete(id));
 };
 
+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

@@ -6,14 +6,14 @@
 import {
   Autocomplete,
   AutocompleteRenderInputParams,
-  InputAdornment,
+  FormHelperText,
   SxProps,
   TextField,
   Theme,
   useTheme
 } from '@mui/material';
-import SearchIcon from '@mui/icons-material/Search';
 import { HTMLAttributes } from 'react';
+import { FieldError } from 'react-hook-form';
 
 interface NERAutocompleteProps {
   id: string;
@@ -25,6 +25,7 @@ interface NERAutocompleteProps {
   value?: { label: string; id: string } | null;
   listboxProps?: HTMLAttributes<HTMLUListElement>;
   filterSelectedOptions?: boolean;
+  errorMessage?: FieldError;
 }
 
 const NERAutocomplete: React.FC<NERAutocompleteProps> = ({
@@ -36,23 +37,17 @@ const NERAutocomplete: React.FC<NERAutocompleteProps> = ({
   sx,
   value,
   listboxProps,
-  filterSelectedOptions
+  filterSelectedOptions,
+  errorMessage
 }) => {
   const theme = useTheme();
 
   const autocompleteStyle = {
     height: '40px',
     backgroundColor: theme.palette.background.default,
     width: '100%',
-    borderRadius: '25px',
     border: 0,
-    '.MuiOutlinedInput-notchedOutline': {
-      borderColor: 'black',
-      borderRadius: '25px'
-    },
-    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-      borderColor: 'red'
-    },
+    borderColor: 'black',
     ...sx
   };
 
@@ -61,12 +56,7 @@ const NERAutocomplete: React.FC<NERAutocompleteProps> = ({
       <TextField
         {...params}
         InputProps={{
-          ...params.InputProps,
-          startAdornment: (
-            <InputAdornment position="start">
-              <SearchIcon />
-            </InputAdornment>
-          )
+          ...params.InputProps
         }}
         placeholder={placeholder}
         required
@@ -75,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,10 +11,18 @@ import {
   setTeamMembers,
   setTeamDescription,
   setTeamHead,
-  setTeamLeads,
-  deleteTeam
+  deleteTeam,
+  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();
@@ -92,6 +100,22 @@ export const useDeleteTeam = () => {
   );
 };
 
+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/layouts/NavTopBar/NavTopBar.tsx

@@ -35,7 +35,7 @@ const NavTopBar: React.FC<NavTopBarProps> = ({ open, handleDrawerOpen }) => {
   const user = useCurrentUser();
   return (
     <NERAppBar position="fixed" open={open}>
-      <Toolbar disableGutters sx={{ height: 68, px: 1, BACKGROUND, color: TEXT_COLOR }}>
+      <Toolbar disableGutters sx={{ height: 68, px: 1, background: BACKGROUND, color: TEXT_COLOR }}>
         <IconButton
           color="inherit"
           aria-label="open drawer"

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;