Added breadcrumb object + breadcrumbs for major pages.

client/src/pages/jobs-detail/jobs-detail.page.component.jsx

@@ -3,7 +3,7 @@ import Icon, {
   CalendarFilled,
   DollarCircleOutlined,
   FileImageFilled,
-  ToolFilled
+  ToolFilled,
 } from "@ant-design/icons";
 import { Form, notification, Tabs } from "antd";
 import moment from "moment";
@@ -14,7 +14,7 @@ import {
   FaHistory,
   FaInfo,
   FaRegStickyNote,
-  FaShieldAlt
+  FaShieldAlt,
 } from "react-icons/fa";
 import { useHistory, useLocation } from "react-router-dom";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
@@ -57,9 +57,7 @@ const JobLineUpsertModalContainer = lazy(() =>
     "../../components/job-lines-upsert-modal/job-lines-upsert-modal.container"
   )
 );
-const EnterInvoiceModalContainer = lazy(() =>
-  import("../../components/invoice-enter-modal/invoice-enter-modal.container")
-);
+
 const JobsDetailPliContainer = lazy(() =>
   import("../../components/jobs-detail-pli/jobs-detail-pli.container")
 );
@@ -73,7 +71,7 @@ export default function JobsDetailPage({
   mutationConvertJob,
   handleSubmit,
   refetch,
-  updateJobStatus
+  updateJobStatus,
 }) {
   const { t } = useTranslation();
   const [form] = Form.useForm();
@@ -83,22 +81,22 @@ export default function JobsDetailPage({
   const formItemLayout = {
     labelCol: {
       xs: { span: 12 },
-      sm: { span: 5 }
+      sm: { span: 5 },
     },
     wrapperCol: {
       xs: { span: 24 },
-      sm: { span: 12 }
-    }
+      sm: { span: 12 },
+    },
   };
 
-  const handleFinish = values => {
+  const handleFinish = (values) => {
     mutationUpdateJob({
-      variables: { jobId: job.id, job: values }
-    }).then(r => {
+      variables: { jobId: job.id, job: values },
+    }).then((r) => {
       notification["success"]({
-        message: t("jobs.successes.savetitle")
+        message: t("jobs.successes.savetitle"),
       });
-      refetch().then(r => form.resetFields());
+      refetch().then((r) => form.resetFields());
     });
   };
 
@@ -108,7 +106,6 @@ export default function JobsDetailPage({
     >
       <ScheduleJobModalContainer />
       <JobLineUpsertModalContainer />
-      <EnterInvoiceModalContainer />
 
       <Form
         form={form}
@@ -143,7 +140,7 @@ export default function JobsDetailPage({
             : null,
           date_invoiced: job.date_invoiced ? moment(job.date_invoiced) : null,
           date_closed: job.date_closed ? moment(job.date_closed) : null,
-          date_exported: job.date_exported ? moment(job.date_exported) : null
+          date_exported: job.date_exported ? moment(job.date_exported) : null,
         }}
       >
         <JobsDetailHeader
@@ -155,7 +152,7 @@ export default function JobsDetailPage({
         />
         <Tabs
           defaultActiveKey={search.tab}
-          onChange={key => history.push({ search: `?tab=${key}` })}
+          onChange={(key) => history.push({ search: `?tab=${key}` })}
         >
           <Tabs.TabPane
             tab={

client/src/pages/jobs-detail/jobs-detail.page.container.jsx

@@ -4,30 +4,41 @@ import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import AlertComponent from "../../components/alert/alert.component";
 import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
-import { CONVERT_JOB_TO_RO, GET_JOB_BY_PK, UPDATE_JOB, UPDATE_JOB_STATUS } from "../../graphql/jobs.queries";
+import {
+  CONVERT_JOB_TO_RO,
+  GET_JOB_BY_PK,
+  UPDATE_JOB,
+  UPDATE_JOB_STATUS,
+} from "../../graphql/jobs.queries";
 import JobsDetailPage from "./jobs-detail.page.component";
+import { setBreadcrumbs } from "../../redux/application/application.actions";
+import { connect } from "react-redux";
 
-function JobsDetailPageContainer({ match }) {
+const mapDispatchToProps = (dispatch) => ({
+  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+});
+
+function JobsDetailPageContainer({ match, setBreadcrumbs }) {
   const { jobId } = match.params;
   const { t } = useTranslation();
 
   const { loading, error, data, refetch } = useQuery(GET_JOB_BY_PK, {
     variables: { id: jobId },
-    fetchPolicy: "network-only"
+    fetchPolicy: "network-only",
   });
   const [mutationUpdateJob] = useMutation(UPDATE_JOB);
   const [mutationConvertJob] = useMutation(CONVERT_JOB_TO_RO);
   const [mutationUpdateJobstatus] = useMutation(UPDATE_JOB_STATUS);
 
-  const updateJobStatus = status => {
+  const updateJobStatus = (status) => {
     mutationUpdateJobstatus({
-      variables: { jobId: jobId, status: status }
+      variables: { jobId: jobId, status: status },
     })
-      .then(r => {
+      .then((r) => {
         notification["success"]({ message: t("jobs.successes.save") });
         refetch();
       })
-      .catch(error => {
+      .catch((error) => {
         notification[error]({ message: t("jobs.errors.saving") });
       });
   };
@@ -40,9 +51,23 @@ function JobsDetailPageContainer({ match }) {
       : t("titles.jobsdetail", {
           ro_number: data.jobs_by_pk.converted
             ? data.jobs_by_pk.ro_number
-            : `EST ${data.jobs_by_pk.est_number}`
+            : `EST ${data.jobs_by_pk.est_number}`,
         });
-  }, [loading, data, t, error]);
+    setBreadcrumbs([
+      { link: "/manage/jobs", label: t("titles.bc.jobs") },
+      {
+        link: `/manage/jobs/${jobId}`,
+        label: t("titles.bc.jobs-detail", {
+          number:
+            (data &&
+              (data.jobs_by_pk.converted
+                ? data && data.jobs_by_pk.ro_number
+                : `EST ${data.jobs_by_pk.est_number}`)) ||
+            "",
+        }),
+      },
+    ]);
+  }, [loading, data, t, error, setBreadcrumbs, jobId]);
 
   if (loading) return <SpinComponent />;
   if (error) return <AlertComponent message={error.message} type="error" />;
@@ -59,4 +84,4 @@ function JobsDetailPageContainer({ match }) {
     <AlertComponent message={t("jobs.errors.noaccess")} type="error" />
   );
 }
-export default JobsDetailPageContainer;
+export default connect(null, mapDispatchToProps)(JobsDetailPageContainer);