CourseForm backend done

2024-12-09 07:26:57 +05:30
parent e22727eefd
commit ce73a591c5
9 changed files with 408 additions and 76 deletions
--- a/client/src/Pages/CourseForm.jsx
+++ b/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>}
--- a/client/src/Pages/CourseTable.jsx
+++ b/client/src/Pages/CourseTable.jsx
@@ -1,69 +1,105 @@
-// import React from "react";
-// import { useNavigate } from "react-router-dom";
+// import React, { useState, useEffect } from 'react';
+// import { useLocation, useNavigate } from "react-router-dom";
 // import "./CourseTable.css";
+// import { fetchCourses } from '../api';

-// const CourseTable = ({courses}) => {
-//   const navigate = useNavigate();
+// const CourseTable = () => {
+//   const { state } = useLocation();
+//   const courses = state?.courses;
+//   const navigate= useNavigate();
+//   console.log(courses);
+
+//   useEffect(() => {
+//     if (!courses || courses.length === 0) {
+//       alert("No courses available");
+//     }
+//   }, [courses]);
+
+//   if (!courses) {
+//     return <div>Loading...</div>;
+//   }

 //   const handleRowClick = (course) => {
-//     navigate(`/course-form/${course.id}`, { state: { course } });
+//     navigate(`/course-form/${course.courseId}`, { state: { course } });
 //   };

 //   return (
-//     <div className="course-table">
-//       <h1>Courses</h1>
-//       <table border="1">
-//         <thead>
-//           <tr>
-//             <th>Course ID</th>
-//             <th>Course Name</th>
-//             <th>Status</th>
+//     <table className="course-table">
+//       <thead>
+//         <tr>
+//           <th>CourseID</th>
+//           <th>Course Name</th>
+//           <th>Status</th>
+//         </tr>
+//       </thead>
+//       <tbody>
+//         {courses.map(course => (
+//           <tr key={course.courseId} onClick={() => handleRowClick(course)}>
+//             <td>{course.courseId}</td>
+//             <td>{course.name}</td>
+//             <td>{course.status}</td>
 //           </tr>
-//         </thead>
-//         <tbody>
-//           {courses.map((course) => (
-//             <tr
-//               key={course.id}
-//               onClick={() => handleRowClick(course)}
-//               style={{ cursor: "pointer" }}
-//             >
-//               <td>{course.id}</td>
-//               <td>{course.name}</td>
-//               <td>
-//                 <span className={`status ${course.status.replace(" ", "-")}`}>
-//                   {course.status}
-//                 </span>
-//               </td>
-//             </tr>
-//           ))}
-//         </tbody>
-//       </table>
-//     </div>
+//         ))}
+//       </tbody>
+//     </table>
 //   );
-// };
+// }

 // export default CourseTable;

-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import "./CourseTable.css";
-import { fetchCourses } from '../api';
+import { fetchCourses } from "../api";

 const CourseTable = () => {
  const { state } = useLocation();
-  const courses = state?.courses;
-  console.log(courses);
+  const [courses, setCourses] = useState(state?.courses || []);
+  const [loading, setLoading] = useState(!state?.courses);
+  const navigate = useNavigate();

  useEffect(() => {
-    if (!courses || courses.length === 0) {
-      alert("No courses available");
-    }
-  }, [courses]);
+    const fetchAllCourses = async () => {
+      if (!state?.courses) {
+        try {
+          const fetchedCourses = await fetchCourses(); // Fetch courses from API
+          setCourses(fetchedCourses);
+        } catch (error) {
+          console.error("Failed to fetch courses:", error);
+        } finally {
+          setLoading(false);
+        }
+      }
+    };

-  if (!courses) {
+    fetchAllCourses();
+  }, [state?.courses]);
+
+  useEffect(() => {
+    if (state?.updatedCourse) {
+      setCourses((prevCourses) => {
+        // Filter only the updated course
+        const filteredCourses = prevCourses.filter((course) =>
+          course.courseId === state.updatedCourse.courseId
+        );
+
+        return filteredCourses.map((course) =>
+          course.courseId === state.updatedCourse.courseId
+            ? { ...course, status: "Submitted" } // Update status
+            : course
+        );
+      });
+    }
+  }, [state?.updatedCourse]);
+
+  if (loading) {
    return <div>Loading...</div>;
  }

+  const handleRowClick = (course) => {
+    navigate(`/course-form/${course.courseId}`, { state: { course } });
+  };
+
  return (
    <table className="course-table">
      <thead>
@@ -74,16 +110,22 @@ const CourseTable = () => {
        </tr>
      </thead>
      <tbody>
-        {courses.map(course => (
-          <tr key={course.id}>
-            <td>{course.courseId}</td>
-            <td>{course.name}</td>
-            <td>{course.status}</td>
+        {courses.length > 0 ? (
+          courses.map((course) => (
+            <tr key={course.courseId} onClick={() => handleRowClick(course)}>
+              <td>{course.courseId}</td>
+              <td>{course.name}</td>
+              <td>{course.status}</td>
+            </tr>
+          ))
+        ) : (
+          <tr>
+            <td colSpan="3">No courses available</td>
          </tr>
-        ))}
+        )}
      </tbody>
    </table>
  );
-}
+};

 export default CourseTable;
--- a/client/src/Pages/Welcom.jsx
+++ b/client/src/Pages/Welcom.jsx
@@ -12,8 +12,8 @@ const Welcom = () => {
  return (
    <div className="welcom-container">
      <div className="welcom-message">
-        <h1>Welcome, John Doe</h1>
-        <p>You're signed in as DEC/EIC</p>
+        <h1>Welcome</h1>
+        <p>You're signed in</p>
      </div>
      <button className="next-button" onClick={goToFilterPage}>
        Proceed
--- a/client/src/Pages/WelcomeWithFilter.jsx
+++ b/client/src/Pages/WelcomeWithFilter.jsx
@@ -86,8 +86,8 @@ const WelcomeWithFilter = () => {
          // Default welcome content
          <div className="welcome-content">
            <div className="welcome-message">
-              <h1>Welcome, John Doe</h1>
-              <p>You’re signed in as DEC/EIC</p>
+              <h1>Welcome</h1>
+              <p>You’re signed in</p>
            </div>
            <div className="image-container">
              <img