diff --git a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx index cdcda334d..9e77cae96 100644 --- a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx +++ b/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: + label: ( + setDropdownOpen(false)} + /> + ) }, { @@ -1148,7 +1155,7 @@ export function JobsDetailHeaderActions({ - + {t("general.labels.actions")} diff --git a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.toggle-production.jsx b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.toggle-production.jsx index 75c7d7299..4de06916f 100644 --- a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.toggle-production.jsx +++ b/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 = ( e.stopPropagation()}> - + {scenario === "pre" && ( <> e.stopPropagation()} + open={popOverVisible} + onOpenChange={setPopOverVisible} + onClick={(e) => { + getJobDetails(); + e.stopPropagation(); + }} getPopupContainer={(trigger) => trigger.parentNode} trigger="click" > diff --git a/client/src/graphql/jobs.queries.js b/client/src/graphql/jobs.queries.js index bad1cd9d6..1310c32da 100644 --- a/client/src/graphql/jobs.queries.js +++ b/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 + } + } +`;