forked from CSI-KJSCE/appointment_to_examiner
frontend changes
This commit is contained in:
ayoitshasya
@@ -2,6 +2,8 @@ import React, { useState, useEffect } from "react";
|
||||
import { useLocation, useParams, useNavigate } from "react-router-dom";
|
||||
import { fetchFaculties, saveAppointment, updateCourseStatus } from "../api";
|
||||
import "./CourseForm.css";
|
||||
import "./Navbar.jsx";
|
||||
import Navbar from "./Navbar.jsx";
|
||||
|
||||
const CourseForm = () => {
|
||||
const { id } = useParams();
|
||||
@@ -146,156 +148,130 @@ const CourseForm = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="form-container">
|
||||
<h2>Course Info</h2>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<label>
|
||||
Course ID:
|
||||
<input type="text" value={course?.courseId || id} readOnly />
|
||||
</label>
|
||||
<label>
|
||||
Course Name:
|
||||
<input type="text" value={course?.name || ""} readOnly />
|
||||
</label>
|
||||
{[
|
||||
{ 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}`}
|
||||
/>
|
||||
<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}
|
||||
onClick={() => {
|
||||
setFormData({ ...formData, [name]: faculty.name });
|
||||
setSuggestions((prev) => ({ ...prev, [name]: [] }));
|
||||
}}
|
||||
>
|
||||
{faculty.name}
|
||||
</li>
|
||||
<>
|
||||
<Navbar />
|
||||
<div className="container">
|
||||
<div className="courseFormContainer">
|
||||
<div className="courseFormFormContainer">
|
||||
<h2 className="courseFormHeader">Course Info</h2>
|
||||
<form className="courseForm" onSubmit={handleSubmit}>
|
||||
<div>
|
||||
<label className="courseFormLabel">
|
||||
Course ID:
|
||||
<input type="text" className="courseFormInput courseFormReadOnly" value={course?.courseId || id} readOnly />
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label className="courseFormLabel">
|
||||
Course Name:
|
||||
<input type="text" className="courseFormInput courseFormReadOnly" value={course?.name || ""} readOnly />
|
||||
</label>
|
||||
</div>
|
||||
<div className={errors.examPeriod ? "courseFormErrorSelect" : ""}>
|
||||
<label className="courseFormLabel">Exam Period:</label>
|
||||
<select
|
||||
className="courseFormSelect"
|
||||
value={examPeriod.year}
|
||||
onChange={(e) => setExamPeriod({ ...examPeriod, year: e.target.value })}
|
||||
>
|
||||
<option value="">Year</option>
|
||||
{[2025, 2026, 2027].map(year => (
|
||||
<option key={year} value={year}>{year}</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
className="courseFormSelect"
|
||||
value={examPeriod.startMonth}
|
||||
onChange={(e) => setExamPeriod({ ...examPeriod, startMonth: e.target.value })}
|
||||
>
|
||||
<option value="">Start Month</option>
|
||||
{["January", "February", "March", "April", "May", "June",
|
||||
"July", "August", "September", "October", "November", "December"]
|
||||
.map(month => (
|
||||
<option key={month} value={month}>{month}</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
className="courseFormSelect"
|
||||
value={examPeriod.endMonth}
|
||||
onChange={(e) => setExamPeriod({ ...examPeriod, endMonth: e.target.value })}
|
||||
>
|
||||
<option value="">End Month</option>
|
||||
{["January", "February", "March", "April", "May", "June",
|
||||
"July", "August", "September", "October", "November", "December"]
|
||||
.map(month => (
|
||||
<option key={month} value={month}>{month}</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.examPeriod && <span className="courseFormErrorMessage">{errors.examPeriod}</span>}
|
||||
</div>
|
||||
{[{ 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] ? "courseFormErrorInput" : ""}>
|
||||
<label className="courseFormLabel">
|
||||
{label}:
|
||||
<input
|
||||
type="text"
|
||||
className="courseFormInput"
|
||||
name={name}
|
||||
value={formData[name]}
|
||||
onChange={handleInputChange}
|
||||
placeholder={`Search faculty for ${label}`}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="courseFormButton"
|
||||
onClick={() => handleAddFaculty(name)}
|
||||
disabled={!formData[name].trim()}
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
<ul className="courseFormSuggestions" id={`suggestions-${name}`}
|
||||
style={{ display: (suggestions[name] || []).length > 0 ? "block" : "none" }}>
|
||||
{(suggestions[name] || []).map((faculty) => (
|
||||
<li className="courseFormSuggestionsItem" key={faculty.facultyId} onClick={() => {
|
||||
setFormData({ ...formData, [name]: faculty.name });
|
||||
setSuggestions((prev) => ({ ...prev, [name]: [] }));
|
||||
}}>
|
||||
{faculty.name}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</label>
|
||||
{tempAssignments[name].length > 0 && (
|
||||
<ul className="courseFormTempList">
|
||||
{tempAssignments[name].map((faculty, index) => (
|
||||
<li className="courseFormTempListItem" key={index}>
|
||||
{faculty.name}
|
||||
<button
|
||||
type="button"
|
||||
className="courseFormRemoveFacultyBtn"
|
||||
onClick={() => handleRemoveFaculty(name, index)}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
{errors[name] && <span className="courseFormErrorMessage">{errors[name]}</span>}
|
||||
</div>
|
||||
))}
|
||||
</ul>
|
||||
</label>
|
||||
{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"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
{errors[name] && (
|
||||
<span className="error-message">{errors[name]}</span>
|
||||
)}
|
||||
|
||||
<button type="submit" className="courseFormButton" style={{ gridColumn: "1 / -1" }}>Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
))}
|
||||
<div className={errors.examPeriod ? "error" : ""}>
|
||||
<label>Exam Period:</label>
|
||||
<select
|
||||
value={examPeriod.year}
|
||||
onChange={(e) => setExamPeriod({ ...examPeriod, year: e.target.value })}
|
||||
>
|
||||
<option value="">Year</option>
|
||||
{[2025, 2026, 2027].map((year) => (
|
||||
<option key={year} value={year}>
|
||||
{year}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
value={examPeriod.startMonth}
|
||||
onChange={(e) =>
|
||||
setExamPeriod({ ...examPeriod, startMonth: e.target.value })
|
||||
}
|
||||
>
|
||||
<option value="">Start Month</option>
|
||||
{[
|
||||
"January",
|
||||
"February",
|
||||
"March",
|
||||
"April",
|
||||
"May",
|
||||
"June",
|
||||
"July",
|
||||
"August",
|
||||
"September",
|
||||
"October",
|
||||
"November",
|
||||
"December",
|
||||
].map((month) => (
|
||||
<option key={month} value={month}>
|
||||
{month}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
value={examPeriod.endMonth}
|
||||
onChange={(e) =>
|
||||
setExamPeriod({ ...examPeriod, endMonth: e.target.value })
|
||||
}
|
||||
>
|
||||
<option value="">End Month</option>
|
||||
{[
|
||||
"January",
|
||||
"February",
|
||||
"March",
|
||||
"April",
|
||||
"May",
|
||||
"June",
|
||||
"July",
|
||||
"August",
|
||||
"September",
|
||||
"October",
|
||||
"November",
|
||||
"December",
|
||||
].map((month) => (
|
||||
<option key={month} value={month}>
|
||||
{month}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.examPeriod && (
|
||||
<span className="error-message">{errors.examPeriod}</span>
|
||||
)}
|
||||
</div>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user