Commit

client/src/Pages/CourseForm.jsx

@@ -1,194 +1,6 @@
-// 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 { fetchFaculties, saveAppointment } from "../api";
 import "./CourseForm.css";
 
 const CourseForm = () => {
@@ -198,35 +10,27 @@ const CourseForm = () => {
   const { course } = location.state || {};
 
   const [options, setOptions] = useState({
-    assessment: [],
-    reassessment: [],
-    paperSetting: [],
-    moderation: [],
-    pwdPaperSetter: [],
-    oralsPracticals: [],
-    faculties: [], // New field for faculties
+    faculties: [], // List of all faculties
   });
 
+  const [suggestions, setSuggestions] = useState({}); // To hold suggestions for each field
   const [formData, setFormData] = useState({
+    oralsPracticals: "",
     assessment: "",
     reassessment: "",
     paperSetting: "",
     moderation: "",
     pwdPaperSetter: "",
-    oralsPracticals: "", // New field for Orals/Practicals
   });
 
   const [errors, setErrors] = useState({});
 
+  // Fetch faculty list on mount
   useEffect(() => {
     const fetchOptionsAndFaculties = async () => {
       try {
-        const facultiesData = await fetchFaculties(); // Fetch faculty names from the backend
-        console.log(facultiesData);
-        setOptions(prevOptions => ({
-          ...prevOptions,
-          faculties: facultiesData,
-        }));
+        const facultiesData = await fetchFaculties(); // Fetch faculty names from backend
+        setOptions((prev) => ({ ...prev, faculties: facultiesData }));
       } catch (error) {
         console.error("Failed to fetch faculties:", error);
       }
@@ -235,11 +39,25 @@ const CourseForm = () => {
     fetchOptionsAndFaculties();
   }, []);
 
+  // Handle input changes for form fields
   const handleInputChange = (e) => {
     const { name, value } = e.target;
+
     setFormData({ ...formData, [name]: value });
+
+    // Filter suggestions for the current field
+    if (options.faculties.length > 0) {
+      const filteredSuggestions = options.faculties.filter((faculty) =>
+        faculty.name.toLowerCase().includes(value.toLowerCase())
+      );
+      setSuggestions((prev) => ({
+        ...prev,
+        [name]: filteredSuggestions,
+      }));
+    }
   };
 
+  // Validate the form
   const validateForm = () => {
     const newErrors = {};
     Object.keys(formData).forEach((field) => {
@@ -251,29 +69,49 @@ 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();
+  // Handle form submission
+  const handleSubmit = async (e) => {
+    e.preventDefault(); // Prevent default form submission behavior
     if (validateForm()) {
-      console.log("Form submitted:", formData);
-      navigate("/courses", {
-        state: {
-          updatedCourse: {
-            ...course,
-            status: "Submitted", // Update status
-            ...formData, // Include form data if required
+      try {
+        const groupedTasks = {};
+
+        // Group tasks by facultyId
+        Object.entries(formData).forEach(([field, value]) => {
+          const assignedFaculty = options.faculties.find(
+            (faculty) => faculty.name === value
+          );
+          if (assignedFaculty) {
+            if (!groupedTasks[assignedFaculty.facultyId]) {
+              groupedTasks[assignedFaculty.facultyId] = {
+                facultyId: assignedFaculty.facultyId,
+                courseId: course?.id || id,
+                tasks: [],
+              };
+            }
+            groupedTasks[assignedFaculty.facultyId].tasks.push(field);
+          }
+        });
+
+        const payload = Object.values(groupedTasks); // Convert the grouped tasks into an array
+        console.log("Saving appointment with payload:", payload);
+        await saveAppointment(payload); // Save to backend
+        console.log("Form submitted successfully:", payload);
+
+        // Redirect to courses page after successful submission
+        navigate("/courses", {
+          state: {
+            updatedCourse: {
+              ...course,
+              status: "Submitted",
+            },
           },
-        },
-      });
+        });
+      } catch (error) {
+        console.error("Failed to save appointment:", error);
+      }
     }
   };
-  
 
   return (
     <div className="form-container">
@@ -287,103 +125,42 @@ const CourseForm = () => {
           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.name} />
-            ))}
-          </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.name} />
-            ))}
-          </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.name} />
-            ))}
-          </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.name} />
-            ))}
-          </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.name} />
-            ))}
-          </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.name} />
-            ))}
-          </datalist>
-          {errors.pwdPaperSetter && <span className="error-message">{errors.pwdPaperSetter}</span>}
-        </label>
-        <button type="submit" disabled={Object.keys(errors).length > 0}>Submit</button>
+        {[
+          { name: "oralsPracticals", label: "Orals/Practicals" },
+          { name: "assessment", label: "Assessment" },
+          { name: "reassessment", label: "Reassessment" },
+          { name: "paperSetting", label: "Paper Setting" },
+          { name: "moderation", label: "Moderation" },
+          { name: "pwdPaperSetter", label: "PwD Paper Setter" },
+        ].map(({ name, label }) => (
+          <div key={name} className={errors[name] ? "error" : ""}>
+            <label>
+              {label}:
+              <input
+                type="text"
+                name={name}
+                value={formData[name]}
+                onChange={handleInputChange}
+                placeholder={`Search faculty for ${label}`}
+              />
+              <ul className="suggestions">
+                {(suggestions[name] || []).map((faculty) => (
+                  <li
+                    key={faculty.facultyId}
+                    onClick={() => {
+                      setFormData({ ...formData, [name]: faculty.name });
+                      setSuggestions((prev) => ({ ...prev, [name]: [] })); // Clear suggestions for this field
+                    }}
+                  >
+                    {faculty.name}
+                  </li>
+                ))}
+              </ul>
+            </label>
+            {errors[name] && <span className="error-message">{errors[name]}</span>}
+          </div>
+        ))}
+        <button type="submit">Submit</button>
       </form>
     </div>
   );