admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added predictive completion time based on cycle times for job scheduling. BOD-401

Browse Source
This commit is contained in:
Patrick Fic
2020-09-17 14:28:48 -07:00
parent 88559e95a3
commit cb337b557c
19 changed files with 572 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
client/src/components/schedule-job-modal/schedule-job-modal.component.jsx
View File

@@ -1,29 +1,43 @@
import { Button, Checkbox, Col, Row } from "antd";
import { Button, Col, Form, Row, Switch } from "antd";
import axios from "axios";
import moment from "moment";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { DateFormatter } from "../../utils/DateFormatter";
import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
import EmailInput from "../form-items-formatted/email-form-item.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
import ScheduleDayViewContainer from "../schedule-day-view/schedule-day-view.container";
import ScheduleExistingAppointmentsList from "../schedule-existing-appointments-list/schedule-existing-appointments-list.component";
export default function ScheduleJobModalComponent({
jobId,
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
//setUserLanguage: language => dispatch(setUserLanguage(language))
});
export function ScheduleJobModalComponent({
bodyshop,
form,
existingAppointments,
appData,
setAppData,
lbrHrsData,
jobId,
}) {
const { t } = useTranslation();
const [loading, setLoading] = useState(false);
const [smartOptions, setSmartOptions] = useState([]);
const handleAuto = async () => {
setLoading(true);
try {
const response = await axios.post("/scheduling/job", {
jobId: "661dd1d5-bf06-426f-8bd2-bd9e41de8eb1",
jobId: jobId,
});
setAppData({ ...appData, smartDates: response.data });
if (response.data) setSmartOptions(response.data);
} catch (error) {
console.log("error", error, error.message);
} finally {
@@ -34,60 +48,100 @@ export default function ScheduleJobModalComponent({
//TODO Existing appointments list only refreshes sometimes after modal close. May have to do with the container class.
return (
<Row gutter={[32, 32]}>
<Col span={14}>
<div className="imex-flex-row imex-flex-row__flex-space-around">
<strong>{t("appointments.fields.time")}</strong>
<DateTimePicker
value={appData.start}
onChange={(e) => {
setAppData({ ...appData, start: e });
}}
/>
<Col span={12}>
<LayoutFormRow grow>
<Form.Item
name={"start"}
label={t("appointments.fields.time")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<DateTimePicker
onBlur={() => {
const values = form.getFieldsValue();
if (lbrHrsData) {
const totalHours =
lbrHrsData.jobs_by_pk.labhrs.aggregate.sum.mod_lb_hrs +
lbrHrsData.jobs_by_pk.larhrs.aggregate.sum.mod_lb_hrs;
if (values.start && !values.scheduled_completion)
form.setFieldsValue({
scheduled_completion: moment(values.start).businessAdd(
totalHours / bodyshop.target_touchtime,
"days"
),
});
}
}}
/>
</Form.Item>
<Button onClick={handleAuto} loading={loading}>
{t("appointments.actions.smartscheduling")}
</Button>
</div>
<div className="imex-flex-row imex-flex-row__flex-space-around">
{appData.smartDates.map((d, idx) => (
<Button
className="imex-flex-row__margin"
key={idx}
onClick={() => {
setAppData({
...appData,
start: new moment(d).add(8, "hours"),
});
}}
>
<DateFormatter>{d}</DateFormatter>
</Button>
))}
</div>
<div className="imex-flex-row imex-flex-row__flex-space-around">
{smartOptions.map((d, idx) => (
<Button
className="imex-flex-row__margin"
key={idx}
onClick={() => {
form.setFieldsValue({ start: new moment(d).add(8, "hours") });
}}
>
<DateFormatter>{d}</DateFormatter>
</Button>
))}
</div>
</LayoutFormRow>
<LayoutFormRow grow>
<Form.Item
name={"scheduled_completion"}
label={t("jobs.fields.scheduled_completion")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<DateTimePicker />
</Form.Item>
<Form.Item
name={"notifyCustomer"}
valuePropName="checked"
label={t("jobs.labels.appointmentconfirmation")}
>
<Switch />
</Form.Item>
<Form.Item name={"email"} label={t("jobs.fields.ownr_ea")}>
<EmailInput />
</Form.Item>
</LayoutFormRow>
{t("appointments.labels.history")}
<ScheduleExistingAppointmentsList
existingAppointments={existingAppointments}
/>
<Checkbox
defaultChecked={appData.notifyCustomer}
onChange={(e) =>
setAppData({ ...appData, notifyCustomer: e.target.checked })
}
>
{t("jobs.labels.appointmentconfirmation")}
</Checkbox>
<EmailInput
defaultValue={appData.email}
title={t("owner.fields.ownr_ea")}
onChange={(e) => setAppData({ ...appData, email: e.target.value })}
/>
</Col>
<Col span={10}>
<div style={{ height: "70vh" }}>
<ScheduleDayViewContainer day={appData.start} />
</div>
<Col span={12}>
<Form.Item shouldUpdate>
{() => {
const values = form.getFieldsValue();
return (
<div style={{ height: "70vh" }}>
<ScheduleDayViewContainer day={values.start} />
</div>
);
}}
</Form.Item>
</Col>
</Row>
);
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(ScheduleJobModalComponent);