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

131 lines
4.3 KiB
JavaScript

import React, { useState, useEffect } from "react";
import JobsCreateComponent from "./jobs-create.component";
import { Form, notification } from "antd";
import JobCreateContext from "./jobs-create.context";
import { useMutation, useLazyQuery } from "@apollo/react-hooks";
import { INSERT_NEW_JOB } from "../../graphql/jobs.queries";
import { QUERY_OWNER_FOR_JOB_CREATION } from "../../graphql/owners.queries";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { useTranslation } from "react-i18next";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop
});
export default connect(mapStateToProps, null)(JobsCreateContainer);
function JobsCreateContainer({ bodyshop }) {
const { t } = useTranslation();
const contextState = useState({
vehicle: { new: false, search: "", selectedid: null, vehicleObj: null },
owner: { new: false, search: "", selectedid: null },
job: null,
created: false,
error: null,
newJobId: null,
newJobEstNum: null
});
const [form] = Form.useForm();
const [state, setState] = contextState;
const [insertJob] = useMutation(INSERT_NEW_JOB);
const [loadOwner, RemoteOwnerData] = useLazyQuery(
QUERY_OWNER_FOR_JOB_CREATION
);
useEffect(() => {
if (!!state.owner.selectedid) {
console.log("Loading Selected Owner ID");
loadOwner({
variables: { id: state.owner.selectedid }
});
}
}, [state.owner.selectedid, loadOwner]);
const runInsertJob = job => {
console.log("Job To Save", job);
insertJob({ variables: { job: job } })
.then(resp => {
setState({
...state,
created: true,
error: null,
newJobId: resp.data.insert_jobs.returning[0].id,
newJobEstNum: resp.data.insert_jobs.returning[0].est_number
});
})
.catch(error => {
notification["error"]({
message: t("jobs.errors.creating", { error: error })
});
setState({ ...state, error: error });
});
};
const handleFinish = values => {
console.log("Form Values", values);
console.log("Progress State", state);
let job = Object.assign(
{},
values,
{
vehicle: state.vehicle.selectedid ? null : values.vehicle,
vehicleid: state.vehicle.selectedid || null
},
{
owner: state.owner.selectedid ? null : values.owner,
ownerid: state.owner.selectedid || null
},
{
status: bodyshop.md_ro_statuses.default_imported || "Open*", //Pull from redux store.
shopid: bodyshop.id
}
);
//TODO Logic to ensure the owner is actually fetched.
let ownerData;
if (!!job.owner) {
ownerData = job.owner.data;
ownerData.shopid = bodyshop.id;
delete ownerData.allow_text_message;
delete ownerData.preferred_contact;
delete job.ownerid;
} else {
ownerData = RemoteOwnerData.data.owners_by_pk;
delete ownerData.id;
delete ownerData.__typename;
}
if (!!job.vehicle) {
delete job.vehicleid;
job.vehicle.data.shopid = bodyshop.id;
job.plate_no = job.vehicle.data.plate_no;
job.plate_st = job.vehicle.data.plate_st;
job.v_vin = job.vehicle.data.v_vin;
job.v_model_yr = job.vehicle.data.v_model_yr;
job.v_model_desc = job.vehicle.data.v_model_desc;
job.v_make_desc = job.vehicle.data.v_make_desc;
job.v_color = job.vehicle.data.v_color;
} else {
//Vehicle selected.
job.vehicle.data.shopid = bodyshop.id;
job.plate_no = state.vehicle.vehicleObj.plate_no;
job.plate_st = state.vehicle.vehicleObj.plate_st;
job.v_vin = state.vehicle.vehicleObj.v_vin;
job.v_model_yr = state.vehicle.vehicleObj.v_model_yr;
job.v_model_desc = state.vehicle.vehicleObj.v_model_desc;
job.v_make_desc = state.vehicle.vehicleObj.v_make_desc;
job.v_color = state.vehicle.vehicleObj.v_color;
}
job = { ...job, ...ownerData };
runInsertJob(job);
};
return (
<JobCreateContext.Provider value={contextState}>
<Form form={form} onFinish={handleFinish} autoComplete={"off"}>
<JobsCreateComponent form={form} />
</Form>
</JobCreateContext.Provider>
);
}