frontend changes
This commit is contained in:
ayoitshasya
@@ -1,8 +1,84 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import axios from "axios";
|
||||
import * as XLSX from "xlsx-js-style";
|
||||
import { sendEmail } from "../api";
|
||||
import { createExcelBook } from "../api";
|
||||
import { sendEmail, createExcelBook } from "../api";
|
||||
import Navbar from "./Navbar";
|
||||
|
||||
const styles = {
|
||||
header: {
|
||||
background: '#003366',
|
||||
color: 'white',
|
||||
padding: '20px 0',
|
||||
textAlign: 'center',
|
||||
fontSize: '24px',
|
||||
marginBottom: '0',
|
||||
},
|
||||
buttonRow: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-around',
|
||||
alignItems: 'center',
|
||||
padding: '10px 0',
|
||||
margin: '0',
|
||||
backgroundColor: '#003366',
|
||||
boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)'
|
||||
},
|
||||
button: {
|
||||
padding: '10px 20px',
|
||||
borderRadius: '5px',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
fontSize: '16px',
|
||||
flex: '1',
|
||||
},
|
||||
bulkDownloadButton: {
|
||||
backgroundColor: '#3fb5a3',
|
||||
},
|
||||
downloadButton: {
|
||||
backgroundColor: '#28a745',
|
||||
},
|
||||
emailButton: {
|
||||
backgroundColor: '#ff6f61',
|
||||
},
|
||||
tableContainer: {
|
||||
maxHeight: "70vh",
|
||||
overflowY: "auto",
|
||||
border: "1px solid #ccc",
|
||||
padding: "10px",
|
||||
borderRadius: "5px",
|
||||
backgroundColor: "#f9f9f9",
|
||||
marginBottom: "20px",
|
||||
},
|
||||
table: {
|
||||
width: "100%",
|
||||
marginTop: "20px",
|
||||
borderCollapse: "collapse",
|
||||
},
|
||||
th: {
|
||||
backgroundColor: "#333",
|
||||
color: "white",
|
||||
padding: "10px 15px",
|
||||
},
|
||||
td: {
|
||||
padding: "10px",
|
||||
textAlign: "left",
|
||||
borderBottom: "1px solid #ddd",
|
||||
},
|
||||
paginationContainer: {
|
||||
textAlign: "center",
|
||||
marginTop: "20px",
|
||||
},
|
||||
paginationButton: {
|
||||
padding: "10px 15px",
|
||||
backgroundColor: "#007bff",
|
||||
color: "white",
|
||||
borderRadius: "5px",
|
||||
border: "none",
|
||||
},
|
||||
main: {
|
||||
width: "100%",
|
||||
}
|
||||
};
|
||||
|
||||
const ConsolidatedTable = () => {
|
||||
const [data, setData] = useState([]);
|
||||
@@ -63,7 +139,7 @@ const ConsolidatedTable = () => {
|
||||
};
|
||||
|
||||
const handleSendEmail = async (teacher, teacherData) => {
|
||||
const facultyId = teacherData[0].facultyId; // This assumes all rows for a teacher have the same facultyId
|
||||
const facultyId = teacherData[0].facultyId;
|
||||
try {
|
||||
const response = await axios.get(
|
||||
`http://localhost:8080/api/faculty/${facultyId}`
|
||||
@@ -87,15 +163,15 @@ const ConsolidatedTable = () => {
|
||||
formData.append("file", file);
|
||||
|
||||
try {
|
||||
const response = await sendEmail(formData);
|
||||
const emailResponse = await sendEmail(formData);
|
||||
alert(`Email sent successfully to ${facultyEmail}`);
|
||||
console.log("Response from server:", response);
|
||||
} catch (error) {
|
||||
console.error("Error sending email:", error);
|
||||
console.log("Response from server:", emailResponse);
|
||||
} catch (emailError) {
|
||||
console.error("Error sending email:", emailError);
|
||||
alert("Failed to send email.");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching Faculty data:", error);
|
||||
} catch (facultyError) {
|
||||
console.error("Error fetching Faculty data:", facultyError);
|
||||
alert("Failed to fetch faculty data.");
|
||||
}
|
||||
};
|
||||
@@ -110,66 +186,35 @@ const ConsolidatedTable = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 style={{ textAlign: "center" }}>
|
||||
<>
|
||||
<Navbar/>
|
||||
<div style={styles.main}>
|
||||
<h1 style={styles.header}>
|
||||
Faculty Tables with Download Options
|
||||
</h1>
|
||||
|
||||
<div style={{ marginBottom: "20px", textAlign: "center" }}>
|
||||
|
||||
<div style={styles.buttonRow}>
|
||||
<button
|
||||
onClick={bulkDownload}
|
||||
className="btn btn-primary"
|
||||
style={{
|
||||
padding: "10px 15px",
|
||||
backgroundColor: "#17a2b8",
|
||||
color: "white",
|
||||
textDecoration: "none",
|
||||
borderRadius: "5px",
|
||||
marginRight: "10px",
|
||||
}}
|
||||
style={{ ...styles.button, ...styles.bulkDownloadButton }}
|
||||
>
|
||||
Bulk Download All Tables
|
||||
</button>
|
||||
<button
|
||||
onClick={() => createExcelFile(data, "Consolidated Table")}
|
||||
className="btn btn-primary"
|
||||
style={{
|
||||
padding: "10px 15px",
|
||||
backgroundColor: "#28a745",
|
||||
color: "white",
|
||||
textDecoration: "none",
|
||||
borderRadius: "5px",
|
||||
}}
|
||||
style={{ ...styles.button, ...styles.downloadButton }}
|
||||
>
|
||||
Download Consolidated Table
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={sendEmailsToAllTeachers}
|
||||
className="btn btn-danger"
|
||||
style={{
|
||||
padding: "10px 15px",
|
||||
backgroundColor: "#dc3545",
|
||||
color: "white",
|
||||
textDecoration: "none",
|
||||
borderRadius: "5px",
|
||||
marginLeft: "10px",
|
||||
}}
|
||||
style={{ ...styles.button, ...styles.emailButton }}
|
||||
>
|
||||
Send Emails to All Teachers
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
maxHeight: "70vh",
|
||||
overflowY: "auto",
|
||||
border: "1px solid #ccc",
|
||||
padding: "10px",
|
||||
borderRadius: "5px",
|
||||
backgroundColor: "#f9f9f9",
|
||||
}}
|
||||
>
|
||||
<div style={styles.tableContainer}>
|
||||
{currentTeachers.map((teacher, index) => {
|
||||
const teacherData = data.filter((row) => row.Name === teacher);
|
||||
return (
|
||||
@@ -180,93 +225,71 @@ const ConsolidatedTable = () => {
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
cursor: "pointer",
|
||||
backgroundColor: "#ffffff",
|
||||
color: "white",
|
||||
padding: "10px",
|
||||
borderRadius: "5px",
|
||||
backgroundColor: "#ffffff",
|
||||
boxShadow: "0 2px 4px rgba(0,0,0,0.1)"
|
||||
}}
|
||||
onClick={() => setExpandedTeacher(expandedTeacher === teacher ? null : teacher)}
|
||||
>
|
||||
<h2 style={{color:'black', margin: 0 }}>{teacher}'s Table</h2>
|
||||
<h2 style={{ color: "black", margin: 0, fontSize: "1.5rem", }}>{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",
|
||||
}}
|
||||
style={{ ...styles.button, backgroundColor: "#007bff" }}
|
||||
>
|
||||
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",
|
||||
}}
|
||||
style={{ ...styles.button, backgroundColor: "#6c757d" }}
|
||||
>
|
||||
Send {teacher}'s CSV via Email
|
||||
Send {teacher}'s XSL via Email
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{expandedTeacher === teacher && (
|
||||
<table
|
||||
border="1"
|
||||
style={{
|
||||
width: "100%",
|
||||
textAlign: "left",
|
||||
marginTop: "20px",
|
||||
}}
|
||||
>
|
||||
<table style={styles.table}>
|
||||
<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>
|
||||
<th style={styles.th}>Semester</th>
|
||||
<th style={styles.th}>Course Code</th>
|
||||
<th style={styles.th}>Course Name</th>
|
||||
<th style={styles.th}>Exam Type</th>
|
||||
<th style={styles.th}>Year</th>
|
||||
<th style={styles.th}>Marks</th>
|
||||
<th style={styles.th}>Name</th>
|
||||
<th style={styles.th}>Affiliation/College</th>
|
||||
<th style={styles.th}>Highest Qualification</th>
|
||||
<th style={styles.th}>Career Experience</th>
|
||||
<th style={styles.th}>Oral/Practical</th>
|
||||
<th style={styles.th}>Assessment</th>
|
||||
<th style={styles.th}>Reassessment</th>
|
||||
<th style={styles.th}>Paper Setting</th>
|
||||
<th style={styles.th}>Moderation</th>
|
||||
<th style={styles.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>
|
||||
<td style={styles.td}>{row.semester}</td>
|
||||
<td style={styles.td}>{row.courseCode}</td>
|
||||
<td style={styles.td}>{row.courseName}</td>
|
||||
<td style={styles.td}>{row.examType}</td>
|
||||
<td style={styles.td}>{row.year}</td>
|
||||
<td style={styles.td}>{row.marks}</td>
|
||||
<td style={styles.td}>{row.Name}</td>
|
||||
<td style={styles.td}>{row.affiliation}</td>
|
||||
<td style={styles.td}>{row.qualification}</td>
|
||||
<td style={styles.td}>{row.experience}</td>
|
||||
<td style={styles.td}>{row.oralPractical}</td>
|
||||
<td style={styles.td}>{row.assessment}</td>
|
||||
<td style={styles.td}>{row.reassessment}</td>
|
||||
<td style={styles.td}>{row.paperSetting}</td>
|
||||
<td style={styles.td}>{row.moderation}</td>
|
||||
<td style={styles.td}>{row.pwdPaperSetting}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
@@ -278,18 +301,11 @@ const ConsolidatedTable = () => {
|
||||
</div>
|
||||
|
||||
{/* Pagination controls */}
|
||||
<div style={{ textAlign: "center", marginTop: "20px" }}>
|
||||
<div style={styles.paginationContainer}>
|
||||
<button
|
||||
onClick={handlePrevPage}
|
||||
disabled={currentPage === 1}
|
||||
style={{
|
||||
padding: "10px 15px",
|
||||
marginRight: "10px",
|
||||
backgroundColor: currentPage === 1 ? "#ccc" : "#007bff",
|
||||
color: "white",
|
||||
borderRadius: "5px",
|
||||
border: "none",
|
||||
}}
|
||||
style={{ ...styles.paginationButton, backgroundColor: currentPage === 1 ? "#ccc" : "#007bff" }}
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
@@ -299,19 +315,13 @@ const ConsolidatedTable = () => {
|
||||
<button
|
||||
onClick={handleNextPage}
|
||||
disabled={currentPage === totalPages}
|
||||
style={{
|
||||
padding: "10px 15px",
|
||||
marginLeft: "10px",
|
||||
backgroundColor: currentPage === totalPages ? "#ccc" : "#007bff",
|
||||
color: "white",
|
||||
borderRadius: "5px",
|
||||
border: "none",
|
||||
}}
|
||||
style={{ ...styles.paginationButton, backgroundColor: currentPage === totalPages ? "#ccc" : "#007bff" }}
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user