Added backend and integration for FilterPage and CourseTable done

client/src/Pages/CourseForm.jsx

@@ -1,27 +1,182 @@
-import React from "react";
-import { useParams } from "react-router-dom";
+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>
+      <form onSubmit={handleSubmit}>
         <label>
           Course ID:
-          <input type="text" value={id} readOnly />
+          <input type="text" value={course?.id || id} readOnly />
         </label>
         <label>
           Course Name:
-          <input type="text" placeholder="Enter course name" />
+          <input type="text" value={course?.name || ""} readOnly />
         </label>
-        <label>
-          Status:
-          <input type="text" placeholder="Enter course status" />
+        <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>
-        <button type="submit">Submit</button>
+        <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>
   );