multiple input

client/src/Pages/CourseForm.css

@@ -115,3 +115,16 @@ button[type="submit"] {
     width: 100%;
   }
 }
+.remove-faculty-btn {
+  padding: 0px 0px;
+  background: none;
+  border: none;
+  color: red;
+  cursor: pointer;
+  font-size: 16px;
+  margin-left: 10px;
+}
+
+.remove-faculty-btn:hover {
+  color: darkred;
+}

client/src/Pages/CourseForm.jsx

@@ -23,6 +23,15 @@ const CourseForm = () => {
     pwdPaperSetter: "",
   });
 
+  const [tempAssignments, setTempAssignments] = useState({
+    oralsPracticals: [],
+    assessment: [],
+    reassessment: [],
+    paperSetting: [],
+    moderation: [],
+    pwdPaperSetter: [],
+  });
+
   const [errors, setErrors] = useState({});
 
   // Fetch faculty list on mount
@@ -45,6 +54,15 @@ const CourseForm = () => {
 
     setFormData({ ...formData, [name]: value });
 
+    if (value.trim() === "") {
+      // Clear suggestions if input is empty
+      setSuggestions((prev) => ({
+        ...prev,
+        [name]: [],
+      }));
+      return;
+    }
+
     // Filter suggestions for the current field
     if (options.faculties.length > 0) {
       const filteredSuggestions = options.faculties.filter((faculty) =>
@@ -57,49 +75,91 @@ const CourseForm = () => {
     }
   };
 
-  // Validate the form
+  const handleAddFaculty = (field) => {
+    const selectedFaculty = options.faculties.find(
+      (faculty) => faculty.name === formData[field]
+    );
+
+    if (selectedFaculty) {
+      setTempAssignments((prev) => ({
+        ...prev,
+        [field]: [...prev[field], selectedFaculty],
+      }));
+      setFormData({ ...formData, [field]: "" }); // Clear input field
+      setSuggestions((prev) => ({ ...prev, [field]: [] })); // Clear suggestions
+    }
+  };
+
+  const handleRemoveFaculty = (field, index) => {
+    setTempAssignments((prev) => {
+      const updatedAssignments = [...prev[field]]; // Create a shallow copy of the current list for this field
+      updatedAssignments.splice(index, 1); // Remove the faculty at the specified index
+      return { ...prev, [field]: updatedAssignments }; // Update the tempAssignments state
+    });
+  };
+
   const validateForm = () => {
     const newErrors = {};
-    Object.keys(formData).forEach((field) => {
+
-      if (!formData[field]) {
+    // Validate that each field in tempAssignments has at least one assigned faculty
-        newErrors[field] = "This field is required";
+    Object.keys(tempAssignments).forEach((field) => {
+      if (!tempAssignments[field] || tempAssignments[field].length === 0) {
+        newErrors[field] = "At least one faculty must be assigned.";
       }
     });
+
     setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
+    return Object.keys(newErrors).length === 0; // Form is valid if no errors
   };
 
   // Handle form submission
   const handleSubmit = async (e) => {
     e.preventDefault(); // Prevent default form submission behavior
+
+    // Validate the form based on tempAssignments
     if (validateForm()) {
       try {
         const groupedTasks = {};
 
-        // Group tasks by facultyId
+        // Transform tempAssignments into grouped tasks by facultyId
-        Object.entries(formData).forEach(([field, value]) => {
+        Object.entries(tempAssignments).forEach(([field, facultyList]) => {
-          const assignedFaculty = options.faculties.find(
+          facultyList.forEach((faculty) => {
-            (faculty) => faculty.name === value
+            // Assuming faculty is an object, not just the faculty name
-          );
+            const assignedFaculty = options.faculties.find(
-          if (assignedFaculty) {
+              (optionFaculty) => optionFaculty.facultyId === faculty.facultyId
-            if (!groupedTasks[assignedFaculty.facultyId]) {
+            );
-              groupedTasks[assignedFaculty.facultyId] = {
+
-                facultyId: assignedFaculty.facultyId,
+            if (assignedFaculty) {
-                courseId: course?.courseId || id,
+              // Check if the facultyId already exists in groupedTasks
-                tasks: [],
+              if (!groupedTasks[assignedFaculty.facultyId]) {
-              };
+                groupedTasks[assignedFaculty.facultyId] = {
+                  facultyId: assignedFaculty.facultyId,
+                  courseId: course?.courseId || id,
+                  tasks: [],
+                };
+              }
+              // Push the task (field) into the tasks array for that faculty
+              groupedTasks[assignedFaculty.facultyId].tasks.push(field);
             }
-            groupedTasks[assignedFaculty.facultyId].tasks.push(field);
+          });
-          }
         });
 
-        const payload = Object.values(groupedTasks); // Convert the grouped tasks into an array
+        console.log(groupedTasks);
+        const payload = Object.values(groupedTasks); // Convert grouped tasks into an array
         console.log("Saving appointment with payload:", payload);
-        await saveAppointment(payload); // Save to backend
+
+        if (payload.length === 0) {
+          throw new Error("No assignments to submit.");
+        }
+
+        // Call API to save appointments
+        await saveAppointment(payload);
         await updateCourseStatus(course?.courseId || id);
+
         console.log("Form submitted successfully:", payload);
 
-        const filteredCourses = JSON.parse(localStorage.getItem("filteredCourses")) || [];
+        const filteredCourses =
+          JSON.parse(localStorage.getItem("filteredCourses")) || [];
 
         // Redirect to courses page after successful submission
         navigate("/courses", {
@@ -111,8 +171,6 @@ const CourseForm = () => {
             },
           },
         });
-
-        
       } catch (error) {
         console.error("Failed to save appointment:", error);
       }
@@ -149,7 +207,21 @@ const CourseForm = () => {
                 onChange={handleInputChange}
                 placeholder={`Search faculty for ${label}`}
               />
-              <ul className="suggestions">
+              <button
+                type="button"
+                onClick={() => handleAddFaculty(name)}
+                disabled={!formData[name].trim()}
+              >
+                Add
+              </button>
+              <ul
+                className="suggestions"
+                id={`suggestions-${name}`}
+                style={{
+                  display:
+                    (suggestions[name] || []).length > 0 ? "block" : "none",
+                }}
+              >
                 {(suggestions[name] || []).map((faculty) => (
                   <li
                     key={faculty.facultyId}
@@ -163,7 +235,25 @@ const CourseForm = () => {
                 ))}
               </ul>
             </label>
-            {errors[name] && <span className="error-message">{errors[name]}</span>}
+            {tempAssignments[name].length > 0 && (
+              <ul className="temp-list">
+                {tempAssignments[name].map((faculty, index) => (
+                  <li key={index}>
+                    {faculty.name}
+                    <button
+                      type="button"
+                      onClick={() => handleRemoveFaculty(name, index)}
+                      className="remove-faculty-btn"
+                    >
+                      &#10005; {/* This is the "X" symbol */}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            )}
+            {errors[name] && (
+              <span className="error-message">{errors[name]}</span>
+            )}
           </div>
         ))}
         <button type="submit">Submit</button>