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

IO-2932-Scheduling-Lag-on-AIO:

Browse Source 
Full Optimization of all Schedule related components.

Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
2024-09-16 23:02:20 -04:00
parent 449330441a
commit 10ba19f0d2
16 changed files with 886 additions and 791 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
import { Button, Col, Form, Input, Row, Select, Space, Switch, Typography } from "antd";
import axios from "axios";
import dayjs from "../../utils/day";
import React, { useState } from "react";
import React, { useCallback, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
@@ -19,12 +19,12 @@ import InstanceRenderManager from "../../utils/instanceRenderMgr";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop
});
const mapDispatchToProps = (dispatch) => ({
//setUserLanguage: language => dispatch(setUserLanguage(language))
calculateScheduleLoad: (endDate) => dispatch(calculateScheduleLoad(endDate))
});
export function ScheduleJobModalComponent({
const ScheduleJobModalComponent = React.memo(function ScheduleJobModalComponent({
bodyshop,
form,
existingAppointments,
@@ -36,7 +36,7 @@ export function ScheduleJobModalComponent({
const [loading, setLoading] = useState(false);
const [smartOptions, setSmartOptions] = useState([]);
const handleSmartScheduling = async () => {
const handleSmartScheduling = useCallback(async () => {
setLoading(true);
try {
const response = await axios.post("/scheduling/job", {
@@ -48,21 +48,66 @@ export function ScheduleJobModalComponent({
} finally {
setLoading(false);
}
};
}, [jobId]);
const handleDateBlur = () => {
const handleDateBlur = useCallback(() => {
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;
(lbrHrsData.jobs_by_pk.labhrs.aggregate.sum.mod_lb_hrs || 0) +
(lbrHrsData.jobs_by_pk.larhrs.aggregate.sum.mod_lb_hrs || 0);
if (values.start && !values.scheduled_completion)
form.setFieldsValue({
scheduled_completion: dayjs(values.start).businessDaysAdd(totalHours / bodyshop.target_touchtime, "day")
});
}
};
}, [form, lbrHrsData, bodyshop.target_touchtime]);
const colorOptions = useMemo(() => {
return (
bodyshop.appt_colors &&
bodyshop.appt_colors.map((color) => (
<Select.Option style={{ color: color.color.hex }} key={color.color.hex} value={color.color.hex}>
{color.label}
</Select.Option>
))
);
}, [bodyshop.appt_colors]);
const altTransportOptions = useMemo(() => {
return (
bodyshop.appt_alt_transport &&
bodyshop.appt_alt_transport.map((alt) => (
<Select.Option key={alt} value={alt}>
{alt}
</Select.Option>
))
);
}, [bodyshop.appt_alt_transport]);
const smartOptionsButtons = useMemo(() => {
return smartOptions.map((d, idx) => (
<Button
className="imex-flex-row__margin"
key={idx}
onClick={() => {
const ssDate = dayjs(d);
if (ssDate.isBefore(dayjs())) {
form.setFieldsValue({ start: dayjs() });
} else {
form.setFieldsValue({
start: dayjs(d).add(8, "hour")
});
}
handleDateBlur();
}}
>
<DateFormatter includeDay>{d}</DateFormatter>
</Button>
));
}, [smartOptions, form, handleDateBlur]);
return (
<Row gutter={[16, 16]}>
@@ -80,7 +125,6 @@ export function ScheduleJobModalComponent({
rules={[
{
required: true
//message: t("general.validation.required"),
}
]}
>
@@ -92,7 +136,6 @@ export function ScheduleJobModalComponent({
rules={[
{
required: true
//message: t("general.validation.required"),
}
]}
>
@@ -107,25 +150,7 @@ export function ScheduleJobModalComponent({
<Button onClick={handleSmartScheduling} loading={loading}>
{t("appointments.actions.calculate")}
</Button>
{smartOptions.map((d, idx) => (
<Button
className="imex-flex-row__margin"
key={idx}
onClick={() => {
const ssDate = dayjs(d);
if (ssDate.isBefore(dayjs())) {
form.setFieldsValue({ start: dayjs() });
} else {
form.setFieldsValue({
start: dayjs(d).add(8, "hour")
});
}
handleDateBlur();
}}
>
<DateFormatter includeDay>{d}</DateFormatter>
</Button>
))}
{smartOptionsButtons}
</Space>
</>
),
@@ -144,20 +169,10 @@ export function ScheduleJobModalComponent({
</LayoutFormRow>
<LayoutFormRow grow>
<Form.Item name="color" label={t("appointments.fields.color")}>
<Select allowClear>
{bodyshop.appt_colors &&
bodyshop.appt_colors.map((color) => (
<Select.Option style={{ color: color.color.hex }} key={color.color.hex} value={color.color.hex}>
{color.label}
</Select.Option>
))}
</Select>
<Select allowClear>{colorOptions}</Select>
</Form.Item>
<Form.Item name={"alt_transport"} label={t("jobs.fields.alt_transport")}>
<Select allowClear>
{bodyshop.appt_alt_transport &&
bodyshop.appt_alt_transport.map((alt) => <Select.Option key={alt}>{alt}</Select.Option>)}
</Select>
<Select allowClear>{altTransportOptions}</Select>
</Form.Item>
<Form.Item name={"note"} label={t("appointments.fields.note")}>
<Input />
@@ -183,6 +198,6 @@ export function ScheduleJobModalComponent({
</Col>
</Row>
);
}
});
export default connect(mapStateToProps, mapDispatchToProps)(ScheduleJobModalComponent);