Updated to include completion date on intake. BOD-401

client/src/components/job-checklist/components/job-checklist-form/job-checklist-form.component.jsx

@@ -6,15 +6,15 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { useHistory, useLocation, useParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
+import { logImEXEvent } from "../../../../firebase/firebase.utils";
 import { MARK_LATEST_APPOINTMENT_AS_ARRIVED } from "../../../../graphql/appointments.queries";
 import { UPDATE_JOB } from "../../../../graphql/jobs.queries";
 import {
   selectBodyshop,
   selectCurrentUser,
 } from "../../../../redux/user/user.selectors";
-import DateTimePicker from "../../../form-date-time-picker/form-date-time-picker.component";
 import ConfigFormComponents from "../../../config-form-components/config-form-components.component";
-import { logImEXEvent } from "../../../../firebase/firebase.utils";
+import DateTimePicker from "../../../form-date-time-picker/form-date-time-picker.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -24,7 +24,13 @@ const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
-export function JobChecklistForm({ formItems, bodyshop, currentUser, type }) {
+export function JobChecklistForm({
+  formItems,
+  bodyshop,
+  currentUser,
+  type,
+  job,
+}) {
   const { t } = useTranslation();
   const [intakeJob] = useMutation(UPDATE_JOB);
   const [loading, setLoading] = useState(false);
@@ -32,6 +38,7 @@ export function JobChecklistForm({ formItems, bodyshop, currentUser, type }) {
   const { jobId } = useParams();
   const history = useHistory();
   const search = queryString.parse(useLocation().search);
+  const [form] = Form.useForm();
 
   const handleFinish = async (values) => {
     setLoading(true);
@@ -48,7 +55,7 @@ export function JobChecklistForm({ formItems, bodyshop, currentUser, type }) {
           ...(type === "intake" && { actual_in: new Date() }),
 
           ...(type === "intake" && {
-            scheduled_completion: values.scheduledCompletion,
+            scheduled_completion: values.scheduled_completion,
           }),
 
           [(type === "intake" && "intakechecklist") ||
@@ -59,7 +66,7 @@ export function JobChecklistForm({ formItems, bodyshop, currentUser, type }) {
           },
 
           ...(type === "deliver" && {
-            scheduled_delivery: values.scheduledDelivery,
+            scheduled_delivery: values.scheduled_delivery,
           }),
           ...(type === "deliver" &&
             values.removeFromProduction && {
@@ -95,13 +102,17 @@ export function JobChecklistForm({ formItems, bodyshop, currentUser, type }) {
     }
   };
 
-  const [form] = Form.useForm();
-
   return (
     <Form
       form={form}
       onFinish={handleFinish}
-      initialValues={{ ...(type === "intake" && { addToProduction: true }) }}
+      initialValues={{
+        ...(type === "intake" && {
+          addToProduction: true,
+          scheduled_completion: job && job.scheduled_completion,
+          scheduled_delivery: job && job.scheduled_delivery,
+        }),
+      }}
     >
       {t("checklist.labels.checklist")}
 
@@ -117,7 +128,7 @@ export function JobChecklistForm({ formItems, bodyshop, currentUser, type }) {
             <Switch />
           </Form.Item>
           <Form.Item
-            name="scheduledCompletion"
+            name="scheduled_completion"
             label={t("jobs.fields.scheduled_completion")}
             rules={[
               {
@@ -129,7 +140,7 @@ export function JobChecklistForm({ formItems, bodyshop, currentUser, type }) {
             <DateTimePicker />
           </Form.Item>
           <Form.Item
-            name="scheduledDelivery"
+            name="scheduled_delivery"
             label={t("jobs.fields.scheduled_delivery")}
           >
             <DateTimePicker />

client/src/components/job-checklist/job-checklist.component.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import JobChecklistTemplateList from "./components/job-checklist-template-list/job-checklist-template-list.component";
 import JobChecklistForm from "./components/job-checklist-form/job-checklist-form.component";
 import { Row, Col } from "antd";
-export default function JobIntakeComponent({ checklistConfig, type }) {
+export default function JobIntakeComponent({ checklistConfig, type, job }) {
   const { form, templates } = checklistConfig;
 
   return (
@@ -11,7 +11,7 @@ export default function JobIntakeComponent({ checklistConfig, type }) {
         <JobChecklistTemplateList templates={templates} type={type} />
       </Col>
       <Col span={12}>
-        <JobChecklistForm formItems={form} type={type} />
+        <JobChecklistForm formItems={form} type={type} job={job} />
       </Col>
     </Row>
   );

client/src/graphql/bodyshop.queries.js

@@ -69,7 +69,7 @@ export const QUERY_BODYSHOP = gql`
       enforce_class
       md_labor_rates
       deliverchecklist
-      target_touchtime 
+      target_touchtime
       employees {
         id
         first_name
@@ -137,7 +137,7 @@ export const UPDATE_SHOP = gql`
         enforce_class
         md_labor_rates
         deliverchecklist
-        target_touchtime 
+        target_touchtime
         employees {
           id
           first_name
@@ -159,6 +159,8 @@ export const QUERY_INTAKE_CHECKLIST = gql`
       id
       ro_number
       est_number
+      scheduled_completion
+      scheduled_delivery
     }
   }
 `;

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

@@ -69,6 +69,7 @@ export function JobsIntakeContainer({
         <JobChecklist
           type="intake"
           checklistConfig={(data && data.bodyshops_by_pk.intakechecklist) || {}}
+          job={data && data.jobs_by_pk}
         />
       </div>
     </RbacWrapper>