diff --git a/client/src/components/jobs-list/jobs-list.component.jsx b/client/src/components/jobs-list/jobs-list.component.jsx
index e28e21901..072bcbd61 100644
--- a/client/src/components/jobs-list/jobs-list.component.jsx
+++ b/client/src/components/jobs-list/jobs-list.component.jsx
@@ -1,395 +1,388 @@
-import {
- SyncOutlined,
- ExclamationCircleFilled,
- PauseCircleOutlined,
- BranchesOutlined,
-} from "@ant-design/icons";
-import { useQuery } from "@apollo/client";
-import { Button, Card, Grid, Input, Space, Table, Tooltip } from "antd";
+import {BranchesOutlined, ExclamationCircleFilled, PauseCircleOutlined, SyncOutlined,} from "@ant-design/icons";
+import {useQuery} from "@apollo/client";
+import {Button, Card, Grid, Input, Space, Table, Tooltip} from "antd";
import queryString from "query-string";
-import React, { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
-import { Link, useHistory, useLocation } from "react-router-dom";
-import { createStructuredSelector } from "reselect";
-import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import { onlyUnique } from "../../utils/arrayHelper";
+import React, {useState} from "react";
+import {useTranslation} from "react-i18next";
+import {connect} from "react-redux";
+import {Link, useHistory, useLocation} from "react-router-dom";
+import {createStructuredSelector} from "reselect";
+import {QUERY_ALL_ACTIVE_JOBS_PAGINATED} from "../../graphql/jobs.queries";
+import {selectBodyshop} from "../../redux/user/user.selectors";
+import {onlyUnique} from "../../utils/arrayHelper";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import { alphaSort } from "../../utils/sorters";
+import {alphaSort} from "../../utils/sorters";
import AlertComponent from "../alert/alert.component";
import ChatOpenButton from "../chat-open-button/chat-open-button.component";
import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import _ from "lodash";
const mapStateToProps = createStructuredSelector({
- bodyshop: selectBodyshop,
+ bodyshop: selectBodyshop,
});
-export function JobsList({ bodyshop }) {
- const searchParams = queryString.parse(useLocation().search);
- const { selected } = searchParams;
- const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
- .filter((screen) => !!screen[1])
- .slice(-1)[0];
- const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
- variables: {
- statuses: bodyshop.md_ro_statuses.active_statuses || ["Open", "Open*"],
- },
- fetchPolicy: "network-only",
- nextFetchPolicy: "network-only",
- });
+export function JobsList({bodyshop,}) {
+ const pageLimit = 10;
+ const searchParams = queryString.parse(useLocation().search);
+ const {page, selected, sortorder, sortcolumn} = searchParams;
+ console.dir({page, selected, sortorder, sortcolumn});
+ const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
+ .filter((screen) => !!screen[1])
+ .slice(-1)[0];
- const [state, setState] = useState({
- sortedInfo: {},
- filteredInfo: { text: "" },
- });
+ const {loading, error, data, refetch} = useQuery(QUERY_ALL_ACTIVE_JOBS_PAGINATED, {
- const { t } = useTranslation();
- const history = useHistory();
- const [searchText, setSearchText] = useState("");
+ variables: {
+ offset: page ? (page - 1) * pageLimit : 0,
+ limit: 10,
+ statuses: bodyshop.md_ro_statuses.active_statuses || ["Open", "Open*"],
+ order: [
+ {
+ [sortcolumn || "ro_number"]:
+ sortorder && sortorder !== "false"
+ ? sortorder === "descend"
+ ? "desc"
+ : "asc"
+ : "desc",
+ },
+ ],
+ },
+ fetchPolicy: "network-only",
+ nextFetchPolicy: "network-only",
+ });
- if (error) return ;
+ const total = data?.jobs_aggregate?.aggregate?.count || 0;
- const jobs = data
- ? searchText === ""
- ? data.jobs
- : data.jobs.filter(
- (j) =>
- (j.ro_number || "")
- .toString()
- .toLowerCase()
- .includes(searchText.toLowerCase()) ||
- (j.ownr_co_nm || "")
- .toLowerCase()
- .includes(searchText.toLowerCase()) ||
- (j.comments || "")
- .toLowerCase()
- .includes(searchText.toLowerCase()) ||
- (j.ownr_fn || "")
- .toLowerCase()
- .includes(searchText.toLowerCase()) ||
- (j.ownr_ln || "")
- .toLowerCase()
- .includes(searchText.toLowerCase()) ||
- (j.clm_no || "").toLowerCase().includes(searchText.toLowerCase()) ||
- (j.plate_no || "")
- .toLowerCase()
- .includes(searchText.toLowerCase()) ||
- (j.v_model_desc || "")
- .toLowerCase()
- .includes(searchText.toLowerCase()) ||
- (j.est_ct_fn || "")
- .toLowerCase()
- .includes(searchText.toLowerCase()) ||
- (j.est_ct_ln || "")
- .toLowerCase()
- .includes(searchText.toLowerCase()) ||
- (j.v_make_desc || "")
- .toLowerCase()
- .includes(searchText.toLowerCase())
- )
- : [];
+ const [state, setState] = useState({
+ filteredInfo: {text: ""},
+ });
- const handleTableChange = (pagination, filters, sorter) => {
- setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
- };
+ const {t} = useTranslation();
+ const history = useHistory();
+ const [searchText, setSearchText] = useState("");
- const handleOnRowClick = (record) => {
- if (record) {
- if (record.id) {
- history.push({
- search: queryString.stringify({
- ...searchParams,
- selected: record.id,
- }),
- });
- }
- }
- };
+ if (error) return ;
- const columns = [
- {
- title: t("jobs.fields.ro_number"),
- dataIndex: "ro_number",
- key: "ro_number",
- sorter: (a, b) =>
- parseInt((a.ro_number || "0").replace(/\D/g, "")) -
- parseInt((b.ro_number || "0").replace(/\D/g, "")),
- sortOrder:
- state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
+ const jobs = data?.jobs || [];
- render: (text, record) => (
- e.stopPropagation()}
- >
-
- {record.ro_number || t("general.labels.na")}
- {record.production_vars && record.production_vars.alert ? (
-
- ) : null}
- {record.suspended && (
-
- )}
- {record.iouparent && (
-
-
-
- )}
-
-
- ),
- },
- {
- title: t("jobs.fields.owner"),
- dataIndex: "owner",
- key: "owner",
- ellipsis: true,
+ const handleTableChange = (pagination, filters, sorter) => {
+ setState({...state, filteredInfo: filters});
- responsive: ["md"],
- sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
- sortOrder:
- state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
- render: (text, record) => {
- return record.ownerid ? (
- e.stopPropagation()}
- >
-
-
- ) : (
-
-
+ searchParams.page = pagination.current;
+ searchParams.sortcolumn = sorter.column && sorter.column.key;
+ searchParams.sortorder = sorter.order;
+
+ if (filters.status) {
+ searchParams.statusFilters = JSON.stringify(_.flattenDeep(filters.status));
+ } else {
+ delete searchParams.statusFilters;
+ }
+
+ history.push({search: queryString.stringify(searchParams)});
+ };
+
+ const handleOnRowClick = (record) => {
+ if (record) {
+ if (record.id) {
+ history.push({
+ search: queryString.stringify({
+ ...searchParams,
+ selected: record.id,
+ }),
+ });
+ }
+ }
+ };
+
+ const columns = [
+ {
+ title: t("jobs.fields.ro_number"),
+ dataIndex: "ro_number",
+ key: "ro_number",
+ sorter: true,
+ sortOrder:
+ sortcolumn === "ro_number" && sortorder,
+
+ render: (text, record) => (
+ e.stopPropagation()}
+ >
+
+ {record.ro_number || t("general.labels.na")}
+ {record.production_vars && record.production_vars.alert ? (
+
+ ) : null}
+ {record.suspended && (
+
+ )}
+ {record.iouparent && (
+
+
+
+ )}
+
+
+ ),
+ },
+ {
+ title: t("jobs.fields.owner"),
+ dataIndex: "owner",
+ key: "owner",
+ ellipsis: true,
+ responsive: ["md"],
+ sorter: false,
+ sortOrder: sortcolumn === "owner" && sortorder,
+ render: (text, record) => {
+ return record.ownerid ? (
+ e.stopPropagation()}
+ >
+
+
+ ) : (
+
+
- );
- },
- },
- {
- title: t("jobs.fields.ownr_ph1"),
- dataIndex: "ownr_ph1",
- key: "ownr_ph1",
- ellipsis: true,
- responsive: ["md"],
- render: (text, record) => (
-
- ),
- },
- {
- title: t("jobs.fields.ownr_ph2"),
- dataIndex: "ownr_ph2",
- key: "ownr_ph2",
- ellipsis: true,
- responsive: ["md"],
- render: (text, record) => (
-
- ),
- },
-
- {
- title: t("jobs.fields.status"),
- dataIndex: "status",
- key: "status",
- ellipsis: true,
-
- sorter: (a, b) => alphaSort(a.status, b.status),
- sortOrder:
- state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
- filters:
- (jobs &&
- jobs
- .map((j) => j.status)
- .filter(onlyUnique)
- .map((s) => {
- return {
- text: s || "No Status*",
- value: [s],
- };
- })) ||
- [],
- onFilter: (value, record) => value.includes(record.status),
- },
-
- {
- title: t("jobs.fields.vehicle"),
- dataIndex: "vehicle",
- key: "vehicle",
- ellipsis: true,
- render: (text, record) => {
- return record.vehicleid ? (
- e.stopPropagation()}
- >
- {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
- record.v_model_desc || ""
- }`}
-
- ) : (
- {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
- record.v_model_desc || ""
- }`}
- );
- },
- },
- {
- title: t("vehicles.fields.plate_no"),
- dataIndex: "plate_no",
- key: "plate_no",
- ellipsis: true,
-
- responsive: ["md"],
- sorter: (a, b) => alphaSort(a.plate_no, b.plate_no),
- sortOrder:
- state.sortedInfo.columnKey === "plate_no" && state.sortedInfo.order,
- },
- {
- title: t("jobs.fields.clm_no"),
- dataIndex: "clm_no",
- key: "clm_no",
- ellipsis: true,
- responsive: ["md"],
- sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
- sortOrder:
- state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order,
- render: (text, record) =>
- `${record.clm_no || ""}${
- record.po_number ? ` (PO: ${record.po_number})` : ""
- }`,
- },
- {
- title: t("jobs.fields.ins_co_nm"),
- dataIndex: "ins_co_nm",
- key: "ins_co_nm",
- ellipsis: true,
- filters:
- (jobs &&
- jobs
- .map((j) => j.ins_co_nm)
- .filter(onlyUnique)
- .map((s) => {
- return {
- text: s,
- value: [s],
- };
- })) ||
- [],
- onFilter: (value, record) => value.includes(record.ins_co_nm),
- responsive: ["md"],
- },
- {
- title: t("jobs.fields.clm_total"),
- dataIndex: "clm_total",
- key: "clm_total",
- responsive: ["md"],
- ellipsis: true,
-
- sorter: (a, b) => a.clm_total - b.clm_total,
- sortOrder:
- state.sortedInfo.columnKey === "clm_total" && state.sortedInfo.order,
- render: (text, record) => (
- {record.clm_total}
- ),
- },
- {
- title: t("jobs.labels.estimator"),
- dataIndex: "jobs.labels.estimator",
- key: "jobs.labels.estimator",
- ellipsis: true,
- responsive: ["xl"],
- filterSearch: true,
- filters:
- (jobs &&
- jobs
- .map((j) => `${j.est_ct_fn || ""} ${j.est_ct_ln || ""}`.trim())
- .filter(onlyUnique)
- .map((s) => {
- return {
- text: s || "N/A",
- value: [s],
- };
- })) ||
- [],
- onFilter: (value, record) =>
- value.includes(
- `${record.est_ct_fn || ""} ${record.est_ct_ln || ""}`.trim()
- ),
- render: (text, record) =>
- `${record.est_ct_fn || ""} ${record.est_ct_ln || ""}`.trim(),
- },
- {
- title: t("jobs.fields.comment"),
- dataIndex: "comment",
- key: "comment",
- ellipsis: true,
- responsive: ["md"],
- },
- // {
- // title: t("jobs.fields.owner_owing"),
- // dataIndex: "owner_owing",
- // key: "owner_owing",
- // responsive: ["md"],
- // render: (text, record) => (
- // {record.owner_owing}
- // ),
- // },
- ];
-
- const scrollMapper = {
- xs: true,
- sm: true,
- md: true,
- lg: "100%",
- xl: "100%",
- xxl: "100%",
- };
-
- return (
-
-
- {
- setSearchText(e.target.value);
- }}
- value={searchText}
- enterButton
- />
-
- }
- >
- {
- handleOnRowClick(record);
- },
- selectedRowKeys: [selected],
- type: "radio",
- }}
- onChange={handleTableChange}
- onRow={(record, rowIndex) => {
- return {
- onClick: (event) => {
- handleOnRowClick(record);
+ );
},
- };
- }}
- />
-
- );
+ },
+ {
+ title: t("jobs.fields.ownr_ph1"),
+ dataIndex: "ownr_ph1",
+ key: "ownr_ph1",
+ ellipsis: true,
+ responsive: ["md"],
+ render: (text, record) => (
+
+ ),
+ },
+ {
+ title: t("jobs.fields.ownr_ph2"),
+ dataIndex: "ownr_ph2",
+ key: "ownr_ph2",
+ ellipsis: true,
+ responsive: ["md"],
+ render: (text, record) => (
+
+ ),
+ },
+
+ {
+ title: t("jobs.fields.status"),
+ dataIndex: "status",
+ key: "status",
+ ellipsis: true,
+ sorter: true,
+ sortOrder:
+ sortcolumn === "status" && sortorder,
+ filters:
+ (jobs &&
+ jobs
+ .map((j) => j.status)
+ .filter(onlyUnique)
+ .map((s) => {
+ return {
+ text: s || "No Status*",
+ value: [s],
+ };
+ })) ||
+ [],
+ onFilter: (value, record) => value.includes(record.status),
+ },
+
+ {
+ title: t("jobs.fields.vehicle"),
+ dataIndex: "vehicle",
+ key: "vehicle",
+ ellipsis: true,
+ render: (text, record) => {
+ return record.vehicleid ? (
+ e.stopPropagation()}
+ >
+ {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
+ record.v_model_desc || ""
+ }`}
+
+ ) : (
+ {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
+ record.v_model_desc || ""
+ }`}
+ );
+ },
+ },
+ {
+ title: t("vehicles.fields.plate_no"),
+ dataIndex: "plate_no",
+ key: "plate_no",
+ ellipsis: true,
+ responsive: ["md"],
+ sorter: true,
+ sortOrder:
+ sortcolumn === "plate_no" && sortorder,
+ },
+ {
+ title: t("jobs.fields.clm_no"),
+ dataIndex: "clm_no",
+ key: "clm_no",
+ ellipsis: true,
+ responsive: ["md"],
+ sorter: true,
+ sortOrder:
+ sortcolumn === "clm_no" && sortorder,
+ render: (text, record) =>
+ `${record.clm_no || ""}${
+ record.po_number ? ` (PO: ${record.po_number})` : ""
+ }`,
+ },
+ {
+ title: t("jobs.fields.ins_co_nm"),
+ dataIndex: "ins_co_nm",
+ key: "ins_co_nm",
+ ellipsis: true,
+ filters:
+ (jobs &&
+ jobs
+ .map((j) => j.ins_co_nm)
+ .filter(onlyUnique)
+ .map((s) => {
+ return {
+ text: s,
+ value: [s],
+ };
+ })) ||
+ [],
+ onFilter: (value, record) => value.includes(record.ins_co_nm),
+ responsive: ["md"],
+ },
+ {
+ title: t("jobs.fields.clm_total"),
+ dataIndex: "clm_total",
+ key: "clm_total",
+ responsive: ["md"],
+ ellipsis: true,
+ sorter: true,
+ sortOrder:
+ sortcolumn === "clm_total" && sortorder,
+ render: (text, record) => (
+ {record.clm_total}
+ ),
+ },
+ {
+ title: t("jobs.labels.estimator"),
+ dataIndex: "jobs.labels.estimator",
+ key: "jobs.labels.estimator",
+ ellipsis: true,
+ responsive: ["xl"],
+ filterSearch: true,
+ filters:
+ (jobs &&
+ jobs
+ .map((j) => `${j.est_ct_fn || ""} ${j.est_ct_ln || ""}`.trim())
+ .filter(onlyUnique)
+ .map((s) => {
+ return {
+ text: s || "N/A",
+ value: [s],
+ };
+ })) ||
+ [],
+ onFilter: (value, record) =>
+ value.includes(
+ `${record.est_ct_fn || ""} ${record.est_ct_ln || ""}`.trim()
+ ),
+ render: (text, record) =>
+ `${record.est_ct_fn || ""} ${record.est_ct_ln || ""}`.trim(),
+ },
+ {
+ title: t("jobs.fields.comment"),
+ dataIndex: "comment",
+ key: "comment",
+ ellipsis: true,
+ responsive: ["md"],
+ },
+ // {
+ // title: t("jobs.fields.owner_owing"),
+ // dataIndex: "owner_owing",
+ // key: "owner_owing",
+ // responsive: ["md"],
+ // render: (text, record) => (
+ // {record.owner_owing}
+ // ),
+ // },
+ ];
+
+ const scrollMapper = {
+ xs: true,
+ sm: true,
+ md: true,
+ lg: "100%",
+ xl: "100%",
+ xxl: "100%",
+ };
+
+ return (
+
+
+ {
+ setSearchText(e.target.value);
+ }}
+ value={searchText}
+ enterButton
+ />
+
+ }
+ >
+ {
+ handleOnRowClick(record);
+ },
+ selectedRowKeys: [selected],
+ type: "radio",
+ }}
+ onChange={handleTableChange}
+ onRow={(record, rowIndex) => {
+ return {
+ onClick: (event) => {
+ handleOnRowClick(record);
+ },
+ };
+ }}
+ />
+
+ );
}
export default connect(mapStateToProps, null)(JobsList);
diff --git a/client/src/graphql/jobs.queries.js b/client/src/graphql/jobs.queries.js
index 21e82350b..1b87bace7 100644
--- a/client/src/graphql/jobs.queries.js
+++ b/client/src/graphql/jobs.queries.js
@@ -1,5 +1,65 @@
import { gql } from "@apollo/client";
+export const QUERY_ALL_ACTIVE_JOBS_PAGINATED = gql`
+ query QUERY_ALL_JOBS_PAGINATED_STATUS_FILTERED(
+ $offset: Int
+ $limit: Int
+ $order: [jobs_order_by!]
+ $statuses: [String!]!,
+ $isConverted: Boolean
+ ) {
+ jobs(
+ offset: $offset
+ limit: $limit
+ where: { status: { _in: $statuses }, converted: { _eq: $isConverted } }
+ order_by: { created_at: desc }
+ ) {
+ iouparent
+ ownr_fn
+ ownr_ln
+ ownr_co_nm
+ ownr_ph1
+ ownr_ph2
+ ownr_ea
+ ownerid
+ comment
+ plate_no
+ plate_st
+ v_vin
+ v_model_yr
+ v_model_desc
+ v_make_desc
+ v_color
+ vehicleid
+ actual_completion
+ actual_delivery
+ actual_in
+ production_vars
+ id
+ ins_co_nm
+ clm_no
+ po_number
+ clm_total
+ owner_owing
+ ro_number
+ scheduled_completion
+ scheduled_in
+ scheduled_delivery
+ status
+ updated_at
+ ded_amt
+ suspended
+ est_ct_fn
+ est_ct_ln
+ }
+ jobs_aggregate(where: { status: { _in: $statuses } }) {
+ aggregate {
+ count(distinct: true)
+ }
+ }
+ }
+`;
+
export const QUERY_ALL_ACTIVE_JOBS = gql`
query QUERY_ALL_ACTIVE_JOBS($statuses: [String!]!, $isConverted: Boolean) {
jobs(
diff --git a/client/src/pages/jobs-all/jobs-all.container.jsx b/client/src/pages/jobs-all/jobs-all.container.jsx
index 2518d6c16..a678ecab9 100644
--- a/client/src/pages/jobs-all/jobs-all.container.jsx
+++ b/client/src/pages/jobs-all/jobs-all.container.jsx
@@ -33,7 +33,7 @@ export function AllJobs({ setBreadcrumbs, setSelectedHeader }) {
fetchPolicy: "network-only",
nextFetchPolicy: "network-only",
variables: {
- offset: page ? (page - 1) * 25 : 0,
+ offset: page ? (page - 1) * 10 : 0,
limit: 25,
...(statusFilters ? { statusList: JSON.parse(statusFilters) } : {}),
order: [