diff --git a/client/src/components/ProjectForm.jsx b/client/src/components/ProjectForm.jsx index d0c4efc05..45a2bf166 100644 --- a/client/src/components/ProjectForm.jsx +++ b/client/src/components/ProjectForm.jsx @@ -12,6 +12,7 @@ import { FormControl, FormControlLabel, RadioGroup, + Paper, } from '@mui/material'; import { styled } from '@mui/material/styles'; @@ -22,6 +23,7 @@ import { ReactComponent as PlusIcon } from '../svg/PlusIcon.svg'; import ValidatedTextField from './parts/form/ValidatedTextField'; import TitledBox from './parts/boxes/TitledBox'; import ChangesModal from './ChangesModal'; +import { simpleInputs, additionalInputsForEdit } from './data'; /** STYLES * -most TextField and InputLabel styles are controlled by the theme @@ -235,41 +237,60 @@ export default function ProjectForm({ Project Management - {auth.user.accessLevel === 'admin' ? ( - - ) : ( - - )} -
{ - isEdit ? submitEditProject(data) : submitNewProject(data); - })} + - {arr.map((input) => ( - + ) : ( + + )} + + { + isEdit ? submitEditProject(data) : submitNewProject(data); + })} + > + {simpleInputs.map((input) => ( + + ))} + {isEdit && + additionalInputsForEdit.map((input) => ( + + ))} + - ))} - - + +
{auth.user.accessLevel === 'admin' ? ( diff --git a/client/src/components/parts/form/ValidatedTextField.jsx b/client/src/components/parts/form/ValidatedTextField.jsx index 33f0e8d38..91a696c0c 100644 --- a/client/src/components/parts/form/ValidatedTextField.jsx +++ b/client/src/components/parts/form/ValidatedTextField.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Box, Grid, InputLabel, TextField } from "@mui/material"; +import { Box, Grid, InputLabel, TextField } from '@mui/material'; /** * A validated text field component for forms. @@ -24,52 +24,61 @@ function ValidatedTextField({ locationRadios, input, }) { - const inputObj = { - pattern: - input.name === 'location' - ? locationType === 'remote' - ? { - value: input.value, - message: input.errorMessage, - } - : { - value: input.addressValue, - message: input.addressError, - } - : { value: input.value, message: input.errorMessage }, - }; - if ('required' in input && input.required === false) { - // if required is set to false, don't add required attribute to object + const inputObj = {}; + + if (input.name === 'location') { + if (locationType === 'remote') { + inputObj.pattern = { + value: input.value, + message: input.errorMessage, + }; + } else { + inputObj.pattern = { + value: input.addressValue, + message: input.addressError, + }; + } } else { - inputObj.required = `${input.name} is required`; + if (input.value) { + inputObj.pattern = { + value: input.value, + message: + input.errorMessage || `${input.label} is not in the correct format`, + }; + } + } + + if (input.required !== false) { + inputObj.required = `${input.label} is required`; } + const registerObj = { ...register(input.name, inputObj), - } + }; return ( - - - - - {input.label} - + + + + + {input.label} + + + {input.name === 'location' && locationRadios} - {input.name === 'location' && locationRadios} - - - + + ); -}; +} -export default ValidatedTextField; \ No newline at end of file +export default ValidatedTextField;