Merge pull request #753 from AI4Bharat/autosave3

added download csv for reports
AI4Bharat · Jul 16, 2024 · 79ca550 · 79ca550
2 parents feda074 + 6d74b3c
commit 79ca550
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 1 deletion.
diff --git a/src/containers/Organization/OrganizationReport.jsx b/src/containers/Organization/OrganizationReport.jsx
@@ -37,6 +37,7 @@ import {
 //Themes
 import { ProjectStyle, TableStyles } from "styles";
 import { tableTheme } from "theme";
+import { Download } from "@mui/icons-material";
 import { DatePicker } from "@mui/x-date-pickers";
 import moment from "moment";
 
@@ -131,6 +132,26 @@ const OrganizationReport = () => {
     dispatch(APITransport(apiObj));
   };
 
+  const handleDownloadReportCsv = () => {
+    var header = '';
+    columns.forEach((item) => {
+      header += item.label + ","
+    })
+    var data = tableData.map((item) => {
+      var row = item;
+      return row.join(",");
+    }).join("\n");
+    const blob = new Blob([header.slice(0,-1)+'\n'+data], { type: 'text/csv;charset=utf-8;' });
+    const link = document.createElement("a");
+    const url = URL.createObjectURL(blob);
+    link.setAttribute("href", url);
+    link.setAttribute("download", "reports.csv");
+    link.style.visibility = 'hidden';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
   useEffect(() => {
     if (reportsLevel === "") return;
     if (showUserReportProjectColumn) {
@@ -302,6 +323,7 @@ const OrganizationReport = () => {
           </Tooltip>
         </Button>
         {reportsLevel && (
+          <>
           <Button
             style={{ minWidth: "25px" }}
             onClick={() => handleDownloadReport()}
@@ -310,6 +332,15 @@ const OrganizationReport = () => {
               <MailIcon sx={{ color: "rgba(0, 0, 0, 0.54)" }} />
             </Tooltip>
           </Button>
+           <Button
+           style={{ minWidth: "25px" }}
+           onClick={() => handleDownloadReportCsv()}
+         >
+           <Tooltip title={"Download CSV"}>
+             <Download sx={{ color: "rgba(0, 0, 0, 0.54)" }} />
+           </Tooltip>
+         </Button>
+         </>
         )}
       </>
     );

diff --git a/src/containers/Organization/Project/ProjectReport.jsx b/src/containers/Organization/Project/ProjectReport.jsx
@@ -32,6 +32,7 @@ import ViewColumnIcon from "@mui/icons-material/ViewColumn";
 import MailIcon from "@mui/icons-material/Mail";
 import { ColumnSelector } from "common";
 import constants from "redux/constants";
+import { Download } from "@mui/icons-material";
 
 const ProjectReport = () => {
   const { projectId } = useParams();
@@ -88,6 +89,26 @@ const ProjectReport = () => {
     dispatch(APITransport(apiObj));
   };
 
+  const handleDownloadReportCsv = () => {
+    var header = '';
+    columns.forEach((item) => {
+      header += item.label + ","
+    })
+    var data = tableData.map((item) => {
+      var row = item;
+      return row.join(",");
+    }).join("\n");
+    const blob = new Blob([header.slice(0,-1)+'\n'+data], { type: 'text/csv;charset=utf-8;' });
+    const link = document.createElement("a");
+    const url = URL.createObjectURL(blob);
+    link.setAttribute("href", url);
+    link.setAttribute("download", "reports.csv");
+    link.style.visibility = 'hidden';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
   useEffect(() => {
     return () => {
       setTableData([]);
@@ -192,14 +213,23 @@ const ProjectReport = () => {
           </Tooltip>
         </Button>
         {reportsLevel && (
-          <Button
+          <><Button
             style={{ minWidth: "25px" }}
             onClick={() => handleDownloadReport()}
           >
             <Tooltip title={"Email Report"}>
               <MailIcon sx={{ color: "rgba(0, 0, 0, 0.54)" }} />
             </Tooltip>
           </Button>
+          <Button
+            style={{ minWidth: "25px" }}
+            onClick={() => handleDownloadReportCsv()}
+          >
+            <Tooltip title={"Download CSV"}>
+              <Download sx={{ color: "rgba(0, 0, 0, 0.54)" }} />
+            </Tooltip>
+          </Button>
+          </>
         )}
       </>
     );