BOD-11 BOD-12 BOD-10 WIP Guided manual estimate creation.

client/src/pages/jobs-create/jobs-create.component.jsx

@@ -1,24 +1,34 @@
 import { Button, message, Steps } from "antd";
-import React, { useState } from "react";
+import React, { useState, useContext } from "react";
 import { useTranslation } from "react-i18next";
-import JobsCreateVehicleInfoContainer from "../../components/jobs-create-vehicle-info/jobs-create-vehicle-info.container";
 import JobsCreateOwnerInfoContainer from "../../components/jobs-create-owner-info/jobs-create-owner-info.container";
+import JobsCreateVehicleInfoContainer from "../../components/jobs-create-vehicle-info/jobs-create-vehicle-info.container";
+import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
+import AlertComponent from "../../components/alert/alert.component";
+import JobsCreateJobsInfo from "../../components/jobs-create-jobs-info/jobs-create-jobs-info.component";
 
-export default function JobsCreateComponent() {
+export default function JobsCreateComponent({ form }) {
   const [pageIndex, setPageIndex] = useState(0);
+  const [errorMessage, setErrorMessage] = useState(null);
+  const [state] = useContext(JobCreateContext);
+
   const { t } = useTranslation();
   const steps = [
     {
       title: t("jobs.labels.create.vehicleinfo"),
-      content: <JobsCreateVehicleInfoContainer />
+      content: <JobsCreateVehicleInfoContainer />,
+      validation: !!state.vehicle.new || !!state.vehicle.selectedid,
+      error: t("vehicles.errors.selectexistingornew")
     },
     {
       title: t("jobs.labels.create.ownerinfo"),
-      content: <JobsCreateOwnerInfoContainer />
+      content: <JobsCreateOwnerInfoContainer />,
+      validation: !!state.owner.new || !!state.owner.selectedid,
+      error: t("owners.errors.selectexistingornew")
     },
     {
       title: t("jobs.labels.create.jobinfo"),
-      content: "Last-content"
+      content: <JobsCreateJobsInfo form={form} />
     }
   ];
 
@@ -28,8 +38,49 @@ export default function JobsCreateComponent() {
   const prev = () => {
     setPageIndex(pageIndex - 1);
   };
-
   const { Step } = Steps;
+
+  const ProgressButtons = () => {
+    return (
+      <div className="steps-action" style={{ float: "right" }}>
+        {pageIndex > 0 && (
+          <Button style={{ margin: 8 }} onClick={() => prev()}>
+            Previous
+          </Button>
+        )}
+        {pageIndex < steps.length - 1 && (
+          <Button
+            type="primary"
+            onClick={() => {
+              form
+                .validateFields()
+                .then(r => {
+                  if (steps[pageIndex].validation) {
+                    setErrorMessage(null);
+                    next();
+                  } else {
+                    setErrorMessage(steps[pageIndex].error);
+                  }
+                })
+                .catch(error => console.log("error", error));
+            }}
+          >
+            Next
+          </Button>
+        )}
+        {pageIndex === steps.length - 1 && (
+          <Button
+            type="primary"
+            htmlType="submit"
+            onClick={() => message.success("Processing complete!")}
+          >
+            Done
+          </Button>
+        )}
+      </div>
+    );
+  };
+
   return (
     <div>
       <Steps current={pageIndex}>
@@ -39,38 +90,33 @@ export default function JobsCreateComponent() {
             title={item.title}
             style={{ cursor: "pointer" }}
             onClick={() => {
-              setPageIndex(idx);
+              form
+                .validateFields()
+                .then(r => {
+                  if (steps[pageIndex].validation) {
+                    setErrorMessage(null);
+                    setPageIndex(idx);
+                  } else {
+                    setErrorMessage(steps[pageIndex].error);
+                  }
+                })
+                .catch(error => console.log("error", error));
             }}
           />
         ))}
       </Steps>
+      <ProgressButtons />
+
+      {errorMessage ? (
+        <AlertComponent message={errorMessage} type="error" />
+      ) : null}
 
       {steps.map((item, idx) => (
         <div key={idx} style={{ display: idx === pageIndex ? "" : "none" }}>
           {item.content}
         </div>
       ))}
-
-      <div className='steps-action'>
-        {pageIndex > 0 && (
-          <Button style={{ margin: 8 }} onClick={() => prev()}>
-            Previous
-          </Button>
-        )}
-        {pageIndex < steps.length - 1 && (
-          <Button type='primary' onClick={() => next()}>
-            Next
-          </Button>
-        )}
-        {pageIndex === steps.length - 1 && (
-          <Button
-            type='primary'
-            htmlType='submit'
-            onClick={() => message.success("Processing complete!")}>
-            Done
-          </Button>
-        )}
-      </div>
+      <ProgressButtons />
     </div>
   );
 }