Added cc contract searching by date range BOD-236

client/src/pages/contracts/contracts.page.component.jsx

@@ -1,10 +1,20 @@
 import React from "react";
 import ContractsList from "../../components/contracts-list/contracts-list.component";
 
-export default function ContractsPageComponent({ loading, data }) {
+export default function ContractsPageComponent({
+  loading,
+  data,
+  refetch,
+  total,
+}) {
   return (
     <div>
-      <ContractsList loading={loading} contracts={data} />
+      <ContractsList
+        loading={loading}
+        contracts={data}
+        refetch={refetch}
+        total={total}
+      />
     </div>
   );
 }

client/src/pages/contracts/contracts.page.container.jsx

@@ -3,15 +3,41 @@ import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import AlertComponent from "../../components/alert/alert.component";
-import { QUERY_ACTIVE_CONTRACTS } from "../../graphql/cccontracts.queries";
+import { QUERY_ACTIVE_CONTRACTS_PAGINATED } from "../../graphql/cccontracts.queries";
 import { setBreadcrumbs } from "../../redux/application/application.actions";
 import ContractsPageComponent from "./contracts.page.component";
+import queryString from "query-string";
+import { useLocation } from "react-router-dom";
+import moment from "moment";
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
 });
 
 export function ContractsPageContainer({ setBreadcrumbs }) {
-  const { loading, error, data } = useQuery(QUERY_ACTIVE_CONTRACTS);
+  const searchParams = queryString.parse(useLocation().search);
+  const { page, sortcolumn, sortorder, start, end } = searchParams;
+
+  const { loading, error, data, refetch } = useQuery(
+    QUERY_ACTIVE_CONTRACTS_PAGINATED,
+    {
+      variables: {
+        //search: search || "",
+        start: start ? moment(start) : null,
+        end: end ? moment(end) : null,
+        offset: page ? (page - 1) * 25 : 0,
+        limit: 25,
+        order: [
+          {
+            [sortcolumn || "start"]: sortorder
+              ? sortorder === "descend"
+                ? "desc"
+                : "asc"
+              : "desc",
+          },
+        ],
+      },
+    }
+  );
   const { t } = useTranslation();
   useEffect(() => {
     document.title = t("titles.contracts");
@@ -30,7 +56,9 @@ export function ContractsPageContainer({ setBreadcrumbs }) {
     <div>
       <ContractsPageComponent
         loading={loading}
+        refetch={refetch}
         data={data ? data.cccontracts : []}
+        total={data ? data.cccontracts_aggregate.aggregate.count : 0}
       />
     </div>
   );