Merge pull request #1416 from Northeastern-Electric-Racing/#1287-rework-vendor-and-account-code-form-submit-error

#1287: Vender and Account Code Forms Enabled Submit Buttons

Author: RChandler234

src/frontend/src/components/NERFormModal.tsx

@@ -28,21 +28,24 @@ const NERFormModal = ({
    */
   const onSubmitWrapper = async (data: any) => {
     await onFormSubmit(data);
-    reset({ confirmDone: false });
+    reset();
   };
 
   return (
     <NERModal
       open={open}
-      onHide={onHide}
+      onHide={() => {
+        onHide();
+        reset();
+      }}
       formId={formId}
       title={title}
       cancelText={cancelText ? cancelText : 'Cancel'}
       submitText={submitText ? submitText : 'Submit'}
       disabled={disabled}
       showCloseButton={showCloseButton}
     >
-      <form id={formId} onSubmit={handleUseFormSubmit(onSubmitWrapper)}>
+      <form id={formId} onSubmit={handleUseFormSubmit(onSubmitWrapper)} noValidate>
         {children}
       </form>
     </NERModal>

src/frontend/src/pages/AdminToolsPage/FinanceConfig/AccountCodeFormModal.tsx

@@ -2,14 +2,14 @@ import { ExpenseType } from 'shared';
 import { ExpenseTypePayload } from '../../../hooks/finance.hooks';
 import { Controller, useForm } from 'react-hook-form';
 import NERFormModal from '../../../components/NERFormModal';
-import { Checkbox, FormControl, FormLabel } from '@mui/material';
+import { Checkbox, FormControl, FormLabel, FormHelperText } from '@mui/material';
 import ReactHookTextField from '../../../components/ReactHookTextField';
 import { useToast } from '../../../hooks/toasts.hooks';
 import * as yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
 
 const schema = yup.object().shape({
-  code: yup.number().required('Account Code is Required'),
+  code: yup.number().typeError('Account Code must be a number').required('Account Code is Required'),
   name: yup.string().required('Account Name is Required'),
   allowed: yup.boolean().required('Allowed is Required')
 });
@@ -26,10 +26,9 @@ const AccountCodeFormModal = ({ showModal, handleClose, defaultValues, onSubmit
   const {
     handleSubmit,
     control,
-    formState: { isValid },
-    reset
+    reset,
+    formState: { errors }
   } = useForm({
-    mode: 'onChange',
     resolver: yupResolver(schema),
     defaultValues: {
       code: defaultValues?.code,
@@ -54,20 +53,21 @@ const AccountCodeFormModal = ({ showModal, handleClose, defaultValues, onSubmit
       open={showModal}
       onHide={handleClose}
       title={!!defaultValues ? 'Edit Account Code' : 'Create Account Code'}
-      reset={reset}
+      reset={() => reset({ name: '', code: undefined, allowed: false })}
       handleUseFormSubmit={handleSubmit}
       onFormSubmit={onFormSubmit}
       formId={!!defaultValues ? 'edit-vendor-form' : 'create-vendor-form'}
-      disabled={!isValid}
       showCloseButton
     >
       <FormControl fullWidth>
         <FormLabel>Account Name</FormLabel>
         <ReactHookTextField name="name" control={control} fullWidth />
+        <FormHelperText error>{errors.name?.message}</FormHelperText>
       </FormControl>
       <FormControl fullWidth>
         <FormLabel>Account Code</FormLabel>
         <ReactHookTextField name="code" control={control} fullWidth />
+        <FormHelperText error>{errors.code?.message}</FormHelperText>
       </FormControl>
       <FormControl>
         <FormLabel>Allowed?</FormLabel>

src/frontend/src/pages/AdminToolsPage/FinanceConfig/AccountCodesTable.tsx

@@ -49,7 +49,10 @@ const AccountCodesTable = () => {
       {clickedAccountCode && (
         <EditAccountCodeModal
           showModal={showEditModal}
-          handleClose={() => setShowEditModal(false)}
+          handleClose={() => {
+            setShowEditModal(false);
+            setClickedAccountCode(undefined);
+          }}
           accountCode={clickedAccountCode}
         />
       )}

src/frontend/src/pages/AdminToolsPage/FinanceConfig/CreateVendorModal.tsx

@@ -1,6 +1,6 @@
 import { useForm } from 'react-hook-form';
 import NERFormModal from '../../../components/NERFormModal';
-import { FormControl, FormLabel } from '@mui/material';
+import { FormControl, FormLabel, FormHelperText } from '@mui/material';
 import ReactHookTextField from '../../../components/ReactHookTextField';
 import { useCreateVendor } from '../../../hooks/finance.hooks';
 import { useToast } from '../../../hooks/toasts.hooks';
@@ -10,7 +10,7 @@ import * as yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
 
 const schema = yup.object().shape({
-  name: yup.string().required('Account Name is Required')
+  name: yup.string().required('Vendor Name is Required')
 });
 
 interface NewVendorProps {
@@ -36,10 +36,9 @@ const CreateVendorModal = ({ showModal, handleClose }: NewVendorProps) => {
   const {
     handleSubmit,
     control,
-    formState: { isValid },
-    reset
+    reset,
+    formState: { errors }
   } = useForm({
-    mode: 'onChange',
     resolver: yupResolver(schema),
     defaultValues: {
       name: ''
@@ -54,16 +53,16 @@ const CreateVendorModal = ({ showModal, handleClose }: NewVendorProps) => {
       open={showModal}
       onHide={handleClose}
       title="New Vendor"
-      reset={reset}
+      reset={() => reset({ name: '' })}
       handleUseFormSubmit={handleSubmit}
       onFormSubmit={onSubmit}
       formId="new-vendor-form"
-      disabled={!isValid}
       showCloseButton
     >
       <FormControl>
         <FormLabel>Vendor Name</FormLabel>
         <ReactHookTextField name="name" control={control} sx={{ width: 1 }} />
+        <FormHelperText error>{errors.name?.message}</FormHelperText>
       </FormControl>
     </NERFormModal>
   );