coursePanel dropdown, 6 emails per subject

This commit is contained in:
amNobodyyy
2025-03-07 02:09:15 +05:30
parent 4a3154752f
commit d8fe5fcc42
8 changed files with 638 additions and 430 deletions

View File

@@ -193,7 +193,7 @@ const ConsolidatedTable = () => {
formData.append("file", file);
try {
const emailResponse = await sendEmail(formData);
const emailResponse = await sendEmail(formData, "excel");
toast.success(`Email sent successfully to ${facultyEmail}`);
console.log("Response from server:", emailResponse);
} catch (emailError) {

View File

@@ -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)}
>
&#10005;
</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)}
>
&#10005;
</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>
</>
);
};

View File

@@ -30,6 +30,7 @@ const Navbar = () => {
try {
// Call the logout API
await axios.get("http://localhost:8080/auth/logout", { withCredentials: true });
localStorage.clear();
// Redirect to the login page after successful logout
navigate("/");

View File

@@ -3,6 +3,8 @@ import axios from "axios";
import { jsPDF } from "jspdf";
import autoTable from "jspdf-autotable";
import Navbar from "./Navbar";
import { toast, ToastContainer } from "react-toastify";
import { sendEmail } from "../api";
const CourseConsolidated = () => {
@@ -12,6 +14,7 @@ const CourseConsolidated = () => {
const [currentPage, setCurrentPage] = useState(1);
const tablesPerPage = 5;
const [expandedCourse, setExpandedCourse] = useState(null);
useEffect(() => {
const fetchData = async () => {
@@ -36,17 +39,17 @@ const CourseConsolidated = () => {
}
// Extract unique courses by courseCode
const filteredCourses = [...new Set(data.map((row) => row.courseCode))].filter(
(courseCode) => {
const courseName = data.find((row) => row.courseCode === courseCode)
?.courseName;
return (
courseName &&
courseName.toLowerCase().includes(searchQuery.toLowerCase())
);
}
);
const filteredCourses = [
...new Set(data.map((row) => row.courseCode)),
].filter((courseCode) => {
const courseName = data.find(
(row) => row.courseCode === courseCode
)?.courseName;
return (
courseName && courseName.toLowerCase().includes(searchQuery.toLowerCase())
);
});
const totalPages = Math.ceil(filteredCourses.length / tablesPerPage);
const indexOfLastTable = currentPage * tablesPerPage;
const indexOfFirstTable = indexOfLastTable - tablesPerPage;
@@ -54,7 +57,6 @@ const CourseConsolidated = () => {
indexOfFirstTable,
indexOfLastTable
);
const handleNextPage = () => {
if (currentPage < totalPages) setCurrentPage((prevPage) => prevPage + 1);
@@ -64,150 +66,170 @@ const CourseConsolidated = () => {
if (currentPage > 1) setCurrentPage((prevPage) => prevPage - 1);
};
const generateAppointmentPDF = async (courseData, courseName) => {
const doc = new jsPDF();
const maroon = [128, 0, 0];
// College Logo
const logoUrl = "/logo.png"; // Ensure the logo is placed in the public folder
const logoWidth = 40;
const logoHeight = 40;
const logoX = 10;
const logoY = 10;
const loadImage = async (url) => {
const response = await fetch(url);
const blob = await response.blob();
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
reader.readAsDataURL(blob);
});
};
const fetchFacultyEmail = async (facultyId) => {
try {
const logoBase64 = await loadImage(logoUrl);
doc.addImage(logoBase64, "PNG", logoX, logoY, logoWidth, logoHeight);
const response = await axios.get(
`http://localhost:8080/api/faculty/${facultyId}`,
{ withCredentials: true }
);
return response.data.email; // Assuming API returns { email: "faculty@example.com" }
} catch (error) {
console.error("Failed to load logo:", error);
console.error(`Error fetching email for ${facultyId}:`, error);
return "N/A"; // Return "N/A" if email is not found
}
// Title Section
doc.setFont("times", "normal");
doc.setTextColor(0, 0, 0);
doc.setFontSize(12);
doc.text("Date: " + new Date().toLocaleDateString(), 150, 20);
doc.setFontSize(14);
doc.text("CONFIDENTIAL", 10, 60);
doc.setFontSize(10);
doc.text(
"LETTER OF APPOINTMENT AS QUESTION PAPER SETTER",
105,
70,
{ align: "center" }
);
// Appointment Table
const table1Data = [
...(courseData.oralPracticalTeachers?.map((teacher) => [
teacher,
"K. J. Somaiya School of Engineering",
"Oral/Practical Teacher",
"Contact Number",
]) || []),
...(courseData.assessmentTeachers?.map((teacher) => [
teacher,
"K. J. Somaiya School of Engineering",
"Reassessment Teacher",
"Contact Number",
]) || []),
...(courseData.reassessmentTeachers?.map((teacher) => [
teacher,
"K. J. Somaiya School of Engineering",
"Reassessment Teacher",
"Contact Number",
]) || []),
...(courseData.paperSettingTeachers?.map((teacher) => [
teacher,
"K. J. Somaiya School of Engineering",
"Paper Setter",
"Contact Number",
]) || []),
...(courseData.moderationTeachers?.map((teacher) => [
teacher,
"K. J. Somaiya School of Engineering",
"Moderator",
"Contact Number",
]) || []),
...(courseData.pwdPaperSettingTeachers?.map((teacher) => [
teacher,
"K. J. Somaiya School of Engineering",
"PwD Paper Setter",
"Contact Number",
]) || []),
};
const generateAppointmentPDFs = async (courseData, courseName) => {
const maroon = [128, 0, 0];
const roles = [
{ key: "oralPracticalTeachers", role: "Oral/Practical Teacher" },
{ key: "assessmentTeachers", role: "Assessment Teacher" },
{ key: "reassessmentTeachers", role: "Reassessment Teacher" },
{ key: "paperSettingTeachers", role: "Paper Setter" },
{ key: "moderationTeachers", role: "Moderator" },
{ key: "pwdPaperSettingTeachers", role: "PwD Paper Setter" },
];
autoTable(doc, {
head: [["Name", "Affiliation", "Appointment Role", "Email"]],
body: table1Data,
startY: 80,
theme: "grid",
headStyles: { fillColor: maroon, textColor: [255, 255, 255] },
styles: { textColor: [0, 0, 0] }, // Keep body text black
});
for (const { key, role } of roles) {
if (!courseData[key] || courseData[key].length === 0) continue; // Skip empty roles
// Content Table
const detailsTableData = [
["Programme:", courseData.courseName],
["Exam Category:", "Regular Examination"],
["Exam Type:", courseData.examType],
["Exam Season:", "Second Half - Winter Examination 2023"],
["Number of Sets Required:", courseData.paperSettingTeachers.length],
["Year:", courseData.year],
["Semester:", courseData.semester],
["Course Name:", courseName],
["Course Code:", courseData.courseCode],
];
const doc = new jsPDF();
autoTable(doc, {
body: detailsTableData,
startY: doc.previousAutoTable.finalY + 10,
theme: "grid", // Plain table style
styles: { textColor: [0, 0, 0] },
});
// College Logo
const logoUrl = "/logo.png";
const loadImage = async (url) => {
const response = await fetch(url);
const blob = await response.blob();
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
reader.readAsDataURL(blob);
});
};
// Footer Section
const footerY = doc.previousAutoTable.finalY + 10; // Dynamic Y-coordinate
doc.setFontSize(12);
doc.text("Dr. S. K. Ukarande", 10, footerY);
doc.text("Principal", 10, footerY + 5);
doc.text("K. J. Somaiya School of Engineering", 10, footerY + 10);
try {
const logoBase64 = await loadImage(logoUrl);
doc.addImage(logoBase64, "PNG", 10, 10, 40, 40);
} catch (error) {
console.error("Failed to load logo:", error);
}
// Footer Contact Details
const footerContactY = footerY + 20;
doc.setFontSize(10);
doc.text(
"Somaiya Vidyavihar, Vidyavihar (East), Mumbai-400 022, India",
10,
footerContactY
);
doc.text("Telephone: (91-22) 44444400, 44444404", 10, footerContactY + 5);
doc.text("Email: principal.tech@somaiya.edu", 10, footerContactY + 10);
doc.text("Web: www.somaiya.edu/kjsieit", 10, footerContactY + 15);
// Title Section
doc.setFont("times", "normal");
doc.setTextColor(0, 0, 0);
doc.setFontSize(12);
doc.text("Date: " + new Date().toLocaleDateString(), 150, 20);
doc.setFontSize(14);
doc.text("CONFIDENTIAL", 10, 60);
doc.setFontSize(10);
doc.text(`LETTER OF APPOINTMENT AS ${role.toUpperCase()}`, 105, 70, {
align: "center",
});
// Save PDF
doc.save(`${courseName} - AppointmentOrder.pdf`);
// Fetch Emails and Prepare Table Data
let table1Data = [];
let emails = [];
for (const teacher of courseData[key]) {
const email = await fetchFacultyEmail(teacher.facultyId);
emails.push(email);
table1Data.push([
teacher.facultyName,
"K. J. Somaiya School of Engineering",
role,
email,
]);
}
// Generate Table
autoTable(doc, {
head: [["Name", "Affiliation", "Appointment Role", "Email"]],
body: table1Data,
startY: 80,
theme: "grid",
headStyles: { fillColor: maroon, textColor: [255, 255, 255] },
styles: { textColor: [0, 0, 0] },
});
// Content Table
const detailsTableData = [
["Programme:", courseData.courseName],
["Exam Category:", "Regular Examination"],
["Exam Type:", courseData.examType],
["Exam Season:", "Second Half - Winter Examination 2023"],
["Number of Sets Required:", courseData.paperSettingTeachers.length],
["Year:", courseData.year],
["Semester:", courseData.semester],
["Course Name:", courseName],
["Course Code:", courseData.courseCode],
];
autoTable(doc, {
body: detailsTableData,
startY: doc.previousAutoTable.finalY + 10,
theme: "grid",
styles: { textColor: [0, 0, 0] },
});
// Footer
const footerY = doc.previousAutoTable.finalY + 10;
doc.setFontSize(12);
doc.text("Dr. S. K. Ukarande", 10, footerY);
doc.text("Principal", 10, footerY + 5);
doc.text("K. J. Somaiya School of Engineering", 10, footerY + 10);
const footerContactY = footerY + 20;
doc.setFontSize(10);
doc.text(
"Somaiya Vidyavihar, Vidyavihar (East), Mumbai-400 022, India",
10,
footerContactY
);
doc.text("Telephone: (91-22) 44444400, 44444404", 10, footerContactY + 5);
doc.text("Email: principal.tech@somaiya.edu", 10, footerContactY + 10);
doc.text("Web: www.somaiya.edu/kjsieit", 10, footerContactY + 15);
// Convert PDF to Blob
const pdfBlob = doc.output("blob");
// Send Email to Each Faculty
for (const email of emails) {
try {
const formData = new FormData();
formData.append("pdfFile", pdfBlob, `${courseName}-${role}.pdf`);
formData.append("fileName", `${courseName}-${role}.pdf`);
formData.append("recipientEmail", email);
formData.append("role", role);
formData.append("courseName", courseName);
const emailResponse = await sendEmail(formData, "pdf");
toast.success(`✅ Email sent successfully to ${email}`);
console.log("Response from server:", emailResponse);
} catch (emailError) {
toast.error(`❌ Error sending email to ${email}:`, emailError.message);
}
}
}
};
return (
<>
<Navbar/>
<div>
<h1 style={{ textAlign: "center", background: "#003366", color: "white", padding: "20px 0", fontSize: "24px", }}>
Course Tables with Download Options
</h1>
<Navbar />
<ToastContainer />
<div>
<h1
style={{
textAlign: "center",
background: "#003366",
color: "white",
padding: "20px 0",
fontSize: "24px",
}}
>
Course Tables with Download Options
</h1>
<div style={{ padding: "10px", marginBottom: "30px" }}>
<input
@@ -225,209 +247,217 @@ const CourseConsolidated = () => {
/>
</div>
<div
style={{
maxHeight: "70vh",
overflowY: "auto",
border: "1px solid #ccc",
padding: "10px",
borderRadius: "5px",
backgroundColor: "#f9f9f9",
fontSize: "160px",
}}
>
{currentCourses.map((courseCode, index) => {
const courseData = data.filter(
(row) => row.courseCode === courseCode
);
const courseName = courseData[0]?.courseName; // Get course name from first item
return (
<div key={index} style={{ marginBottom: "20px" }}>
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
cursor: "pointer",
backgroundColor: "#ffffff",
color: "black",
padding: "10px",
borderRadius: "5px",
}}
onClick={() =>
setExpandedCourse(
expandedCourse === courseCode ? null : courseCode
)
}
>
<h2 style={{ margin: 0 }}>{courseName}'s Table</h2>
<button
onClick={() => generateAppointmentPDF(courseData[0], courseName)}
className="btn btn-primary"
<div
style={{
maxHeight: "70vh",
overflowY: "auto",
border: "1px solid #ccc",
padding: "10px",
borderRadius: "5px",
backgroundColor: "#f9f9f9",
fontSize: "160px",
}}
>
{currentCourses.map((courseCode, index) => {
const courseData = data.filter(
(row) => row.courseCode === courseCode
);
console.log(courseData);
const courseName = courseData[0]?.courseName; // Get course name from first item
return (
<div key={index} style={{ marginBottom: "20px" }}>
<div
style={{
padding: "10px 15px",
backgroundColor: "#007bff",
color: "white",
textDecoration: "none",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
cursor: "pointer",
backgroundColor: "#ffffff",
color: "black",
padding: "10px",
borderRadius: "5px",
}}
onClick={() =>
setExpandedCourse(
expandedCourse === courseCode ? null : courseCode
)
}
>
Download
</button>
</div>
<h2 style={{ margin: 0 }}>{courseName}'s Table</h2>
<button
onClick={() =>
generateAppointmentPDFs(courseData[0], courseName)
}
className="btn btn-primary"
style={{
padding: "10px 15px",
backgroundColor: "#007bff",
color: "white",
textDecoration: "none",
borderRadius: "5px",
}}
>
Download
</button>
</div>
{expandedCourse === courseCode && (
<table
border="1"
style={{
width: "100%",
textAlign: "left",
marginTop: "20px",
}}
>
<thead>
<tr>
<th>Semester</th>
<th>Course Code</th>
<th>Course Name</th>
<th>Exam Type</th>
<th>Year</th>
<th>Oral/Practical</th>
<th>Assessment</th>
<th>Reassessment</th>
<th>Paper Setting</th>
<th>Moderation</th>
<th>PwD Paper Setting</th>
</tr>
</thead>
<tbody>
{courseData.map((row, idx) => (
<tr key={idx}>
<td>{row.semester}</td>
<td>{row.courseCode}</td>
<td>{row.courseName}</td>
<td>{row.examType}</td>
<td>{row.year}</td>
<td>
{row.oralPracticalTeachers &&
row.oralPracticalTeachers.length > 0 ? (
<ul style={{ margin: 0, paddingLeft: "20px" }}>
{row.oralPracticalTeachers.map((teacher, idx) => (
<li key={idx}>{teacher}</li>
))}
</ul>
) : (
"N/A"
)}
</td>
<td>
{row.assessmentTeachers &&
row.assessmentTeachers.length > 0 ? (
<ul style={{ margin: 0, paddingLeft: "20px" }}>
{row.assessmentTeachers.map((teacher, idx) => (
<li key={idx}>{teacher}</li>
))}
</ul>
) : (
"N/A"
)}
</td>
<td>
{row.reassessmentTeachers &&
row.reassessmentTeachers.length > 0 ? (
<ul style={{ margin: 0, paddingLeft: "20px" }}>
{row.reassessmentTeachers.map((teacher, idx) => (
<li key={idx}>{teacher}</li>
))}
</ul>
) : (
"N/A"
)}
</td>
<td>
{row.paperSettingTeachers &&
row.paperSettingTeachers.length > 0 ? (
<ul style={{ margin: 0, paddingLeft: "20px" }}>
{row.paperSettingTeachers.map((teacher, idx) => (
<li key={idx}>{teacher}</li>
))}
</ul>
) : (
"N/A"
)}
</td>
<td>
{row.moderationTeachers &&
row.moderationTeachers.length > 0 ? (
<ul style={{ margin: 0, paddingLeft: "20px" }}>
{row.moderationTeachers.map((teacher, idx) => (
<li key={idx}>{teacher}</li>
))}
</ul>
) : (
"N/A"
)}
</td>
<td>
{row.pwdPaperSettingTeachers &&
row.pwdPaperSettingTeachers.length > 0 ? (
<ul style={{ margin: 0, paddingLeft: "20px" }}>
{row.pwdPaperSettingTeachers.map(
(teacher, idx) => (
<li key={idx}>{teacher}</li>
)
)}
</ul>
) : (
"N/A"
)}
</td>
{expandedCourse === courseCode && (
<table
border="1"
style={{
width: "100%",
textAlign: "left",
marginTop: "20px",
}}
>
<thead>
<tr>
<th>Semester</th>
<th>Course Code</th>
<th>Course Name</th>
<th>Exam Type</th>
<th>Year</th>
<th>Oral/Practical</th>
<th>Assessment</th>
<th>Reassessment</th>
<th>Paper Setting</th>
<th>Moderation</th>
<th>PwD Paper Setting</th>
</tr>
))}
</tbody>
</table>
)}
</div>
);
})}
</div>
</thead>
<tbody>
{courseData.map((row, idx) => (
<tr key={idx}>
<td>{row.semester}</td>
<td>{row.courseCode}</td>
<td>{row.courseName}</td>
<td>{row.examType}</td>
<td>{row.year}</td>
<td>
{row.oralPracticalTeachers &&
row.oralPracticalTeachers.length > 0 ? (
<ul style={{ margin: 0, paddingLeft: "20px" }}>
{row.oralPracticalTeachers.map(
(teacher, idx) => (
<li key={idx}>{teacher.facultyName}</li>
)
)}
</ul>
) : (
"N/A"
)}
</td>
<td>
{row.assessmentTeachers &&
row.assessmentTeachers.length > 0 ? (
<ul style={{ margin: 0, paddingLeft: "20px" }}>
{row.assessmentTeachers.map((teacher, idx) => (
<li key={idx}>{teacher.facultyName}</li>
))}
</ul>
) : (
"N/A"
)}
</td>
<td>
{row.reassessmentTeachers &&
row.reassessmentTeachers.length > 0 ? (
<ul style={{ margin: 0, paddingLeft: "20px" }}>
{row.reassessmentTeachers.map(
(teacher, idx) => (
<li key={idx}>{teacher.facultyName}</li>
)
)}
</ul>
) : (
"N/A"
)}
</td>
<td>
{row.paperSettingTeachers &&
row.paperSettingTeachers.length > 0 ? (
<ul style={{ margin: 0, paddingLeft: "20px" }}>
{row.paperSettingTeachers.map(
(teacher, idx) => (
<li key={idx}>{teacher.facultyName}</li>
)
)}
</ul>
) : (
"N/A"
)}
</td>
<td>
{row.moderationTeachers &&
row.moderationTeachers.length > 0 ? (
<ul style={{ margin: 0, paddingLeft: "20px" }}>
{row.moderationTeachers.map((teacher, idx) => (
<li key={idx}>{teacher.facultyName}</li>
))}
</ul>
) : (
"N/A"
)}
</td>
<td>
{row.pwdPaperSettingTeachers &&
row.pwdPaperSettingTeachers.length > 0 ? (
<ul style={{ margin: 0, paddingLeft: "20px" }}>
{row.pwdPaperSettingTeachers.map(
(teacher, idx) => (
<li key={idx}>{teacher.facultyName}</li>
)
)}
</ul>
) : (
"N/A"
)}
</td>
</tr>
))}
</tbody>
</table>
)}
</div>
);
})}
</div>
{/* Pagination controls */}
<div style={{ textAlign: "center", marginTop: "20px" }}>
<button
onClick={handlePrevPage}
disabled={currentPage === 1}
style={{
padding: "10px 15px",
marginRight: "10px",
backgroundColor: currentPage === 1 ? "#ccc" : "#007bff",
color: "white",
borderRadius: "5px",
border: "none",
}}
>
Previous
</button>
<span>
Page {currentPage} of {totalPages}
</span>
<button
onClick={handleNextPage}
disabled={currentPage === totalPages}
style={{
padding: "10px 15px",
marginLeft: "10px",
backgroundColor: currentPage === totalPages ? "#ccc" : "#007bff",
color: "white",
borderRadius: "5px",
border: "none",
}}
>
Next
</button>
{/* Pagination controls */}
<div style={{ textAlign: "center", marginTop: "20px" }}>
<button
onClick={handlePrevPage}
disabled={currentPage === 1}
style={{
padding: "10px 15px",
marginRight: "10px",
backgroundColor: currentPage === 1 ? "#ccc" : "#007bff",
color: "white",
borderRadius: "5px",
border: "none",
}}
>
Previous
</button>
<span>
Page {currentPage} of {totalPages}
</span>
<button
onClick={handleNextPage}
disabled={currentPage === totalPages}
style={{
padding: "10px 15px",
marginLeft: "10px",
backgroundColor: currentPage === totalPages ? "#ccc" : "#007bff",
color: "white",
borderRadius: "5px",
border: "none",
}}
>
Next
</button>
</div>
</div>
</div>
</>
);
};

View File

@@ -151,9 +151,9 @@ export const updateCourseStatus = async (courseId) => {
});
};
export const sendEmail = async (formData) => {
export const sendEmail = async (formData, type) => {
try {
const url = `${BASE_URL}/send-email`;
const url = `${BASE_URL}/send-email/${type}`;
const response = await fetch(url, {
method: "POST",
body: formData, // Directly pass FormData