From bd3ccc9b3894d3e23635e74c22e5433d405711ad Mon Sep 17 00:00:00 2001 From: Patrick Fic Date: Mon, 31 Aug 2020 10:34:09 -0700 Subject: [PATCH] Added pagingation to courtesy car detail contracts list BOD-374 --- .../contracts-list.component.jsx | 7 ++- .../courtesy-car-contract-list.component.jsx | 52 ++++++++++--------- .../jobs-list-paginated.component.jsx | 6 +-- client/src/graphql/courtesy-car.queries.js | 14 ++++- .../courtesy-car-detail.page.component.jsx | 6 ++- .../courtesy-car-detail.page.container.jsx | 25 ++++++++- 6 files changed, 74 insertions(+), 36 deletions(-) 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 + } />