Added pagingation to courtesy car detail contracts list BOD-374

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

@@ -61,8 +61,11 @@ export default function ContractsList({ loading, contracts, refetch, total }) {
       //sorter: (a, b) => alphaSort(a.status, b.status),
       //sortOrder:
       // state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
-      render: (text, record) =>
-        `${record.courtesycar.fleetnumber} - ${record.courtesycar.year} ${record.courtesycar.make} ${record.courtesycar.model}`,
+      render: (text, record) => (
+        <Link
+          to={`/manage/courtesycars/${record.courtesycar.id}`}
+        >{`${record.courtesycar.fleetnumber} - ${record.courtesycar.year} ${record.courtesycar.make} ${record.courtesycar.model}`}</Link>
+      ),
     },
     {
       title: t("contracts.fields.status"),

client/src/components/courtesy-car-contract-list/courtesy-car-contract-list.component.jsx

@@ -1,15 +1,18 @@
 import { Table } 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 queryString from "query-string";
 
-export default function CourtesyCarContractListComponent({ contracts }) {
-  const [state, setState] = useState({
-    sortedInfo: {},
-    filteredInfo: { text: "" },
-  });
+export default function CourtesyCarContractListComponent({
+  contracts,
+  totalContracts,
+}) {
+  const search = queryString.parse(useLocation().search);
+  const { page, sortcolumn, sortorder } = search;
+  const history = useHistory();
 
   const { t } = useTranslation();
 
@@ -19,9 +22,7 @@ export default function CourtesyCarContractListComponent({ contracts }) {
       dataIndex: "agreementnumber",
       key: "agreementnumber",
       sorter: (a, b) => a.agreementnumber - b.agreementnumber,
-      sortOrder:
-        state.sortedInfo.columnKey === "agreementnumber" &&
-        state.sortedInfo.order,
+      sortOrder: sortcolumn === "agreementnumber" && sortorder,
       render: (text, record) => (
         <Link to={`/manage/courtesycars/contracts/${record.id}`}>
           {record.agreementnumber || ""}
@@ -32,10 +33,7 @@ export default function CourtesyCarContractListComponent({ contracts }) {
       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 || ""}
@@ -46,9 +44,7 @@ export default function CourtesyCarContractListComponent({ contracts }) {
       title: t("contracts.fields.driver"),
       dataIndex: "driver_ln",
       key: "driver_ln",
-      sorter: (a, b) => alphaSort(a.driver_ln, b.driver_ln),
-      sortOrder:
-        state.sortedInfo.columnKey === "driver_ln" && state.sortedInfo.order,
+
       render: (text, record) =>
         `${record.driver_fn || ""} ${record.driver_ln || ""}`,
     },
@@ -57,8 +53,7 @@ export default function CourtesyCarContractListComponent({ contracts }) {
       dataIndex: "status",
       key: "status",
       sorter: (a, b) => alphaSort(a.status, b.status),
-      sortOrder:
-        state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
+      sortOrder: sortcolumn === "status" && sortorder,
       render: (text, record) => t(record.status),
     },
     {
@@ -66,8 +61,7 @@ export default function CourtesyCarContractListComponent({ contracts }) {
       dataIndex: "start",
       key: "start",
       sorter: (a, b) => alphaSort(a.start, b.start),
-      sortOrder:
-        state.sortedInfo.columnKey === "start" && state.sortedInfo.order,
+      sortOrder: sortcolumn === "start" && sortorder,
       render: (text, record) => <DateFormatter>{record.start}</DateFormatter>,
     },
     {
@@ -75,9 +69,7 @@ export default function CourtesyCarContractListComponent({ contracts }) {
       dataIndex: "scheduledreturn",
       key: "scheduledreturn",
       sorter: (a, b) => a.scheduledreturn - b.scheduledreturn,
-      sortOrder:
-        state.sortedInfo.columnKey === "scheduledreturn" &&
-        state.sortedInfo.order,
+      sortOrder: sortcolumn === "scheduledreturn" && sortorder,
       render: (text, record) => (
         <DateFormatter>{record.scheduledreturn}</DateFormatter>
       ),
@@ -85,12 +77,22 @@ export default function CourtesyCarContractListComponent({ contracts }) {
   ];
 
   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
       size="small"
-      pagination={{ position: "top" }}
+      scroll={{ x: true }}
+      pagination={{
+        position: "top",
+        pageSize: 25,
+        current: parseInt(page || 1),
+        total: totalContracts,
+      }}
       columns={columns.map((item) => ({ ...item }))}
       rowKey="id"
       dataSource={contracts}

client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx

@@ -13,10 +13,7 @@ export default function JobsList({ refetch, loading, jobs, total }) {
   const search = queryString.parse(useLocation().search);
   const { page, sortcolumn, sortorder } = search;
   const history = useHistory();
-  const [state, setState] = useState({
-    sortedInfo: {},
-    filteredInfo: { text: "" },
-  });
+
 
   const { t } = useTranslation();
   const columns = [
@@ -169,7 +166,6 @@ export default function JobsList({ refetch, loading, jobs, total }) {
   ];
 
   const handleTableChange = (pagination, filters, sorter) => {
-    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
     search.page = pagination.current;
     search.sortcolumn = sorter.columnKey;
     search.sortorder = sorter.order;