From d10c696dfee0d51652dd30fad4a67373e1911fec Mon Sep 17 00:00:00 2001 From: sanjay347 Date: Sun, 27 Apr 2025 19:30:13 -0500 Subject: [PATCH 1/5] worked on ui enhancements --- client/src/pages/A1InternshipRequestForm.js | 38 +++++++------- client/src/styles/A1InternshipRequestForm.css | 52 +++++++++++++++++++ package.json | 9 ++++ server/routes/formRoutes.js | 10 ++-- 4 files changed, 85 insertions(+), 24 deletions(-) create mode 100644 package.json diff --git a/client/src/pages/A1InternshipRequestForm.js b/client/src/pages/A1InternshipRequestForm.js index 82950c9c..07176d99 100644 --- a/client/src/pages/A1InternshipRequestForm.js +++ b/client/src/pages/A1InternshipRequestForm.js @@ -91,7 +91,7 @@ const SignatureInput = ({ id, value, onChange, disabled, placeholder }) => { const A1InternshipRequestForm = ({ userRole = "student" }) => { const initialState = { interneeName: "", - soonerId: "", + // soonerId: "", interneeEmail: "", workplaceName: "", website: "", @@ -102,8 +102,8 @@ const A1InternshipRequestForm = ({ userRole = "student" }) => { advisorJobTitle: "", advisorEmail: "", interneeSignature: "", - advisorSignature: "", - coordinatorApproval: "", + // advisorSignature: "", + // coordinatorApproval: "", creditHours: "", tasks: Array(5).fill({ description: "", outcomes: [] }), // Updated for outcomes supervisorComments: "", @@ -223,15 +223,15 @@ const A1InternshipRequestForm = ({ userRole = "student" }) => { const validateForm = () => { const namePattern = /^[A-Za-z\s]+$/; - const numberPattern = /^[0-9]+$/; + // const numberPattern = /^[0-9]+$/; const phonePattern = /^[0-9]{10}$/; const emailPattern = /^[\w.-]+@([\w-]+\.)+[\w-]{2,4}$/; const newErrors = {}; if (!formData.interneeName) newErrors.interneeName = "Internee name is required"; else if (!namePattern.test(formData.interneeName)) newErrors.interneeName = "Name should contain only letters and spaces"; - if (!formData.soonerId) newErrors.soonerId = "Sooner ID is required"; - else if (!numberPattern.test(formData.soonerId)) newErrors.soonerId = "Sooner ID should be numeric"; + //if (!formData.soonerId) newErrors.soonerId = "Sooner ID is required"; + //else if (!numberPattern.test(formData.soonerId)) newErrors.soonerId = "Sooner ID should be numeric"; if (!formData.interneeEmail) newErrors.interneeEmail = "Email is required"; else if (!emailPattern.test(formData.interneeEmail)) newErrors.interneeEmail = "Invalid email format"; if (!formData.workplaceName) newErrors.workplaceName = "Workplace name is required"; @@ -247,12 +247,12 @@ const A1InternshipRequestForm = ({ userRole = "student" }) => { else if (!emailPattern.test(formData.advisorEmail)) newErrors.advisorEmail = "Invalid supervisor email format"; if (!formData.interneeSignature) newErrors.interneeSignature = "Internee signature is required"; else if (!namePattern.test(formData.interneeSignature)) newErrors.interneeSignature = "Signature should contain only letters and spaces"; - if (formData.advisorSignature && !namePattern.test(formData.advisorSignature)) { - newErrors.advisorSignature = "Signature should contain only letters and spaces"; - } - if (formData.coordinatorApproval && !namePattern.test(formData.coordinatorApproval)) { - newErrors.coordinatorApproval = "Approval should contain only letters and spaces"; - } + // if (formData.advisorSignature && !namePattern.test(formData.advisorSignature)) { + // newErrors.advisorSignature = "Signature should contain only letters and spaces"; + // } + // if (formData.coordinatorApproval && !namePattern.test(formData.coordinatorApproval)) { + // newErrors.coordinatorApproval = "Approval should contain only letters and spaces"; + // } if (!formData.creditHours) newErrors.creditHours = "Please select credit hours"; const tasksFilled = formData.tasks.filter((task) => task.description.trim() !== "").length >= 3; if (!tasksFilled) newErrors.tasks = "At least 3 tasks are required"; @@ -389,7 +389,7 @@ const A1InternshipRequestForm = ({ userRole = "student" }) => { - + {/* Sooner ID*:
{ disabled={!isFieldEditable("soonerId")} /> {errors.soonerId &&
{errors.soonerId}
} - + */} Website:
{ - - - */} + {/* + */} {/* - {/* */} - - - + {/* Dummy Uneditable Column (First) */} + + + {/* Website */} + + + {/* Job Title */} + + + - {/* Dummy Uneditable Column (First) */} + - {/* Website */} + - {/* Job Title */} + @@ -578,75 +566,7 @@ const A1InternshipRequestForm = ({ userRole = "student" }) => { {errors.interneeSignature &&
{errors.interneeSignature}
} - {/* */} - {/* */} - - {/* -
+ Internee Signature*:
{
{errors.interneeSignature &&
{errors.interneeSignature}
} 		+ {/* Internship Supervisor Signature:
{ />
{errors.advisorSignature &&
{errors.advisorSignature}
} - 		+ Internship Coordinator Approval:
{ />
{errors.coordinatorApproval &&
{errors.coordinatorApproval}
} -
diff --git a/client/src/styles/A1InternshipRequestForm.css b/client/src/styles/A1InternshipRequestForm.css index a3255251..4355861e 100644 --- a/client/src/styles/A1InternshipRequestForm.css +++ b/client/src/styles/A1InternshipRequestForm.css @@ -217,3 +217,55 @@ max-width: 1200px; border-radius: 12px; } + + .success-msg, .error-msg { + animation: fadeIn 0.5s; + } + @keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } + } + + .required-asterisk { + color: #d93025; + font-weight: bold; + font-size: 1.2em; + margin-left: 2px; + vertical-align: middle; + } + + button[type="submit"] { + box-shadow: 0 2px 8px rgba(44, 110, 203, 0.08); + font-weight: 600; + letter-spacing: 0.5px; + } + button[type="submit"]:active { + background: #1e5dad; + box-shadow: 0 1px 2px #777; + } + + input, select, textarea { + margin-bottom: 10px; + } + textarea { + min-height: 90px; + resize: vertical; + } + + .section-card { + background: #f7fafd; + border-radius: 8px; + box-shadow: 0 1px 8px rgba(44, 110, 203, 0.04); + padding: 18px 20px 14px 20px; + margin-bottom: 28px; + border-left: 5px solid #007bff22; + } + + .section-title { + color: #2451a0; + border-left: 4px solid #007bffcc; + padding-left: 10px; + margin-bottom: 16px; + font-size: 1.18rem; + background: transparent; + } diff --git a/package.json b/package.json new file mode 100644 index 00000000..edbe7286 --- /dev/null +++ b/package.json @@ -0,0 +1,9 @@ +{ + "dependencies": { + "@emotion/react": "^11.14.0", + "@emotion/styled": "^11.14.0", + "@mui/icons-material": "^7.0.2", + "@mui/material": "^7.0.2", + "@mui/x-date-pickers": "^8.1.0" + } +} diff --git a/server/routes/formRoutes.js b/server/routes/formRoutes.js index 8fe44896..75d95ddd 100644 --- a/server/routes/formRoutes.js +++ b/server/routes/formRoutes.js @@ -25,12 +25,12 @@ router.get("/internshiprequests", async (req, res) => { // Validate required fields function validateFormData(formData) { const requiredFields = [ - 'soonerId', + //'soonerId', 'workplaceName', - 'website', + //'website', 'phone', 'advisorName', - 'advisorJobTitle', + // 'advisorJobTitle', 'advisorEmail', 'creditHours', 'startDate', @@ -44,8 +44,8 @@ function validateFormData(formData) { } } - if (!/^[0-9]{9}$/.test(formData.soonerId)) - return `Sooner ID must be a 9-digit number, not ${formData.soonerId}`; + // if (!/^[0-9]{9}$/.test(formData.soonerId)) + // return `Sooner ID must be a 9-digit number, not ${formData.soonerId}`; if (!Array.isArray(formData.tasks) || formData.tasks.length === 0) { return 'Tasks must be a non-empty array'; From 91bf277b758bd2ad0a5bac7bbac7df892eb794bb Mon Sep 17 00:00:00 2001 From: sanjay347 Date: Mon, 28 Apr 2025 18:52:33 -0500 Subject: [PATCH 2/5] made some final changes to the a1form --- client/src/pages/A1InternshipRequestForm.js | 74 +++++++++++---------- 1 file changed, 40 insertions(+), 34 deletions(-) diff --git a/client/src/pages/A1InternshipRequestForm.js b/client/src/pages/A1InternshipRequestForm.js index 07176d99..97d97fc1 100644 --- a/client/src/pages/A1InternshipRequestForm.js +++ b/client/src/pages/A1InternshipRequestForm.js @@ -354,7 +354,7 @@ const A1InternshipRequestForm = ({ userRole = "student" }) => {
- Name*:
+ First Name*:
{
- Sooner ID*:
- - {errors.soonerId &&
{errors.soonerId}
} - 		- Website:
- - {errors.website &&
{errors.website}
} - 		- Job Title:
- -
+ Last Name:
+ + {errors.website &&
{errors.website}
} + 		+ Website:
+ + {errors.website &&
{errors.website}
} + 		+ Job Title:
+ +
Email*:
From 628ff57c201ffcdd9613ce5c5e500d57851f05df Mon Sep 17 00:00:00 2001 From: sanjay347 Date: Mon, 28 Apr 2025 19:30:46 -0500 Subject: [PATCH 3/5] made the changes --- .gitignore | 3 + client/src/pages/A1InternshipRequestForm.js | 96 ++------------------- server/models/InternshipRequest.js | 18 +--- server/routes/formRoutes.js | 22 +---- 4 files changed, 16 insertions(+), 123 deletions(-) diff --git a/.gitignore b/.gitignore index 7f5b38cc..f7d3cb16 100644 --- a/.gitignore +++ b/.gitignore @@ -16,6 +16,9 @@ pids *.seed *.pid.lock +package.json + + # Directory for instrumented libs generated by jscoverage/JSCover lib-cov diff --git a/client/src/pages/A1InternshipRequestForm.js b/client/src/pages/A1InternshipRequestForm.js index 97d97fc1..ee307f08 100644 --- a/client/src/pages/A1InternshipRequestForm.js +++ b/client/src/pages/A1InternshipRequestForm.js @@ -20,7 +20,6 @@ const outcomeDescriptions = [ "Apply computer science algorithms to create practical solutions", ]; -// Signature font options const signatureFonts = [ { name: "Dancing Script", class: "font-dancing-script" }, { name: "Great Vibes", class: "font-great-vibes" }, @@ -29,7 +28,7 @@ const signatureFonts = [ { name: "Caveat", class: "font-caveat" } ]; -// Signature Font Picker Component + const SignatureInput = ({ id, value, onChange, disabled, placeholder }) => { const [showFonts, setShowFonts] = useState(false); const [selectedFont, setSelectedFont] = useState(signatureFonts[0].class); @@ -102,10 +101,8 @@ const A1InternshipRequestForm = ({ userRole = "student" }) => { advisorJobTitle: "", advisorEmail: "", interneeSignature: "", - // advisorSignature: "", - // coordinatorApproval: "", creditHours: "", - tasks: Array(5).fill({ description: "", outcomes: [] }), // Updated for outcomes + tasks: Array(5).fill({ description: "", outcomes: [] }), supervisorComments: "", coordinatorComments: "", }; @@ -247,12 +244,6 @@ const A1InternshipRequestForm = ({ userRole = "student" }) => { else if (!emailPattern.test(formData.advisorEmail)) newErrors.advisorEmail = "Invalid supervisor email format"; if (!formData.interneeSignature) newErrors.interneeSignature = "Internee signature is required"; else if (!namePattern.test(formData.interneeSignature)) newErrors.interneeSignature = "Signature should contain only letters and spaces"; - // if (formData.advisorSignature && !namePattern.test(formData.advisorSignature)) { - // newErrors.advisorSignature = "Signature should contain only letters and spaces"; - // } - // if (formData.coordinatorApproval && !namePattern.test(formData.coordinatorApproval)) { - // newErrors.coordinatorApproval = "Approval should contain only letters and spaces"; - // } if (!formData.creditHours) newErrors.creditHours = "Please select credit hours"; const tasksFilled = formData.tasks.filter((task) => task.description.trim() !== "").length >= 3; if (!tasksFilled) newErrors.tasks = "At least 3 tasks are required"; @@ -389,20 +380,17 @@ const A1InternshipRequestForm = ({ userRole = "student" }) => {
Last Name:
{errors.website &&
{errors.website}
} 		Website:
{ {errors.website &&
{errors.website}
} 		Job Title:
{ value={formData.interneeEmail} onChange={handleInputChange} disabled - // disabled={!isFieldEditable("interneeEmail")} + /> {errors.interneeEmail &&
{errors.interneeEmail}
} 		- Internship Supervisor Signature:
-
- -
- {errors.advisorSignature &&
{errors.advisorSignature}
} - 		- Internship Coordinator Approval:
-
- -
- {errors.coordinatorApproval &&
{errors.coordinatorApproval}
} -
-
-