Progress

client/src/components/jobs-list/jobs-list.component.jsx

@@ -1,97 +1,84 @@
-import {
+import {BranchesOutlined, ExclamationCircleFilled, PauseCircleOutlined, SyncOutlined,} from "@ant-design/icons";
-  SyncOutlined,
+import {useQuery} from "@apollo/client";
-  ExclamationCircleFilled,
+import {Button, Card, Grid, Input, Space, Table, Tooltip} from "antd";
-  PauseCircleOutlined,
-  BranchesOutlined,
-} 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 React, {useState} from "react";
-import { useTranslation } from "react-i18next";
+import {useTranslation} from "react-i18next";
-import { connect } from "react-redux";
+import {connect} from "react-redux";
-import { Link, useHistory, useLocation } from "react-router-dom";
+import {Link, useHistory, useLocation} from "react-router-dom";
-import { createStructuredSelector } from "reselect";
+import {createStructuredSelector} from "reselect";
-import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
+import {QUERY_ALL_ACTIVE_JOBS_PAGINATED} from "../../graphql/jobs.queries";
-import { selectBodyshop } from "../../redux/user/user.selectors";
+import {selectBodyshop} from "../../redux/user/user.selectors";
-import { onlyUnique } from "../../utils/arrayHelper";
+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,
 });
 
-export function JobsList({ bodyshop }) {
+export function JobsList({bodyshop,}) {
+    const pageLimit = 10;
     const searchParams = queryString.parse(useLocation().search);
-  const { selected } = searchParams;
+    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 { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
+
+    const {loading, error, data, refetch} = useQuery(QUERY_ALL_ACTIVE_JOBS_PAGINATED, {
+
         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",
     });
 
+    const total = data?.jobs_aggregate?.aggregate?.count || 0;
+
     const [state, setState] = useState({
-    sortedInfo: {},
+        filteredInfo: {text: ""},
-    filteredInfo: { text: "" },
     });
 
-  const { t } = useTranslation();
+    const {t} = useTranslation();
     const history = useHistory();
     const [searchText, setSearchText] = useState("");
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+    if (error) return <AlertComponent message={error.message} type="error"/>;
 
-  const jobs = data
+    const jobs = data?.jobs || [];
-    ? 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 handleTableChange = (pagination, filters, sorter) => {
-    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+        setState({...state, filteredInfo: filters});
+
+        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) => {
@@ -112,11 +99,9 @@ export function JobsList({ bodyshop }) {
             title: t("jobs.fields.ro_number"),
             dataIndex: "ro_number",
             key: "ro_number",
-      sorter: (a, b) =>
+            sorter: true,
-        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,
+                sortcolumn === "ro_number" && sortorder,
 
             render: (text, record) => (
                 <Link
@@ -126,14 +111,14 @@ export function JobsList({ bodyshop }) {
                     <Space>
                         {record.ro_number || t("general.labels.na")}
                         {record.production_vars && record.production_vars.alert ? (
-              <ExclamationCircleFilled className="production-alert" />
+                            <ExclamationCircleFilled className="production-alert"/>
                         ) : null}
                         {record.suspended && (
-              <PauseCircleOutlined style={{ color: "orangered" }} />
+                            <PauseCircleOutlined style={{color: "orangered"}}/>
                         )}
                         {record.iouparent && (
                             <Tooltip title={t("jobs.labels.iou")}>
-                <BranchesOutlined style={{ color: "orangered" }} />
+                                <BranchesOutlined style={{color: "orangered"}}/>
                             </Tooltip>
                         )}
                     </Space>
@@ -145,22 +130,20 @@ export function JobsList({ bodyshop }) {
             dataIndex: "owner",
             key: "owner",
             ellipsis: true,
-
             responsive: ["md"],
-      sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
+            sorter: false,
-      sortOrder:
+            sortOrder: sortcolumn === "owner" && sortorder,
-        state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
             render: (text, record) => {
                 return record.ownerid ? (
                     <Link
                         to={"/manage/owners/" + record.ownerid}
                         onClick={(e) => e.stopPropagation()}
                     >
-            <OwnerNameDisplay ownerObject={record} />
+                        <OwnerNameDisplay ownerObject={record}/>
                     </Link>
                 ) : (
                     <span>
-            <OwnerNameDisplay ownerObject={record} />
+            <OwnerNameDisplay ownerObject={record}/>
           </span>
                 );
             },
@@ -172,7 +155,7 @@ export function JobsList({ bodyshop }) {
             ellipsis: true,
             responsive: ["md"],
             render: (text, record) => (
-        <ChatOpenButton phone={record.ownr_ph1} jobid={record.id} />
+                <ChatOpenButton phone={record.ownr_ph1} jobid={record.id}/>
             ),
         },
         {
@@ -182,7 +165,7 @@ export function JobsList({ bodyshop }) {
             ellipsis: true,
             responsive: ["md"],
             render: (text, record) => (
-        <ChatOpenButton phone={record.ownr_ph2} jobid={record.id} />
+                <ChatOpenButton phone={record.ownr_ph2} jobid={record.id}/>
             ),
         },
 
@@ -191,10 +174,9 @@ export function JobsList({ bodyshop }) {
             dataIndex: "status",
             key: "status",
             ellipsis: true,
-
+            sorter: true,
-      sorter: (a, b) => alphaSort(a.status, b.status),
             sortOrder:
-        state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
+                sortcolumn === "status" && sortorder,
             filters:
                 (jobs &&
                     jobs
@@ -237,11 +219,10 @@ export function JobsList({ bodyshop }) {
             dataIndex: "plate_no",
             key: "plate_no",
             ellipsis: true,
-
             responsive: ["md"],
-      sorter: (a, b) => alphaSort(a.plate_no, b.plate_no),
+            sorter: true,
             sortOrder:
-        state.sortedInfo.columnKey === "plate_no" && state.sortedInfo.order,
+                sortcolumn === "plate_no" && sortorder,
         },
         {
             title: t("jobs.fields.clm_no"),
@@ -249,9 +230,9 @@ export function JobsList({ bodyshop }) {
             key: "clm_no",
             ellipsis: true,
             responsive: ["md"],
-      sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
+            sorter: true,
             sortOrder:
-        state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order,
+                sortcolumn === "clm_no" && sortorder,
             render: (text, record) =>
                 `${record.clm_no || ""}${
                     record.po_number ? ` (PO: ${record.po_number})` : ""
@@ -283,10 +264,9 @@ export function JobsList({ bodyshop }) {
             key: "clm_total",
             responsive: ["md"],
             ellipsis: true,
-
+            sorter: true,
-      sorter: (a, b) => a.clm_total - b.clm_total,
             sortOrder:
-        state.sortedInfo.columnKey === "clm_total" && state.sortedInfo.order,
+                sortcolumn === "clm_total" && sortorder,
             render: (text, record) => (
                 <CurrencyFormatter>{record.clm_total}</CurrencyFormatter>
             ),
@@ -350,7 +330,7 @@ export function JobsList({ bodyshop }) {
             extra={
                 <Space wrap>
                     <Button onClick={() => refetch()}>
-            <SyncOutlined />
+                        <SyncOutlined/>
                     </Button>
                     <Input.Search
                         placeholder={t("general.labels.search")}
@@ -365,7 +345,20 @@ export function JobsList({ bodyshop }) {
         >
             <Table
                 loading={loading}
-        pagination={{ defaultPageSize: 50 }}
+                pagination={
+                    searchParams?.search
+                        ? {
+                            pageSize: pageLimit,
+                            showSizeChanger: false,
+
+                        }
+                        : {
+                            pageSize: pageLimit,
+                            current: parseInt(page || 1),
+                            total: total,
+                            showSizeChanger: false,
+                        }
+                }
                 columns={columns}
                 rowKey="id"
                 dataSource={jobs}

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(

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: [