Setup Exporting to csv for all grids (#2184)

* set up export utility function * set up exporting * change exports
bcgov · May 6, 2024 · b8ec9d7 · b8ec9d7
1 parent 2b66de2
commit b8ec9d7
Show file tree

Hide file tree

Showing 12 changed files with 273 additions and 11 deletions.
diff --git a/epictrack-web/src/components/indigenousNation/IndigenousNationList.tsx b/epictrack-web/src/components/indigenousNation/IndigenousNationList.tsx
@@ -1,5 +1,14 @@
 import React, { useMemo } from "react";
-import { Avatar, Box, Button, Grid, Stack, Typography } from "@mui/material";
+import {
+  Avatar,
+  Box,
+  Button,
+  Grid,
+  IconButton,
+  Stack,
+  Tooltip,
+  Typography,
+} from "@mui/material";
 import { MRT_ColumnDef } from "material-react-table";
 import indigenousNationService from "../../services/indigenousNationService/indigenousNationService";
 import { FirstNation } from "../../models/firstNation";
@@ -21,6 +30,8 @@ import { debounce } from "lodash";
 import { Palette } from "styles/theme";
 import { useCachedState } from "hooks/useCachedFilters";
 import { ColumnFilter } from "components/shared/MasterTrackTable/type";
+import { exportToCsv } from "../shared/MasterTrackTable/utils";
+import FileDownload from "@mui/icons-material/FileDownload";
 
 const firstNationsColumnFiltersCacheKey =
   "first-nations-listing-column-filters";
@@ -267,7 +278,7 @@ export default function IndigenousNationList() {
               isLoading: ctx.loading,
               showGlobalFilter: true,
             }}
-            renderTopToolbarCustomActions={() => (
+            renderTopToolbarCustomActions={({ table }) => (
               <Box
                 sx={{
                   width: "100%",
@@ -289,6 +300,19 @@ export default function IndigenousNationList() {
                     Create First Nation
                   </Button>
                 </Restricted>
+                <Tooltip title="Export to csv">
+                  <IconButton
+                    onClick={() =>
+                      exportToCsv({
+                        table,
+                        downloadDate: new Date().toISOString(),
+                        filenamePrefix: "first-nations-listing",
+                      })
+                    }
+                  >
+                    <FileDownload />
+                  </IconButton>
+                </Tooltip>
               </Box>
             )}
             onCacheFilters={handleCacheFilters}

diff --git a/epictrack-web/src/components/insights/Project/ProjectListing.tsx b/epictrack-web/src/components/insights/Project/ProjectListing.tsx
@@ -9,6 +9,9 @@ import TableFilter from "components/shared/filterSelect/TableFilter";
 import { searchFilter } from "components/shared/MasterTrackTable/filters";
 import MasterTrackTable from "components/shared/MasterTrackTable";
 import { useProjectsContext } from "./ProjectsContext";
+import { exportToCsv } from "components/shared/MasterTrackTable/utils";
+import { FileDownload } from "@mui/icons-material";
+import { IconButton, Tooltip, Box } from "@mui/material";
 import { sort } from "utils";
 
 const ProjectList = () => {
@@ -213,6 +216,29 @@ const ProjectList = () => {
         showGlobalFilter: true,
         pagination: pagination,
       }}
+      renderTopToolbarCustomActions={({ table }) => (
+        <Box
+          sx={{
+            width: "100%",
+            display: "flex",
+            justifyContent: "right",
+          }}
+        >
+          <Tooltip title="Export to csv">
+            <IconButton
+              onClick={() =>
+                exportToCsv({
+                  table,
+                  downloadDate: new Date().toISOString(),
+                  filenamePrefix: "project-insights-listing",
+                })
+              }
+            >
+              <FileDownload />
+            </IconButton>
+          </Tooltip>
+        </Box>
+      )}
       enablePagination
       muiPaginationProps={{
         rowsPerPageOptions: rowsPerPageOptions(projects.length),

diff --git a/epictrack-web/src/components/insights/Work/Tabs/General/charts/workListing.tsx b/epictrack-web/src/components/insights/Work/Tabs/General/charts/workListing.tsx
@@ -7,6 +7,9 @@ import { searchFilter } from "components/shared/MasterTrackTable/filters";
 import TableFilter from "components/shared/filterSelect/TableFilter";
 import MasterTrackTable from "components/shared/MasterTrackTable";
 import { useGetWorksQuery } from "services/rtkQuery/workInsights";
+import { exportToCsv } from "components/shared/MasterTrackTable/utils";
+import { FileDownload } from "@mui/icons-material";
+import { IconButton, Tooltip, Box } from "@mui/material";
 import { sort } from "utils";
 import { ETGridTitle } from "components/shared";
 
@@ -190,6 +193,29 @@ const WorkList = () => {
         showGlobalFilter: true,
         pagination: pagination,
       }}
+      renderTopToolbarCustomActions={({ table }) => (
+        <Box
+          sx={{
+            width: "100%",
+            display: "flex",
+            justifyContent: "right",
+          }}
+        >
+          <Tooltip title="Export to csv">
+            <IconButton
+              onClick={() =>
+                exportToCsv({
+                  table,
+                  downloadDate: new Date().toISOString(),
+                  filenamePrefix: "general-insights-listing",
+                })
+              }
+            >
+              <FileDownload />
+            </IconButton>
+          </Tooltip>
+        </Box>
+      )}
       enablePagination
       muiPaginationProps={{
         rowsPerPageOptions: rowsPerPageOptions(works.length),

diff --git a/epictrack-web/src/components/insights/Work/Tabs/Partners/charts/WorkList.tsx b/epictrack-web/src/components/insights/Work/Tabs/Partners/charts/WorkList.tsx
@@ -7,6 +7,9 @@ import { searchFilter } from "components/shared/MasterTrackTable/filters";
 import TableFilter from "components/shared/filterSelect/TableFilter";
 import MasterTrackTable from "components/shared/MasterTrackTable";
 import { useGetWorksWithNationsQuery } from "services/rtkQuery/workInsights";
+import { exportToCsv } from "components/shared/MasterTrackTable/utils";
+import { FileDownload } from "@mui/icons-material";
+import { IconButton, Tooltip, Box } from "@mui/material";
 import { sort } from "utils";
 import { ETGridTitle } from "components/shared";
 
@@ -203,6 +206,29 @@ const WorkList = () => {
         showGlobalFilter: true,
         pagination: pagination,
       }}
+      renderTopToolbarCustomActions={({ table }) => (
+        <Box
+          sx={{
+            width: "100%",
+            display: "flex",
+            justifyContent: "right",
+          }}
+        >
+          <Tooltip title="Export to csv">
+            <IconButton
+              onClick={() =>
+                exportToCsv({
+                  table,
+                  downloadDate: new Date().toISOString(),
+                  filenamePrefix: "partners-insights-listing",
+                })
+              }
+            >
+              <FileDownload />
+            </IconButton>
+          </Tooltip>
+        </Box>
+      )}
       enablePagination
       muiPaginationProps={{
         rowsPerPageOptions: rowsPerPageOptions(works.length),

diff --git a/epictrack-web/src/components/insights/Work/Tabs/Staff/Charts/workListing.tsx b/epictrack-web/src/components/insights/Work/Tabs/Staff/Charts/workListing.tsx
@@ -12,6 +12,9 @@ import MasterTrackTable from "components/shared/MasterTrackTable";
 import { WorkStaff } from "models/workStaff";
 import { Role, WorkStaffRole, WorkStaffRoleNames } from "models/role";
 import { useGetWorkStaffsQuery } from "services/rtkQuery/workStaffInsights";
+import { exportToCsv } from "components/shared/MasterTrackTable/utils";
+import { FileDownload } from "@mui/icons-material";
+import { IconButton, Tooltip, Box } from "@mui/material";
 import { sort } from "utils";
 import { useGetWorksQuery } from "services/rtkQuery/workInsights";
 
@@ -265,6 +268,29 @@ const WorkList = () => {
         showGlobalFilter: true,
         pagination: pagination,
       }}
+      renderTopToolbarCustomActions={({ table }) => (
+        <Box
+          sx={{
+            width: "100%",
+            display: "flex",
+            justifyContent: "right",
+          }}
+        >
+          <Tooltip title="Export to csv">
+            <IconButton
+              onClick={() =>
+                exportToCsv({
+                  table,
+                  downloadDate: new Date().toISOString(),
+                  filenamePrefix: "staff-insights-listing",
+                })
+              }
+            >
+              <FileDownload />
+            </IconButton>
+          </Tooltip>
+        </Box>
+      )}
       enablePagination
       muiPaginationProps={{
         rowsPerPageOptions: rowsPerPageOptions(workStaffs?.length || 0),

diff --git a/epictrack-web/src/components/project/ProjectList.tsx b/epictrack-web/src/components/project/ProjectList.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo } from "react";
 import { MRT_ColumnDef } from "material-react-table";
-import { Box, Button, Grid } from "@mui/material";
+import { Box, Button, Grid, Tooltip, IconButton } from "@mui/material";
 import { Project } from "../../models/project";
 import MasterTrackTable from "../shared/MasterTrackTable";
 import { ETGridTitle, ETPageContainer } from "../shared";
@@ -15,6 +15,8 @@ import { ProjectDialog } from "./Dialog";
 import { showNotification } from "components/shared/notificationProvider";
 import { useCachedState } from "hooks/useCachedFilters";
 import { ColumnFilter } from "components/shared/MasterTrackTable/type";
+import { exportToCsv } from "components/shared/MasterTrackTable/utils";
+import { FileDownload } from "@mui/icons-material";
 
 const projectsListingFiltersCacheKey = "projects-listing-filters";
 const ProjectList = () => {
@@ -292,7 +294,7 @@ const ProjectList = () => {
               isLoading: loadingProjects,
               showGlobalFilter: true,
             }}
-            renderTopToolbarCustomActions={() => (
+            renderTopToolbarCustomActions={({ table }) => (
               <Box
                 sx={{
                   width: "100%",
@@ -314,6 +316,19 @@ const ProjectList = () => {
                     Create Project
                   </Button>
                 </Restricted>
+                <Tooltip title="Export to csv">
+                  <IconButton
+                    onClick={() =>
+                      exportToCsv({
+                        table,
+                        downloadDate: new Date().toISOString(),
+                        filenamePrefix: "project-listing",
+                      })
+                    }
+                  >
+                    <FileDownload />
+                  </IconButton>
+                </Tooltip>
               </Box>
             )}
             onCacheFilters={handleCacheFilters}

diff --git a/epictrack-web/src/components/proponent/ProponentList.tsx b/epictrack-web/src/components/proponent/ProponentList.tsx
@@ -1,5 +1,14 @@
 import React, { useContext, useEffect, useMemo, useState } from "react";
-import { Avatar, Box, Button, Grid, Stack, Typography } from "@mui/material";
+import {
+  Avatar,
+  Box,
+  Button,
+  Grid,
+  Stack,
+  Typography,
+  Tooltip,
+  IconButton,
+} from "@mui/material";
 import { MRT_ColumnDef } from "material-react-table";
 import MasterTrackTable from "../shared/MasterTrackTable";
 import { ETCaption2, ETGridTitle, ETPageContainer } from "../shared";
@@ -23,6 +32,8 @@ import { Palette } from "styles/theme";
 import { debounce } from "lodash";
 import { ColumnFilter } from "components/shared/MasterTrackTable/type";
 import { useCachedState } from "hooks/useCachedFilters";
+import { exportToCsv } from "components/shared/MasterTrackTable/utils";
+import { FileDownload } from "@mui/icons-material";
 
 const proponentsListColumnFiltersCacheKey = "proponents-listing-column-filters";
 
@@ -233,7 +244,7 @@ export default function ProponentList() {
               isLoading: ctx.loading,
               showGlobalFilter: true,
             }}
-            renderTopToolbarCustomActions={() => (
+            renderTopToolbarCustomActions={({ table }) => (
               <Box
                 sx={{
                   width: "100%",
@@ -255,6 +266,19 @@ export default function ProponentList() {
                     Create Proponent
                   </Button>
                 </Restricted>
+                <Tooltip title="Export to csv">
+                  <IconButton
+                    onClick={() =>
+                      exportToCsv({
+                        table,
+                        downloadDate: new Date().toISOString(),
+                        filenamePrefix: "proponent-listing",
+                      })
+                    }
+                  >
+                    <FileDownload />
+                  </IconButton>
+                </Tooltip>
               </Box>
             )}
             onCacheFilters={handleCacheFilters}

diff --git a/epictrack-web/src/components/reports/resourceForecast/ResourceForecast.tsx b/epictrack-web/src/components/reports/resourceForecast/ResourceForecast.tsx
@@ -71,6 +71,7 @@ export default function ResourceForecast() {
     );
     setColumnFilters(filteredColumnFilters);
   }, [columnVisibility, setColumnFilters]);
+
   const exportToCsv = React.useCallback(
     async (table: MRT_TableInstance<ResourceForecastModel>) => {
       const filteredResult = table.getFilteredRowModel().flatRows.map((p) => {

diff --git a/epictrack-web/src/components/shared/MasterTrackTable/utils.ts b/epictrack-web/src/components/shared/MasterTrackTable/utils.ts
@@ -1,3 +1,8 @@
+import { json2csv } from "json-2-csv";
+import { dateUtils } from "utils";
+import { MRT_TableInstance } from "material-react-table";
+import { MRT_RowData } from "material-react-table";
+
 export const BLANK_OPTION = "(Blanks)";
 export function getSelectFilterOptions<T>(
   data: T[],
@@ -60,3 +65,37 @@ export const rowsPerPageOptions = (dataSize = 10) => {
 
   return defaultOptions;
 };
+
+interface ExportToCsvOptions<T extends MRT_RowData> {
+  table: MRT_TableInstance<T>;
+  downloadDate: string | null;
+  filenamePrefix: string;
+}
+
+export async function exportToCsv<T extends MRT_RowData>({
+  table,
+  downloadDate,
+  filenamePrefix,
+}: ExportToCsvOptions<T>) {
+  const filteredResult = table
+    .getFilteredRowModel()
+    .flatRows.map((p) => p.original);
+  const columns = table
+    .getVisibleFlatColumns()
+    .map((p) => p.columnDef.id?.toString());
+  const csv = await json2csv(filteredResult, {
+    emptyFieldValue: "",
+    keys: columns as string[],
+  });
+  const url = window.URL.createObjectURL(new Blob([csv as any]));
+  const link = document.createElement("a");
+  link.href = url;
+  link.setAttribute(
+    "download",
+    `${filenamePrefix}-${dateUtils.formatDate(
+      downloadDate ? downloadDate : new Date().toISOString()
+    )}.csv`
+  );
+  document.body.appendChild(link);
+  link.click();
+}