Added all jobs page with pagination BOD-80

client/src/pages/jobs-all/jobs-all.container.jsx

@@ -0,0 +1,95 @@
+import { useQuery } from "@apollo/react-hooks";
+import queryString from "query-string";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { useLocation } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
+import AlertComponent from "../../components/alert/alert.component";
+import JobsListPaginated from "../../components/jobs-list-paginated/jobs-list-paginated.component";
+import { QUERY_ALL_JOBS_PAGINATED } from "../../graphql/jobs.queries";
+import { setBreadcrumbs } from "../../redux/application/application.actions";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+});
+
+export function AllJobs({ bodyshop, setBreadcrumbs }) {
+  const search = queryString.parse(useLocation().search);
+  const { page, sortcolumn, sortorder } = search;
+
+  const { loading, error, data, refetch } = useQuery(QUERY_ALL_JOBS_PAGINATED, {
+    variables: {
+      offset: page ? (page - 1) * 25 : 0,
+      limit: 25,
+      order: [
+        {
+          [sortcolumn || "est_number"]: sortorder
+            ? sortorder === "descend"
+              ? "desc"
+              : "asc"
+            : "desc",
+        },
+      ],
+    },
+  });
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    document.title = t("titles.jobs-all");
+    setBreadcrumbs([{ link: "/manage/jobs", label: t("titles.bc.jobs-all") }]);
+  }, [t, setBreadcrumbs]);
+
+  const searchTextState = useState("");
+  const searchText = searchTextState[0];
+  if (error) return <AlertComponent message={error.message} type='error' />;
+  return (
+    <div>
+      <JobsListPaginated
+        searchTextState={searchTextState}
+        refetch={refetch}
+        loading={loading}
+        searchParams={search}
+        total={data ? data.jobs_aggregate.aggregate.count : 0}
+        jobs={
+          data
+            ? searchText === ""
+              ? 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.plate_no || "")
+                      .toLowerCase()
+                      .includes(searchText.toLowerCase()) ||
+                    (j.v_model_desc || "")
+                      .toLowerCase()
+                      .includes(searchText.toLowerCase()) ||
+                    (j.v_make_desc || "")
+                      .toLowerCase()
+                      .includes(searchText.toLowerCase())
+                )
+            : null
+        }
+      />
+    </div>
+  );
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(AllJobs);

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

@@ -86,6 +86,8 @@ const ShopTemplates = lazy(() =>
 const JobIntake = lazy(() =>
   import("../jobs-intake/jobs-intake.page.container")
 );
+const AllJobs = lazy(() => import("../jobs-all/jobs-all.container"));
+
 const { Header, Content, Footer } = Layout;
 
 export default function Manage({ match }) {
@@ -123,6 +125,11 @@ export default function Manage({ match }) {
                   exact
                   path={`${match.path}/jobs/:jobId/intake`}
                   component={JobIntake}
+                />{" "}
+                <Route
+                  exact
+                  path={`${match.path}/jobs/all`}
+                  component={AllJobs}
                 />
                 <Route
                   exact