Added searching to available jobs page. BOD-199

bodyshop_translations.babel

@@ -6108,6 +6108,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>deleteall</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>edit</name>
                                         <definition_loaded>false</definition_loaded>

client/src/components/jobs-available-new/jobs-available-new.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";
@@ -27,7 +27,7 @@ export default function JobsAvailableComponent({
   estData,
 }) {
   const { t } = useTranslation();
-
+  const [searchText, setSearchText] = useState("");
   const [state, setState] = useState({
     sortedInfo: {},
     filteredInfo: { text: "" },
@@ -156,6 +156,21 @@ export default function JobsAvailableComponent({
       ? estData.data.available_jobs_by_pk.est_data.owner.data
       : null;
 
+  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>
       <OwnerFindModalContainer
@@ -173,12 +188,9 @@ export default function JobsAvailableComponent({
         loading={loading}
         title={() => {
           return (
-            <div className="imex-flex-row">
+            <div className="imex-table-header">
-              <strong className="imex-flex-row__margin">
+              <strong>{t("jobs.labels.availablenew")}</strong>
-                {t("jobs.labels.availablenew")}
-              </strong>
               <Button
-                className="imex-flex-row__margin"
                 onClick={() => {
                   refetch();
                 }}
@@ -186,7 +198,6 @@ export default function JobsAvailableComponent({
                 <SyncOutlined />
               </Button>
               <Button
-                className="imex-flex-row__margin"
                 onClick={() => {
                   deleteAllNewJobs()
                     .then((r) => {
@@ -204,16 +215,24 @@ export default function JobsAvailableComponent({
                     });
                 }}
               >
-                Delete All
+                {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>
           );
         }}
         size="small"
         pagination={{ position: "top" }}
-        columns={columns.map((item) => ({ ...item }))}
+        columns={columns}
         rowKey="id"
-        dataSource={data && data.available_jobs}
+        dataSource={availableJobs}
         onChange={handleTableChange}
       />
     </div>

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">
+            <div className="imex-table-header">
-              <strong className="imex-flex-row__margin">
+              <strong>{t("jobs.labels.availablesupplements")}</strong>
-                {t("jobs.labels.availablesupplements")}
-              </strong>
               <Button
-                className="imex-flex-row__margin"
                 onClick={() => {
                   refetch();
                 }}
               >
                 <SyncOutlined />
               </Button>
-              <Button
+              <Button onClick={handleDeleteAll}>
-                className="imex-flex-row__margin"
+                {t("general.actions.deleteall")}
-                onClick={handleDeleteAll}
-              >
-                Delete All
               </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>

client/src/components/jobs-export-all-button/jobs-export-all-button.component.jsx

@@ -5,10 +5,9 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { auth } from "../../firebase/firebase.utils";
+import { auth, logImEXEvent } from "../../firebase/firebase.utils";
-import { UPDATE_JOB, UPDATE_JOBS } from "../../graphql/jobs.queries";
+import { UPDATE_JOBS } from "../../graphql/jobs.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import { logImEXEvent } from "../../firebase/firebase.utils";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,

client/src/translations/en_us/common.json

@@ -408,6 +408,7 @@
 				"close": "Close",
 				"create": "Create",
 				"delete": "Delete",
+				"deleteall": "Delete All",
 				"edit": "Edit",
 				"login": "Login",
 				"refresh": "Refresh",

client/src/translations/es/common.json

@@ -408,6 +408,7 @@
 				"close": "",
 				"create": "",
 				"delete": "Borrar",
+				"deleteall": "",
 				"edit": "Editar",
 				"login": "",
 				"refresh": "",

client/src/translations/fr/common.json

@@ -408,6 +408,7 @@
 				"close": "",
 				"create": "",
 				"delete": "Effacer",
+				"deleteall": "",
 				"edit": "modifier",
 				"login": "",
 				"refresh": "",