forked from CSI-KJSCE/appointment_to_examiner
coursePanel dropdown, 6 emails per subject
This commit is contained in:
amNobodyyy
@@ -43,7 +43,10 @@ const CourseForm = () => {
|
||||
const fetchOptionsAndFaculties = async () => {
|
||||
try {
|
||||
const facultiesData = await fetchFaculties();
|
||||
setOptions((prev) => ({ ...prev, faculties: facultiesData }));
|
||||
const filteredFaculties = facultiesData.filter(
|
||||
(faculty) => faculty.courses.includes(course?.courseId || id) // Only faculties with this course
|
||||
);
|
||||
setOptions((prev) => ({ ...prev, faculties: filteredFaculties }));
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch faculties:", error);
|
||||
}
|
||||
@@ -67,18 +70,21 @@ const CourseForm = () => {
|
||||
};
|
||||
|
||||
const handleAddFaculty = (field) => {
|
||||
if (!formData[field]) return;
|
||||
|
||||
const selectedFaculty = options.faculties.find(
|
||||
(faculty) => faculty.name === formData[field]
|
||||
);
|
||||
|
||||
if (selectedFaculty) {
|
||||
setTempAssignments((prev) => ({
|
||||
...prev,
|
||||
[field]: [...prev[field], selectedFaculty],
|
||||
}));
|
||||
setFormData({ ...formData, [field]: "" });
|
||||
setSuggestions((prev) => ({ ...prev, [field]: [] }));
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const handleRemoveFaculty = (field, index) => {
|
||||
setTempAssignments((prev) => {
|
||||
@@ -160,13 +166,23 @@ const CourseForm = () => {
|
||||
<div>
|
||||
<label className="courseFormLabel">
|
||||
Course ID:
|
||||
<input type="text" className="courseFormInput courseFormReadOnly" value={course?.courseId || id} readOnly />
|
||||
<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 />
|
||||
<input
|
||||
type="text"
|
||||
className="courseFormInput courseFormReadOnly"
|
||||
value={course?.name || ""}
|
||||
readOnly
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div className={errors.examPeriod ? "courseFormErrorSelect" : ""}>
|
||||
@@ -180,96 +196,160 @@ const CourseForm = () => {
|
||||
<select
|
||||
className="courseFormSelect"
|
||||
value={examPeriod.startMonth}
|
||||
onChange={(e) => setExamPeriod({ ...examPeriod, startMonth: e.target.value })}
|
||||
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>
|
||||
))}
|
||||
{[
|
||||
"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 })}
|
||||
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>
|
||||
))}
|
||||
{[
|
||||
"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>}
|
||||
{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={() => {
|
||||
{[
|
||||
{ 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}:
|
||||
<select
|
||||
className="courseFormSelect"
|
||||
name={name}
|
||||
value={formData[name]}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, [name]: e.target.value })
|
||||
}
|
||||
>
|
||||
<option value="">Select Faculty</option>
|
||||
{options.faculties.map((faculty) => (
|
||||
<option key={faculty.facultyId} value={faculty.name}>
|
||||
{faculty.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<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>
|
||||
))}
|
||||
}}
|
||||
>
|
||||
{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>
|
||||
))}
|
||||
|
||||
<button type="submit" className="courseFormButton" style={{ gridColumn: "1 / -1" }}>Submit</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="courseFormButton"
|
||||
style={{ gridColumn: "1 / -1" }}
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user