Added cc contract searching by date range BOD-236

client/src/components/contracts-list/contracts-list.component.jsx

@@ -1,15 +1,21 @@
-import { Table } from "antd";
+import { Table, Button, Input } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
+import { Link, useHistory, useLocation } from "react-router-dom";
 import { alphaSort } from "../../utils/sorters";
-import { DateFormatter } from "../../utils/DateFormatter";
+import { DateFormatter, DateTimeFormatter } from "../../utils/DateFormatter";
+import queryString from "query-string";
+import { SyncOutlined } from "@ant-design/icons";
+import TimeTicketsDatesSelector from "../ticket-tickets-dates-selector/time-tickets-dates-selector.component";
 
-export default function ContractsList({ loading, contracts }) {
+export default function ContractsList({ loading, contracts, refetch, total }) {
   const [state, setState] = useState({
     sortedInfo: {},
-    filteredInfo: { text: "" }
+    filteredInfo: { text: "" },
   });
+  const history = useHistory();
+  const search = queryString.parse(useLocation().search);
+  const { page } = search;
 
   const { t } = useTranslation();
 
@@ -26,21 +32,17 @@ export default function ContractsList({ loading, contracts }) {
         <Link to={`/manage/courtesycars/contracts/${record.id}`}>
           {record.agreementnumber || ""}
         </Link>
-      )
+      ),
     },
     {
       title: t("jobs.fields.ro_number"),
       dataIndex: "job.ro_number",
       key: "job.ro_number",
-      sorter: (a, b) => alphaSort(a.job.ro_number, b.job.ro_number),
-      sortOrder:
-        state.sortedInfo.columnKey === "job.ro_number" &&
-        state.sortedInfo.order,
       render: (text, record) => (
         <Link to={`/manage/jobs/${record.job.id}`}>
           {record.job.ro_number || ""}
         </Link>
-      )
+      ),
     },
     {
       title: t("contracts.fields.driver"),
@@ -50,7 +52,7 @@ export default function ContractsList({ loading, contracts }) {
       sortOrder:
         state.sortedInfo.columnKey === "driver_ln" && state.sortedInfo.order,
       render: (text, record) =>
-        `${record.driver_fn || ""} ${record.driver_ln || ""}`
+        `${record.driver_fn || ""} ${record.driver_ln || ""}`,
     },
     {
       title: t("contracts.fields.status"),
@@ -59,7 +61,7 @@ export default function ContractsList({ loading, contracts }) {
       sorter: (a, b) => alphaSort(a.status, b.status),
       sortOrder:
         state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
-      render: (text, record) => t(record.status)
+      render: (text, record) => t(record.status),
     },
     {
       title: t("contracts.fields.start"),
@@ -68,7 +70,9 @@ export default function ContractsList({ loading, contracts }) {
       sorter: (a, b) => alphaSort(a.start, b.start),
       sortOrder:
         state.sortedInfo.columnKey === "start" && state.sortedInfo.order,
-      render: (text, record) => <DateFormatter>{record.start}</DateFormatter>
+      render: (text, record) => (
+        <DateTimeFormatter>{record.start}</DateTimeFormatter>
+      ),
     },
     {
       title: t("contracts.fields.scheduledreturn"),
@@ -79,21 +83,61 @@ export default function ContractsList({ loading, contracts }) {
         state.sortedInfo.columnKey === "scheduledreturn" &&
         state.sortedInfo.order,
       render: (text, record) => (
-        <DateFormatter>{record.scheduledreturn}</DateFormatter>
-      )
-    }
+        <DateTimeFormatter>{record.scheduledreturn}</DateTimeFormatter>
+      ),
+    },
+    {
+      title: t("contracts.fields.actualreturn"),
+      dataIndex: "actualreturn",
+      key: "actualreturn",
+      sorter: (a, b) => alphaSort(a.actualreturn, b.actualreturn),
+      sortOrder:
+        state.sortedInfo.columnKey === "actualreturn" && state.sortedInfo.order,
+      render: (text, record) => (
+        <DateTimeFormatter>{record.actualreturn}</DateTimeFormatter>
+      ),
+    },
   ];
 
   const handleTableChange = (pagination, filters, sorter) => {
     setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+    search.page = pagination.current;
+    search.sortcolumn = sorter.columnKey;
+    search.sortorder = sorter.order;
+    history.push({ search: queryString.stringify(search) });
   };
 
   return (
     <Table
       loading={loading}
+      title={() => (
+        <div className="imex-table-header">
+          <Button onClick={() => refetch()}>
+            <SyncOutlined />
+          </Button>
+          <div>
+            <TimeTicketsDatesSelector />
+          </div>
+          <div className="imex-table-header__search">
+            <Input.Search
+              placeholder={t("general.labels.search")}
+              onSearch={(value) => {
+                search.search = value;
+                history.push({ search: queryString.stringify(search) });
+              }}
+            />
+          </div>
+        </div>
+      )}
       size="small"
-      pagination={{ position: "top" }}
-      columns={columns.map(item => ({ ...item }))}
+      scroll={{ x: "50%", y: "40rem" }}
+      pagination={{
+        position: "top",
+        pageSize: 25,
+        current: parseInt(page || 1),
+        total: total,
+      }}
+      columns={columns}
       rowKey="id"
       dataSource={contracts}
       onChange={handleTableChange}

client/src/components/ticket-tickets-dates-selector/time-tickets-dates-selector.component.jsx

@@ -10,13 +10,22 @@ export default function TimeTicketsDatesSelector() {
   const history = useHistory();
 
   const handleChange = (dates) => {
-    const [start, end] = dates;
+    if (dates) {
+      const [start, end] = dates;
 
-    if (!!start && !!end) {
+      if (!!start && !!end) {
+        history.push({
+          search: queryString.stringify({
+            start: start.format("YYYY-MM-DD"),
+            end: end.format("YYYY-MM-DD"),
+          }),
+        });
+      }
+    } else {
       history.push({
         search: queryString.stringify({
-          start: start.format("YYYY-MM-DD"),
-          end: end.format("YYYY-MM-DD"),
+          start: null,
+          end: null,
         }),
       });
     }