BOD-10 BOD-12 BOD-11 WIP for Manual Job Creation.

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

@@ -0,0 +1,76 @@
+import { Button, message, Steps } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import JobsCreateVehicleInfoContainer from "../../components/jobs-create-vehicle-info/jobs-create-vehicle-info.container";
+
+export default function JobsCreateComponent({ form }) {
+  const [pageIndex, setPageIndex] = useState(0);
+  const { t } = useTranslation();
+  const steps = [
+    {
+      title: t("jobs.labels.create.vehicleinfo"),
+      content: <JobsCreateVehicleInfoContainer form={form} />
+    },
+    {
+      title: t("jobs.labels.create.ownerinfo"),
+      content: "Second-content"
+    },
+    {
+      title: t("jobs.labels.create.jobinfo"),
+      content: "Last-content"
+    }
+  ];
+
+  const next = () => {
+    setPageIndex(pageIndex + 1);
+  };
+  const prev = () => {
+    setPageIndex(pageIndex - 1);
+  };
+
+  const { Step } = Steps;
+  return (
+    <div>
+      <Steps current={pageIndex}>
+        {steps.map((item, idx) => (
+          <Step
+            key={item.title}
+            title={item.title}
+            style={{ cursor: "pointer" }}
+            onClick={() => {
+              setPageIndex(idx);
+            }}
+          />
+        ))}
+      </Steps>
+
+      {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>
+    </div>
+  );
+}

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

@@ -0,0 +1,36 @@
+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();
+
+  const contextState = useState({
+    vehicle: { new: false, search: "", selectedid: null },
+    owner: { new: false },
+    job: null
+  });
+
+  const [state, setState] = contextState;
+
+  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(
+      {},
+      {
+        vehicle: state.vehicle.selectedid ? null : values.vehicle,
+        vehicleid: state.vehicle.selectedid || null
+      }
+    );
+    console.log("Job To Save", job);
+  };
+
+  return (
+    <JobCreateContext.Provider value={contextState}>
+      <Form form={form} onFinish={handleFinish} autoComplete={"off"}>
+        <JobsCreateComponent form={form} />
+      </Form>
+    </JobCreateContext.Provider>
+  );
+}

client/src/pages/jobs-create/jobs-create.context.js

@@ -0,0 +1,3 @@
+import React from "react";
+const JobCreateContext = React.createContext(null);
+export default JobCreateContext;