CourseForm backend done

client/src/Pages/CourseForm.jsx

@@ -1,11 +1,200 @@
+// import React, { useState, useEffect } from "react";
+// import { useLocation, useParams, useNavigate } from "react-router-dom";
+// import "./CourseForm.css";
+
+// const CourseForm = () => {
+//   const { id } = useParams(); // Get the course ID from the URL params
+//   const location = useLocation();
+//   const navigate = useNavigate(); // Updated for navigation
+//   const { course } = location.state || {};
+
+//   const [options, setOptions] = useState({
+//     assessment: [],
+//     reassessment: [],
+//     paperSetting: [],
+//     moderation: [],
+//     pwdPaperSetter: [],
+//     oralsPracticals: [], // New field for Orals/Practicals
+//   });
+
+//   const [formData, setFormData] = useState({
+//     assessment: "",
+//     reassessment: "",
+//     paperSetting: "",
+//     moderation: "",
+//     pwdPaperSetter: "",
+//     oralsPracticals: "", // New field for Orals/Practicals
+//   });
+
+//   const [errors, setErrors] = useState({}); // To track validation errors
+
+//   // Fetch data for search bars
+//   useEffect(() => {
+//     const fetchOptions = async () => {
+//       try {
+//         const response = await fetch("/api/options"); // Replace with your API endpoint
+//         const data = await response.json();
+//         setOptions(data);
+//       } catch (error) {
+//         console.error("Failed to fetch options:", error);
+//       }
+//     };
+
+//     fetchOptions();
+//   }, []);
+
+//   const handleInputChange = (e) => {
+//     const { name, value } = e.target;
+//     setFormData({ ...formData, [name]: value });
+//   };
+
+//   const validateForm = () => {
+//     const newErrors = {};
+//     Object.keys(formData).forEach((field) => {
+//       if (!formData[field]) {
+//         newErrors[field] = "This field is required";
+//       }
+//     });
+//     setErrors(newErrors);
+//     return Object.keys(newErrors).length === 0;
+//   };
+
+//   const handleSubmit = (e) => {
+//     e.preventDefault();
+//     if (validateForm()) {
+//       console.log("Form submitted:", formData);
+      
+//       navigate("/courses", { state: { updatedCourse: { ...course, status: "Submitted" } } });
+//     }
+//   };
+
+//   return (
+//     <div className="form-container">
+//       <h2>Course Info</h2>
+//       <form onSubmit={handleSubmit}>
+//         <label>
+//           Course ID:
+//           <input type="text" value={course?.id || id} readOnly />
+//         </label>
+//         <label>
+//           Course Name:
+//           <input type="text" value={course?.name || ""} readOnly />
+//         </label>
+//         <label className={errors.oralsPracticals ? "error" : ""}>
+//           Orals/Practicals:
+//           <input
+//             type="text"
+//             name="oralsPracticals"
+//             list="oralsPracticals-options"
+//             value={formData.oralsPracticals}
+//             onChange={handleInputChange}
+//           />
+//           <datalist id="oralsPracticals-options">
+//             {options.oralsPracticals.map((option, index) => (
+//               <option key={index} value={option} />
+//             ))}
+//           </datalist>
+//           {errors.oralsPracticals && <span className="error-message">{errors.oralsPracticals}</span>}
+//         </label>
+//         <label className={errors.assessment ? "error" : ""}>
+//           Assessment:
+//           <input
+//             type="text"
+//             name="assessment"
+//             list="assessment-options"
+//             value={formData.assessment}
+//             onChange={handleInputChange}
+//           />
+//           <datalist id="assessment-options">
+//             {options.assessment.map((option, index) => (
+//               <option key={index} value={option} />
+//             ))}
+//           </datalist>
+//           {errors.assessment && <span className="error-message">{errors.assessment}</span>}
+//         </label>
+//         <label className={errors.reassessment ? "error" : ""}>
+//           Reassessment:
+//           <input
+//             type="text"
+//             name="reassessment"
+//             list="reassessment-options"
+//             value={formData.reassessment}
+//             onChange={handleInputChange}
+//           />
+//           <datalist id="reassessment-options">
+//             {options.reassessment.map((option, index) => (
+//               <option key={index} value={option} />
+//             ))}
+//           </datalist>
+//           {errors.reassessment && <span className="error-message">{errors.reassessment}</span>}
+//         </label>
+//         <label className={errors.paperSetting ? "error" : ""}>
+//           Paper Setting:
+//           <input
+//             type="text"
+//             name="paperSetting"
+//             list="paperSetting-options"
+//             value={formData.paperSetting}
+//             onChange={handleInputChange}
+//           />
+//           <datalist id="paperSetting-options">
+//             {options.paperSetting.map((option, index) => (
+//               <option key={index} value={option} />
+//             ))}
+//           </datalist>
+//           {errors.paperSetting && <span className="error-message">{errors.paperSetting}</span>}
+//         </label>
+//         <label className={errors.moderation ? "error" : ""}>
+//           Moderation:
+//           <input
+//             type="text"
+//             name="moderation"
+//             list="moderation-options"
+//             value={formData.moderation}
+//             onChange={handleInputChange}
+//           />
+//           <datalist id="moderation-options">
+//             {options.moderation.map((option, index) => (
+//               <option key={index} value={option} />
+//             ))}
+//           </datalist>
+//           {errors.moderation && <span className="error-message">{errors.moderation}</span>}
+//         </label>
+//         <label className={errors.pwdPaperSetter ? "error" : ""}>
+//           PwD Paper Setter:
+//           <input
+//             type="text"
+//             name="pwdPaperSetter"
+//             list="pwdPaperSetter-options"
+//             value={formData.pwdPaperSetter}
+//             onChange={handleInputChange}
+//           />
+//           <datalist id="pwdPaperSetter-options">
+//             {options.pwdPaperSetter.map((option, index) => (
+//               <option key={index} value={option} />
+//             ))}
+//           </datalist>
+//           {errors.pwdPaperSetter && <span className="error-message">{errors.pwdPaperSetter}</span>}
+//         </label>
+//         <button type="submit" disabled={Object.keys(errors).length > 0}>Submit</button>
+//       </form>
+//     </div>
+//   );
+// };
+
+// export default CourseForm;
+
+// CourseForm.jsx
+
 import React, { useState, useEffect } from "react";
 import { useLocation, useParams, useNavigate } from "react-router-dom";
+import { fetchFaculties } from "../api";
 import "./CourseForm.css";
 
 const CourseForm = () => {
-  const { id } = useParams(); // Get the course ID from the URL params
+  const { id } = useParams();
   const location = useLocation();
-  const navigate = useNavigate(); // Updated for navigation
+  const navigate = useNavigate();
   const { course } = location.state || {};
 
   const [options, setOptions] = useState({
@@ -14,7 +203,8 @@ const CourseForm = () => {
     paperSetting: [],
     moderation: [],
     pwdPaperSetter: [],
-    oralsPracticals: [], // New field for Orals/Practicals
+    oralsPracticals: [],
+    faculties: [], // New field for faculties
   });
 
   const [formData, setFormData] = useState({
@@ -26,21 +216,23 @@ const CourseForm = () => {
     oralsPracticals: "", // New field for Orals/Practicals
   });
 
-  const [errors, setErrors] = useState({}); // To track validation errors
+  const [errors, setErrors] = useState({});
 
-  // Fetch data for search bars
   useEffect(() => {
-    const fetchOptions = async () => {
+    const fetchOptionsAndFaculties = async () => {
       try {
-        const response = await fetch("/api/options"); // Replace with your API endpoint
-        const data = await response.json();
-        setOptions(data);
+        const facultiesData = await fetchFaculties(); // Fetch faculty names from the backend
+        console.log(facultiesData);
+        setOptions(prevOptions => ({
+          ...prevOptions,
+          faculties: facultiesData,
+        }));
       } catch (error) {
-        console.error("Failed to fetch options:", error);
+        console.error("Failed to fetch faculties:", error);
       }
     };
 
-    fetchOptions();
+    fetchOptionsAndFaculties();
   }, []);
 
   const handleInputChange = (e) => {
@@ -59,14 +251,29 @@ const CourseForm = () => {
     return Object.keys(newErrors).length === 0;
   };
 
+  // const handleSubmit = (e) => {
+  //   e.preventDefault();
+  //   if (validateForm()) {
+  //     console.log("Form submitted:", formData);
+  //     navigate("/courses", { state: { updatedCourse: { ...course, status: "Submitted" } } });
+  //   }
+  // };
   const handleSubmit = (e) => {
     e.preventDefault();
     if (validateForm()) {
       console.log("Form submitted:", formData);
-      
-      navigate("/courses", { state: { updatedCourse: { ...course, status: "Submitted" } } });
+      navigate("/courses", {
+        state: {
+          updatedCourse: {
+            ...course,
+            status: "Submitted", // Update status
+            ...formData, // Include form data if required
+          },
+        },
+      });
     }
   };
+  
 
   return (
     <div className="form-container">
@@ -91,7 +298,7 @@ const CourseForm = () => {
           />
           <datalist id="oralsPracticals-options">
             {options.oralsPracticals.map((option, index) => (
-              <option key={index} value={option} />
+              <option key={index} value={option.name} />
             ))}
           </datalist>
           {errors.oralsPracticals && <span className="error-message">{errors.oralsPracticals}</span>}
@@ -107,7 +314,7 @@ const CourseForm = () => {
           />
           <datalist id="assessment-options">
             {options.assessment.map((option, index) => (
-              <option key={index} value={option} />
+              <option key={index} value={option.name} />
             ))}
           </datalist>
           {errors.assessment && <span className="error-message">{errors.assessment}</span>}
@@ -123,7 +330,7 @@ const CourseForm = () => {
           />
           <datalist id="reassessment-options">
             {options.reassessment.map((option, index) => (
-              <option key={index} value={option} />
+              <option key={index} value={option.name} />
             ))}
           </datalist>
           {errors.reassessment && <span className="error-message">{errors.reassessment}</span>}
@@ -139,7 +346,7 @@ const CourseForm = () => {
           />
           <datalist id="paperSetting-options">
             {options.paperSetting.map((option, index) => (
-              <option key={index} value={option} />
+              <option key={index} value={option.name} />
             ))}
           </datalist>
           {errors.paperSetting && <span className="error-message">{errors.paperSetting}</span>}
@@ -155,7 +362,7 @@ const CourseForm = () => {
           />
           <datalist id="moderation-options">
             {options.moderation.map((option, index) => (
-              <option key={index} value={option} />
+              <option key={index} value={option.name} />
             ))}
           </datalist>
           {errors.moderation && <span className="error-message">{errors.moderation}</span>}
@@ -171,7 +378,7 @@ const CourseForm = () => {
           />
           <datalist id="pwdPaperSetter-options">
             {options.pwdPaperSetter.map((option, index) => (
-              <option key={index} value={option} />
+              <option key={index} value={option.name} />
             ))}
           </datalist>
           {errors.pwdPaperSetter && <span className="error-message">{errors.pwdPaperSetter}</span>}