#3667: with @Jfresh18 -- added form validation to TaskFormModal and fixed form clearing issue on incomplete submit

Author: gcooper407

src/frontend/src/components/NERFormModal.tsx

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { FieldValues, UseFormHandleSubmit, UseFormReset } from 'react-hook-form';
 import NERModal, { NERModalProps } from './NERModal';
+import { useToast } from '../hooks/toasts.hooks';
 
 interface NERFormModalProps<T extends FieldValues> extends NERModalProps {
   reset: UseFormReset<T>;
@@ -27,18 +28,23 @@ const NERFormModal = ({
   hideBackDrop = false,
   paperProps
 }: NERFormModalProps<any>) => {
+  const toast = useToast();
   /**
    * Wrapper function for onSubmit so that form data is reset after submit
    */
   const onSubmitWrapper = async (data: any) => {
-    await onFormSubmit(data);
-    reset();
+    try {
+      await onFormSubmit(data);
+      reset();
+    } catch (e: unknown) {
+      if (e instanceof Error) toast.error(e.message, 6000);
+    }
   };
 
-  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleFormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     e.stopPropagation(); // Prevent event bubbling
-    handleUseFormSubmit(onSubmitWrapper)(e);
+    await handleUseFormSubmit(onSubmitWrapper)(e);
   };
 
   return (

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/TaskList/TaskFormModal.tsx

@@ -2,24 +2,14 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { Autocomplete, FormControl, FormHelperText, FormLabel, Grid, MenuItem, TextField } from '@mui/material';
 import { DatePicker } from '@mui/x-date-pickers';
 import { Controller, useForm } from 'react-hook-form';
-import { countWords, isGuest, isUnderWordCount, notGuest, Task, TaskPriority, TeamPreview } from 'shared';
+import { countWords, isGuest, isUnderWordCount, notGuest, Task, TaskStatus, TaskPriority, TeamPreview } from 'shared';
 import { useAllUsers, useCurrentUser } from '../../../../hooks/users.hooks';
 import * as yup from 'yup';
 import { taskUserToAutocompleteOption } from '../../../../utils/task.utils';
 import NERFormModal from '../../../../components/NERFormModal';
 import LoadingIndicator from '../../../../components/LoadingIndicator';
 import ErrorPage from '../../../ErrorPage';
 
-const schema = yup.object().shape({
-  notes: yup.string().optional(),
-  startDate: yup.date().optional(),
-  deadline: yup.date().optional(),
-  priority: yup.mixed<TaskPriority>().oneOf(Object.values(TaskPriority)).required(),
-  assignees: yup.array().required(),
-  title: yup.string().required(),
-  taskId: yup.string().required()
-});
-
 export interface EditTaskFormInput {
   taskId: string;
   title: string;
@@ -32,14 +22,41 @@ export interface EditTaskFormInput {
 
 interface TaskFormModalProps {
   task?: Task;
+  status?: Task['status'];
   teams: TeamPreview[];
   modalShow: boolean;
   onHide: () => void;
   onSubmit: (data: EditTaskFormInput) => Promise<void>;
   onReset?: () => void;
 }
 
-const TaskFormModal: React.FC<TaskFormModalProps> = ({ task, onSubmit, modalShow, onHide, onReset }) => {
+const TaskFormModal: React.FC<TaskFormModalProps> = ({ task, status, onSubmit, modalShow, onHide, onReset }) => {
+  let schema;
+
+  if (status === TaskStatus.IN_PROGRESS) {
+    console.log('here');
+    schema = yup.object().shape({
+      notes: yup.string().optional(),
+      startDate: yup.date().optional(),
+      deadline: yup.date().required('Deadline is required for In Progress tasks'),
+      priority: yup.mixed<TaskPriority>().oneOf(Object.values(TaskPriority)).required(),
+      assignees: yup.array().required().min(1, 'At least one assignee is required for In Progress tasks'),
+      title: yup.string().required(),
+      taskId: yup.string().required()
+    });
+  } else {
+    console.log('there');
+    schema = yup.object().shape({
+      notes: yup.string().optional(),
+      startDate: yup.date().optional(),
+      deadline: yup.date().optional(),
+      priority: yup.mixed<TaskPriority>().oneOf(Object.values(TaskPriority)).required(),
+      assignees: yup.array().required(),
+      title: yup.string().required(),
+      taskId: yup.string().required()
+    });
+  }
+
   const user = useCurrentUser();
 
   const { data: users, isLoading, isError, error } = useAllUsers();
@@ -161,6 +178,7 @@ const TaskFormModal: React.FC<TaskFormModalProps> = ({ task, onSubmit, modalShow
                   />
                 )}
               />
+              <FormHelperText error={!!errors.assignees}>{errors.assignees?.message}</FormHelperText>
             </FormControl>
           </Grid>
           <Grid item md={6}>
@@ -199,6 +217,7 @@ const TaskFormModal: React.FC<TaskFormModalProps> = ({ task, onSubmit, modalShow
                   />
                 )}
               />
+              <FormHelperText error={!!errors.deadline}>{errors.deadline?.message}</FormHelperText>
             </FormControl>
           </Grid>
           <Grid item xs={12} md={12}>

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/TaskList/v2/TaskColumn.tsx

@@ -30,30 +30,25 @@ export const TaskColumn = ({
   const theme = useTheme();
 
   const handleCreateTask = async ({ notes, title, deadline, assignees, priority, startDate }: EditTaskFormInput) => {
-    try {
-      const task = await createTask({
-        wbsNum: project.wbsNum,
-        title,
-        deadline: deadline ? transformDate(deadline) : undefined,
-        startDate: startDate ? transformDate(startDate) : undefined,
-        priority,
-        status: status as TaskStatus,
-        assignees,
-        notes
-      });
-      onAddTask(task);
-      toast.success('Task Successfully Created!');
-    } catch (e: unknown) {
-      if (e instanceof Error) {
-        toast.error(e.message, 6000);
-      }
-    }
+    const task = await createTask({
+      wbsNum: project.wbsNum,
+      title,
+      deadline: deadline ? transformDate(deadline) : undefined,
+      startDate: startDate ? transformDate(startDate) : undefined,
+      priority,
+      status: status as TaskStatus,
+      assignees,
+      notes
+    });
+    onAddTask(task);
+    toast.success('Task Successfully Created!');
     setShowCreateTaskModal(false);
   };
 
   return (
     <>
       <TaskFormModal
+        status={status}
         onSubmit={handleCreateTask}
         onHide={() => setShowCreateTaskModal(false)}
         modalShow={showCreateTaskModal}