Exporting To Csv - setup missing exports and fix resource forecast (#…

…2210) * set up export utility function * set up exporting * change exports * fix comments * remove logs * remove unused function
bcgov · May 8, 2024 · a77774b · a77774b
1 parent 8971d70
commit a77774b
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 23 deletions.
diff --git a/epictrack-web/src/components/insights/Project/ProjectListing.tsx b/epictrack-web/src/components/insights/Project/ProjectListing.tsx
@@ -255,7 +255,7 @@ const ProjectList = () => {
             justifyContent: "right",
           }}
         >
-          {/* <Tooltip title="Export to csv">
+          <Tooltip title="Export to csv">
             <IconButton
               onClick={() =>
                 exportToCsv({
@@ -267,7 +267,7 @@ const ProjectList = () => {
             >
               <FileDownload />
             </IconButton>
-          </Tooltip> */}
+          </Tooltip>
         </Box>
       )}
       enablePagination

diff --git a/epictrack-web/src/components/reports/resourceForecast/ResourceForecast.tsx b/epictrack-web/src/components/reports/resourceForecast/ResourceForecast.tsx
@@ -191,6 +191,7 @@ export default function ResourceForecast() {
   const columns = React.useMemo<MRT_ColumnDef<ResourceForecastModel>[]>(
     () => [
       {
+        accessorKey: "work_title",
         header: "Work",
         enableHiding: false,
         filterVariant: "multi-select",

diff --git a/epictrack-web/src/components/user/UserList.tsx b/epictrack-web/src/components/user/UserList.tsx
@@ -12,7 +12,7 @@ import {
   Grid,
   Tooltip,
 } from "@mui/material";
-import { Edit } from "@mui/icons-material";
+import { Edit, FileDownload } from "@mui/icons-material";
 import { Group, User } from "../../models/user";
 import { RESULT_STATUS } from "../../constants/application-constant";
 import UserService from "../../services/userService";
@@ -24,6 +24,7 @@ import MasterTrackTable, {
 import { UserGroupUpdate } from "../../services/userService/type";
 import { useAppSelector } from "../../hooks";
 import { searchFilter } from "components/shared/MasterTrackTable/filters";
+import { exportToCsv } from "components/shared/MasterTrackTable/utils";
 
 const UserList = () => {
   const [isValidGroup, setIsValidGroup] = React.useState<boolean>(true);
@@ -195,6 +196,29 @@ const UserList = () => {
                 </>
               );
             }}
+            renderTopToolbarCustomActions={({ table }) => (
+              <Box
+                sx={{
+                  width: "100%",
+                  display: "flex",
+                  justifyContent: "right",
+                }}
+              >
+                <Tooltip title="Export to csv">
+                  <IconButton
+                    onClick={() =>
+                      exportToCsv({
+                        table,
+                        downloadDate: new Date().toISOString(),
+                        filenamePrefix: "users-listing",
+                      })
+                    }
+                  >
+                    <FileDownload />
+                  </IconButton>
+                </Tooltip>
+              </Box>
+            )}
           />
         </Grid>
       </ETPageContainer>

diff --git a/epictrack-web/src/components/workPlan/team/TeamList.tsx b/epictrack-web/src/components/workPlan/team/TeamList.tsx
@@ -1,10 +1,10 @@
-import { Button, Grid } from "@mui/material";
+import { Button, Grid, Tooltip } from "@mui/material";
 import React, { useMemo } from "react";
 import { StaffWorkRole } from "../../../models/staff";
 import workService from "../../../services/workService/workService";
 import { WorkplanContext } from "../WorkPlanContext";
 import { MRT_ColumnDef } from "material-react-table";
-import { ETGridTitle } from "../../shared";
+import { ETGridTitle, IButton } from "../../shared";
 import MasterTrackTable from "../../shared/MasterTrackTable";
 import { showNotification } from "../../shared/notificationProvider";
 import {
@@ -22,6 +22,11 @@ import { useAppSelector } from "hooks";
 import { Restricted, hasPermission } from "components/shared/restricted";
 import { WorkStaffRole } from "models/role";
 import { unEditableTeamMembers } from "./constants";
+import { exportToCsv } from "components/shared/MasterTrackTable/utils";
+import Icons from "../../icons";
+import { IconProps } from "components/icons/type";
+
+const DownloadIcon: React.FC<IconProps> = Icons["DownloadIcon"];
 
 const TeamList = () => {
   const [roles, setRoles] = React.useState<string[]>([]);
@@ -202,32 +207,67 @@ const TeamList = () => {
     <>
       {teamMembers.length > 0 && (
         <Grid container rowSpacing={1}>
-          <Grid item xs={12}>
-            <Restricted
-              allowed={[ROLES.CREATE]}
-              exception={userIsTeamMember}
-              errorProps={{
-                disabled: true,
-              }}
-            >
-              <Button
-                variant="contained"
-                startIcon={<AddIcon />}
-                onClick={() => setShowTeamForm(true)}
-              >
-                Team Member
-              </Button>
-            </Restricted>
-          </Grid>
           <Grid item xs={12}>
             <MasterTrackTable
               columns={columns}
               data={teamMembers}
-              enableTopToolbar={false}
+              enableTopToolbar={true}
               state={{
                 isLoading: loading,
                 showGlobalFilter: true,
               }}
+              renderTopToolbarCustomActions={({ table }) => (
+                <Grid container rowSpacing={1}>
+                  <Grid item xs={6}>
+                    <Restricted
+                      allowed={[ROLES.CREATE]}
+                      exception={userIsTeamMember}
+                      errorProps={{
+                        disabled: true,
+                      }}
+                    >
+                      <Button
+                        variant="contained"
+                        startIcon={<AddIcon />}
+                        onClick={() => setShowTeamForm(true)}
+                      >
+                        Team Member
+                      </Button>
+                    </Restricted>
+                  </Grid>
+                  <Grid
+                    item
+                    xs={6}
+                    sx={{
+                      display: "flex",
+                      justifyContent: "right",
+                      gap: "0.5rem",
+                    }}
+                  >
+                    <Tooltip title="Export Team List to CSV">
+                      <Restricted
+                        allowed={[ROLES.CREATE]}
+                        exception={userIsTeamMember}
+                        errorProps={{
+                          disabled: true,
+                        }}
+                      >
+                        <IButton
+                          onClick={() =>
+                            exportToCsv({
+                              table,
+                              downloadDate: new Date().toISOString(),
+                              filenamePrefix: "teams-list",
+                            })
+                          }
+                        >
+                          <DownloadIcon className="icon" />
+                        </IButton>
+                      </Restricted>
+                    </Tooltip>
+                  </Grid>
+                </Grid>
+              )}
             />
           </Grid>
         </Grid>