bug fixes on intake BOD-114

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

@@ -4,11 +4,14 @@ import CheckboxFormItem from "../job-intake-form-checkbox/job-itnake-form-checkb
 import { useTranslation } from "react-i18next";
 import { useMutation } from "@apollo/react-hooks";
 import { UPDATE_JOB } from "../../../../graphql/jobs.queries";
+import { MARK_LATEST_APPOINTMENT_AS_ARRIVED } from "../../../../graphql/appointments.queries";
 import { useParams } from "react-router-dom";
 import { selectBodyshop } from "../../../../redux/user/user.selectors";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { useHistory } from "react-router-dom";
+import queryString from "query-string";
+import { useLocation } from "react-router-dom";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -20,8 +23,11 @@ const mapDispatchToProps = (dispatch) => ({
 export function JobIntakeForm({ formItems, bodyshop }) {
   const { t } = useTranslation();
   const [intakeJob] = useMutation(UPDATE_JOB);
+  const [markAptArrived] = useMutation(MARK_LATEST_APPOINTMENT_AS_ARRIVED);
   const { jobId } = useParams();
   const history = useHistory();
+  const search = queryString.parse(useLocation().search);
+
   const handleFinish = async (values) => {
     console.log("values", values);
 
@@ -38,6 +44,20 @@ export function JobIntakeForm({ formItems, bodyshop }) {
         },
       },
     });
+    if (!!search.appointmentId) {
+      const appUpdate = await markAptArrived({
+        variables: { appointmentId: search.appointmentId },
+      });
+
+      if (!!appUpdate.errors) {
+        notification["error"]({
+          message: t("intake.errors.intake", {
+            error: JSON.stringify(result.errors),
+          }),
+        });
+      }
+    }
+
     if (!!!result.errors) {
       notification["success"]({ message: t("intake.successes.intake") });
       history.push(`/manage/jobs/${jobId}`);

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

@@ -1,13 +1,18 @@
 import React from "react";
 import JobIntakeTemplateList from "./components/job-intake-template-list/job-intake-template-list.component";
 import JobIntakeForm from "./components/job-intake-form/job-intake-form.component";
+import { Row, Col } from "antd";
 export default function JobIntakeComponent({ intakeChecklistConfig }) {
   const { form, templates } = intakeChecklistConfig;
 
   return (
-    <div>
-      <JobIntakeTemplateList templates={templates} />
-      <JobIntakeForm formItems={form} />
-    </div>
+    <Row>
+      <Col span={12}>
+        <JobIntakeTemplateList templates={templates} />
+      </Col>
+      <Col span={12}>
+        <JobIntakeForm formItems={form} />
+      </Col>
+    </Row>
   );
 }

client/src/components/schedule-event/schedule-event.component.jsx

@@ -56,36 +56,39 @@ export default function ScheduleEventComponent({ event, handleCancel }) {
           <Button>{t("appointments.actions.viewjob")}</Button>
         </Link>
       ) : null}
-      <Button onClick={() => handleCancel(event.id)}>
+      <Button onClick={() => handleCancel(event.id)} disabled={event.arrived}>
         {t("appointments.actions.cancel")}
       </Button>
-      <Button>
+      <Button disabled={event.arrived}>
         {
           //TODO Add reschedule Func.
         }
         {t("appointments.actions.reschedule")}
       </Button>
       {event.isintake ? (
-        <Button>
-          {
-            //TODO Add intake func.
-          }
-          {t("appointments.actions.intake")}
-        </Button>
+        <Link
+          to={{
+            pathname: `/manage/jobs/${event.job && event.job.id}/intake`,
+            search: `?appointmentId=${event.id}`,
+          }}>
+          <Button disabled={event.arrived}>
+            {t("appointments.actions.intake")}
+          </Button>
+        </Link>
       ) : null}
     </div>
   );
 
   const RegularEvent = event.isintake ? (
     <div>
-      <strong>{`${(event.job && event.job.ownr_fn) || ""} ${
-        (event.job && event.job.ownr_ln) || ""
-      }`}</strong>
-      <span style={{ margin: 4 }}>
+      <strong style={{ color: event.arrived ? "green" : "" }}>{`${
+        (event.job && event.job.ownr_fn) || ""
+      } ${(event.job && event.job.ownr_ln) || ""}`}</strong>
+      <div style={{ margin: 4 }}>
         {`${(event.job && event.job.v_model_yr) || ""} ${
           (event.job && event.job.v_make_desc) || ""
         } ${(event.job && event.job.v_model_desc) || ""}`}
-      </span>
+      </div>
     </div>
   ) : (
     <div>
@@ -94,7 +97,7 @@ export default function ScheduleEventComponent({ event, handleCancel }) {
   );
 
   const Load = (
-    <div className="load">
+    <div className='load'>
       <Progress percent={77} showInfo={false} />
     </div>
   );

client/src/graphql/appointments.queries.js

@@ -15,6 +15,7 @@ export const QUERY_ALL_ACTIVE_APPOINTMENTS = gql`
       start
       id
       end
+      arrived
       title
       isintake
       job {
@@ -151,3 +152,14 @@ export const QUERY_SCHEDULE_LOAD_DATA = gql`
     }
   }
 `;
+
+export const MARK_LATEST_APPOINTMENT_AS_ARRIVED = gql`
+  mutation MARK_LATEST_APPOINTMENT_AS_ARRIVED($appointmentId: uuid!) {
+    update_appointments(
+      where: { id: { _eq: $appointmentId } }
+      _set: { arrived: true }
+    ) {
+      affected_rows
+    }
+  }
+`;

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

@@ -1,16 +1,15 @@
-import React, { useEffect } from "react";
 import { useQuery } from "@apollo/react-hooks";
-import { QUERY_INTAKE_CHECKLIST } from "../../graphql/bodyshop.queries";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { useParams } from "react-router-dom";
-import AlertComponent from "../../components/alert/alert.component";
-import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
+import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { setBreadcrumbs } from "../../redux/application/application.actions";
+import { connect } from "react-redux";
+import { useParams } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
+import AlertComponent from "../../components/alert/alert.component";
 import JobIntakeComponent from "../../components/job-intake/job-intake.component";
-
+import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
+import { QUERY_INTAKE_CHECKLIST } from "../../graphql/bodyshop.queries";
+import { setBreadcrumbs } from "../../redux/application/application.actions";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
   bodyshop: selectBodyshop,
@@ -21,6 +20,7 @@ const mapDispatchToProps = (dispatch) => ({
 
 export function JobsIntakeContainer({ bodyshop, setBreadcrumbs }) {
   const { t } = useTranslation();
+
   const { loading, error, data } = useQuery(QUERY_INTAKE_CHECKLIST, {
     variables: { shopId: bodyshop.id },
   });
@@ -43,13 +43,17 @@ export function JobsIntakeContainer({ bodyshop, setBreadcrumbs }) {
 
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type='error' />;
-  //   if (data && !!!data.bodyshops_by_pk.intakechecklist)
-  //     return (
-  //       <AlertComponent message={t("intake.errors.nochecklist")} type='error' />
-  //     );
+  if (data && !!!data.bodyshops_by_pk.intakechecklist)
+    return (
+      <AlertComponent message={t("intake.errors.nochecklist")} type='error' />
+    );
   return (
     <div>
-      <JobIntakeComponent intakeChecklistConfig={testConfig} />
+      <JobIntakeComponent
+        intakeChecklistConfig={
+          (data && data.bodyshops_by_pk.intakechecklist) || {}
+        }
+      />
     </div>
   );
 }
@@ -58,33 +62,3 @@ export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(JobsIntakeContainer);
-
-const testConfig = {
-  form: [
-    {
-      name: "item1",
-      label: "Checklist Item 1",
-      required: true,
-      type: "checkbox",
-    },
-    {
-      name: "item2",
-      label: "Checklist Item 2",
-      required: true,
-      type: "checkbox",
-    },
-    {
-      name: "item3",
-      label: "Checklist Item 3",
-      required: true,
-      type: "checkbox",
-    },
-    {
-      name: "item4",
-      label: "Checklist Item 4",
-      required: true,
-      type: "checkbox",
-    },
-  ],
-  templates: ["estimate_detail", "estimate_detail2"],
-};