IO-2261 Opensearch for Payments, Bills and All Jobs

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

@@ -1,5 +1,6 @@
 import { SyncOutlined } from "@ant-design/icons";
 import { Button, Card, Input, Space, Table, Typography } from "antd";
+import axios from "axios";
 import _ from "lodash";
 import queryString from "query-string";
 import React, { useEffect, useState } from "react";
@@ -11,7 +12,6 @@ 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 axios from "axios";
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
   bodyshop: selectBodyshop,
@@ -209,11 +209,11 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
         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 {
-      //setLoading(false)
+      // setLoading(false);
     }
   }
 

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

@@ -1,7 +1,8 @@
 import { EditFilled, SyncOutlined } from "@ant-design/icons";
 import { Button, Card, Input, Space, Table, Typography } from "antd";
+import axios from "axios";
 import queryString from "query-string";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useHistory, useLocation } from "react-router-dom";
@@ -10,11 +11,11 @@ import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter, DateTimeFormatter } from "../../utils/DateFormatter";
-import { alphaSort } from "../../utils/sorters";
 import { TemplateList } from "../../utils/TemplateConstants";
+import { alphaSort } from "../../utils/sorters";
 import CaBcEtfTableModalContainer from "../ca-bc-etf-table-modal/ca-bc-etf-table-modal.container";
-import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -39,6 +40,7 @@ export function PaymentsListPaginated({
   bodyshop,
 }) {
   const search = queryString.parse(useLocation().search);
+  const [openSearchResults, setOpenSearchResults] = useState([]);
   const { page, sortcolumn, sortorder } = search;
   const history = useHistory();
   const [state, setState] = useState({
@@ -54,11 +56,15 @@ export function PaymentsListPaginated({
       key: "ro_number",
       sorter: (a, b) => alphaSort(a.job.ro_number, b.job.ro_number),
       sortOrder: sortcolumn === "ro_number" && sortorder,
-      render: (text, record) => (
-        <Link to={"/manage/jobs/" + record.job.id}>
-          {record.job.ro_number || t("general.labels.na")}
-        </Link>
-      ),
+      render: (text, record) => {
+        return record.job ? (
+          <Link to={"/manage/jobs/" + record.job.id}>
+            {record.job.ro_number || t("general.labels.na")}
+          </Link>
+        ) : (
+          <span>{t("general.labels.na")}</span>
+        );
+      },
     },
     {
       title: t("payments.fields.paymentnum"),
@@ -75,13 +81,13 @@ export function PaymentsListPaginated({
       sorter: (a, b) => alphaSort(a.job.ownr_ln, b.job.ownr_ln),
       sortOrder: sortcolumn === "owner" && sortorder,
       render: (text, record) => {
-        return record.job.owner ? (
-          <Link to={"/manage/owners/" + record.job.owner.id}>
-            <OwnerNameDisplay ownerObject={record} />
+        return record.job?.owner ? (
+          <Link to={"/manage/owners/" + record.job?.owner?.id}>
+            <OwnerNameDisplay ownerObject={record.job} />
           </Link>
         ) : (
           <span>
-            <OwnerNameDisplay ownerObject={record} />
+            <OwnerNameDisplay ownerObject={record.job} />
           </span>
         );
       },
@@ -177,6 +183,28 @@ export function PaymentsListPaginated({
     history.push({ search: queryString.stringify(search) });
   };
 
+  useEffect(() => {
+    if (search.search && search.search.trim() !== "") {
+      //  setLoading(true);
+      searchPayments();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  async function searchPayments(value) {
+    try {
+      const searchData = await axios.post("/search", {
+        search: value || search.search,
+        index: "payments",
+      });
+      setOpenSearchResults(searchData.data.hits.hits.map((s) => s._source));
+    } catch (error) {
+      console.log("Error while fetching search results", error);
+    } finally {
+      // setLoading(false);
+    }
+  }
+
   return (
     <Card
       extra={
@@ -212,6 +240,7 @@ export function PaymentsListPaginated({
             onSearch={(value) => {
               search.search = value;
               history.push({ search: queryString.stringify(search) });
+              searchPayments(value);
             }}
             enterButton
           />
@@ -221,15 +250,20 @@ export function PaymentsListPaginated({
       <Table
         loading={loading}
         scroll={{ x: true }}
-        pagination={{
-          position: "top",
-          pageSize: 25,
-          current: parseInt(page || 1),
-          total: total,
-        }}
+        pagination={
+          search?.search
+            ? { pageSize: 25 }
+            : {
+                position: "top",
+                pageSize: 25,
+                current: parseInt(page || 1),
+                total: total,
+                showSizeChanger: false,
+              }
+        }
         columns={columns}
         rowKey="id"
-        dataSource={payments}
+        dataSource={search?.search ? openSearchResults : payments}
         onChange={handleTableChange}
       />
     </Card>