Merged in feature/IO-3114-Quick-Intake (pull request #2086)

Feature/IO-3114 Quick Intake

Approved-by: Dave Richer

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx

@@ -4,11 +4,12 @@ import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Button, Card, Dropdown, Form, Input, Modal, Popconfirm, Popover, Select, Space } from "antd";
 import axios from "axios";
 import parsePhoneNumber from "libphonenumber-js";
-import React, { useContext, useMemo, useState } from "react";
+import { useContext, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
+import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
 import { auth, logImEXEvent } from "../../firebase/firebase.utils";
 import { CANCEL_APPOINTMENTS_BY_JOB_ID, INSERT_MANUAL_APPT } from "../../graphql/appointments.queries";
 import { GET_CURRENT_QUESTIONSET_ID, INSERT_CSI } from "../../graphql/csi.queries";
@@ -30,7 +31,6 @@ import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";
 import AddToProduction from "./jobs-detail-header-actions.addtoproduction.util";
 import DuplicateJob from "./jobs-detail-header-actions.duplicate.util";
 import JobsDetailHeaderActionsToggleProduction from "./jobs-detail-header-actions.toggle-production";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
@@ -121,6 +121,7 @@ export function JobsDetailHeaderActions({
   const history = useNavigate();
   const [form] = Form.useForm();
   const [loading, setLoading] = useState(false);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
   const [isCancelScheduleModalVisible, setIsCancelScheduleModalVisible] = useState(false);
   const [insertAppointment] = useMutation(INSERT_MANUAL_APPT);
   const [deleteJob] = useMutation(DELETE_JOB);
@@ -718,7 +719,13 @@ export function JobsDetailHeaderActions({
       key: "toggleproduction",
       id: "job-actions-toggleproduction",
       disabled: !job.converted || jobRO,
-      label: <JobsDetailHeaderActionsToggleProduction job={job} refetch={refetch} />
+      label: (
+        <JobsDetailHeaderActionsToggleProduction
+          job={job}
+          refetch={refetch}
+          closeParentMenu={() => setDropdownOpen(false)}
+        />
+      )
     },
 
     {
@@ -1148,7 +1155,7 @@ export function JobsDetailHeaderActions({
           </Form.Item>
         </Form>
       </Modal>
-      <Dropdown menu={menu} trigger={["click"]} key="changestatus">
+      <Dropdown menu={menu} trigger={["click"]} key="changestatus" open={dropdownOpen} onOpenChange={setDropdownOpen}>
         <Button>
           <span>{t("general.labels.actions")}</span>
           <DownCircleFilled />

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.toggle-production.jsx

@@ -1,11 +1,11 @@
-import { useMutation } from "@apollo/client";
+import { useLazyQuery, useMutation } from "@apollo/client";
 import { Button, Form, Popover, Space } from "antd";
 import dayjs from "dayjs";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { JOB_PRODUCTION_TOGGLE } from "../../graphql/jobs.queries";
+import { GET_JOB_BY_PK_QUICK_INTAKE, JOB_PRODUCTION_TOGGLE } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
@@ -23,16 +23,40 @@ const mapDispatchToProps = (dispatch) => ({
   insertAuditTrail: ({ jobid, operation }) => dispatch(insertAuditTrail({ jobid, operation }))
 });
 
-export function JobsDetailHeaderActionsToggleProduction({ bodyshop, job, jobRO, insertAuditTrail }) {
+export function JobsDetailHeaderActionsToggleProduction({
+  bodyshop,
+  job,
+  jobRO,
+  refetch,
+  closeParentMenu,
+  insertAuditTrail
+}) {
   const [scenario, setScenario] = useState(false);
   const [loading, setLoading] = useState(false);
+  const [popOverVisible, setPopOverVisible] = useState(false);
   const [mutationUpdateJob] = useMutation(JOB_PRODUCTION_TOGGLE);
   const { t } = useTranslation();
   const [form] = Form.useForm();
   const notification = useNotification();
 
+  const [getJobDetails] = useLazyQuery(GET_JOB_BY_PK_QUICK_INTAKE, {
+    variables: { id: job.id },
+    onCompleted: (data) => {
+      if (data?.jobs_by_pk) {
+        form.setFieldsValue({
+          actual_in: data.jobs_by_pk.actual_in ? data.jobs_by_pk.actual_in : dayjs(),
+          scheduled_completion: data.jobs_by_pk.scheduled_completion,
+          actual_completion: data.jobs_by_pk.actual_completion,
+          scheduled_delivery: data.jobs_by_pk.scheduled_delivery,
+          actual_delivery: data.jobs_by_pk.actual_delivery
+        });
+      }
+    },
+    fetchPolicy: "network-only"
+  });
+
   useEffect(() => {
-    //Figure out what scenario were in, populate accodingly
+    //Figure out what scenario were in, populate accordingly
     if (job && bodyshop) {
       if (bodyshop.md_ro_statuses.pre_production_statuses.includes(job.status)) {
         setScenario("pre");
@@ -76,24 +100,16 @@ export function JobsDetailHeaderActionsToggleProduction({ bodyshop, job, jobRO,
                 DateTimeFormatterFunction(values.actual_completion)
               )
       });
+      setPopOverVisible(false);
+      closeParentMenu();
+      refetch();
     }
     setLoading(false);
   };
 
   const popMenu = (
     <div onClick={(e) => e.stopPropagation()}>
-      <Form
+      <Form layout="vertical" form={form} onFinish={handleConvert}>
-        layout="vertical"
-        form={form}
-        onFinish={handleConvert}
-        initialValues={{
-          actual_in: dayjs(),
-          scheduled_completion: job.scheduled_completion,
-          actual_completion: job.actual_completion,
-          scheduled_deliver: job.scheduled_deliver,
-          actual_delivery: job.actual_delivery
-        }}
-      >
         {scenario === "pre" && (
           <>
             <Form.Item
@@ -158,7 +174,12 @@ export function JobsDetailHeaderActionsToggleProduction({ bodyshop, job, jobRO,
   return (
     <Popover //open={open}
       content={popMenu}
-      onClick={(e) => e.stopPropagation()}
+      open={popOverVisible}
+      onOpenChange={setPopOverVisible}
+      onClick={(e) => {
+        getJobDetails();
+        e.stopPropagation();
+      }}
       getPopupContainer={(trigger) => trigger.parentNode}
       trigger="click"
     >

client/src/graphql/jobs.queries.js

@@ -2553,3 +2553,16 @@ export const QUERY_JOBS_IN_PRODUCTION = gql`
     }
   }
 `;
+
+export const GET_JOB_BY_PK_QUICK_INTAKE = gql`
+  query GET_JOB_BY_PK_QUICK_INTAKE($id: uuid!) {
+    jobs_by_pk(id: $id) {
+      id
+      actual_in
+      scheduled_completion
+      actual_completion
+      scheduled_delivery
+      actual_delivery
+    }
+  }
+`;