diff --git a/client/src/components/contracts-list/contracts-list.component.jsx b/client/src/components/contracts-list/contracts-list.component.jsx
index 1a37b2ccb..cc3ecfe9f 100644
--- 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) => (
+ {`${record.courtesycar.fleetnumber} - ${record.courtesycar.year} ${record.courtesycar.make} ${record.courtesycar.model}`}
+ ),
},
{
title: t("contracts.fields.status"),
diff --git 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
index 8475a69b3..718c1d0ad 100644
--- 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) => (
{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) => (
{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) => {record.start},
},
{
@@ -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) => (
{record.scheduledreturn}
),
@@ -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 (
({ ...item }))}
rowKey="id"
dataSource={contracts}
diff --git a/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx b/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx
index f0c8bb6e4..538150f62 100644
--- 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;
diff --git a/client/src/graphql/courtesy-car.queries.js b/client/src/graphql/courtesy-car.queries.js
index 4cda62207..f859f47b1 100644
--- 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
diff --git 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
index 4af0cf62f..1bc56d043 100644
--- 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 (
-
+
);
}
diff --git 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
index 874db154a..751789311 100644
--- 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
+ }
/>