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

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

@@ -1,13 +1,20 @@
 import React from "react";
+import { Link } from "react-router-dom";
+import { Button } from "antd";
 import JobsAvailableContainer from "../../components/jobs-available-new/jobs-available-new.container";
 import JobsAvailableSupplementContainer from "../../components/jobs-available-supplement/jobs-available-supplement.container";
-
+import { useTranslation } from "react-i18next";
 export default function JobsAvailablePageComponent({
   deleteJob,
   estDataLazyLoad
 }) {
+  const { t } = useTranslation();
   return (
     <div>
+      <Link to="/manage/jobs/create">
+        <Button>{t("jobs.actions.manualnew")}</Button>
+      </Link>
+      
       <JobsAvailableContainer
         deleteJob={deleteJob}
         estDataLazyLoad={estDataLazyLoad}

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>
   );
 }

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

@@ -2,28 +2,71 @@ import React, { useState } from "react";
 import JobsCreateComponent from "./jobs-create.component";
 import { Form } from "antd";
 import JobCreateContext from "./jobs-create.context";
-export default function JobsCreateContainer() {
-  const [form] = Form.useForm();
+import { useMutation, useLazyQuery } from "react-apollo";
+import { INSERT_NEW_JOB } from "../../graphql/jobs.queries";
+import { QUERY_OWNER_FOR_JOB_CREATION } from "../../graphql/owners.queries";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+export default connect(mapStateToProps, null)(JobsCreateContainer);
 
+function JobsCreateContainer({ bodyshop }) {
   const contextState = useState({
     vehicle: { new: false, search: "", selectedid: null },
     owner: { new: false, search: "", selectedid: null },
     job: null
   });
-
+  const [form] = Form.useForm();
   const [state] = contextState;
+  const [insertJob] = useMutation(INSERT_NEW_JOB);
+  const [loadOwner] = useLazyQuery(QUERY_OWNER_FOR_JOB_CREATION);
 
   const handleFinish = values => {
     console.log("Form Values", values);
-    //const vehicleSpread = state.vehicle.selectedid ? {vehicleid: state.vehicle.selectedid} : {vehicle: {data: { ...values.vehicle} }
-    const job = Object.assign(
+    console.log("state", state);
+    let job = Object.assign(
       {},
+      values,
       {
         vehicle: state.vehicle.selectedid ? null : values.vehicle,
         vehicleid: state.vehicle.selectedid || null
+      },
+      {
+        owner: state.owner.selectedid ? null : values.owner,
+        ownerid: state.owner.selectedid || null
+      },
+      {
+        status: bodyshop.md_ro_statuses.default_imported || "Open*", //Pull from redux store.
+        shopid: bodyshop.id
       }
     );
+
+    if (!!job.owner) {
+      //spread the owner into to the job
+      console.log("Spread New Owner");
+      let ownerData = job.owner.data;
+      delete ownerData.allow_text_message;
+      delete ownerData.preferred_contact;
+      job = { ...job, ...ownerData };
+      runInsertJob(job);
+    } else {
+      //lookup the owner and spread it then.
+      loadOwner({
+        variables: { id: state.owner.selectedid },
+        onCompleted: data => {
+          console.log("data", data);
+          runInsertJob({ ...job, ...data.owners_by_pk });
+        }
+      });
+    }
+  };
+
+  const runInsertJob = job => {
     console.log("Job To Save", job);
+    insertJob({ variables: { job: job } });
   };
 
   return (