forked from CSI-KJSCE/appointment_to_examiner
UI for consolidated
This commit is contained in:
Harshitha Shetty
@@ -9,6 +9,7 @@ const ConsolidatedTable = () => {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const tablesPerPage = 5;
|
||||
const [expandedTeacher, setExpandedTeacher] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
@@ -34,19 +35,19 @@ const ConsolidatedTable = () => {
|
||||
// Extract unique faculty names
|
||||
const uniqueTeachers = [...new Set(data.map((row) => row.Name))];
|
||||
|
||||
//pagination
|
||||
// Pagination
|
||||
const indexOfLastTable = currentPage * 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 = ()=>{
|
||||
if(currentPage < totalPages) setCurrentPage((prevPage)=>prevPage+1);
|
||||
const handleNextPage = () => {
|
||||
if (currentPage < totalPages) setCurrentPage((prevPage) => prevPage + 1);
|
||||
};
|
||||
|
||||
const handlePrevPage = ()=>{
|
||||
if(currentPage > 1) setCurrentPage((prevPage)=>prevPage-1);
|
||||
const handlePrevPage = () => {
|
||||
if (currentPage > 1) setCurrentPage((prevPage) => prevPage - 1);
|
||||
};
|
||||
|
||||
const createExcelFile = (teacherData, teacherName) => {
|
||||
@@ -150,104 +151,122 @@ const ConsolidatedTable = () => {
|
||||
const teacherData = data.filter((row) => row.Name === teacher);
|
||||
return (
|
||||
<div key={index} style={{ marginBottom: "20px" }}>
|
||||
<h2 style={{ textAlign: "center" }}>{teacher}'s Table</h2>
|
||||
<table
|
||||
border="1"
|
||||
<div
|
||||
style={{
|
||||
width: "100%",
|
||||
textAlign: "left",
|
||||
marginBottom: "10px",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
cursor: "pointer",
|
||||
backgroundColor: "#ffffff",
|
||||
color: "white",
|
||||
padding: "10px",
|
||||
borderRadius: "5px",
|
||||
}}
|
||||
onClick={() => setExpandedTeacher(expandedTeacher === teacher ? null : teacher)}
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Semester</th>
|
||||
<th>Course Code</th>
|
||||
<th>Course Name</th>
|
||||
<th>Exam Type</th>
|
||||
<th>Year</th>
|
||||
<th>Marks</th>
|
||||
<th>Name</th>
|
||||
<th>Affiliation/College</th>
|
||||
<th>Highest Qualification</th>
|
||||
<th>Career Experience</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>
|
||||
{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>
|
||||
<h2 style={{color:'black', margin: 0 }}>{teacher}'s Table</h2>
|
||||
<div>
|
||||
<button
|
||||
onClick={() => createExcelFile(teacherData, teacher)}
|
||||
className="btn btn-primary"
|
||||
style={{
|
||||
padding: "10px 15px",
|
||||
backgroundColor: "#007bff",
|
||||
color: "black",
|
||||
textDecoration: "none",
|
||||
borderRadius: "5px",
|
||||
marginRight: "10px",
|
||||
}}
|
||||
>
|
||||
Download {teacher}'s Table
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleSendEmail(teacher, teacherData)}
|
||||
className="btn btn-secondary"
|
||||
style={{
|
||||
padding: "10px 15px",
|
||||
backgroundColor: "#6c757d",
|
||||
color: "white",
|
||||
textDecoration: "none",
|
||||
borderRadius: "5px",
|
||||
}}
|
||||
>
|
||||
Send {teacher}'s CSV via Email
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => createExcelFile(teacherData, teacher)}
|
||||
className="btn btn-primary"
|
||||
style={{
|
||||
padding: "10px 15px",
|
||||
backgroundColor: "#007bff",
|
||||
color: "white",
|
||||
textDecoration: "none",
|
||||
borderRadius: "5px",
|
||||
}}
|
||||
>
|
||||
Download {teacher}'s Table
|
||||
</button>
|
||||
{/* Send Email Button */}
|
||||
<button
|
||||
onClick={() => handleSendEmail(teacher, teacherData)}
|
||||
className="btn btn-secondary"
|
||||
style={{
|
||||
padding: "10px 15px",
|
||||
backgroundColor: "#6c757d",
|
||||
color: "white",
|
||||
textDecoration: "none",
|
||||
borderRadius: "5px",
|
||||
}}
|
||||
>
|
||||
Send {teacher}'s CSV via Email
|
||||
</button>
|
||||
{expandedTeacher === teacher && (
|
||||
<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>Marks</th>
|
||||
<th>Name</th>
|
||||
<th>Affiliation/College</th>
|
||||
<th>Highest Qualification</th>
|
||||
<th>Career Experience</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>
|
||||
{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>
|
||||
|
||||
{/* pagination controls */}
|
||||
<div style={{textAlign: "center", marginTop:"20px",}}>
|
||||
{/* 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",
|
||||
}}
|
||||
onClick={handlePrevPage}
|
||||
disabled={currentPage === 1}
|
||||
style={{
|
||||
padding: "10px 15px",
|
||||
marginRight: "10px",
|
||||
backgroundColor: currentPage === 1 ? "#ccc" : "#007bff",
|
||||
color: "white",
|
||||
borderRadius: "5px",
|
||||
border: "none",
|
||||
}}
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
@@ -255,17 +274,16 @@ const ConsolidatedTable = () => {
|
||||
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",
|
||||
}}
|
||||
onClick={handleNextPage}
|
||||
disabled={currentPage === totalPages}
|
||||
style={{
|
||||
padding: "10px 15px",
|
||||
marginLeft: "10px",
|
||||
backgroundColor: currentPage === totalPages ? "#ccc" : "#007bff",
|
||||
color: "white",
|
||||
borderRadius: "5px",
|
||||
border: "none",
|
||||
}}
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user