B-21962: Create Requested Users Report

src/pages/Admin/RequestedOfficeUsers/RequestedOfficeUserList.jsx

@@ -1,22 +1,32 @@
 import { React } from 'react';
+import { Toolbar } from '@material-ui/core';
 import {
   Datagrid,
   DateField,
   Filter,
   List,
   ReferenceField,
   TextField,
-  TopToolbar,
   ArrayField,
   SearchInput,
   useRecordContext,
+  BulkExportButton,
+  downloadCSV,
+  useListContext,
+  Button,
+  useDataProvider,
 } from 'react-admin';
+import jsonExport from 'jsonexport/dist';
 
 import AdminPagination from 'scenes/SystemAdmin/shared/AdminPagination';
 
 // Overriding the default toolbar
 const ListActions = () => {
-  return <TopToolbar />;
+  return (
+    <Toolbar>
+      <BulkExportButton />
+    </Toolbar>
+  );
 };
 
 const RequestedOfficeUserListFilter = () => (
@@ -29,7 +39,7 @@ const RequestedOfficeUserListFilter = () => (
 
 const defaultSort = { field: 'createdAt', order: 'DESC' };
 
-const RolesTextField = (user) => {
+const UserRolesToString = (user) => {
   const { roles } = user;
 
   let roleStr = '';
@@ -46,32 +56,92 @@ const RolesTextField = (user) => {
 
 const RolesField = () => {
   const record = useRecordContext();
-  return <div>{RolesTextField(record)}</div>;
+  return <div>{UserRolesToString(record)}</div>;
 };
 
-const RequestedOfficeUserList = () => (
-  <List
-    pagination={<AdminPagination />}
-    perPage={25}
-    sort={defaultSort}
-    filters={<RequestedOfficeUserListFilter />}
-    actions={<ListActions />}
-  >
-    <Datagrid bulkActionButtons={false} rowClick="show" data-testid="requested-office-user-fields">
-      <TextField source="id" />
-      <TextField source="email" />
-      <TextField source="firstName" />
-      <TextField source="lastName" />
-      <ReferenceField label="Transportation Office" source="transportationOfficeId" reference="offices" link={false}>
-        <TextField source="name" />
-      </ReferenceField>
-      <TextField source="status" />
-      <DateField showTime source="createdAt" label="Requested on" />
-      <ArrayField source="roles" sortable={false} clickable={false} sort={{ field: 'roleName', order: 'DESC' }}>
-        <RolesField />
-      </ArrayField>
-    </Datagrid>
-  </List>
-);
+const exportButtonHandleOnClick = async (data, dataProvider, selectedIds) => {
+  const allRequestedOfficeUsers = data;
+
+  const selectedUserIdObjects = {};
+  selectedIds.forEach((id) => {
+    if (!selectedUserIdObjects[`${id}`]) {
+      selectedUserIdObjects[`${id}`] = id;
+    }
+  });
+
+  const selectedUsers = [];
+  allRequestedOfficeUsers.forEach((user) => {
+    if (selectedUserIdObjects[`${user.id}`]) {
+      selectedUsers.push(user);
+    }
+  });
+
+  const officeObjects = {};
+  const offices = await dataProvider.getMany('offices');
+  offices.data.forEach((office) => {
+    if (!officeObjects[`${office.id}`]) {
+      officeObjects[`${office.id}`] = office;
+    }
+  });
+
+  const usersWithTransportationOfficeName = selectedUsers.map((user) => ({
+    ...user,
+    transportationOfficeName: officeObjects[user.transportationOfficeId]?.name,
+  }));
+
+  const userToCSV = [];
+  usersWithTransportationOfficeName.forEach((user) => {
+    const userRoles = UserRolesToString(user);
+    const csvUser = {
+      Id: user.id,
+      Email: user.email,
+      'First Name': user.firstName,
+      'Last Name': user.lastName,
+      'Transportation Office': user.transportationOfficeName,
+      Status: user.status,
+      'Requested On': user.createdAt,
+      Roles: userRoles,
+    };
+
+    userToCSV.push(csvUser);
+  });
+
+  jsonExport(userToCSV, (err, csv) => {
+    downloadCSV(csv, 'Requested_Office_Users');
+  });
+};
+
+const CustomBulkActions = ({ selectedIds }) => {
+  const { data } = useListContext();
+  const dataProvider = useDataProvider();
+  return <Button label="Export" onClick={() => exportButtonHandleOnClick(data, dataProvider, selectedIds)} />;
+};
+
+const RequestedOfficeUserList = () => {
+  return (
+    <List
+      pagination={<AdminPagination />}
+      perPage={25}
+      sort={defaultSort}
+      filters={<RequestedOfficeUserListFilter />}
+      actions={<ListActions />}
+    >
+      <Datagrid bulkActionButtons={<CustomBulkActions />} rowClick="show" data-testid="requested-office-user-fields">
+        <TextField source="id" />
+        <TextField source="email" />
+        <TextField source="firstName" />
+        <TextField source="lastName" />
+        <ReferenceField label="Transportation Office" source="transportationOfficeId" reference="offices" link={false}>
+          <TextField source="name" />
+        </ReferenceField>
+        <TextField source="status" />
+        <DateField showTime source="createdAt" label="Requested on" />
+        <ArrayField source="roles" sortable={false} clickable={false} sort={{ field: 'roleName', order: 'DESC' }}>
+          <RolesField />
+        </ArrayField>
+      </Datagrid>
+    </List>
+  );
+};
 
 export default RequestedOfficeUserList;