CSI-KJSCE/appointment_to_examiner
1
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

UI for consolidated

Browse Source
This commit is contained in:
Harshitha Shetty
2025-01-26 01:12:07 +05:30
parent 3b189d4270
commit 585615cdf0
1 changed files with 125 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

230
client/src/Pages/ConsolidatedTable.jsx
View File

@@ -9,6 +9,7 @@ const ConsolidatedTable = () => {
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const tablesPerPage = 5; const tablesPerPage = 5;
const [expandedTeacher, setExpandedTeacher] = useState(null);
useEffect(() => { useEffect(() => {
const fetchData = async () => { const fetchData = async () => {
@@ -34,19 +35,19 @@ const ConsolidatedTable = () => {
// Extract unique faculty names // Extract unique faculty names
const uniqueTeachers = [...new Set(data.map((row) => row.Name))]; const uniqueTeachers = [...new Set(data.map((row) => row.Name))];
//pagination // Pagination
const indexOfLastTable = currentPage * tablesPerPage; const indexOfLastTable = currentPage * tablesPerPage;
const indexOfFirstTable = indexOfLastTable - tablesPerPage; const indexOfFirstTable = indexOfLastTable - tablesPerPage;
const currentTeachers = uniqueTeachers.slice(indexOfFirstTable,indexOfLastTable); const currentTeachers = uniqueTeachers.slice(indexOfFirstTable, indexOfLastTable);
const totalPages = Math.ceil(uniqueTeachers.length/tablesPerPage); const totalPages = Math.ceil(uniqueTeachers.length / tablesPerPage);
const handleNextPage = ()=>{ const handleNextPage = () => {
if(currentPage < totalPages) setCurrentPage((prevPage)=>prevPage+1); if (currentPage < totalPages) setCurrentPage((prevPage) => prevPage + 1);
}; };
const handlePrevPage = ()=>{ const handlePrevPage = () => {
if(currentPage > 1) setCurrentPage((prevPage)=>prevPage-1); if (currentPage > 1) setCurrentPage((prevPage) => prevPage - 1);
}; };
const createExcelFile = (teacherData, teacherName) => { const createExcelFile = (teacherData, teacherName) => {
@@ -150,104 +151,122 @@ const ConsolidatedTable = () => {
const teacherData = data.filter((row) => row.Name === teacher); const teacherData = data.filter((row) => row.Name === teacher);
return ( return (
<div key={index} style={{ marginBottom: "20px" }}> <div key={index} style={{ marginBottom: "20px" }}>
<h2 style={{ textAlign: "center" }}>{teacher}'s Table</h2> <div
<table
border="1"
style={{ style={{
width: "100%", display: "flex",
textAlign: "left", justifyContent: "space-between",
marginBottom: "10px", alignItems: "center",
cursor: "pointer",
backgroundColor: "#ffffff",
color: "white",
padding: "10px",
borderRadius: "5px",
}} }}
onClick={() => setExpandedTeacher(expandedTeacher === teacher ? null : teacher)}
> >
<thead> <h2 style={{color:'black', margin: 0 }}>{teacher}'s Table</h2>
<tr> <div>
<th>Semester</th> <button
<th>Course Code</th> onClick={() => createExcelFile(teacherData, teacher)}
<th>Course Name</th> className="btn btn-primary"
<th>Exam Type</th> style={{
<th>Year</th> padding: "10px 15px",
<th>Marks</th> backgroundColor: "#007bff",
<th>Name</th> color: "black",
<th>Affiliation/College</th> textDecoration: "none",
<th>Highest Qualification</th> borderRadius: "5px",
<th>Career Experience</th> marginRight: "10px",
<th>Oral/Practical</th> }}
<th>Assessment</th> >
<th>Reassessment</th> Download {teacher}'s Table
<th>Paper Setting</th> </button>
<th>Moderation</th> <button
<th>PwD Paper Setting</th> onClick={() => handleSendEmail(teacher, teacherData)}
</tr> className="btn btn-secondary"
</thead> style={{
<tbody> padding: "10px 15px",
{teacherData.map((row, idx) => ( backgroundColor: "#6c757d",
<tr key={idx}> color: "white",
<td>{row.semester}</td> textDecoration: "none",
<td>{row.courseCode}</td> borderRadius: "5px",
<td>{row.courseName}</td> }}
<td>{row.examType}</td> >
<td>{row.year}</td> Send {teacher}'s CSV via Email
<td>{row.marks}</td> </button>
<td>{row.Name}</td> </div>
<td>{row.affiliation}</td> </div>
<td>{row.qualification}</td>
<td>{row.experience}</td>
<td>{row.oralPractical}</td>
<td>{row.assessment}</td>
<td>{row.reassessment}</td>
<td>{row.paperSetting}</td>
<td>{row.moderation}</td>
<td>{row.pwdPaperSetting}</td>
</tr>
))}
</tbody>
</table>
<button {expandedTeacher === teacher && (
onClick={() => createExcelFile(teacherData, teacher)} <table
className="btn btn-primary" border="1"
style={{ style={{
padding: "10px 15px", width: "100%",
backgroundColor: "#007bff", textAlign: "left",
color: "white", marginTop: "20px",
textDecoration: "none", }}
borderRadius: "5px", >
}} <thead>
> <tr>
Download {teacher}'s Table <th>Semester</th>
</button> <th>Course Code</th>
{/* Send Email Button */} <th>Course Name</th>
<button <th>Exam Type</th>
onClick={() => handleSendEmail(teacher, teacherData)} <th>Year</th>
className="btn btn-secondary" <th>Marks</th>
style={{ <th>Name</th>
padding: "10px 15px", <th>Affiliation/College</th>
backgroundColor: "#6c757d", <th>Highest Qualification</th>
color: "white", <th>Career Experience</th>
textDecoration: "none", <th>Oral/Practical</th>
borderRadius: "5px", <th>Assessment</th>
}} <th>Reassessment</th>
> <th>Paper Setting</th>
Send {teacher}'s CSV via Email <th>Moderation</th>
</button> <th>PwD Paper Setting</th>
</tr>
</thead>
<tbody>
{teacherData.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.marks}</td>
<td>{row.Name}</td>
<td>{row.affiliation}</td>
<td>{row.qualification}</td>
<td>{row.experience}</td>
<td>{row.oralPractical}</td>
<td>{row.assessment}</td>
<td>{row.reassessment}</td>
<td>{row.paperSetting}</td>
<td>{row.moderation}</td>
<td>{row.pwdPaperSetting}</td>
</tr>
))}
</tbody>
</table>
)}
</div> </div>
); );
})} })}
</div> </div>
{/* pagination controls */} {/* Pagination controls */}
<div style={{textAlign: "center", marginTop:"20px",}}> <div style={{ textAlign: "center", marginTop: "20px" }}>
<button <button
onClick={handlePrevPage} onClick={handlePrevPage}
disabled= {currentPage ===1} disabled={currentPage === 1}
style={{ style={{
padding: "10px 15px", padding: "10px 15px",
marginRight: "10px", marginRight: "10px",
backgroundColor: currentPage === 1 ? "#ccc" : "#007bff", backgroundColor: currentPage === 1 ? "#ccc" : "#007bff",
color: "white", color: "white",
borderRadius: "5px", borderRadius: "5px",
border: "none", border: "none",
}} }}
> >
Previous Previous
</button> </button>
@@ -255,17 +274,16 @@ const ConsolidatedTable = () => {
Page {currentPage} of {totalPages} Page {currentPage} of {totalPages}
</span> </span>
<button <button
onClick={handleNextPage} onClick={handleNextPage}
disabled={currentPage === totalPages} disabled={currentPage === totalPages}
style={{ style={{
padding: "10px 15px", padding: "10px 15px",
marginLeft: "10px", marginLeft: "10px",
backgroundColor: backgroundColor: currentPage === totalPages ? "#ccc" : "#007bff",
currentPage === totalPages ? "#ccc" : "#007bff", color: "white",
color: "white", borderRadius: "5px",
borderRadius: "5px", border: "none",
border: "none", }}
}}
> >
Next Next
</button> </button>