diff --git a/client/src/components/owner-detail-jobs/owner-detail-jobs.component.jsx b/client/src/components/owner-detail-jobs/owner-detail-jobs.component.jsx index c69712a0b..360954101 100644 --- a/client/src/components/owner-detail-jobs/owner-detail-jobs.component.jsx +++ b/client/src/components/owner-detail-jobs/owner-detail-jobs.component.jsx @@ -6,6 +6,7 @@ import { Link } from "react-router-dom"; import { createStructuredSelector } from "reselect"; import { selectBodyshop } from "../../redux/user/user.selectors"; import CurrencyFormatter from "../../utils/CurrencyFormatter"; +import { alphaSort, statusSort } from "../../utils/sorters"; import OwnerDetailUpdateJobsComponent from "../owner-detail-update-jobs/owner-detail-update-jobs.component"; const mapStateToProps = createStructuredSelector({ @@ -15,6 +16,15 @@ const mapStateToProps = createStructuredSelector({ function OwnerDetailJobsComponent({ bodyshop, owner }) { const { t } = useTranslation(); const [selectedJobs, setSelectedJobs] = useState([]); + const [state, setState] = useState({ + sortedInfo: {}, + filteredInfo: { text: "" }, + }); + + const handleTableChange = (pagination, filters, sorter) => { + setState({ ...state, filteredInfo: filters, sortedInfo: sorter }); + }; + const columns = [ { title: t("jobs.fields.ro_number"), @@ -26,6 +36,9 @@ function OwnerDetailJobsComponent({ bodyshop, owner }) { {record.ro_number || t("general.labels.na")} ), + sorter: (a, b) => alphaSort(a.ro_number, b.ro_number), + sortOrder: + state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order, }, { title: t("jobs.fields.vehicle"), @@ -46,11 +59,17 @@ function OwnerDetailJobsComponent({ bodyshop, owner }) { title: t("jobs.fields.clm_no"), dataIndex: "clm_no", key: "clm_no", + sorter: (a, b) => alphaSort(a.clm_no, b.clm_no), + sortOrder: + state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order, }, { title: t("jobs.fields.status"), dataIndex: "status", key: "status", + sorter: (a, b) => statusSort(a.status, b.status, bodyshop.md_ro_statuses.statuses), + sortOrder: + state.sortedInfo.columnKey === "status" && state.sortedInfo.order, }, { @@ -60,6 +79,9 @@ function OwnerDetailJobsComponent({ bodyshop, owner }) { render: (text, record) => ( {record.clm_total} ), + sorter: (a, b) => a.clm_total - b.clm_total, + sortOrder: + state.sortedInfo.columnKey === "clm_total" && state.sortedInfo.order, }, ]; @@ -80,6 +102,7 @@ function OwnerDetailJobsComponent({ bodyshop, owner }) { scroll={{ x: true }} rowKey="id" dataSource={owner.jobs} + onChange={handleTableChange} rowSelection={{ onSelect: (record, selected, selectedRows) => { setSelectedJobs(selectedRows ? selectedRows.map((i) => i.id) : []); diff --git a/client/src/components/vehicle-detail-jobs/vehicle-detail-jobs.component.jsx b/client/src/components/vehicle-detail-jobs/vehicle-detail-jobs.component.jsx index 490e2b5ba..403d223bf 100644 --- a/client/src/components/vehicle-detail-jobs/vehicle-detail-jobs.component.jsx +++ b/client/src/components/vehicle-detail-jobs/vehicle-detail-jobs.component.jsx @@ -6,8 +6,9 @@ import { Link } from "react-router-dom"; import { createStructuredSelector } from "reselect"; import { selectBodyshop } from "../../redux/user/user.selectors"; import CurrencyFormatter from "../../utils/CurrencyFormatter"; -import VehicleDetailUpdateJobsComponent from "../vehicle-detail-update-jobs/vehicle-detail-update-jobs.component"; +import { alphaSort, statusSort } from "../../utils/sorters"; import OwnerNameDisplay from "../owner-name-display/owner-name-display.component"; +import VehicleDetailUpdateJobsComponent from "../vehicle-detail-update-jobs/vehicle-detail-update-jobs.component"; const mapStateToProps = createStructuredSelector({ bodyshop: selectBodyshop, @@ -16,6 +17,14 @@ const mapStateToProps = createStructuredSelector({ export function VehicleDetailJobsComponent({ vehicle, bodyshop }) { const { t } = useTranslation(); const [selectedJobs, setSelectedJobs] = useState([]); + const [state, setState] = useState({ + sortedInfo: {}, + filteredInfo: { text: "" }, + }); + + const handleTableChange = (pagination, filters, sorter) => { + setState({ ...state, filteredInfo: filters, sortedInfo: sorter }); + }; const columns = [ { @@ -28,6 +37,9 @@ export function VehicleDetailJobsComponent({ vehicle, bodyshop }) { {record.ro_number || t("general.labels.na")} ), + sorter: (a, b) => alphaSort(a.ro_number, b.ro_number), + sortOrder: + state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order, }, { title: t("jobs.fields.owner"), @@ -43,11 +55,17 @@ export function VehicleDetailJobsComponent({ vehicle, bodyshop }) { title: t("jobs.fields.clm_no"), dataIndex: "clm_no", key: "clm_no", + sorter: (a, b) => alphaSort(a.clm_no, b.clm_no), + sortOrder: + state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order, }, { title: t("jobs.fields.status"), dataIndex: "status", key: "status", + sorter: (a, b) => statusSort(a.status, b.status, bodyshop.md_ro_statuses.statuses), + sortOrder: + state.sortedInfo.columnKey === "status" && state.sortedInfo.order, }, { @@ -57,6 +75,9 @@ export function VehicleDetailJobsComponent({ vehicle, bodyshop }) { render: (text, record) => ( {record.clm_total} ), + sorter: (a, b) => a.clm_total - b.clm_total, + sortOrder: + state.sortedInfo.columnKey === "clm_total" && state.sortedInfo.order, }, ]; @@ -76,6 +97,7 @@ export function VehicleDetailJobsComponent({ vehicle, bodyshop }) { rowKey="id" scroll={{ x: true }} dataSource={vehicle.jobs} + onChange={handleTableChange} rowSelection={{ onSelect: (record, selected, selectedRows) => { setSelectedJobs(selectedRows ? selectedRows.map((i) => i.id) : []); diff --git a/client/src/graphql/owners.queries.js b/client/src/graphql/owners.queries.js index 440dc3011..a4e5d1c80 100644 --- a/client/src/graphql/owners.queries.js +++ b/client/src/graphql/owners.queries.js @@ -69,7 +69,7 @@ export const QUERY_OWNER_BY_ID = gql` preferred_contact note tax_number - jobs { + jobs(order_by: { date_open: desc }) { id ro_number clm_no diff --git a/client/src/graphql/vehicles.queries.js b/client/src/graphql/vehicles.queries.js index 9fa2dd837..9df3c4238 100644 --- a/client/src/graphql/vehicles.queries.js +++ b/client/src/graphql/vehicles.queries.js @@ -28,11 +28,10 @@ export const QUERY_VEHICLE_BY_ID = gql` updated_at trim_color notes - jobs { + jobs(order_by: { date_open: desc }) { id ro_number ownr_fn - ownr_ln owner { id