#2131-required-optional-wbs-meeting

Author: ryanhowe28

src/backend/src/controllers/design-reviews.controllers.ts

@@ -41,11 +41,6 @@ export default class DesignReviewsController {
         teamTypeId,
         requiredMemberIds,
         optionalMemberIds,
-        location,
-        isOnline,
-        isInPerson,
-        zoomLink,
-        docTemplateLink,
         wbsNum,
         meetingTimes
       } = req.body;
@@ -56,13 +51,8 @@ export default class DesignReviewsController {
         teamTypeId,
         requiredMemberIds,
         optionalMemberIds,
-        isOnline,
-        isInPerson,
-        docTemplateLink,
         wbsNum,
-        meetingTimes,
-        zoomLink,
-        location
+        meetingTimes
       );
       return res.status(200).json(createdDesignReview);
     } catch (error: unknown) {

src/backend/src/routes/design-reviews.routes.ts

@@ -20,11 +20,6 @@ designReviewsRouter.post(
   intMinZero(body('requiredMemberIds.*')),
   body('optionalMemberIds').isArray(),
   intMinZero(body('optionalMemberIds.*')),
-  nonEmptyString(body('location').optional()),
-  body('isOnline').isBoolean(),
-  body('isInPerson').isBoolean(),
-  nonEmptyString(body('zoomLink').optional()),
-  nonEmptyString(body('docTemplateLink')).optional(),
   body('wbsNum'),
   body('meetingTimes').isArray(),
   intMinZero(body('meetingTimes.*')),

src/backend/src/services/design-reviews.services.ts

@@ -60,34 +60,24 @@ export default class DesignReviewsService {
   }
 
   /**
-   * Creates a design review
-   * @param submitter user who submitted the design review
+   * Create a design review
+   * @param submitter User submitting the design review
    * @param dateScheduled when the design review is scheduled for
-   * @param teamTypeId team type id of the design review
-   * @param requiredMemberIds ids of the required members to attend the design review
-   * @param optionalMemberIds ids of the optional members to attend the design reivew
-   * @param isOnline if design review is online
-   * @param isInPerson if design review is in person
-   * @param docTemplateLink link to the doc template
-   * @param wbsNum wbs number for the design review
-   * @param meetingTimes the meeting times for the design review
-   * @param zoomLink link for the zoom if design review is online
-   * @param location location of the design review if in person
-   * @returns a design review
+   * @param teamTypeId team type id
+   * @param requiredMemberIds ids of members who are required to go
+   * @param optionalMemberIds ids of members who do not have to go
+   * @param wbsNum wbs num related to the design review
+   * @param meetingTimes meeting times of the design review
+   * @returns a new design review
    */
   static async createDesignReview(
     submitter: User,
     dateScheduled: Date,
     teamTypeId: string,
     requiredMemberIds: number[],
     optionalMemberIds: number[],
-    isOnline: boolean,
-    isInPerson: boolean,
-    docTemplateLink: string,
     wbsNum: WbsNumber,
     meetingTimes: number[],
-    zoomLink?: string,
-    location?: string
   ): Promise<DesignReview> {
     if (!isLeadership(submitter.role)) throw new AccessDeniedException('create design review');
 
@@ -130,14 +120,6 @@ export default class DesignReviewsService {
       }
     }
 
-    if (isOnline && !zoomLink) {
-      throw new HttpException(400, 'If the design review is online then there needs to be a zoom link');
-    }
-
-    if (isInPerson && !location) {
-      throw new HttpException(400, 'If the design review is in person then there needs to be a location');
-    }
-
     if (dateScheduled.valueOf() < new Date().valueOf()) {
       throw new HttpException(400, 'Design review cannot be scheduled for a past day');
     }
@@ -147,11 +129,8 @@ export default class DesignReviewsService {
         dateScheduled,
         dateCreated: new Date(),
         status: Design_Review_Status.UNCONFIRMED,
-        location,
-        isOnline,
-        isInPerson,
-        zoomLink,
-        docTemplateLink,
+        isOnline: false,
+        isInPerson: false,
         userCreated: { connect: { userId: submitter.userId } },
         teamType: { connect: { teamTypeId: teamType.teamTypeId } },
         requiredMembers: { connect: requiredMemberIds.map((memberId) => ({ userId: memberId })) },

src/frontend/src/apis/design-reviews.api.ts

@@ -6,6 +6,7 @@ import axios from '../utils/axios';
 import { DesignReview } from 'shared';
 import { apiUrls } from '../utils/urls';
 import { CreateDesignReviewsPayload } from '../hooks/design-reviews.hooks';
+import { designReviewTransformer } from './transformers/design-reviews.tranformers';
 
 /**
  * Create a design review
@@ -20,7 +21,7 @@ export const createDesignReviews = async (payload: CreateDesignReviewsPayload) =
  */
 export const getAllDesignReviews = () => {
   return axios.get(apiUrls.designReviews(), {
-    transformResponse: (data) => JSON.parse(data)
+    transformResponse: (data) => JSON.parse(data).map(designReviewTransformer)
   });
 };
 

src/frontend/src/hooks/design-reviews.hooks.ts

@@ -11,11 +11,6 @@ export interface CreateDesignReviewsPayload {
   teamTypeId: string;
   requiredMemberIds: number[];
   optionalMemberIds: number[];
-  location?: string;
-  isOnline: boolean;
-  isInPerson: boolean;
-  zoomLink?: string;
-  docTemplateLink?: string;
   wbsNum: WbsNumber;
   meetingTimes: number[];
 }

src/frontend/src/pages/CalendarPage/CalendarPage.tsx

@@ -20,7 +20,12 @@ import LoadingIndicator from '../../components/LoadingIndicator';
 
 const CalendarPage = () => {
   const theme = useTheme();
-  const { data: allTeamTypes, isLoading: allTeamTypesLoading, isError: allTeamTypesIsError, error: allTeamTypesError } = useAllTeamTypes();
+  const {
+    data: allTeamTypes,
+    isLoading: allTeamTypesLoading,
+    isError: allTeamTypesIsError,
+    error: allTeamTypesError
+  } = useAllTeamTypes();
 
   const [displayMonthYear, setDisplayMonthYear] = useState<Date>(new Date());
   const { isLoading, isError, error, data: allDesignReviews } = useAllDesignReviews();
@@ -32,6 +37,7 @@ const CalendarPage = () => {
   const confirmedDesignReviews = allDesignReviews.filter(isConfirmed);
 
   const eventDict = new Map<string, DesignReview[]>();
+  console.log(confirmedDesignReviews);
   confirmedDesignReviews.forEach((designReview) => {
     // Accessing the date actually converts it to local time, which causes the date to be off. This is a workaround.
     const date = datePipe(

src/frontend/src/pages/CalendarPage/DesignReviewCreateModal.tsx

@@ -2,12 +2,31 @@ import NERFormModal from '../../components/NERFormModal';
 import * as yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { Controller, useForm } from 'react-hook-form';
-import { Box, FormControl, FormLabel, MenuItem, Select, SelectChangeEvent, TextField, Typography } from '@mui/material';
+import {
+  Autocomplete,
+  Box,
+  FormControl,
+  FormLabel,
+  Grid,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+  TextField,
+  Typography
+} from '@mui/material';
 import { DatePicker } from '@mui/x-date-pickers';
 import { useToast } from '../../hooks/toasts.hooks';
 import { useState } from 'react';
-import { meetingStartTimePipe } from '../../utils/pipes';
-import { TeamType } from 'shared';
+import { meetingStartTimePipe, wbsNamePipe } from '../../utils/pipes';
+import { Project, TeamType, WbsNumber, WorkPackage, validateWBS, wbsPipe } from 'shared';
+import { useCreateDesignReviews } from '../../hooks/design-reviews.hooks';
+import { useAllUsers } from '../../hooks/users.hooks';
+import ErrorPage from '../ErrorPage';
+import LoadingIndicator from '../../components/LoadingIndicator';
+import { userToAutocompleteOption } from '../../utils/teams.utils';
+import { useQuery } from '../../hooks/utils.hooks';
+import NERAutocomplete from '../../components/NERAutocomplete';
+import { useAllProjects } from '../../hooks/projects.hooks';
 
 const schema = yup.object().shape({
   date: yup.date().required('Date is required'),
@@ -21,6 +40,9 @@ interface CreateDesignReviewFormInput {
   startTime: number;
   endTime: number;
   teamTypeId: string;
+  requiredMemberIds: number[];
+  optionalMemberIds: number[];
+  wbsNum: WbsNumber;
 }
 
 interface DesignReviewCreateModalProps {
@@ -31,15 +53,35 @@ interface DesignReviewCreateModalProps {
 
 export const DesignReviewCreateModal: React.FC<DesignReviewCreateModalProps> = ({ showModal, handleClose, teamTypes }) => {
   const HOURS: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+  const query = useQuery();
 
   const toast = useToast();
   const [datePickerOpen, setDatePickerOpen] = useState(false);
+  const [requiredMembers, setRequiredMembers] = useState([].map(userToAutocompleteOption));
+  const [optionalMembers, setOptionalMembers] = useState([].map(userToAutocompleteOption));
+  const [wbsNum, setWbsNum] = useState(query.get('wbsNum') || '');
+  const { isLoading: allUsersIsLoading, isError: allUsersIsError, error: allUsersError, data: users } = useAllUsers();
+  const { data: projects } = useAllProjects();
 
-  // create design review hook
+  const { mutateAsync } = useCreateDesignReviews();
 
   const onSubmit = async (data: CreateDesignReviewFormInput) => {
+    const day = data.date.getDay();
+    console.log('Day: ' + day);
+    const times = [];
+    for (let i = day * 12 + data.startTime; i <= day * 12 + data.endTime; i++) {
+      times.push(i);
+    }
+    console.log('times: ' + times);
     try {
-      // await mutateAsync(data);
+      await mutateAsync({
+        dateScheduled: data.date,
+        teamTypeId: data.teamTypeId,
+        requiredMemberIds: requiredMembers.map((member) => parseInt(member.id)),
+        optionalMemberIds: optionalMembers.map((member) => parseInt(member.id)),
+        wbsNum: validateWBS(wbsNum),
+        meetingTimes: times
+      });
     } catch (error: unknown) {
       if (error instanceof Error) {
         toast.error(error.message);
@@ -63,6 +105,43 @@ export const DesignReviewCreateModal: React.FC<DesignReviewCreateModalProps> = (
     }
   });
 
+  if (allUsersIsError) return <ErrorPage message={allUsersError?.message} />;
+  if (allUsersIsLoading || !users || !projects) return <LoadingIndicator />;
+
+  const memberOptions = users.map(userToAutocompleteOption);
+
+  const projectOptions: { label: string; id: string }[] = [];
+
+  const wbsDropdownOptions: { label: string; id: string }[] = [];
+
+  projects.forEach((project: Project) => {
+    wbsDropdownOptions.push({
+      label: `${wbsNamePipe(project)}`,
+      id: wbsPipe(project.wbsNum)
+    });
+    projectOptions.push({
+      label: `${wbsNamePipe(project)}`,
+      id: wbsPipe(project.wbsNum)
+    });
+    project.workPackages.forEach((workPackage: WorkPackage) => {
+      wbsDropdownOptions.push({
+        label: `${wbsNamePipe(workPackage)}`,
+        id: wbsPipe(workPackage.wbsNum)
+      });
+    });
+  });
+
+  const wbsAutocompleteOnChange = (
+    _event: React.SyntheticEvent<Element, Event>,
+    value: { label: string; id: string } | null
+  ) => {
+    if (value) {
+      setWbsNum(value.id);
+    } else {
+      setWbsNum('');
+    }
+  };
+
   return (
     <NERFormModal
       open={showModal}
@@ -224,6 +303,57 @@ export const DesignReviewCreateModal: React.FC<DesignReviewCreateModalProps> = (
           />
         </FormControl>
       </Box>
+      <Box>
+        <Typography sx={{ fontWeight: 'bold' }} display="inline">
+          Required Members:
+        </Typography>
+        <Grid container direction={'row'}>
+          <Grid item xs={9} md={10} lg={11}>
+            <Autocomplete
+              isOptionEqualToValue={(option, value) => option.id === value.id}
+              filterSelectedOptions
+              multiple
+              id="tags-standard"
+              options={memberOptions}
+              value={requiredMembers}
+              onChange={(_event, newValue) => setRequiredMembers(newValue)}
+              getOptionLabel={(option) => option.label}
+              renderInput={(params) => <TextField {...params} variant="standard" placeholder="Select A User" />}
+            />
+          </Grid>
+        </Grid>
+      </Box>
+      <Box>
+        <Typography sx={{ fontWeight: 'bold' }} display="inline">
+          Optional Members:
+        </Typography>
+        <Grid container direction={'row'}>
+          <Grid item xs={9} md={10} lg={11}>
+            <Autocomplete
+              isOptionEqualToValue={(option, value) => option.id === value.id}
+              filterSelectedOptions
+              multiple
+              id="tags-standard"
+              options={memberOptions}
+              value={optionalMembers}
+              onChange={(_event, newValue) => setOptionalMembers(newValue)}
+              getOptionLabel={(option) => option.label}
+              renderInput={(params) => <TextField {...params} variant="standard" placeholder="Select A User" />}
+            />
+          </Grid>
+        </Grid>
+      </Box>
+      <Grid item xs={12}>
+        <FormLabel>WBS</FormLabel>
+        <NERAutocomplete
+          id="wbs-autocomplete"
+          onChange={wbsAutocompleteOnChange}
+          options={wbsDropdownOptions}
+          size="small"
+          placeholder="Select a project or work package"
+          value={wbsDropdownOptions.find((element) => element.id === wbsNum) || null}
+        />
+      </Grid>
     </NERFormModal>
   );
 };