Adding Export to CSV function

bcgov · Oct 11, 2024 · c48c317 · c48c317
1 parent c9d35b7
commit c48c317
Show file tree

Hide file tree

Showing 3 changed files with 147 additions and 66 deletions.
diff --git a/roadside-forms-frontend/frontend_web_app/package-lock.json b/roadside-forms-frontend/frontend_web_app/package-lock.json
diff --git a/roadside-forms-frontend/frontend_web_app/package.json b/roadside-forms-frontend/frontend_web_app/package.json
@@ -27,6 +27,7 @@
     "react-bootstrap-table-next": "^4.0.3",
     "react-bootstrap-table2-filter": "^1.3.3",
     "react-bootstrap-table2-paginator": "^2.1.2",
+    "react-bootstrap-table2-toolkit": "^2.1.3",
     "react-dom": "^18.3.1",
     "react-redux": "^9.1.2",
     "react-router-dom": "6.19.0",

diff --git a/...e-forms-frontend/frontend_web_app/src/components/userAdminDashboard/userAdminDashboard.js b/...e-forms-frontend/frontend_web_app/src/components/userAdminDashboard/userAdminDashboard.js
@@ -4,6 +4,7 @@ import { useNavigate } from "react-router-dom";
 import BootstrapTable from 'react-bootstrap-table-next';
 import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
 import paginationFactory from 'react-bootstrap-table2-paginator';
+import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit';
 import Button from "react-bootstrap/Button";
 import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
@@ -19,6 +20,8 @@ import { UserApi } from "../../api/userApi";
 import { SearchableSelect } from "../common/Select/SearchableSelect";
 import "./userAdminDashboard.scss";
 
+const { ExportCSVButton } = CSVExport;
+
 export const UserAdminDashboard = () => {
   const initialValues = {
     user: {},
@@ -135,7 +138,6 @@ export const UserAdminDashboard = () => {
     setTimeout(() => setShowSuccessMessage(false), 10000); // Hide after 10 seconds
   };
 
-
   const filteredData = useMemo(() => {
     if (showNewUsersOnly) {
       return data.filter(user => !user.approved_dt);
@@ -216,6 +218,12 @@ export const UserAdminDashboard = () => {
       text: 'Date Applied',
       sort: true,
       formatter: (cell) => moment(cell).tz("America/Vancouver").format("YYYY-MM-DD HH:mm"),
+      csvFormatter: (cell) => {
+        if (cell === null || cell === undefined) {
+          return '';
+        }
+        return moment(cell).tz("America/Vancouver").format("YYYY-MM-DD HH:mm");
+      },
     },
     {
       dataField: 'last_active',
@@ -227,10 +235,17 @@ export const UserAdminDashboard = () => {
         }
         return moment(cell).tz("America/Vancouver").format("YYYY-MM-DD HH:mm");
       },
+      csvFormatter: (cell) => {
+        if (cell === null || cell === undefined) {
+          return '';
+        }
+        return moment(cell).tz("America/Vancouver").format("YYYY-MM-DD HH:mm");
+      },
     },
     {
       dataField: 'action',
       text: 'Action',
+      csvExport: false,  // This line excludes the column from CSV export
       formatter: (cellContent, row) => (
         row.approved_dt ? (
           <Button
@@ -251,6 +266,22 @@ export const UserAdminDashboard = () => {
     }
   ];
 
+  const ExportCSVButton = (props) => {
+    const handleClick = () => {
+      props.onExport();
+    };
+    return (
+      <Button
+        type="submit"
+        variant="primary"
+        size="sm"
+        onClick={handleClick}
+      >
+        Export to CSV
+      </Button>
+    );
+  };
+
   const renderTable = () => {
     if (filteredData.length === 0) {
       return (
@@ -263,18 +294,45 @@ export const UserAdminDashboard = () => {
         </div>
       );
     }
+    const currentDateTime = moment().format('YYYY-MM-DD_HH-mm-ss');
 
     return (
-      <BootstrapTable
+      <ToolkitProvider
         keyField="uniqueId"
         data={filteredData}
         columns={columns}
-        filter={filterFactory()}
-        sort={{ dataField: 'last_name', order: 'asc' }}
-        striped
-        wrapperClasses="table-responsive react-bootstrap-table"
-        pagination={paginationFactory(paginationOptions)}
-      />
+        exportCSV={{
+          fileName: `DF_User_List_${currentDateTime}.csv`,
+          noAutoBOM: false,
+          exportAll: false,
+          onlyExportFiltered: true,
+        }}
+      >
+        {
+          props => (
+            <div>
+              <div className="d-flex justify-content-between align-items-center mb-3">
+                <Form.Check
+                  type="checkbox"
+                  id="show-new-users-only"
+                  label="Show New User Requests only"
+                  checked={showNewUsersOnly}
+                  onChange={(e) => setShowNewUsersOnly(e.target.checked)}
+                />
+                <ExportCSVButton { ...props.csvProps } />
+              </div>
+              <BootstrapTable
+                { ...props.baseProps }
+                filter={filterFactory()}
+                sort={{ dataField: 'last_name', order: 'asc' }}
+                striped
+                wrapperClasses="table-responsive react-bootstrap-table"
+                pagination={paginationFactory(paginationOptions)}
+              />
+            </div>
+          )
+        }
+      </ToolkitProvider>
     );
   };
 
@@ -283,53 +341,44 @@ export const UserAdminDashboard = () => {
   } else {
     return (
       <>
-      {showSuccessMessage && (
+        {showSuccessMessage && (
           <Alert variant="success" onClose={() => setShowSuccessMessage(false)} dismissible>
             {successMessage}
           </Alert>
         )}
         <div className="border-design text-font">
-          <div className="d-flex justify-content-end mb-3">
-            <Form.Check
-              type="checkbox"
-              id="show-new-users-only"
-              label="Show New User Requests only"
-              checked={showNewUsersOnly}
-              onChange={(e) => setShowNewUsersOnly(e.target.checked)}
-            />
-          </div>
           {renderTable()}
           <Formik initialValues={initialValues} onSubmit={(values, formikBag) => {
-          setSelectedUser(values.user.value);
-          setShowAddAdminModal(true);
-        }}>
-          {({ isSubmitting, values }) => (
-            <FormikForm>
-              <Container fluid>
-                <Row>
-                  <Col sm={10}>
-                    <SearchableSelect
-                      label="Grant administrator role to selected user"
-                      className="field-width field-height"
-                      name="user"
-                      options={selectUsers}
-                    />
-                  </Col>
-                  <Col sm={2} className="top-margin">
-                    <Button
-                      type="submit"
-                      variant="primary"
-                      size="sm"
-                      disabled={isSubmitting || !values.user.value}
-                    >
-                      Add as administrator
-                    </Button>
-                  </Col>
-                </Row>
-              </Container>
-            </FormikForm>
-          )}
-        </Formik>
+            setSelectedUser(values.user.value);
+            setShowAddAdminModal(true);
+          }}>
+            {({ isSubmitting, values }) => (
+              <FormikForm>
+                <Container fluid>
+                  <Row>
+                    <Col sm={10}>
+                      <SearchableSelect
+                        label="Grant administrator role to selected user"
+                        className="field-width field-height"
+                        name="user"
+                        options={selectUsers}
+                      />
+                    </Col>
+                    <Col sm={2} className="top-margin">
+                      <Button
+                        type="submit"
+                        variant="primary"
+                        size="sm"
+                        disabled={isSubmitting || !values.user.value}
+                      >
+                        Add as administrator
+                      </Button>
+                    </Col>
+                  </Row>
+                </Container>
+              </FormikForm>
+            )}
+          </Formik>
         </div>
 
         <Modal show={showConfirmModal} onHide={() => setShowConfirmModal(false)}>
@@ -352,25 +401,24 @@ export const UserAdminDashboard = () => {
           </Modal.Footer>
         </Modal>
 
-        {/* Confirmation modal for adding administrator */}
         <Modal show={showAddAdminModal} onHide={() => setShowAddAdminModal(false)}>
-        <Modal.Header closeButton>
-          <Modal.Title>Confirm Action</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          Are you sure you want to grant administrator role to {selectedUser?.first_name} {selectedUser?.last_name}?
-        </Modal.Body>
-        <Modal.Footer>
-          <Button variant="secondary" onClick={() => setShowAddAdminModal(false)}>
-            Cancel
-          </Button>
-          <Button variant="primary" onClick={() => {
-            handleAddAdminConfirm({ user: { value: selectedUser } }, { setSubmitting: () => {} });
-          }}>
-            Confirm
-          </Button>
-        </Modal.Footer>
-      </Modal>
+          <Modal.Header closeButton>
+            <Modal.Title>Confirm Action</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            Are you sure you want to grant administrator role to {selectedUser?.first_name} {selectedUser?.last_name}?
+          </Modal.Body>
+          <Modal.Footer>
+            <Button variant="secondary" onClick={() => setShowAddAdminModal(false)}>
+              Cancel
+            </Button>
+            <Button variant="primary" onClick={() => {
+              handleAddAdminConfirm({ user: { value: selectedUser } }, { setSubmitting: () => {} });
+            }}>
+              Confirm
+            </Button>
+          </Modal.Footer>
+        </Modal>
       </>
     );
   }