Minor fixes: Job detail card schedule, job list search, job list sorting.

client/src/pages/jobs/jobs.page.jsx

@@ -4,12 +4,25 @@ import { useTranslation } from "react-i18next";
 import AlertComponent from "../../components/alert/alert.component";
 import JobDetailCards from "../../components/job-detail-cards/job-detail-cards.component";
 import JobsList from "../../components/jobs-list/jobs-list.component";
-import { QUERY_ALL_OPEN_JOBS } from "../../graphql/jobs.queries";
+import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
 
-//TODO Implement pagination for this.
-export default function JobsPage({ match, location }) {
-  const { loading, error, data } = useQuery(QUERY_ALL_OPEN_JOBS, {
-    fetchPolicy: "network-only"
+import { selectBodyshop } from "../../redux/user/user.selectors";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+
+export default connect(
+  mapStateToProps,
+  null
+)(function JobsPage({ match, location, bodyshop }) {
+  const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
+    fetchPolicy: "network-only",
+    variables: {
+      statuses: bodyshop.md_ro_statuses.open_statuses || ["Open"]
+    }
   });
   const { t } = useTranslation();
 
@@ -19,17 +32,53 @@ export default function JobsPage({ match, location }) {
 
   const { hash } = location;
   const [selectedJob, setSelectedJob] = useState(hash ? hash.substr(1) : null);
+  const searchTextState = useState("");
+  const searchText = searchTextState[0];
+  if (error) return <AlertComponent message={error.message} type='error' />;
+  //TODO Implement pagination for this.
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  console.log(typeof searchText);
   return (
     <div>
       <JobsList
+        searchTextState={searchTextState}
+        refetch={refetch}
         loading={loading}
         selectedJob={selectedJob}
         setSelectedJob={setSelectedJob}
-        jobs={data ? data.jobs : null}
+        jobs={
+          data
+            ? searchTextState[0] === ""
+              ? data.jobs
+              : data.jobs.filter(
+                  j =>
+                    (j.ro_number || "")
+                      .toString()
+                      .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.vehicle.plate_no || "")
+                      .toLowerCase()
+                      .includes(searchText.toLowerCase()) ||
+                    (j.vehicle.v_model_desc || "")
+                      .toLowerCase()
+                      .includes(searchText.toLowerCase()) ||
+                    (j.vehicle.v_make_desc || "")
+                      .toLowerCase()
+                      .includes(searchText.toLowerCase())
+                )
+            : null
+        }
       />
       <JobDetailCards selectedJob={selectedJob} />
     </div>
   );
-}
+});