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) =>
+      render: (text, record) => (
-        `${record.courtesycar.fleetnumber} - ${record.courtesycar.year} ${record.courtesycar.make} ${record.courtesycar.model}`,
+        <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 }) {
+export default function CourtesyCarContractListComponent({
-  const [state, setState] = useState({
+  contracts,
-    sortedInfo: {},
+  totalContracts,
-    filteredInfo: { text: "" },
+}) {
-  });
+  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:
+      sortOrder: sortcolumn === "agreementnumber" && sortorder,
-        state.sortedInfo.columnKey === "agreementnumber" &&
-        state.sortedInfo.order,
       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:
+      sortOrder: sortcolumn === "status" && sortorder,
-        state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
       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:
+      sortOrder: sortcolumn === "start" && sortorder,
-        state.sortedInfo.columnKey === "start" && state.sortedInfo.order,
       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:
+      sortOrder: sortcolumn === "scheduledreturn" && sortorder,
-        state.sortedInfo.columnKey === "scheduledreturn" &&
-        state.sortedInfo.order,
       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;

client/src/graphql/courtesy-car.queries.js

@@ -78,7 +78,12 @@ export const QUERY_ALL_CC = gql`
 `;
 
 export const QUERY_CC_BY_PK = gql`
-  query QUERY_CC_BY_PK($id: uuid!) {
+  query QUERY_CC_BY_PK(
+    $id: uuid!
+    $offset: Int
+    $limit: Int
+    $order: [cccontracts_order_by!]!
+  ) {
     courtesycars_by_pk(id: $id) {
       bodyshopid
       color
@@ -104,7 +109,12 @@ export const QUERY_CC_BY_PK = gql`
       vin
       year
       mileage
-      cccontracts {
+      cccontracts_aggregate {
+        aggregate {
+          count(distinct: true)
+        }
+      }
+      cccontracts(offset: $offset, limit: $limit, order_by: $order) {
         agreementnumber
         id
         status

client/src/pages/courtesy-car-detail/courtesy-car-detail.page.component.jsx

@@ -6,11 +6,15 @@ export default function CourtesyCarDetailPageComponent({
   contracts,
   form,
   saveLoading,
+  totalContracts,
 }) {
   return (
     <div>
       <CourtesyCarCreateFormComponent form={form} saveLoading={saveLoading} />
-      <CourtesyCarContractListComponent contracts={contracts} />
+      <CourtesyCarContractListComponent
+        contracts={contracts}
+        totalContracts={totalContracts}
+      />
     </div>
   );
 }

client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx

@@ -16,6 +16,8 @@ import { CreateRecentItem } from "../../utils/create-recent-item";
 import CourtesyCarDetailPageComponent from "./courtesy-car-detail.page.component";
 import NotFound from "../../components/not-found/not-found.component";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
+import queryString from "query-string";
+import { useLocation } from "react-router-dom";
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -25,13 +27,29 @@ export function CourtesyCarDetailPageContainer({
   setBreadcrumbs,
   addRecentItem,
 }) {
+  const searchParams = queryString.parse(useLocation().search);
+  const { page, sortcolumn, sortorder } = searchParams;
+
   const { t } = useTranslation();
   const [insertCourtesyCar] = useMutation(UPDATE_CC);
   const [form] = Form.useForm();
   const { ccId } = useParams();
   const [saveLoading, setSaveLoading] = useState(false);
   const { loading, error, data } = useQuery(QUERY_CC_BY_PK, {
-    variables: { id: ccId },
+    variables: {
+      id: ccId,
+      offset: page ? (page - 1) * 25 : 0,
+      limit: 25,
+      order: [
+        {
+          [sortcolumn || "start"]: sortorder
+            ? sortorder === "descend"
+              ? "desc"
+              : "asc"
+            : "desc",
+        },
+      ],
+    },
   });
 
   useEffect(() => {
@@ -142,6 +160,11 @@ export function CourtesyCarDetailPageContainer({
           contracts={data ? data.courtesycars_by_pk.cccontracts : []}
           form={form}
           saveLoading={saveLoading}
+          totalContracts={
+            data
+              ? data.courtesycars_by_pk.cccontracts_aggregate.aggregate.count
+              : 0
+          }
         />
       </Form>
     </RbacWrapper>