From 8c3436f382a1fb579d306cb009be1096eee9e909 Mon Sep 17 00:00:00 2001
From: Sagar Arora <arorasagar163@proton.me>
Date: Sat, 10 Feb 2024 19:13:22 +0530
Subject: [PATCH] add downloaders name to metadata of datagrid export

---
 components/DataGrid/excelUtils.tsx | 29 +++++++++++++++++++++++++++++
 components/DataGrid/index.tsx      | 28 ++++++++++++++++++++++++++--
 2 files changed, 55 insertions(+), 2 deletions(-)
 create mode 100644 components/DataGrid/excelUtils.tsx

diff --git a/components/DataGrid/excelUtils.tsx b/components/DataGrid/excelUtils.tsx
new file mode 100644
index 00000000..a6830313
--- /dev/null
+++ b/components/DataGrid/excelUtils.tsx
@@ -0,0 +1,29 @@
+import ExcelJS from "exceljs";
+import { saveAs } from "file-saver";
+
+function downloadExcel(rows, columns, name, rcname) {
+  const wb = new ExcelJS.Workbook();
+  wb.creator = name;
+  wb.lastModifiedBy = name;
+  wb.created = new Date();
+  wb.lastPrinted = new Date();
+  wb.modified = new Date();
+  const ws = wb.addWorksheet("Sheet 1");
+
+  const headers = columns.map((column) => column.headerName);
+  ws.addRow(headers);
+
+  rows.forEach((row) => {
+    const rowData = columns.map((column) => {
+      const { field } = column;
+      return row[field] || "";
+    });
+    ws.addRow(rowData);
+  });
+
+  wb.xlsx.writeBuffer().then((excelBuffer) => {
+    saveAs(new Blob([excelBuffer]), `${rcname}.xlsx`);
+  });
+}
+
+export default downloadExcel;
diff --git a/components/DataGrid/index.tsx b/components/DataGrid/index.tsx
index 5722794c..b305fc10 100644
--- a/components/DataGrid/index.tsx
+++ b/components/DataGrid/index.tsx
@@ -6,12 +6,20 @@ import {
   GridCellParams,
   GridColDef,
   // GridRowHeightParams,
-  GridToolbar,
+  GridToolbarColumnsButton,
+  GridToolbarContainer,
+  GridToolbarFilterButton,
   MuiEvent,
 } from "@mui/x-data-grid";
+import Button from "@mui/material/Button";
 import Image from "next/image";
 import * as React from "react";
 import { useState } from "react";
+import DownloadIcon from "@mui/icons-material/Download";
+
+import useStore from "@store/store";
+
+import downloadExcel from "./excelUtils";
 
 const StyledGridOverlay = styled("div")(({ theme }) => ({
   display: "flex",
@@ -45,6 +53,16 @@ function CustomNoRowsOverlay() {
     </StyledGridOverlay>
   );
 }
+
+function CustomToolbar({ handleDownload }: { handleDownload: () => void }) {
+  return (
+    <GridToolbarContainer>
+      <GridToolbarColumnsButton />
+      <GridToolbarFilterButton />
+      <Button startIcon={<DownloadIcon />} onClick={handleDownload} />
+    </GridToolbarContainer>
+  );
+}
 interface paramsType {
   rows: any[];
   columns: GridColDef[];
@@ -69,6 +87,11 @@ function Index({
   heighted = false,
 }: paramsType) {
   const [pageSize, setPageSize] = useState<number>(25);
+  const { name, rcName } = useStore();
+
+  const handleDownload = () => {
+    downloadExcel(rows, columns, name, rcName);
+  };
 
   const cols = columns.map((col) => ({
     ...col,
@@ -82,7 +105,8 @@ function Index({
         rows={rows}
         columns={cols}
         components={{
-          Toolbar: GridToolbar,
+          // eslint-disable-next-line react/no-unstable-nested-components
+          Toolbar: () => <CustomToolbar handleDownload={handleDownload} />,
           NoRowsOverlay: CustomNoRowsOverlay,
         }}
         componentsProps={{