From d96d27154bd274c90007040e1312dee19ec0007f Mon Sep 17 00:00:00 2001
From: Harikrishnan Gopal <118685394+hk151109@users.noreply.github.com>
Date: Thu, 23 Jan 2025 20:39:19 +0530
Subject: [PATCH] bulk download of csv

---
 client/src/Pages/ConsolidatedTable.jsx | 306 +++++++++++++++++++------
 1 file changed, 237 insertions(+), 69 deletions(-)

diff --git a/client/src/Pages/ConsolidatedTable.jsx b/client/src/Pages/ConsolidatedTable.jsx
index f18505c..d38dea5 100644
--- a/client/src/Pages/ConsolidatedTable.jsx
+++ b/client/src/Pages/ConsolidatedTable.jsx
@@ -79,13 +79,124 @@
 
 
 
-import React, { useState, useEffect } from "react";
+// 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";
 
 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 () => {
@@ -109,78 +220,135 @@ 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();
+      }
+    });
+  };
+
   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);
+      <h1>Faculty Tables with Download Options</h1>
 
-        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>
+      {/* Bulk Download Button for Consolidated Data */}
+      <div style={{ marginBottom: "20px" }}>
+        <CSVLink
+          data={data}
+          filename="Consolidated_Faculty_Table.csv"
+          className="btn btn-primary"
+          style={{
+            padding: "10px 15px",
+            backgroundColor: "#28a745",
+            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
+        </button>
+      </div>
+
+      {/* Scrollable Content */}
+      <div
+        style={{
+          maxHeight: "70vh", // Set max height for the scrollable container
+          overflowY: "auto", // Enable vertical scrolling
+          border: "1px solid #ccc",
+          padding: "10px",
+          borderRadius: "5px",
+          backgroundColor: "#f9f9f9",
+        }}
+      >
+        {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>
-                ))}
-              </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>
-        );
-      })}
+                </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>
+              {/* Individual 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",
+                }}
+                ref={(el) => (csvLinksRef.current[index] = el)} // Store ref for bulk download
+              >
+                Download {teacher}'s CSV
+              </CSVLink>
+            </div>
+          );
+        })}
+      </div>
     </div>
   );
 };