Added pagingation to courtesy car detail contracts list BOD-374

2020-08-31 10:34:09 -07:00
parent 266b6b0dbb
commit bd3ccc9b38
6 changed files with 74 additions and 36 deletions
--- a/client/src/components/contracts-list/contracts-list.component.jsx
+++ b/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"),
--- a/client/src/components/courtesy-car-contract-list/courtesy-car-contract-list.component.jsx
+++ b/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}
--- a/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx
+++ b/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;
--- a/client/src/graphql/courtesy-car.queries.js
+++ b/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
--- a/client/src/pages/courtesy-car-detail/courtesy-car-detail.page.component.jsx
+++ b/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>
  );
 }
--- a/client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx
+++ b/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>