XLSX- CSS and mail-xlsx
This commit is contained in:
Harshitha Shetty
@@ -1,12 +1,201 @@
|
||||
// import React, { useState, useEffect } from "react";
|
||||
// import axios from "axios";
|
||||
|
||||
// const ConsolidatedTable = () => {
|
||||
// const [data, setData] = useState([]);
|
||||
// const [loading, setLoading] = useState(true);
|
||||
|
||||
// useEffect(() => {
|
||||
// const fetchData = async () => {
|
||||
// try {
|
||||
// const response = await axios.get("http://localhost:8080/api/table/consolidated-table");
|
||||
// setData(response.data);
|
||||
// setLoading(false);
|
||||
// } catch (error) {
|
||||
// console.error("Error fetching table data:", error);
|
||||
// setLoading(false);
|
||||
// }
|
||||
// };
|
||||
|
||||
// fetchData();
|
||||
// }, []);
|
||||
|
||||
// if (loading) {
|
||||
// return <div>Loading...</div>;
|
||||
// }
|
||||
|
||||
// return (
|
||||
// <div>
|
||||
// <h1>Consolidated Table</h1>
|
||||
// <table border="1" style={{ width: "100%", textAlign: "left" }}>
|
||||
// <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>
|
||||
// {data.map((row, index) => (
|
||||
// <tr key={index}>
|
||||
// <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>
|
||||
// );
|
||||
// };
|
||||
|
||||
// export default ConsolidatedTable;
|
||||
|
||||
|
||||
|
||||
// import React, { useState, useEffect } from "react";
|
||||
// import axios from "axios";
|
||||
// import { CSVLink } from "react-csv";
|
||||
|
||||
// const ConsolidatedTable = () => {
|
||||
// const [data, setData] = useState([]);
|
||||
// const [loading, setLoading] = useState(true);
|
||||
|
||||
// useEffect(() => {
|
||||
// const fetchData = async () => {
|
||||
// try {
|
||||
// const response = await axios.get("http://localhost:8080/api/table/consolidated-table");
|
||||
// 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 faculty names
|
||||
// const uniqueTeachers = [...new Set(data.map((row) => row.Name))];
|
||||
|
||||
// return (
|
||||
// <div>
|
||||
// <h1>Faculty Tables with Download Option</h1>
|
||||
// {uniqueTeachers.map((teacher, index) => {
|
||||
// // Filter rows for the current teacher
|
||||
// const teacherData = data.filter((row) => row.Name === teacher);
|
||||
|
||||
// return (
|
||||
// <div key={index} style={{ marginBottom: "20px" }}>
|
||||
// <h2>{teacher}'s Table</h2>
|
||||
// <table border="1" style={{ width: "100%", textAlign: "left", marginBottom: "10px" }}>
|
||||
// <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>
|
||||
// {/* CSV Download Button */}
|
||||
// <CSVLink
|
||||
// data={teacherData}
|
||||
// filename={`${teacher.replace(/\s+/g, "_")}_table.csv`}
|
||||
// className="btn btn-primary"
|
||||
// style={{
|
||||
// padding: "10px 15px",
|
||||
// backgroundColor: "#007bff",
|
||||
// color: "white",
|
||||
// textDecoration: "none",
|
||||
// borderRadius: "5px",
|
||||
// }}
|
||||
// >
|
||||
// Download CSV
|
||||
// </CSVLink>
|
||||
// </div>
|
||||
// );
|
||||
// })}
|
||||
// </div>
|
||||
// );
|
||||
// };
|
||||
|
||||
// export default ConsolidatedTable;
|
||||
|
||||
|
||||
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import axios from "axios";
|
||||
import { CSVLink } from "react-csv";
|
||||
import { sendEmail } from "../api";
|
||||
|
||||
const ConsolidatedTable = () => {
|
||||
const [data, setData] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const csvLinksRef = useRef([]); // Ref to store CSV links for bulk download
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
@@ -32,13 +221,131 @@ const ConsolidatedTable = () => {
|
||||
// Extract unique faculty names
|
||||
const uniqueTeachers = [...new Set(data.map((row) => row.Name))];
|
||||
|
||||
const handleBulkDownload = () => {
|
||||
// Trigger all individual downloads programmatically
|
||||
csvLinksRef.current.forEach((csvLink) => {
|
||||
if (csvLink) {
|
||||
csvLink.link.click();
|
||||
const createExcelFile = (teacherData, teacherName) => {
|
||||
const workbook = XLSX.utils.book_new();
|
||||
|
||||
// Define header information
|
||||
const headerInfo = [
|
||||
["Somaiya Vidyavihar University"],
|
||||
["K. J. SOMAIYA COLLEGE OF ENGINEERING"],
|
||||
[
|
||||
"Appointment of Internal Examiners for Paper Setting / OR/PR/Assessment/Reassessment",
|
||||
],
|
||||
["Class: B Tech/M Tech/Honour/Minor"],
|
||||
["Department - Computer Engineering"],
|
||||
[],
|
||||
];
|
||||
|
||||
// Add table headers
|
||||
const tableHeaders = [
|
||||
[
|
||||
"Sr No",
|
||||
"Semester",
|
||||
"Course Code",
|
||||
"Course Name",
|
||||
"Exam Type",
|
||||
"Year",
|
||||
"Marks",
|
||||
"Surname",
|
||||
"First Name",
|
||||
"Middle Name",
|
||||
"Affiliation/College",
|
||||
"Highest Qualification",
|
||||
"Career Experience",
|
||||
"Oral/Practical",
|
||||
"Assessment",
|
||||
"Reassessment",
|
||||
"Paper Setting",
|
||||
"Moderation",
|
||||
"PwD Paper Setting",
|
||||
],
|
||||
];
|
||||
|
||||
// Add table data
|
||||
const dataRows = teacherData.map((row, index) => [
|
||||
index + 1,
|
||||
row.semester,
|
||||
row.courseCode,
|
||||
row.courseName,
|
||||
row.examType,
|
||||
row.year,
|
||||
row.marks,
|
||||
row.surname,
|
||||
row.firstName,
|
||||
row.middleName,
|
||||
row.affiliation,
|
||||
row.qualification,
|
||||
row.experience,
|
||||
row.oralPractical,
|
||||
row.assessment,
|
||||
row.reassessment,
|
||||
row.paperSetting,
|
||||
row.moderation,
|
||||
row.pwdPaperSetting,
|
||||
]);
|
||||
|
||||
// Combine all rows
|
||||
const sheetData = [...headerInfo, ...tableHeaders, ...dataRows];
|
||||
const worksheet = XLSX.utils.aoa_to_sheet(sheetData);
|
||||
|
||||
// Add merged cells
|
||||
worksheet["!merges"] = [
|
||||
{ s: { r: 0, c: 0 }, e: { r: 0, c: 18 } },
|
||||
{ s: { r: 1, c: 0 }, e: { r: 1, c: 18 } },
|
||||
{ s: { r: 2, c: 0 }, e: { r: 2, c: 18 } },
|
||||
{ s: { r: 3, c: 0 }, e: { r: 3, c: 18 } },
|
||||
{ s: { r: 4, c: 0 }, e: { r: 4, c: 18 } },
|
||||
];
|
||||
|
||||
// Define styles
|
||||
const boldStyle = {
|
||||
font: { bold: true, name: "Times New Roman", sz: 12 },
|
||||
alignment: { horizontal: "center", vertical: "center" },
|
||||
};
|
||||
|
||||
const redStyle = {
|
||||
font: { color: { rgb: "FF0000" }, name: "Times New Roman", sz: 12 },
|
||||
alignment: { horizontal: "center", vertical: "center" },
|
||||
};
|
||||
|
||||
const normalStyle = {
|
||||
font: { name: "Times New Roman", sz: 12 },
|
||||
};
|
||||
|
||||
// Apply styles to header
|
||||
const headerRanges = [
|
||||
{ row: 0, style: boldStyle },
|
||||
{ row: 1, style: boldStyle },
|
||||
{ row: 2, style: boldStyle },
|
||||
{ row: 3, style: boldStyle },
|
||||
{ row: 4, style: redStyle },
|
||||
];
|
||||
|
||||
headerRanges.forEach(({ row, style }) => {
|
||||
for (let col = 0; col <= 18; col++) {
|
||||
const cellAddress = XLSX.utils.encode_cell({ r: row, c: col });
|
||||
if (!worksheet[cellAddress]) continue; // Skip empty cells
|
||||
worksheet[cellAddress].s = style;
|
||||
}
|
||||
});
|
||||
|
||||
// Apply normal font style to all cells
|
||||
Object.keys(worksheet).forEach((key) => {
|
||||
if (worksheet[key] && key[0] !== "!") {
|
||||
worksheet[key].s = worksheet[key].s || normalStyle;
|
||||
}
|
||||
});
|
||||
|
||||
// Add worksheet to workbook and save file
|
||||
XLSX.utils.book_append_sheet(workbook, worksheet, teacherName);
|
||||
XLSX.writeFile(workbook, `${teacherName.replace(/\s+/g, "_")}_Table.xlsx`);
|
||||
};
|
||||
|
||||
const bulkDownload = () => {
|
||||
uniqueTeachers.forEach((teacher) => {
|
||||
const teacherData = data.filter((row) => row.Name === teacher);
|
||||
createExcelFile(teacherData, teacher);
|
||||
});
|
||||
};
|
||||
|
||||
const handleSendEmail = async (teacher, teacherData) => {
|
||||
@@ -83,13 +390,25 @@ const ConsolidatedTable = () => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Faculty Tables with Download Options</h1>
|
||||
<h1 style={{ textAlign: "center" }}>Faculty Tables with Download Options</h1>
|
||||
|
||||
{/* Bulk Download Button for Consolidated Data */}
|
||||
<div style={{ marginBottom: "20px" }}>
|
||||
<CSVLink
|
||||
data={data}
|
||||
filename="Consolidated_Faculty_Table.csv"
|
||||
<div style={{ marginBottom: "20px", textAlign: "center" }}>
|
||||
<button
|
||||
onClick={bulkDownload}
|
||||
className="btn btn-primary"
|
||||
style={{
|
||||
padding: "10px 15px",
|
||||
backgroundColor: "#17a2b8",
|
||||
color: "white",
|
||||
textDecoration: "none",
|
||||
borderRadius: "5px",
|
||||
marginRight: "10px",
|
||||
}}
|
||||
>
|
||||
Bulk Download All Tables
|
||||
</button>
|
||||
<button
|
||||
onClick={() => createExcelFile(data, "Consolidated Table")}
|
||||
className="btn btn-primary"
|
||||
style={{
|
||||
padding: "10px 15px",
|
||||
@@ -97,33 +416,16 @@ const ConsolidatedTable = () => {
|
||||
color: "white",
|
||||
textDecoration: "none",
|
||||
borderRadius: "5px",
|
||||
marginRight: "10px",
|
||||
}}
|
||||
>
|
||||
Download Consolidated CSV
|
||||
</CSVLink>
|
||||
|
||||
{/* Bulk Download Button for Individual CSV Files */}
|
||||
<button
|
||||
onClick={handleBulkDownload}
|
||||
className="btn btn-secondary"
|
||||
style={{
|
||||
padding: "10px 15px",
|
||||
backgroundColor: "#17a2b8",
|
||||
color: "white",
|
||||
textDecoration: "none",
|
||||
borderRadius: "5px",
|
||||
}}
|
||||
>
|
||||
Download All Individual CSVs
|
||||
Download Consolidated Table
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Scrollable Content */}
|
||||
<div
|
||||
style={{
|
||||
maxHeight: "70vh", // Set max height for the scrollable container
|
||||
overflowY: "auto", // Enable vertical scrolling
|
||||
maxHeight: "70vh",
|
||||
overflowY: "auto",
|
||||
border: "1px solid #ccc",
|
||||
padding: "10px",
|
||||
borderRadius: "5px",
|
||||
@@ -131,20 +433,12 @@ const ConsolidatedTable = () => {
|
||||
}}
|
||||
>
|
||||
{uniqueTeachers.map((teacher, index) => {
|
||||
// Filter rows for the current teacher
|
||||
const teacherData = data.filter((row) => row.Name === teacher);
|
||||
|
||||
return (
|
||||
<div key={index} style={{ marginBottom: "20px" }}>
|
||||
<h2>{teacher}'s Table</h2>
|
||||
<table
|
||||
border="1"
|
||||
style={{
|
||||
width: "100%",
|
||||
textAlign: "left",
|
||||
marginBottom: "10px",
|
||||
}}
|
||||
>
|
||||
<table border="1" style={{ width: "100%", textAlign: "left", marginBottom: "10px" }}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Semester</th>
|
||||
@@ -188,10 +482,9 @@ const ConsolidatedTable = () => {
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{/* Individual CSV Download Button */}
|
||||
<CSVLink
|
||||
data={teacherData}
|
||||
filename={`${teacher.replace(/\s+/g, "_")}_table.csv`}
|
||||
|
||||
<button
|
||||
onClick={() => createExcelFile(teacherData, teacher)}
|
||||
className="btn btn-primary"
|
||||
style={{
|
||||
padding: "10px 15px",
|
||||
@@ -200,24 +493,9 @@ const ConsolidatedTable = () => {
|
||||
textDecoration: "none",
|
||||
borderRadius: "5px",
|
||||
}}
|
||||
ref={(el) => (csvLinksRef.current[index] = el)} // Store ref for bulk download
|
||||
>
|
||||
Download {teacher}'s CSV
|
||||
</CSVLink>
|
||||
{/* 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>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
Reference in New Issue
Block a user