Merged in feature/IO-2403-Paginated-Active-Jobs (pull request #1068)

Paginated Active Jobs / Pagination refactor

client/src/components/accounting-payables-table/accounting-payables-table.component.jsx

@@ -15,6 +15,7 @@ import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component";
 import BillMarkSelectedExported from "../payable-mark-selected-exported/payable-mark-selected-exported.component";
+import {pageLimit} from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -210,7 +211,7 @@ export function AccountingPayablesTableComponent({
       <Table
         loading={loading}
         dataSource={dataSource}
-        pagination={{ position: "top", pageSize: 50 }}
+        pagination={{ position: "top", pageSize: pageLimit }}
         columns={columns}
         rowKey="id"
         onChange={handleTableChange}

client/src/components/accounting-payments-table/accounting-payments-table.component.jsx

@@ -15,6 +15,7 @@ import PaymentExportButton from "../payment-export-button/payment-export-button.
 import PaymentMarkSelectedExported from "../payment-mark-selected-exported/payment-mark-selected-exported.component";
 import PaymentsExportAllButton from "../payments-export-all-button/payments-export-all-button.component";
 import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
+import {pageLimit} from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -209,7 +210,7 @@ export function AccountingPayablesTableComponent({
       <Table
         loading={loading}
         dataSource={dataSource}
-        pagination={{ position: "top", pageSize: 50 }}
+        pagination={{ position: "top", pageSize: pageLimit }}
         columns={columns}
         rowKey="id"
         onChange={handleTableChange}

client/src/components/audit-trail-list/audit-trail-list.component.jsx

@@ -4,6 +4,7 @@ import { alphaSort } from "../../utils/sorters";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
 import { useTranslation } from "react-i18next";
 import AuditTrailValuesComponent from "../audit-trail-values/audit-trail-values.component";
+import {pageLimit} from "../../utils/config";
 
 export default function AuditTrailListComponent({ loading, data }) {
   const [state, setState] = useState({
@@ -74,7 +75,7 @@ export default function AuditTrailListComponent({ loading, data }) {
     <Table
       {...formItemLayout}
       loading={loading}
-      pagination={{ position: "top", defaultPageSize: 25 }}
+      pagination={{ position: "top", defaultPageSize: pageLimit }}
       columns={columns}
       rowKey="id"
       dataSource={data}

client/src/components/audit-trail-list/email-audit-trail-list.component.jsx

@@ -3,6 +3,7 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
+import {pageLimit} from "../../utils/config";
 
 export default function EmailAuditTrailListComponent({ loading, data }) {
   const [state, setState] = useState({
@@ -53,7 +54,7 @@ export default function EmailAuditTrailListComponent({ loading, data }) {
     <Table
       {...formItemLayout}
       loading={loading}
-      pagination={{ position: "top", defaultPageSize: 25 }}
+      pagination={{ position: "top", defaultPageSize: pageLimit }}
       columns={columns}
       rowKey="id"
       dataSource={data}

client/src/components/chat-popup/chat-popup.component.jsx

@@ -132,7 +132,7 @@ export function ChatPopupComponent({
             onClick={() => toggleChatVisible()}
             style={{ cursor: "pointer" }}
           >
-            <MessageOutlined />
+            <MessageOutlined className="chat-popup-info-icon" />
             <strong>{t("messaging.labels.messaging")}</strong>
           </div>
         )}

client/src/components/chat-popup/chat-popup.styles.scss

@@ -13,6 +13,9 @@
     height: 100%;
   }
 }
+.chat-popup-info-icon {
+  margin-right: 5px;
+}
 
 @media only screen and (min-width: 992px) {
   .chat-popup {

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

@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import { alphaSort } from "../../utils/sorters";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import {pageLimit} from "../../utils/config";
 
 export default function ContractsJobsComponent({
   loading,
@@ -175,7 +176,7 @@ export default function ContractsJobsComponent({
         loading={loading}
         pagination={{
           position: "top",
-          defaultPageSize: 10,
+          defaultPageSize: pageLimit,
           defaultCurrent: defaultCurrent,
         }}
         columns={columns}

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

@@ -13,6 +13,7 @@ import moment from "moment";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import {pageLimit} from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -209,7 +210,7 @@ export function ContractsList({
         }}
         pagination={{
           position: "top",
-          pageSize: 25,
+          pageSize: pageLimit,
           current: parseInt(page || 1),
           total: total,
         }}

client/src/components/courtesy-car-contract-list/courtesy-car-contract-list.component.jsx

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import { Link, useHistory, useLocation } from "react-router-dom";
 import { DateFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
+import {pageLimit} from "../../utils/config";
 
 export default function CourtesyCarContractListComponent({
   contracts,
@@ -89,7 +90,7 @@ export default function CourtesyCarContractListComponent({
         scroll={{ x: true }}
         pagination={{
           position: "top",
-          pageSize: 25,
+          pageSize: pageLimit,
           current: parseInt(page || 1),
           total: totalContracts,
         }}

client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx

@@ -7,6 +7,7 @@ import { Link, useHistory, useLocation } from "react-router-dom";
 import { DateFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import {pageLimit} from "../../utils/config";
 
 export default function CsiResponseListPaginated({
   refetch,
@@ -106,7 +107,7 @@ export default function CsiResponseListPaginated({
         loading={loading}
         pagination={{
           position: "top",
-          pageSize: 25,
+          pageSize: pageLimit,
           current: parseInt(page || 1),
           total: total,
         }}

client/src/components/dashboard-components/monthly-job-costing/monthly-job-costing.component.jsx

@@ -6,6 +6,7 @@ import { alphaSort } from "../../../utils/sorters";
 import LoadingSkeleton from "../../loading-skeleton/loading-skeleton.component";
 import Dinero from "dinero.js";
 import DashboardRefreshRequired from "../refresh-required.component";
+import {pageLimit} from "../../../utils/config";
 
 export default function DashboardMonthlyJobCosting({ data, ...cardProps }) {
   const { t } = useTranslation();
@@ -118,7 +119,7 @@ export default function DashboardMonthlyJobCosting({ data, ...cardProps }) {
         <div style={{ height: "100%" }}>
           <Table
             onChange={handleTableChange}
-            pagination={{ position: "top", defaultPageSize: 50 }}
+            pagination={{ position: "top", defaultPageSize: pageLimit }}
             columns={columns}
             scroll={{ x: true, y: "calc(100% - 4em)" }}
             rowKey="id"

client/src/components/dashboard-components/scheduled-in-today/scheduled-in-today.component.jsx

@@ -11,6 +11,7 @@ import { Link } from "react-router-dom";
 import ChatOpenButton from "../../chat-open-button/chat-open-button.component";
 import OwnerNameDisplay from "../../owner-name-display/owner-name-display.component";
 import DashboardRefreshRequired from "../refresh-required.component";
+import {pageLimit} from "../../../utils/config";
 
 export default function DashboardScheduledInToday({ data, ...cardProps }) {
   const { t } = useTranslation();
@@ -195,7 +196,7 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
       <div style={{ height: "100%" }}>
         <Table
           onChange={handleTableChange}
-          pagination={{ position: "top", defaultPageSize: 50 }}
+          pagination={{ position: "top", defaultPageSize: pageLimit }}
           columns={columns}
           scroll={{ x: true, y: "calc(100% - 2em)" }}
           rowKey="id"

client/src/components/dashboard-components/scheduled-out-today/scheduled-out-today.component.jsx

@@ -11,6 +11,7 @@ import { Link } from "react-router-dom";
 import ChatOpenButton from "../../chat-open-button/chat-open-button.component";
 import OwnerNameDisplay from "../../owner-name-display/owner-name-display.component";
 import DashboardRefreshRequired from "../refresh-required.component";
+import {pageLimit} from "../../../utils/config";
 
 export default function DashboardScheduledOutToday({ data, ...cardProps }) {
   const { t } = useTranslation();
@@ -165,7 +166,7 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
       <div style={{ height: "100%" }}>
         <Table
           onChange={handleTableChange}
-          pagination={{ position: "top", defaultPageSize: 50 }}
+          pagination={{ position: "top", defaultPageSize: pageLimit }}
           columns={columns}
           scroll={{ x: true, y: "calc(100% - 2em)" }}
           rowKey="id"

client/src/components/dms-allocations-summary-ap/dms-allocations-summary-ap.component.jsx

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import {pageLimit} from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -117,7 +118,7 @@ export function DmsAllocationsSummaryAp({ socket, bodyshop, billids, title }) {
       }
     >
       <Table
-        pagination={{ position: "top", defaultPageSize: 50 }}
+        pagination={{ position: "top", defaultPageSize: pageLimit }}
         columns={columns}
         rowKey={(record) => `${record.InvoiceNumber}${record.Account}`}
         dataSource={allocationsSummary}

client/src/components/dms-allocations-summary/dms-allocations-summary.component.jsx

@@ -6,6 +6,7 @@ import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import Dinero from "dinero.js";
 import { SyncOutlined } from "@ant-design/icons";
+import {pageLimit} from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -94,7 +95,7 @@ export function DmsAllocationsSummary({ socket, bodyshop, jobId, title }) {
         <Alert type="warning" message={t("jobs.labels.dms.disablebillwip")} />
       )}
       <Table
-        pagination={{ position: "top", defaultPageSize: 50 }}
+        pagination={{ position: "top", defaultPageSize: pageLimit }}
         columns={columns}
         rowKey="center"
         dataSource={allocationsSummary}

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

@@ -11,6 +11,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import InventoryBillRo from "../inventory-bill-ro/inventory-bill-ro.component";
 import InventoryLineDelete from "../inventory-line-delete/inventory-line-delete.component";
+import {pageLimit} from "../../utils/config";
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
   bodyshop: selectBodyshop,
@@ -213,7 +214,7 @@ export function JobsList({
         loading={loading}
         pagination={{
           position: "top",
-          pageSize: 25,
+          pageSize: pageLimit,
           current: parseInt(page || 1),
           total: total,
         }}

client/src/components/job-costing-parts-table/job-costing-parts-table.component.jsx

@@ -3,6 +3,7 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { alphaSort } from "../../utils/sorters";
 import Dinero from "dinero.js";
+import {pageLimit} from "../../utils/config";
 export default function JobCostingPartsTable({ data, summaryData }) {
   const [searchText, setSearchText] = useState("");
   const [state, setState] = useState({
@@ -98,7 +99,7 @@ export default function JobCostingPartsTable({ data, summaryData }) {
           x: "50%", //y: "40rem"
         }}
         onChange={handleTableChange}
-        pagination={{ position: "top", defaultPageSize: 50 }}
+        pagination={{ position: "top", defaultPageSize: pageLimit }}
         columns={columns}
         rowKey="id"
         dataSource={filteredData}

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

@@ -12,6 +12,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import StartChatButton from "../chat-open-button/chat-open-button.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import {pageLimit} from "../../utils/config";
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
   bodyshop: selectBodyshop,
@@ -43,7 +44,6 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
         </Link>
       ),
     },
-
     {
       title: t("jobs.fields.owner"),
       dataIndex: "ownr_ln",
@@ -125,7 +125,6 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       title: t("vehicles.fields.plate_no"),
       dataIndex: "plate_no",
       key: "plate_no",
-
       ellipsis: true,
       sorter: true, //(a, b) => alphaSort(a.plate_no, b.plate_no),
       sortOrder: sortcolumn === "plate_no" && sortorder,
@@ -137,7 +136,6 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       title: t("jobs.fields.clm_no"),
       dataIndex: "clm_no",
       key: "clm_no",
-
       ellipsis: true,
       sorter: true, //(a, b) => alphaSort(a.clm_no, b.clm_no),
       sortOrder: sortcolumn === "clm_no" && sortorder,
@@ -259,11 +257,11 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
         pagination={
           search?.search
             ? {
-                pageSize: 25,
+                pageSize: pageLimit,
                 showSizeChanger: false,
               }
             : {
-                pageSize: 25,
+                pageSize: pageLimit,
                 current: parseInt(page || 1),
                 total: total,
                 showSizeChanger: false,

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

@@ -1,395 +1,433 @@
-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, Typography} 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, {useEffect, 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 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 {flattenDeep} from "lodash";
+import { pageLimit } from '../../utils/config';
+import axios from "axios";
 
 const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop,
+    bodyshop: selectBodyshop,
 });
 
-export function JobsList({ bodyshop }) {
+const mapDispatchToProps = () => ({
-  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",
-  });
 
-  const [state, setState] = useState({
+export function JobsList({bodyshop,}) {
-    sortedInfo: {},
+    const search = queryString.parse(useLocation().search);
-    filteredInfo: { text: "" },
+    const [openSearchResults, setOpenSearchResults] = useState([]);
-  });
+    const [searchLoading, setSearchLoading] = useState(false);
+    const {page, selected, sortorder, sortcolumn} = search;
 
-  const { t } = useTranslation();
+    const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
-  const history = useHistory();
+        .filter((screen) => !!screen[1])
-  const [searchText, setSearchText] = useState("");
+        .slice(-1)[0];
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+    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 jobs = data
+    const total = data?.jobs_aggregate?.aggregate?.count || 0;
-    ? 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) => {
+    const [state, setState] = useState({
-    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+        filteredInfo: {text: ""},
-  };
+    });
 
-  const handleOnRowClick = (record) => {
+    const {t} = useTranslation();
-    if (record) {
+    const history = useHistory();
-      if (record.id) {
+
-        history.push({
+    const jobs = data?.jobs || [];
-          search: queryString.stringify({
+
-            ...searchParams,
+    const handleTableChange = (pagination, filters, sorter) => {
-            selected: record.id,
+        // TODO: Is this needed?
-          }),
+        setState({...state, filteredInfo: filters});
-        });
+
-      }
+        search.page = pagination.current;
+        search.sortcolumn = sorter.column && sorter.column.key;
+        search.sortorder = sorter.order;
+
+        if (filters.status) {
+            search.statusFilters = JSON.stringify(flattenDeep(filters.status));
+        } else {
+            delete search.statusFilters;
+        }
+
+        history.push({search: queryString.stringify(search)});
+    };
+
+    useEffect(() => {
+        if (search.search && search.search.trim() !== "") {
+            searchJobs().catch(e => {
+                console.error('Something went wrong searching for jobs in the job-list component', e);
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    if (error) return <AlertComponent message={error.message} type="error"/>;
+
+    async function searchJobs(value) {
+        try {
+            setSearchLoading(true);
+            const searchData = await axios.post("/search", {
+                search: value || search.search,
+                index: "jobs",
+            });
+            setOpenSearchResults(searchData.data.hits.hits.map((s) => s._source));
+        } catch (error) {
+            console.log("Error while fetching search results", error);
+        } finally {
+            setSearchLoading(false);
+        }
     }
-  };
 
-  const columns = [
+    const handleOnRowClick = (record) => {
-    {
+        if (record) {
-      title: t("jobs.fields.ro_number"),
+            if (record.id) {
-      dataIndex: "ro_number",
+                history.push({
-      key: "ro_number",
+                    search: queryString.stringify({
-      sorter: (a, b) =>
+                        ...search,
-        parseInt((a.ro_number || "0").replace(/\D/g, "")) -
+                        selected: record.id,
-        parseInt((b.ro_number || "0").replace(/\D/g, "")),
+                    }),
-      sortOrder:
+                });
-        state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
+            }
+        }
+    };
 
-      render: (text, record) => (
+    const columns = [
-        <Link
+        {
-          to={"/manage/jobs/" + record.id}
+            title: t("jobs.fields.ro_number"),
-          onClick={(e) => e.stopPropagation()}
+            dataIndex: "ro_number",
-        >
+            key: "ro_number",
-          <Space>
+            sorter: true,
-            {record.ro_number || t("general.labels.na")}
+            sortOrder:
-            {record.production_vars && record.production_vars.alert ? (
+                sortcolumn === "ro_number" && sortorder,
-              <ExclamationCircleFilled className="production-alert" />
-            ) : null}
-            {record.suspended && (
-              <PauseCircleOutlined style={{ color: "orangered" }} />
-            )}
-            {record.iouparent && (
-              <Tooltip title={t("jobs.labels.iou")}>
-                <BranchesOutlined style={{ color: "orangered" }} />
-              </Tooltip>
-            )}
-          </Space>
-        </Link>
-      ),
-    },
-    {
-      title: t("jobs.fields.owner"),
-      dataIndex: "owner",
-      key: "owner",
-      ellipsis: true,
 
-      responsive: ["md"],
+            render: (text, record) => (
-      sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
+                <Link
-      sortOrder:
+                    to={"/manage/jobs/" + record.id}
-        state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
+                    onClick={(e) => e.stopPropagation()}
-      render: (text, record) => {
+                >
-        return record.ownerid ? (
+                    <Space>
-          <Link
+                        {record.ro_number || t("general.labels.na")}
-            to={"/manage/owners/" + record.ownerid}
+                        {record.production_vars && record.production_vars.alert ? (
-            onClick={(e) => e.stopPropagation()}
+                            <ExclamationCircleFilled className="production-alert"/>
-          >
+                        ) : null}
-            <OwnerNameDisplay ownerObject={record} />
+                        {record.suspended && (
-          </Link>
+                            <PauseCircleOutlined style={{color: "orangered"}}/>
-        ) : (
+                        )}
-          <span>
+                        {record.iouparent && (
-            <OwnerNameDisplay ownerObject={record} />
+                            <Tooltip title={t("jobs.labels.iou")}>
+                                <BranchesOutlined style={{color: "orangered"}}/>
+                            </Tooltip>
+                        )}
+                    </Space>
+                </Link>
+            ),
+        },
+        {
+            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 ? (
+                    <Link
+                        to={"/manage/owners/" + record.ownerid}
+                        onClick={(e) => e.stopPropagation()}
+                    >
+                        <OwnerNameDisplay ownerObject={record}/>
+                    </Link>
+                ) : (
+                    <span>
+            <OwnerNameDisplay ownerObject={record}/>
           </span>
-        );
+                );
-      },
-    },
-    {
-      title: t("jobs.fields.ownr_ph1"),
-      dataIndex: "ownr_ph1",
-      key: "ownr_ph1",
-      ellipsis: true,
-      responsive: ["md"],
-      render: (text, record) => (
-        <ChatOpenButton phone={record.ownr_ph1} jobid={record.id} />
-      ),
-    },
-    {
-      title: t("jobs.fields.ownr_ph2"),
-      dataIndex: "ownr_ph2",
-      key: "ownr_ph2",
-      ellipsis: true,
-      responsive: ["md"],
-      render: (text, record) => (
-        <ChatOpenButton phone={record.ownr_ph2} jobid={record.id} />
-      ),
-    },
-
-    {
-      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 ? (
-          <Link
-            to={"/manage/vehicles/" + record.vehicleid}
-            onClick={(e) => e.stopPropagation()}
-          >
-            {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
-              record.v_model_desc || ""
-            }`}
-          </Link>
-        ) : (
-          <span>{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
-            record.v_model_desc || ""
-          }`}</span>
-        );
-      },
-    },
-    {
-      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) => (
-        <CurrencyFormatter>{record.clm_total}</CurrencyFormatter>
-      ),
-    },
-    {
-      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) => (
-    //     <CurrencyFormatter>{record.owner_owing}</CurrencyFormatter>
-    //   ),
-    // },
-  ];
-
-  const scrollMapper = {
-    xs: true,
-    sm: true,
-    md: true,
-    lg: "100%",
-    xl: "100%",
-    xxl: "100%",
-  };
-
-  return (
-    <Card
-      title={t("titles.bc.jobs-active")}
-      extra={
-        <Space wrap>
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
-          <Input.Search
-            placeholder={t("general.labels.search")}
-            onChange={(e) => {
-              setSearchText(e.target.value);
-            }}
-            value={searchText}
-            enterButton
-          />
-        </Space>
-      }
-    >
-      <Table
-        loading={loading}
-        pagination={{ defaultPageSize: 50 }}
-        columns={columns}
-        rowKey="id"
-        dataSource={jobs}
-        scroll={{
-          x: selectedBreakpoint ? scrollMapper[selectedBreakpoint[0]] : "100%",
-        }}
-        rowSelection={{
-          onSelect: (record) => {
-            handleOnRowClick(record);
-          },
-          selectedRowKeys: [selected],
-          type: "radio",
-        }}
-        onChange={handleTableChange}
-        onRow={(record, rowIndex) => {
-          return {
-            onClick: (event) => {
-              handleOnRowClick(record);
             },
-          };
+        },
-        }}
+        {
-      />
+            title: t("jobs.fields.ownr_ph1"),
-    </Card>
+            dataIndex: "ownr_ph1",
-  );
+            key: "ownr_ph1",
+            ellipsis: true,
+            responsive: ["md"],
+            render: (text, record) => (
+                <ChatOpenButton phone={record.ownr_ph1} jobid={record.id}/>
+            ),
+        },
+        {
+            title: t("jobs.fields.ownr_ph2"),
+            dataIndex: "ownr_ph2",
+            key: "ownr_ph2",
+            ellipsis: true,
+            responsive: ["md"],
+            render: (text, record) => (
+                <ChatOpenButton phone={record.ownr_ph2} jobid={record.id}/>
+            ),
+        },
+
+        {
+            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 ? (
+                    <Link
+                        to={"/manage/vehicles/" + record.vehicleid}
+                        onClick={(e) => e.stopPropagation()}
+                    >
+                        {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
+                            record.v_model_desc || ""
+                        }`}
+                    </Link>
+                ) : (
+                    <span>{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
+                        record.v_model_desc || ""
+                    }`}</span>
+                );
+            },
+        },
+        {
+            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) => (
+                <CurrencyFormatter>{record.clm_total}</CurrencyFormatter>
+            ),
+        },
+        {
+            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) => (
+        //     <CurrencyFormatter>{record.owner_owing}</CurrencyFormatter>
+        //   ),
+        // },
+    ];
+
+    const scrollMapper = {
+        xs: true,
+        sm: true,
+        md: true,
+        lg: "100%",
+        xl: "100%",
+        xxl: "100%",
+    };
+
+    return (
+        <Card
+            title={t("titles.bc.jobs-active")}
+            extra={
+                <Space wrap>
+                    {search.search && (
+                        <>
+                            <Typography.Title level={4}>
+                                {t("general.labels.searchresults", { search: search.search })}
+                            </Typography.Title>
+                            <Button
+                                onClick={() => {
+                                    delete search.search;
+                                    delete search.page;
+                                    history.push({ search: queryString.stringify(search) });
+                                }}
+                            >
+                                {t("general.actions.clear")}
+                            </Button>
+                        </>
+                    )}
+                    <Button onClick={() => refetch()}>
+                        <SyncOutlined />
+                    </Button>
+                    <Input.Search
+                        placeholder={search.search || t("general.labels.search")}
+                        onSearch={(value) => {
+                            search.search = value;
+                            history.push({ search: queryString.stringify(search) });
+                            searchJobs(value);
+                        }}
+                        loading={loading || searchLoading}
+                        enterButton
+                    />
+                </Space>
+            }
+        >
+            <Table
+                loading={loading || searchLoading }
+                pagination={
+                    search?.search
+                        ? {
+                            pageSize: pageLimit,
+                            showSizeChanger: false,
+
+                        }
+                        : {
+                            pageSize: pageLimit,
+                            current: parseInt(page || 1),
+                            total: total,
+                            showSizeChanger: false,
+                        }
+                }
+                columns={columns}
+                rowKey="id"
+                dataSource={search?.search ? openSearchResults : jobs}
+                scroll={{
+                    x: selectedBreakpoint ? scrollMapper[selectedBreakpoint[0]] : "100%",
+                }}
+                rowSelection={{
+                    onSelect: (record) => {
+                        handleOnRowClick(record);
+                    },
+                    selectedRowKeys: [selected],
+                    type: "radio",
+                }}
+                onChange={handleTableChange}
+                onRow={(record) => {
+                    return {
+                        onClick: () => {
+                            handleOnRowClick(record);
+                        },
+                    };
+                }}
+            />
+        </Card>
+    );
 }
 
-export default connect(mapStateToProps, null)(JobsList);
+export default connect(mapStateToProps, mapDispatchToProps)(JobsList);

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

@@ -20,6 +20,7 @@ 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 {pageLimit} from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -377,7 +378,7 @@ export function JobsReadyList({ bodyshop }) {
     >
       <Table
         loading={loading}
-        pagination={{ defaultPageSize: 50 }}
+        pagination={{ defaultPageSize: pageLimit }}
         columns={columns}
         rowKey="id"
         dataSource={jobs}

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

@@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next";
 import { Link, useHistory, useLocation } from "react-router-dom";
 import PhoneFormatter from "../../utils/PhoneFormatter";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import {pageLimit} from "../../utils/config";
 
 export default function OwnersListComponent({
   loading,
@@ -122,7 +123,7 @@ export default function OwnersListComponent({
         loading={loading}
         pagination={{
           position: "top",
-          pageSize: 25,
+          pageSize: pageLimit,
           current: parseInt(page || 1),
           total: total,
         }}

client/src/components/payments-list-paginated/payment-list-paginated.component.jsx

@@ -18,6 +18,7 @@ import { alphaSort } from "../../utils/sorters";
 import CaBcEtfTableModalContainer from "../ca-bc-etf-table-modal/ca-bc-etf-table-modal.container";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
+import {pageLimit} from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -282,11 +283,11 @@ export function PaymentsListPaginated({
         pagination={
           search?.search
             ? {
-                pageSize: 25,
+                pageSize: pageLimit,
                 showSizeChanger: false,
               }
             : {
-                pageSize: 25,
+                pageSize: pageLimit,
                 current: parseInt(page || 1),
                 total: total,
                 showSizeChanger: false,

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

@@ -10,13 +10,14 @@ import OwnerNameDisplay from "../owner-name-display/owner-name-display.component
 import ScoreboardEntryEdit from "../scoreboard-entry-edit/scoreboard-entry-edit.component";
 import ScoreboardRemoveButton from "../scoreboard-remove-button/scorebard-remove-button.component";
 import { SyncOutlined } from "@ant-design/icons";
+import {pageLimit} from "../../utils/config";
 export default function ScoreboardJobsList({ scoreBoardlist }) {
   const { t } = useTranslation();
   const [state, setState] = useState({
     visible: false,
     search: "",
     current: 1,
-    pageSize: 10,
+    pageSize: pageLimit,
   });
 
   const { loading, error, data, refetch } = useQuery(
@@ -148,7 +149,7 @@ export default function ScoreboardJobsList({ scoreBoardlist }) {
             }
             pagination={{
               position: "top",
-              pageSize: state.pageSize || 10,
+              pageSize: state.pageSize || pageLimit,
               current: state.current || 1,
               total: data ? data.scoreboard_aggregate.aggregate.count : 0,
             }}

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

@@ -5,6 +5,7 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useHistory, useLocation } from "react-router-dom";
 import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";
+import {pageLimit} from "../../utils/config";
 export default function VehiclesListComponent({
   loading,
   vehicles,
@@ -106,7 +107,7 @@ export default function VehiclesListComponent({
         loading={loading}
         pagination={{
           position: "top",
-          pageSize: 25,
+          pageSize: pageLimit,
           current: parseInt(page || 1),
           total: total,
         }}

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/bills/bills.page.component.jsx

@@ -14,6 +14,7 @@ import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
 import { TemplateList } from "../../utils/TemplateConstants";
 import { alphaSort, dateSort } from "../../utils/sorters";
+import {pageLimit} from "../../utils/config";
 
 const mapDispatchToProps = (dispatch) => ({
   setPartsOrderContext: (context) =>
@@ -295,11 +296,11 @@ export function BillsListPage({
         pagination={
           search?.search
             ? {
-                pageSize: 25,
+                pageSize: pageLimit,
                 showSizeChanger: false,
               }
             : {
-                pageSize: 25,
+                pageSize: pageLimit,
                 current: parseInt(page || 1),
                 total: total,
                 showSizeChanger: false,

client/src/pages/export-logs/export-logs.page.component.jsx

@@ -12,6 +12,7 @@ import AlertComponent from "../../components/alert/alert.component";
 import { QUERY_EXPORT_LOG_PAGINATED } from "../../graphql/accounting.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
+import {pageLimit} from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -178,7 +179,7 @@ export function ExportLogsPageComponent({ bodyshop }) {
         loading={loading}
         pagination={{
           position: "top",
-          pageSize: 25,
+          pageSize: pageLimit,
           current: parseInt(page || 1),
           total: data && data.search_exportlog_aggregate.aggregate.count,
         }}

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

client/src/pages/parts-queue/parts-queue.page.component.jsx

@@ -18,6 +18,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import { DateTimeFormatter, TimeAgoFormatter } from "../../utils/DateFormatter";
 import { alphaSort, dateSort } from "../../utils/sorters";
 import useLocalStorage from "../../utils/useLocalStorage";
+import {pageLimit} from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -296,7 +297,7 @@ export function PartsQueuePageComponent({ bodyshop }) {
         loading={loading}
         pagination={{
           position: "top",
-          pageSize: 50,
+          pageSize: pageLimit,
           // current: parseInt(page || 1),
           // total: data && data.jobs_aggregate.aggregate.count,
         }}

client/src/pages/phonebook/phonebook.page.component.jsx

@@ -17,6 +17,7 @@ import {
 import ChatOpenButton from "../../components/chat-open-button/chat-open-button.component";
 import { alphaSort } from "../../utils/sorters";
 import { HasRbacAccess } from "../../components/rbac-wrapper/rbac-wrapper.component";
+import {pageLimit} from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -189,7 +190,7 @@ export function PhonebookPageComponent({ bodyshop, authLevel }) {
         loading={loading}
         pagination={{
           position: "top",
-          pageSize: 25,
+          pageSize: pageLimit,
           current: parseInt(page || 1),
           total: data && data.search_phonebook_aggregate.aggregate.count,
         }}

client/src/utils/config.js

@@ -0,0 +1,4 @@
+
+// Sometimes referred to as PageSize, this variable controls the amount of records
+// to show on one page during pagination.
+export const pageLimit = 50;

libs/awsUtils.js

@@ -0,0 +1,56 @@
+require("dotenv").config({
+    path: require("path").resolve(
+        process.cwd(),
+        `.env.${process.env.NODE_ENV || "development"}`
+    ),
+});
+const {isNil} = require('lodash');
+const aws4 = require("aws4");
+const {Connection, Client} = require("@opensearch-project/opensearch");
+const {defaultProvider} = require("@aws-sdk/credential-provider-node");
+
+const createAwsConnector = (credentials, region) => {
+    class AmazonConnection extends Connection {
+        buildRequestObject(params) {
+            const request = super.buildRequestObject(params);
+            request.service = "es";
+            request.region = region;
+            request.headers = request.headers || {};
+            request.headers["host"] = request.hostname;
+
+            return aws4.sign(request, credentials);
+        }
+    }
+    return {
+        Connection: AmazonConnection,
+    };
+};
+
+const getClient = async () => {
+
+    // We have manual configuration for OpenSearch,
+    // Return a client using these custom credentials
+    if (
+        !isNil(process.env.OPEN_SEARCH_PASSWORD) &&
+        !isNil(process.env.OPEN_SEARCH_USER) &&
+        !isNil(process.env.OPEN_SEARCH_HOST) &&
+        !isNil(process.env.OPEN_SEARCH_PROTOCOL)
+    ) {
+        // The URI is currently being stored in its entirety, so strip protocol prior to rebuilding it.
+        const hostUrl = process.env.OPEN_SEARCH_HOST.replace(/^https?:\/\//i, '');
+        const node = `${process.env.OPEN_SEARCH_PROTOCOL}://${process.env.OPEN_SEARCH_USER}:${process.env.OPEN_SEARCH_PASSWORD}@${hostUrl}`;
+
+        return new Client({
+            node,
+        });
+    }
+
+    // Default to the AWS Credentials Provider.
+    const credentials = await defaultProvider()();
+    return new Client({
+        ...createAwsConnector(credentials, "ca-central-1"),
+        node: process.env.OPEN_SEARCH_HOST,
+    });
+};
+
+module.exports = { getClient };

os-loader.js

@@ -1,59 +1,17 @@
-const Dinero = require("dinero.js");
-
-//const client = require("../graphql-client/graphql-client").client;
-const _ = require("lodash");
-const GraphQLClient = require("graphql-request").GraphQLClient;
-const logger = require("./server/utils/logger");
-
-const path = require("path");
-const client = require("./server/graphql-client/graphql-client").client;
 require("dotenv").config({
-  path: path.resolve(
+  path: require("path").resolve(
-    process.cwd(),
+      process.cwd(),
-    `.env.${process.env.NODE_ENV || "development"}`
+      `.env.${process.env.NODE_ENV || "development"}`
   ),
 });
-const { Client, Connection } = require("@opensearch-project/opensearch");
-const { defaultProvider } = require("@aws-sdk/credential-provider-node");
-const aws4 = require("aws4");
-const { gql } = require("graphql-request");
-const gqlclient = require("./server/graphql-client/graphql-client").client;
-// const osClient = new Client({
-//   node: `https://imex:Wl0d8k@!@search-imexonline-search-ixp2stfvwp6qocjsowzjzyreoy.ca-central-1.es.amazonaws.com/`,
-// });
 
-var host = process.env.OPEN_SEARCH_HOST; // e.g. https://my-domain.region.es.amazonaws.com
+const {omit} = require("lodash");
-const createAwsConnector = (credentials, region) => {
+const gqlClient = require("./server/graphql-client/graphql-client").client;
-  class AmazonConnection extends Connection {
+const getClient = require('./libs/awsUtils');
-    buildRequestObject(params) {
-      const request = super.buildRequestObject(params);
-      request.service = "es";
-      request.region = region;
-      request.headers = request.headers || {};
-      request.headers["host"] = request.hostname;
-
-      return aws4.sign(request, credentials);
-    }
-  }
-  return {
-    Connection: AmazonConnection,
-  };
-};
-
-const getClient = async () => {
-  const credentials = await defaultProvider()();
-  return new Client({
-    ...createAwsConnector(credentials, "ca-central-1"),
-    node: host,
-  });
-};
 
 async function OpenSearchUpdateHandler(req, res) {
   try {
-    var osClient = await getClient();
+    const osClient = await getClient();
-    // const osClient = new Client({
-    //   node: `https://imex:password@search-imexonline-search-ixp2stfvwp6qocjsowzjzyreoy.ca-central-1.es.amazonaws.com`,
-    // });
 
     //Clear out all current documents
     // const deleteResult = await osClient.deleteByQuery({
@@ -67,11 +25,11 @@ async function OpenSearchUpdateHandler(req, res) {
 
     // return;
 
-    var batchSize = 1000;
+    const batchSize = 1000;
-    var promiseQueue = [];
+    const promiseQueue = [];
 
     //Jobs Load.
-    const jobsData = await gqlclient.request(`query{jobs{
+    const jobsData = await gqlClient.request(`query{jobs{
           id
           bodyshopid:shopid
           clm_no
@@ -105,7 +63,7 @@ async function OpenSearchUpdateHandler(req, res) {
     }
 
     //Owner Load
-    const ownersData = await gqlclient.request(`{
+    const ownersData = await gqlClient.request(`{
       owners {
         id
         bodyshopid: shopid
@@ -131,7 +89,7 @@ async function OpenSearchUpdateHandler(req, res) {
     }
 
     //Vehicles
-    const vehiclesData = await gqlclient.request(`{
+    const vehiclesData = await gqlClient.request(`{
       vehicles {
         id
         bodyshopid: shopid
@@ -158,7 +116,7 @@ async function OpenSearchUpdateHandler(req, res) {
     }
 
     //payments
-    const paymentsData = await gqlclient.request(`{
+    const paymentsData = await gqlClient.request(`{
       payments {
         id
         amount
@@ -198,7 +156,7 @@ async function OpenSearchUpdateHandler(req, res) {
       slicedArray.forEach((payment) => {
         bulkOperation.push({ index: { _index: "payments", _id: payment.id } });
         bulkOperation.push({
-          ..._.omit(payment, ["job"]),
+          ...omit(payment, ["job"]),
           bodyshopid: payment.job.bodyshopid,
         });
       });
@@ -206,7 +164,7 @@ async function OpenSearchUpdateHandler(req, res) {
     }
 
     //bills
-    const billsData = await gqlclient.request(`{
+    const billsData = await gqlClient.request(`{
       bills {
         id
         date
@@ -235,7 +193,7 @@ async function OpenSearchUpdateHandler(req, res) {
       slicedArray.forEach((bill) => {
         bulkOperation.push({ index: { _index: "bills", _id: bill.id } });
         bulkOperation.push({
-          ..._.omit(bill, ["job"]),
+          ...omit(bill, ["job"]),
           bodyshopid: bill.job.bodyshopid,
         });
       });

server/opensearch/os-handler.js

@@ -1,49 +1,18 @@
-const queries = require("../graphql-client/queries");
-const {pick} = require("lodash");
-const GraphQLClient = require("graphql-request").GraphQLClient;
-const logger = require("../utils/logger");
-//const client = require("../graphql-client/graphql-client").client;
-
-const path = require("path");
-const client = require("../graphql-client/graphql-client").client;
 require("dotenv").config({
-    path: path.resolve(
+    path: require("path").resolve(
         process.cwd(),
         `.env.${process.env.NODE_ENV || "development"}`
     ),
 });
-const {Client, Connection} = require("@opensearch-project/opensearch");
-const {defaultProvider} = require("@aws-sdk/credential-provider-node");
-const aws4 = require("aws4");
-const {gql} = require("graphql-request");
 
-var host = process.env.OPEN_SEARCH_HOST;
+const GraphQLClient = require("graphql-request").GraphQLClient;
+//const client = require("../graphql-client/graphql-client").client;
+const logger = require("../utils/logger");
+const queries = require("../graphql-client/queries");
+const client = require("../graphql-client/graphql-client").client;
+const {pick, isNil} = require("lodash");
+const {getClient} = require('../../libs/awsUtils');
 
-const createAwsConnector = (credentials, region) => {
-    class AmazonConnection extends Connection {
-        buildRequestObject(params) {
-            const request = super.buildRequestObject(params);
-            request.service = "es";
-            request.region = region;
-            request.headers = request.headers || {};
-            request.headers["host"] = request.hostname;
-
-            return aws4.sign(request, credentials);
-        }
-    }
-
-    return {
-        Connection: AmazonConnection,
-    };
-};
-
-const getClient = async () => {
-    const credentials = await defaultProvider()();
-    return new Client({
-        ...createAwsConnector(credentials, "ca-central-1"),
-        node: host,
-    });
-};
 
 async function OpenSearchUpdateHandler(req, res) {
     if (req.headers["event-secret"] !== process.env.EVENT_SECRET) {
@@ -51,10 +20,8 @@ async function OpenSearchUpdateHandler(req, res) {
         return;
     }
     try {
-        var osClient = await getClient();
+
-        // const osClient = new Client({
+        const osClient = await getClient();
-        //   node: `https://imex:<password>@search-imexonline-search-ixp2stfvwp6qocjsowzjzyreoy.ca-central-1.es.amazonaws.com/`,
-        // });
 
         if (req.body.event.op === "DELETE") {
             let response;
@@ -197,14 +164,12 @@ async function OpenSearchUpdateHandler(req, res) {
                 body: document,
             };
 
-            let response;
+            const response = await osClient.index(payload);
-            response = await osClient.index(payload);
             console.log(response.body);
             res.status(200).json(response.body);
         }
     } catch (error) {
         res.status(400).json(JSON.stringify(error));
-    } finally {
     }
 }
 
@@ -240,6 +205,8 @@ async function OpenSearchSearchHandler(req, res) {
 
         const osClient = await getClient();
 
+        const bodyShopIdMatchOverride = isNil(process.env.BODY_SHOP_ID_MATCH_OVERRIDE) ? assocs.associations[0].shopid : process.env.BODY_SHOP_ID_MATCH_OVERRIDE
+
         const {body} = await osClient.search({
             ...(index ? {index} : {}),
             body: {
@@ -249,7 +216,7 @@ async function OpenSearchSearchHandler(req, res) {
                         must: [
                             {
                                 match: {
-                                    bodyshopid: assocs.associations[0].shopid,
+                                    bodyshopid: bodyShopIdMatchOverride,
                                 },
                             },
                             {
@@ -318,7 +285,6 @@ async function OpenSearchSearchHandler(req, res) {
             error: JSON.stringify(error),
         });
         res.status(400).json(error);
-    } finally {
     }
 }