Added searching to available jobs page. BOD-199

client/src/components/jobs-available-supplement/jobs-available-supplement.component.jsx

@@ -3,7 +3,7 @@ import {
   PlusCircleFilled,
   SyncOutlined,
 } from "@ant-design/icons";
-import { Button, notification, Table } from "antd";
+import { Button, notification, Table, Input } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
@@ -29,6 +29,7 @@ export default function JobsAvailableSupplementComponent({
   modalSearchState,
 }) {
   const { t } = useTranslation();
+  const [searchText, setSearchText] = useState("");
 
   const [state, setState] = useState({
     sortedInfo: {},
@@ -176,6 +177,21 @@ export default function JobsAvailableSupplementComponent({
       });
   };
 
+  const availableJobs = data
+    ? searchText
+      ? data.available_jobs.filter(
+          (j) =>
+            (j.ownr_name || "")
+              .toLowerCase()
+              .includes(searchText.toLowerCase()) ||
+            (j.vehicle_info || "")
+              .toLowerCase()
+              .includes(searchText.toLowerCase()) ||
+            (j.clm_no || "").toLowerCase().includes(searchText.toLowerCase())
+        )
+      : data.available_jobs
+    : [];
+
   return (
     <div>
       <JobsFindModalContainer
@@ -193,24 +209,26 @@ export default function JobsAvailableSupplementComponent({
         loading={loading}
         title={() => {
           return (
-            <div className="imex-flex-row">
-              <strong className="imex-flex-row__margin">
-                {t("jobs.labels.availablesupplements")}
-              </strong>
+            <div className="imex-table-header">
+              <strong>{t("jobs.labels.availablesupplements")}</strong>
               <Button
-                className="imex-flex-row__margin"
                 onClick={() => {
                   refetch();
                 }}
               >
                 <SyncOutlined />
               </Button>
-              <Button
-                className="imex-flex-row__margin"
-                onClick={handleDeleteAll}
-              >
-                Delete All
+              <Button onClick={handleDeleteAll}>
+                {t("general.actions.deleteall")}
               </Button>
+              <div className="imex-table-header__search">
+                <Input.Search
+                  placeholder={t("general.labels.search")}
+                  onChange={(e) => {
+                    setSearchText(e.currentTarget.value);
+                  }}
+                />
+              </div>
             </div>
           );
         }}
@@ -218,7 +236,7 @@ export default function JobsAvailableSupplementComponent({
         pagination={{ position: "top" }}
         columns={columns}
         rowKey="id"
-        dataSource={data && data.available_jobs}
+        dataSource={availableJobs}
         onChange={handleTableChange}
       />
     </div>