From 2dd142324dc59874c0eea0c8e4f43f1c0163b20b Mon Sep 17 00:00:00 2001
From: awlfccamp <angelawlee@rocketmail.com>
Date: Thu, 10 Oct 2024 13:15:47 -0500
Subject: [PATCH 1/2] adapt ValidatedTextField to accept custom validation
 functions

---
 client/src/components/ProjectForm.jsx         | 16 +++-
 .../parts/form/ValidatedTextField.jsx         | 91 ++++++++++---------
 2 files changed, 65 insertions(+), 42 deletions(-)

diff --git a/client/src/components/ProjectForm.jsx b/client/src/components/ProjectForm.jsx
index d0c4efc05..4a35628f8 100644
--- a/client/src/components/ProjectForm.jsx
+++ b/client/src/components/ProjectForm.jsx
@@ -22,6 +22,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
@@ -249,7 +250,7 @@ export default function ProjectForm({
           isEdit ? submitEditProject(data) : submitNewProject(data);
         })}
       >
-        {arr.map((input) => (
+        {simpleInputs.map((input) => (
           <ValidatedTextField
             key={input.name}
             register={register}
@@ -261,6 +262,19 @@ export default function ProjectForm({
             input={input}
           />
         ))}
+        {isEdit &&
+          additionalInputsForEdit.map((input) => (
+            <ValidatedTextField
+              key={input.name}
+              register={register}
+              isEdit={isEdit}
+              editMode={editMode}
+              locationType={locationType}
+              locationRadios={locationRadios}
+              errors={errors}
+              input={input}
+            />
+          ))}
         <ChangesModal
           open={isModalOpen}
           onClose={handleClose}
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 (
-  <Box sx={{ mb: 1 }} key={input.name}>
-    <Grid container alignItems="center">
-      <Grid item xs="auto" sx={{ pr: 3 }}>
-        <InputLabel
-          sx={{ width: 'max-content', ml: 0.5, mb: 0.5 }}
-          id={input.name}
-        >
-          {input.label}
-        </InputLabel>
+    <Box sx={{ mb: 1 }} key={input.name}>
+      <Grid container alignItems="center">
+        <Grid item xs="auto" sx={{ pr: 3 }}>
+          <InputLabel
+            sx={{ width: 'max-content', ml: 0.5, mb: 0.5 }}
+            id={input.name}
+          >
+            {input.label}
+          </InputLabel>
+        </Grid>
+        {input.name === 'location' && locationRadios}
       </Grid>
-      {input.name === 'location' && locationRadios}
-    </Grid>
-    <TextField
-      {...registerObj}
-      error={!!errors[input.name]}
-      type={input.type}
-      placeholder={input.placeholder}
-      helperText={`${errors[input.name]?.message || ' '}`}
-      disabled={isEdit ? !editMode || input.disabled : undefined} // handles edit mode for EditProjcet form
-    />
-  </Box>
+      <TextField
+        {...registerObj}
+        error={!!errors[input.name]}
+        type={input.type}
+        placeholder={input.placeholder}
+        helperText={`${errors[input.name]?.message || ' '}`}
+        disabled={isEdit ? !editMode || input.disabled : undefined} // handles edit mode for EditProjcet form
+      />
+    </Box>
   );
-};
+}
 
-export default ValidatedTextField;
\ No newline at end of file
+export default ValidatedTextField;

From bf4501cdb5d7913472e34305c3ab2e93e39d5bfa Mon Sep 17 00:00:00 2001
From: awlfccamp <angelawlee@rocketmail.com>
Date: Sun, 16 Feb 2025 09:21:37 -0600
Subject: [PATCH 2/2] add paper to form for styling

---
 client/src/components/ProjectForm.jsx | 77 +++++++++++++++------------
 1 file changed, 42 insertions(+), 35 deletions(-)

diff --git a/client/src/components/ProjectForm.jsx b/client/src/components/ProjectForm.jsx
index 4a35628f8..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';
 
@@ -236,34 +237,26 @@ export default function ProjectForm({
       <Box sx={{ textAlign: 'center' }}>
         <Typography variant="h1">Project Management</Typography>
       </Box>
-      {auth.user.accessLevel === 'admin' ? (
-        <TitledBox
-          title={editMode ? 'Editing Project' : 'Project Information'}
-          badge={isEdit ? editIcon() : addIcon()}
-        />
-      ) : (
-        <TitledBox title={'Project Information'} />
-      )}
-      <form
-        id="project-form"
-        onSubmit={handleSubmit((data) => {
-          isEdit ? submitEditProject(data) : submitNewProject(data);
-        })}
+      <Paper
+        elevation={3}
+        sx={{ padding: 3, borderRadius: 1, backgroundColor: '#f5f5f5' }}
       >
-        {simpleInputs.map((input) => (
-          <ValidatedTextField
-            key={input.name}
-            register={register}
-            isEdit={isEdit}
-            editMode={editMode}
-            locationType={locationType}
-            locationRadios={locationRadios}
-            errors={errors}
-            input={input}
+        {auth.user.accessLevel === 'admin' ? (
+          <TitledBox
+            title={editMode ? 'Editing Project' : 'Project Information'}
+            badge={isEdit ? editIcon() : addIcon()}
           />
-        ))}
-        {isEdit &&
-          additionalInputsForEdit.map((input) => (
+        ) : (
+          <TitledBox title={'Project Information'} />
+        )}
+
+        <form
+          id="project-form"
+          onSubmit={handleSubmit((data) => {
+            isEdit ? submitEditProject(data) : submitNewProject(data);
+          })}
+        >
+          {simpleInputs.map((input) => (
             <ValidatedTextField
               key={input.name}
               register={register}
@@ -275,15 +268,29 @@ export default function ProjectForm({
               input={input}
             />
           ))}
-        <ChangesModal
-          open={isModalOpen}
-          onClose={handleClose}
-          destination={'/projects'}
-          aria-labelledby="modal-modal-title"
-          aria-describedby="modal-modal-description"
-          handleClose={handleClose}
-        />
-      </form>
+          {isEdit &&
+            additionalInputsForEdit.map((input) => (
+              <ValidatedTextField
+                key={input.name}
+                register={register}
+                isEdit={isEdit}
+                editMode={editMode}
+                locationType={locationType}
+                locationRadios={locationRadios}
+                errors={errors}
+                input={input}
+              />
+            ))}
+          <ChangesModal
+            open={isModalOpen}
+            onClose={handleClose}
+            destination={'/projects'}
+            aria-labelledby="modal-modal-title"
+            aria-describedby="modal-modal-description"
+            handleClose={handleClose}
+          />
+        </form>
+      </Paper>
       {auth.user.accessLevel === 'admin' ? (
         <Box>
           <Grid container justifyContent="space-evenly" sx={{ my: 3 }}>