408 lines
13 KiB
JavaScript
408 lines
13 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import axios from "axios";
|
|
import { jsPDF } from "jspdf";
|
|
import autoTable from "jspdf-autotable";
|
|
import Navbar from "./Navbar";
|
|
|
|
|
|
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 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);
|
|
});
|
|
};
|
|
|
|
try {
|
|
const logoBase64 = await loadImage(logoUrl);
|
|
doc.addImage(logoBase64, "PNG", logoX, logoY, logoWidth, logoHeight);
|
|
} catch (error) {
|
|
console.error("Failed to load logo:", error);
|
|
}
|
|
|
|
// 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(16);
|
|
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",
|
|
]) || []),
|
|
];
|
|
|
|
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
|
|
});
|
|
|
|
// 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", // Plain table style
|
|
styles: { textColor: [0, 0, 0] },
|
|
});
|
|
|
|
// 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);
|
|
|
|
// 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);
|
|
|
|
// Save PDF
|
|
doc.save(`${courseName} - AppointmentOrder.pdf`);
|
|
};
|
|
|
|
|
|
return (
|
|
<>
|
|
<Navbar/>
|
|
<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={() => generateAppointmentPDF(courseData[0], courseName)}
|
|
className="btn btn-primary"
|
|
style={{
|
|
padding: "10px 15px",
|
|
backgroundColor: "#007bff",
|
|
color: "white",
|
|
textDecoration: "none",
|
|
borderRadius: "5px",
|
|
}}
|
|
>
|
|
Download {courseName}'s Appointment Order
|
|
</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>
|
|
</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;
|