forked from CSI-KJSCE/appointment_to_examiner
groupedByCourse
This commit is contained in:
amNobodyyy
@@ -14,6 +14,7 @@ import "react-toastify/dist/ReactToastify.css";
|
|||||||
import CourseTable from "./Pages/CourseTable";
|
import CourseTable from "./Pages/CourseTable";
|
||||||
import GenerateCSV from "./Pages/GenerateCSV";
|
import GenerateCSV from "./Pages/GenerateCSV";
|
||||||
import ConsolidatedTable from "./Pages/ConsolidatedTable";
|
import ConsolidatedTable from "./Pages/ConsolidatedTable";
|
||||||
|
import CourseConsolidated from "./Pages/courseConsolidated";
|
||||||
|
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
@@ -33,6 +34,7 @@ function App() {
|
|||||||
<Route path="/Filter" element={<FilterPage />} />
|
<Route path="/Filter" element={<FilterPage />} />
|
||||||
<Route path="/courses" element={<CourseTable />} />
|
<Route path="/courses" element={<CourseTable />} />
|
||||||
<Route path="/consolidated" element={<ConsolidatedTable />} />
|
<Route path="/consolidated" element={<ConsolidatedTable />} />
|
||||||
|
<Route path="/courseConsolidated" element={<CourseConsolidated />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
</Router>
|
</Router>
|
||||||
);
|
);
|
||||||
|
|||||||
271
client/src/Pages/courseConsolidated.jsx
Normal file
271
client/src/Pages/courseConsolidated.jsx
Normal file
@@ -0,0 +1,271 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import axios from "axios";
|
||||||
|
import * as XLSX from "xlsx-js-style";
|
||||||
|
|
||||||
|
const CourseConsolidated = () => {
|
||||||
|
const [data, setData] = useState([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
|
const tablesPerPage = 5;
|
||||||
|
const [expandedCourse, setExpandedCourse] = useState(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchData = async () => {
|
||||||
|
try {
|
||||||
|
const response = await axios.get(
|
||||||
|
"http://localhost:8080/api/table/course-consolidated"
|
||||||
|
);
|
||||||
|
setData(response.data);
|
||||||
|
setLoading(false);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching table data:", error);
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchData();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return <div>Loading...</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Extract unique courses by courseCode
|
||||||
|
const uniqueCourses = [...new Set(data.map((row) => row.courseCode))];
|
||||||
|
|
||||||
|
// Pagination
|
||||||
|
const indexOfLastTable = currentPage * tablesPerPage;
|
||||||
|
const indexOfFirstTable = indexOfLastTable - tablesPerPage;
|
||||||
|
const currentCourses = uniqueCourses.slice(
|
||||||
|
indexOfFirstTable,
|
||||||
|
indexOfLastTable
|
||||||
|
);
|
||||||
|
|
||||||
|
const totalPages = Math.ceil(uniqueCourses.length / tablesPerPage);
|
||||||
|
|
||||||
|
const handleNextPage = () => {
|
||||||
|
if (currentPage < totalPages) setCurrentPage((prevPage) => prevPage + 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePrevPage = () => {
|
||||||
|
if (currentPage > 1) setCurrentPage((prevPage) => prevPage - 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
const createExcelFile = (courseData, courseName) => {
|
||||||
|
const workbook = XLSX.utils.book_new();
|
||||||
|
const worksheet = XLSX.utils.json_to_sheet(courseData);
|
||||||
|
XLSX.utils.book_append_sheet(workbook, worksheet, courseName);
|
||||||
|
XLSX.writeFile(workbook, `${courseName.replace(/\s+/g, "_")}_Table.xlsx`);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h1 style={{ textAlign: "center" }}>
|
||||||
|
Course Tables with Download Options
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
maxHeight: "70vh",
|
||||||
|
overflowY: "auto",
|
||||||
|
border: "1px solid #ccc",
|
||||||
|
padding: "10px",
|
||||||
|
borderRadius: "5px",
|
||||||
|
backgroundColor: "#f9f9f9",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{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={() => createExcelFile(courseData, courseName)}
|
||||||
|
className="btn btn-primary"
|
||||||
|
style={{
|
||||||
|
padding: "10px 15px",
|
||||||
|
backgroundColor: "#007bff",
|
||||||
|
color: "white",
|
||||||
|
textDecoration: "none",
|
||||||
|
borderRadius: "5px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Download {courseName}'s Table
|
||||||
|
</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.assesmentTeachers &&
|
||||||
|
row.assesmentTeachers.length > 0 ? (
|
||||||
|
<ul style={{ margin: 0, paddingLeft: "20px" }}>
|
||||||
|
{row.assesmentTeachers.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>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CourseConsolidated;
|
||||||
@@ -73,4 +73,72 @@ router.get("/consolidated-table", async (req, res) => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
router.get("/course-consolidated", async (req, res) => {
|
||||||
|
try {
|
||||||
|
const appointments = await Appointment.find();
|
||||||
|
const courses = await Course.find();
|
||||||
|
|
||||||
|
// Group appointments by courseId and task
|
||||||
|
const groupedByCourse = {};
|
||||||
|
|
||||||
|
appointments.forEach((appointment) => {
|
||||||
|
const courseId = appointment.courseId;
|
||||||
|
|
||||||
|
if (!groupedByCourse[courseId]) {
|
||||||
|
groupedByCourse[courseId] = {
|
||||||
|
courseId: courseId,
|
||||||
|
courseName: appointment.courseName,
|
||||||
|
tasks: {
|
||||||
|
oralsPracticals: new Set(),
|
||||||
|
assessment: new Set(),
|
||||||
|
reassessment: new Set(),
|
||||||
|
paperSetting: new Set(),
|
||||||
|
moderation: new Set(),
|
||||||
|
pwdPaperSetter: new Set(),
|
||||||
|
},
|
||||||
|
semester: "",
|
||||||
|
examType: "",
|
||||||
|
year: "",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add the faculty name to the appropriate task
|
||||||
|
if (appointment.task && groupedByCourse[courseId].tasks[appointment.task]) {
|
||||||
|
groupedByCourse[courseId].tasks[appointment.task].add(appointment.facultyName);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add course details to grouped data
|
||||||
|
Object.values(groupedByCourse).forEach((group) => {
|
||||||
|
const course = courses.find((c) => c.courseId === group.courseId);
|
||||||
|
|
||||||
|
if (course) {
|
||||||
|
group.semester = course.semester;
|
||||||
|
group.examType = course.scheme;
|
||||||
|
group.year = course.program;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Format the consolidated data
|
||||||
|
const consolidatedData = Object.values(groupedByCourse).map((course, index) => ({
|
||||||
|
courseCode: course.courseId,
|
||||||
|
courseName: course.courseName,
|
||||||
|
semester: course.semester,
|
||||||
|
examType: course.examType,
|
||||||
|
year: course.year,
|
||||||
|
oralPracticalTeachers: Array.from(course.tasks.oralsPracticals),
|
||||||
|
assessmentTeachers: Array.from(course.tasks.assessment),
|
||||||
|
reassessmentTeachers: Array.from(course.tasks.reassessment),
|
||||||
|
paperSettingTeachers: Array.from(course.tasks.paperSetting),
|
||||||
|
moderationTeachers: Array.from(course.tasks.moderation),
|
||||||
|
pwdPaperSettingTeachers: Array.from(course.tasks.pwdPaperSetter),
|
||||||
|
}));
|
||||||
|
|
||||||
|
res.status(200).json(consolidatedData);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching course consolidated data:", error);
|
||||||
|
res.status(500).json({ message: "Failed to fetch course consolidated data" });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
module.exports = router;
|
module.exports = router;
|
||||||
|
|||||||
Reference in New Issue
Block a user