[MDS-6095] Minespace Report Pagination (#3240)

* added BE pagination to minespace reports table view * update Reports.spec.tsx * fix sorting of mine reports
bcgov · Sep 10, 2024 · 42fc086 · 42fc086
1 parent 5d16223
commit 42fc086
Show file tree

Hide file tree

Showing 16 changed files with 53 additions and 136 deletions.
diff --git a/...components/common/ResponsivePagination.js → ...components/common/ResponsivePagination.js b/...components/common/ResponsivePagination.js → ...components/common/ResponsivePagination.js
diff --git a/services/core-api/app/api/mines/reports/report_helpers.py b/services/core-api/app/api/mines/reports/report_helpers.py
@@ -15,7 +15,7 @@ def build_filter(cls, model, field, op, argfield):
         return {'model': model, 'field': field, 'op': op, 'value': argfield}
 
     @staticmethod
-    def apply_filters_and_pagination(query, args):
+    def apply_filters_and_pagination(query, args, mine_guid=None):
         sort_models = {
             "mine_report_id": 'MineReport',
             "mine_report_category": 'MineReportCategoryXref',
@@ -24,6 +24,7 @@ def apply_filters_and_pagination(query, args):
             "received_date": 'MineReport',
             "submission_year": 'MineReport',
             "mine_report_status_code": 'MineReportSubmissionStatusCode',
+            "mine_report_status": 'MineReportSubmissionStatusCode',
             "created_by_idir": 'MineReport',
             "mine_name": 'Mine',
         }
@@ -36,6 +37,7 @@ def apply_filters_and_pagination(query, args):
             "received_date": 'received_date',
             "submission_year": 'submission_year',
             "mine_report_status_code": 'mine_report_status_description',
+            "mine_report_status": 'mine_report_status_description',
             "created_by_idir": 'created_by_idir',
             "mine_name": 'mine_name',
         }
@@ -47,7 +49,7 @@ def apply_filters_and_pagination(query, args):
             query = query.join(Mine)
 
         if args["report_type"] or args["report_name"] or (args['sort_field'] and sort_models[
-            args['sort_field']] in ['MineReportCategoryXref', 'MineReportDefinition']):
+            args['sort_field']] in ['MineReportCategoryXref', 'MineReportDefinition'] and not mine_guid):
             query = query.join(
                 MineReportDefinition, MineReport.mine_report_definition_id ==
                                       MineReportDefinition.mine_report_definition_id)
@@ -115,9 +117,12 @@ def apply_filters_and_pagination(query, args):
             ]
             conditions.append({'or': search_conditions})
 
+        if mine_guid:
+            query = query.filter(MineReport.mine_guid == mine_guid)
+
         filtered_query = apply_filters(query, conditions)
 
-        if args['sort_field'] == 'mine_report_status_code':
+        if args['sort_field'] == 'mine_report_status_code' or args['sort_field'] == 'mine_report_status':
             if args['sort_dir'] == 'asc':
                 filtered_query = filtered_query.order_by(
                     asc(MineReport.mine_report_status_description))

diff --git a/services/core-api/app/api/mines/reports/resources/mine_reports.py b/services/core-api/app/api/mines/reports/resources/mine_reports.py
@@ -114,7 +114,7 @@ def get(self, mine_guid):
                 MineReportCategory.mine_report_category == 'TSF'
             )
 
-        records, pagination_details = ReportFilterHelper.apply_filters_and_pagination(query, args)
+        records, pagination_details = ReportFilterHelper.apply_filters_and_pagination(query, args, mine_guid)
 
         if not records:
             raise BadRequest('Unable to fetch reports')

diff --git a/services/core-web/src/components/dashboard/contactsHomePage/ContactHomePage.js b/services/core-web/src/components/dashboard/contactsHomePage/ContactHomePage.js
@@ -18,7 +18,7 @@ import * as FORM from "@/constants/forms";
 import * as Permission from "@/constants/permissions";
 import ContactSearch from "@/components/dashboard/contactsHomePage/ContactSearch";
 import ContactList from "@/components/dashboard/contactsHomePage/ContactList";
-import ResponsivePagination from "@/components/common/ResponsivePagination";
+import ResponsivePagination from "@mds/common/components/common/ResponsivePagination";
 import AuthorizationWrapper from "@/components/common/wrappers/AuthorizationWrapper";
 import * as routes from "@/constants/routes";
 import { modalConfig } from "@/components/modalContent/config";

diff --git a/services/core-web/src/components/dashboard/customHomePage/VarianceTable.js b/services/core-web/src/components/dashboard/customHomePage/VarianceTable.js
@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import * as Strings from "@mds/common/constants/strings";
 import CustomPropTypes from "@/customPropTypes";
-import ResponsivePagination from "@/components/common/ResponsivePagination";
+import ResponsivePagination from "@mds/common/components/common/ResponsivePagination";
 import MineVarianceTable from "@/components/mine/Variances/MineVarianceTable";
 
 /**

diff --git a/services/core-web/src/components/dashboard/majorProjectHomePage/MajorProjectHomePage.js b/services/core-web/src/components/dashboard/majorProjectHomePage/MajorProjectHomePage.js
@@ -18,7 +18,7 @@ import {
 import { getProjects, getProjectPageData } from "@mds/common/redux/selectors/projectSelectors";
 import { bindActionCreators } from "redux";
 import * as router from "@/constants/routes";
-import ResponsivePagination from "@/components/common/ResponsivePagination";
+import ResponsivePagination from "@mds/common/components/common/ResponsivePagination";
 import CustomPropTypes from "@/customPropTypes";
 import MajorProjectSearch from "./MajorProjectSearch";
 import MajorProjectTable from "./MajorProjectTable";

diff --git a/services/core-web/src/components/dashboard/minesHomePage/Dashboard.js b/services/core-web/src/components/dashboard/minesHomePage/Dashboard.js
@@ -30,7 +30,7 @@ import {
 } from "@mds/common/redux/selectors/staticContentSelectors";
 import * as Strings from "@mds/common/constants/strings";
 import { PageTracker } from "@common/utils/trackers";
-import ResponsivePagination from "@/components/common/ResponsivePagination";
+import ResponsivePagination from "@mds/common/components/common/ResponsivePagination";
 import CustomPropTypes from "@/customPropTypes";
 import MineList from "@/components/dashboard/minesHomePage/MineList";
 import MineSearch from "@/components/dashboard/minesHomePage/MineSearch";

diff --git a/services/core-web/src/components/dashboard/noticeOfWorkHomePage/NoticeOfWorkHomePage.tsx b/services/core-web/src/components/dashboard/noticeOfWorkHomePage/NoticeOfWorkHomePage.tsx
@@ -18,7 +18,7 @@ import {
 import * as routes from "@/constants/routes";
 import NoticeOfWorkTable from "@/components/dashboard/noticeOfWorkHomePage/NoticeOfWorkTable";
 import NoticeOfWorkSearch from "@/components/dashboard/noticeOfWorkHomePage/NoticeOfWorkSearch";
-import ResponsivePagination from "@/components/common/ResponsivePagination";
+import ResponsivePagination from "@mds/common/components/common/ResponsivePagination";
 import { PageTracker } from "@common/utils/trackers";
 import { INoticeOfWorkApplication, IPageData, IOption, INoticeOfWork } from "@mds/common";
 import { RootState } from "@/App";

diff --git a/services/core-web/src/components/dashboard/reportsHomePage/ReportsTable.tsx b/services/core-web/src/components/dashboard/reportsHomePage/ReportsTable.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from "react";
-import ResponsivePagination from "@/components/common/ResponsivePagination";
+import ResponsivePagination from "@mds/common/components/common/ResponsivePagination";
 import MineReportTable from "@/components/mine/Reports/MineReportTable";
 import { IMineReport, IPageData, MineReportParams } from "@mds/common";
 

diff --git a/services/core-web/src/components/mine/Reports/MineReportInfo.tsx b/services/core-web/src/components/mine/Reports/MineReportInfo.tsx
@@ -28,7 +28,7 @@ import { Feature, IMine, MINE_REPORTS_ENUM, MineReportParams, MineReportType } f
 import PlusOutlined from "@ant-design/icons/PlusOutlined";
 import { useFeatureFlag } from "@mds/common/providers/featureFlags/useFeatureFlag";
 import { RequestReportForm } from "@/components/Forms/reports/RequestReportForm";
-import ResponsivePagination from "@/components/common/ResponsivePagination";
+import ResponsivePagination from "@mds/common/components/common/ResponsivePagination";
 
 const defaultParams: MineReportParams = {
   report_name: undefined,

diff --git a/services/core-web/src/components/mine/Tailings/MineTailingsInfoTabs.tsx b/services/core-web/src/components/mine/Tailings/MineTailingsInfoTabs.tsx
@@ -37,7 +37,7 @@ import { useFeatureFlag } from "@mds/common/providers/featureFlags/useFeatureFla
 import { Feature } from "@mds/common";
 import { getUserAccessData } from "@mds/common/redux/selectors/authenticationSelectors";
 import { USER_ROLES } from "@mds/common";
-import ResponsivePagination from "@/components/common/ResponsivePagination";
+import ResponsivePagination from "@mds/common/components/common/ResponsivePagination";
 
 /**
  * @class  MineTailingsInfoTabs - all tenure information related to the mine.

diff --git a/services/core-web/src/tests/components/common/ResponsivePagination.spec.js b/services/core-web/src/tests/components/common/ResponsivePagination.spec.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { shallow } from "enzyme";
-import ResponsivePagination from "@/components/common/ResponsivePagination";
+import ResponsivePagination from "@mds/common/components/common/ResponsivePagination";
 
 let props = {};
 let dispatchProps = {};

diff --git a/services/minespace-web/src/components/dashboard/mine/reports/Reports.tsx b/services/minespace-web/src/components/dashboard/mine/reports/Reports.tsx
@@ -9,7 +9,7 @@ import {
   updateMineReport,
 } from "@mds/common/redux/actionCreators/reportActionCreator";
 import { closeModal, openModal } from "@mds/common/redux/actions/modalActions";
-import { getMineReports } from "@mds/common/redux/selectors/reportSelectors";
+import { getMineReports, getReportsPageData } from "@mds/common/redux/selectors/reportSelectors";
 import ReportsTable from "@/components/dashboard/mine/reports/ReportsTable";
 import { modalConfig } from "@/components/modalContent/config";
 import AuthorizationWrapper from "@/components/common/wrappers/AuthorizationWrapper";
@@ -19,13 +19,15 @@ import * as routes from "@/constants/routes";
 import { useFeatureFlag } from "@mds/common/providers/featureFlags/useFeatureFlag";
 import { Link as ScrollLink, Element } from "react-scroll";
 import { SidebarContext } from "@mds/common/components/common/SidebarWrapper";
+import ResponsivePagination from "@mds/common/components/common/ResponsivePagination";
 
 export const Reports: FC = () => {
   const dispatch = useDispatch();
   const history = useHistory();
   const { isFeatureEnabled } = useFeatureFlag();
 
   const { mine } = useContext<{ mine: IMine }>(SidebarContext);
+  const pageData = useSelector(getReportsPageData);
 
   const mineReports: IMineReport[] = useSelector(getMineReports);
 
@@ -139,6 +141,15 @@ export const Reports: FC = () => {
     );
   };
 
+  const onPageChange = (page, per_page) => {
+    dispatch(
+      fetchMineReports(mine.mine_guid, null, {
+        page,
+        per_page,
+      })
+    );
+  };
+
   return (
     <Row>
       <Col span={24}>
@@ -201,7 +212,16 @@ export const Reports: FC = () => {
               openEditReportModal={openEditReportModal}
               mineReports={codeRequiredReports}
               isLoaded={isLoaded}
+              backendPaginated
             />
+            <Row justify="center" className="margin-large--bottom">
+              <ResponsivePagination
+                onPageChange={onPageChange}
+                currentPage={Number(pageData.current_page)}
+                pageTotal={Number(pageData.total)}
+                itemsPerPage={Number(pageData.items_per_page)}
+              />
+            </Row>
             <Element name="permitRequiredReports">
               <Typography.Title level={4}>Permit Required Reports</Typography.Title>
             </Element>

diff --git a/services/minespace-web/src/components/dashboard/mine/reports/ReportsTable.tsx b/services/minespace-web/src/components/dashboard/mine/reports/ReportsTable.tsx
@@ -32,6 +32,7 @@ interface ReportsTableProps {
   openEditReportModal: (event: React.MouseEvent, record: IMineReport) => void;
   openReport: (record: IMineReport) => void;
   isLoaded: boolean;
+  backendPaginated: boolean;
 }
 
 const DEFAULT_PAGE_SIZE = 10;
@@ -67,7 +68,7 @@ export const ReportsTable: FC<ReportsTableProps> = (props) => {
   ];
 
   let columns: ColumnsType<IMineReport> = [
-    renderTextColumn("report_name", "Report Name", true),
+    renderTextColumn("report_name", "Report Name", !props.backendPaginated),
     {
       title: "Code Section",
       key: "code_section",
@@ -81,7 +82,7 @@ export const ReportsTable: FC<ReportsTableProps> = (props) => {
         </div>
       ),
     },
-    renderTextColumn("submission_year", "Compliance Year", true, null, 5),
+    renderTextColumn("submission_year", "Compliance Year", !props.backendPaginated, null, 5),
     renderTextColumn("due_date", "Due", true, null, 5),
     renderTextColumn(["latest_submission", "received_date"], "Submitted On", true),
     renderTextColumn("created_by_idir", "Requested By", true),
@@ -166,7 +167,7 @@ export const ReportsTable: FC<ReportsTableProps> = (props) => {
       rowKey={(record) => record.mine_report_guid}
       emptyText="This mine has no report data."
       dataSource={props.mineReports}
-      pagination={pagination}
+      pagination={props.backendPaginated ? false : pagination}
     />
   );
 };

diff --git a/services/minespace-web/src/tests/components/dashboard/mine/reports/Reports.spec.tsx b/services/minespace-web/src/tests/components/dashboard/mine/reports/Reports.spec.tsx
@@ -7,9 +7,7 @@ import { SidebarProvider } from "@mds/common/components/common/SidebarWrapper";
 import { REPORTS, STATIC_CONTENT } from "@mds/common/constants/reducerTypes";
 
 const initialState = {
-  [REPORTS]: {
-    mineReports: MOCK.MINE_REPORTS,
-  },
+  [REPORTS]: { mineReports: MOCK.MINE_REPORTS, reportsPageData: MOCK.PAGE_DATA },
   [STATIC_CONTENT]: {
     mineReportDefinitionOptions: MOCK.BULK_STATIC_CONTENT_RESPONSE.mineReportDefinitionOptions,
   },

diff --git a/...space-web/src/tests/components/dashboard/mine/reports/__snapshots__/Reports.spec.tsx.snap b/...space-web/src/tests/components/dashboard/mine/reports/__snapshots__/Reports.spec.tsx.snap
@@ -128,131 +128,19 @@ exports[`Reports renders properly 1`] = `
                         >
                           <tr>
                             <th
-                              aria-label="Report Name"
-                              class="ant-table-cell ant-table-column-has-sorters"
-                              tabindex="0"
+                              class="ant-table-cell"
                             >
-                              <div
-                                class="ant-table-column-sorters"
-                              >
-                                <span
-                                  class="ant-table-column-title"
-                                >
-                                  Report Name
-                                </span>
-                                <span
-                                  class="ant-table-column-sorter ant-table-column-sorter-full"
-                                >
-                                  <span
-                                    class="ant-table-column-sorter-inner"
-                                  >
-                                    <span
-                                      aria-label="caret-up"
-                                      class="anticon anticon-caret-up ant-table-column-sorter-up"
-                                      role="presentation"
-                                    >
-                                      <svg
-                                        aria-hidden="true"
-                                        data-icon="caret-up"
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height="1em"
-                                        viewBox="0 0 1024 1024"
-                                        width="1em"
-                                      >
-                                        <path
-                                          d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
-                                        />
-                                      </svg>
-                                    </span>
-                                    <span
-                                      aria-label="caret-down"
-                                      class="anticon anticon-caret-down ant-table-column-sorter-down"
-                                      role="presentation"
-                                    >
-                                      <svg
-                                        aria-hidden="true"
-                                        data-icon="caret-down"
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height="1em"
-                                        viewBox="0 0 1024 1024"
-                                        width="1em"
-                                      >
-                                        <path
-                                          d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
-                                        />
-                                      </svg>
-                                    </span>
-                                  </span>
-                                </span>
-                              </div>
+                              Report Name
                             </th>
                             <th
                               class="ant-table-cell"
                             >
                               Code Section
                             </th>
                             <th
-                              aria-label="Compliance Year"
-                              class="ant-table-cell ant-table-column-has-sorters"
-                              tabindex="0"
+                              class="ant-table-cell"
                             >
-                              <div
-                                class="ant-table-column-sorters"
-                              >
-                                <span
-                                  class="ant-table-column-title"
-                                >
-                                  Compliance Year
-                                </span>
-                                <span
-                                  class="ant-table-column-sorter ant-table-column-sorter-full"
-                                >
-                                  <span
-                                    class="ant-table-column-sorter-inner"
-                                  >
-                                    <span
-                                      aria-label="caret-up"
-                                      class="anticon anticon-caret-up ant-table-column-sorter-up"
-                                      role="presentation"
-                                    >
-                                      <svg
-                                        aria-hidden="true"
-                                        data-icon="caret-up"
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height="1em"
-                                        viewBox="0 0 1024 1024"
-                                        width="1em"
-                                      >
-                                        <path
-                                          d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
-                                        />
-                                      </svg>
-                                    </span>
-                                    <span
-                                      aria-label="caret-down"
-                                      class="anticon anticon-caret-down ant-table-column-sorter-down"
-                                      role="presentation"
-                                    >
-                                      <svg
-                                        aria-hidden="true"
-                                        data-icon="caret-down"
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height="1em"
-                                        viewBox="0 0 1024 1024"
-                                        width="1em"
-                                      >
-                                        <path
-                                          d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
-                                        />
-                                      </svg>
-                                    </span>
-                                  </span>
-                                </span>
-                              </div>
+                              Compliance Year
                             </th>
                             <th
                               aria-label="Due"
@@ -525,6 +413,11 @@ exports[`Reports renders properly 1`] = `
               </div>
             </div>
           </div>
+          <div
+            class="ant-row ant-row-center margin-large--bottom"
+          >
+            <div />
+          </div>
           <div
             name="permitRequiredReports"
           >