From 6d6735abc55762214c9407ec8c02d2547ea00426 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         |  5 +-
 .../parts/form/ValidatedTextField.jsx         | 80 +++++++++++--------
 2 files changed, 49 insertions(+), 36 deletions(-)

diff --git a/client/src/components/ProjectForm.jsx b/client/src/components/ProjectForm.jsx
index b21e8b4ed..c6f0a26b5 100644
--- a/client/src/components/ProjectForm.jsx
+++ b/client/src/components/ProjectForm.jsx
@@ -21,6 +21,7 @@ import PlusIcon from '../svg/PlusIcon.svg?react';
 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
@@ -268,7 +269,7 @@ export default function ProjectForm({
               aria-describedby="modal-modal-description"
               handleClose={handleClose}
             />
-          </form>{' '}
+          </form>
           <Grid container justifyContent="space-evenly" sx={{ my: 3 }}>
             <Grid item xs="auto">
               <StyledButton
@@ -300,7 +301,6 @@ export default function ProjectForm({
         </TitledBox>
       ) : (
         <TitledBox title={'Project Information'} expandable={true}>
-          {' '}
           <form
             id="project-form"
             onSubmit={handleSubmit((data) => {
@@ -328,7 +328,6 @@ export default function ProjectForm({
               handleClose={handleClose}
             />
           </form>
-          {''}
         </TitledBox>
       )}
     </Box>
diff --git a/client/src/components/parts/form/ValidatedTextField.jsx b/client/src/components/parts/form/ValidatedTextField.jsx
index a8ac35499..162f1b464 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,61 +24,75 @@ function ValidatedTextField({
   locationRadios,
   input,
 }) {
-  
   const validationRules = {};
 
-  // Validation rules for Google Drive URL
-  if (input.required) {
-    validationRules.required = `${input.label || input.name} is required`
+  // Handle required validation
+  if (input.required !== false) {
+    validationRules.required = `${input.label || input.name} is required`;
+  }
+
+  // Handle custom validation function if provided
+  if (input.validate) {
+    validationRules.validate = input.validate;
   }
-  if(input.name === 'googleDriveUrl'){
+
+  // Validation rules for Google Drive URL
+  if (input.name === 'googleDriveUrl') {
     validationRules.pattern = {
       value: /^https:\/\/drive\.google\.com\/.+$/,
-      message: "Invalid Google Drive URL", // Pattern validation for Google Drive URL
+      message: 'Invalid Google Drive URL',
     };
   }
 
+  // Handle location field validation based on type
   if (input.name === 'location') {
     if (locationType === 'remote') {
       validationRules.pattern = {
         value: input.value,
-        message: input.errorMessage || "Invalid remote location URL",
+        message: input.errorMessage || 'Invalid remote location URL',
       };
     } else {
       validationRules.pattern = {
         value: input.addressValue,
-        message: input.addressError || "Invalid physical address",
+        message: input.addressError || 'Invalid physical address',
       };
     }
+  } else if (input.value && input.name !== 'googleDriveUrl') {
+    // Handle other pattern validations
+    validationRules.pattern = {
+      value: input.value,
+      message:
+        input.errorMessage || `${input.label} is not in the correct format`,
+    };
   }
-  
+
   const registerObj = {
     ...register(input.name, validationRules),
-  }
+  };
 
   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 b4ebe92840eb1b84d923652171e7c85e3fa2a89b 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 | 187 +++++++++++++-------------
 1 file changed, 96 insertions(+), 91 deletions(-)

diff --git a/client/src/components/ProjectForm.jsx b/client/src/components/ProjectForm.jsx
index c6f0a26b5..6b92721c7 100644
--- a/client/src/components/ProjectForm.jsx
+++ b/client/src/components/ProjectForm.jsx
@@ -11,6 +11,7 @@ import {
   FormControl,
   FormControlLabel,
   RadioGroup,
+  Paper,
 } from '@mui/material';
 import { styled } from '@mui/material/styles';
 
@@ -21,7 +22,6 @@ import PlusIcon from '../svg/PlusIcon.svg?react';
 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
@@ -236,100 +236,105 @@ export default function ProjectForm({
       <Box sx={{ textAlign: 'center' }}>
         <Typography variant="h1">{projectName}</Typography>
       </Box>
-      {auth.user.accessLevel === 'admin' ||
-      auth.user.accessLevel == 'superadmin' ? (
-        <TitledBox
-          title={editMode ? 'Editing Project' : 'Project Information'}
-          badge={isEdit ? editIcon() : addIcon()}
-          expandable={true}
-        >
-          <form
-            id="project-form"
-            onSubmit={handleSubmit((data) => {
-              isEdit ? submitEditProject(data) : submitNewProject(data);
-            })}
+      <Paper
+        elevation={3}
+        sx={{ padding: 3, borderRadius: 1, backgroundColor: '#f5f5f5' }}
+      >
+        {auth.user.accessLevel === 'admin' ||
+        auth.user.accessLevel === 'superadmin' ? (
+          <TitledBox
+            title={editMode ? 'Editing Project' : 'Project Information'}
+            badge={isEdit ? editIcon() : addIcon()}
+            expandable={true}
           >
-            {arr.map((input) => (
-              <ValidatedTextField
-                key={input.name}
-                register={register}
-                isEdit={isEdit}
-                editMode={editMode}
-                locationType={locationType}
-                locationRadios={locationRadios}
-                errors={errors}
-                input={input}
+            <form
+              id="project-form"
+              onSubmit={handleSubmit((data) => {
+                isEdit ? submitEditProject(data) : submitNewProject(data);
+              })}
+            >
+              {arr.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}
               />
-            ))}
-            <ChangesModal
-              open={isModalOpen}
-              onClose={handleClose}
-              destination={'/projects'}
-              aria-labelledby="modal-modal-title"
-              aria-describedby="modal-modal-description"
-              handleClose={handleClose}
-            />
-          </form>
-          <Grid container justifyContent="space-evenly" sx={{ my: 3 }}>
-            <Grid item xs="auto">
-              <StyledButton
-                type="submit"
-                form="project-form"
-                variant={
-                  !isEdit ? 'secondary' : !editMode ? 'contained' : 'secondary'
-                }
-                cursor="pointer"
-                disabled={isEdit && isLoading ? !editMode : false}
-              >
-                {isLoading ? <CircularProgress /> : 'Save'}
-              </StyledButton>
+            </form>
+            <Grid container justifyContent="space-evenly" sx={{ my: 3 }}>
+              <Grid item xs="auto">
+                <StyledButton
+                  type="submit"
+                  form="project-form"
+                  variant={
+                    !isEdit ? 'secondary' : !editMode ? 'contained' : 'secondary'
+                  }
+                  cursor="pointer"
+                  disabled={isEdit && isLoading ? !editMode : false}
+                >
+                  {isLoading ? <CircularProgress /> : 'Save'}
+                </StyledButton>
+              </Grid>
+              <Grid item xs="auto">
+                <StyledButton
+                  variant="contained"
+                  cursor="pointer"
+                  onClick={
+                    !editMode || Object.keys(dirtyFields).length === 0
+                      ? checkFields
+                      : handleOpen
+                  }
+                >
+                  Close
+                </StyledButton>
+              </Grid>
             </Grid>
-            <Grid item xs="auto">
-              <StyledButton
-                variant="contained"
-                cursor="pointer"
-                onClick={
-                  !editMode || Object.keys(dirtyFields).length === 0
-                    ? checkFields
-                    : handleOpen
-                }
-              >
-                Close
-              </StyledButton>
-            </Grid>
-          </Grid>
-        </TitledBox>
-      ) : (
-        <TitledBox title={'Project Information'} expandable={true}>
-          <form
-            id="project-form"
-            onSubmit={handleSubmit((data) => {
-              isEdit ? submitEditProject(data) : submitNewProject(data);
-            })}
-          >
-            {arr.map((input) => (
-              <ValidatedTextField
-                key={input.name}
-                register={register}
-                isEdit={isEdit}
-                editMode={editMode}
-                locationType={locationType}
-                locationRadios={locationRadios}
-                errors={errors}
-                input={input}
+          </TitledBox>
+        ) : (
+          <TitledBox title={'Project Information'} expandable={true}>
+            <form
+              id="project-form"
+              onSubmit={handleSubmit((data) => {
+                isEdit ? submitEditProject(data) : submitNewProject(data);
+              })}
+            >
+              {arr.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}
               />
-            ))}
-            <ChangesModal
-              open={isModalOpen}
-              onClose={handleClose}
-              destination={'/projects'}
-              aria-labelledby="modal-modal-title"
-              aria-describedby="modal-modal-description"
-              handleClose={handleClose}
-            />
-          </form>
-        </TitledBox>
-      )}
+            </form>
+          </TitledBox>
+        )}
+      </Paper>
     </Box>
   );
 }