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

FIrst round of changes for Instance Manger & Pro Manager

Browse Source
This commit is contained in:
Patrick Fic
2024-02-16 14:01:39 -07:00
parent 3e44458f5c
commit af7ff2d8b5
36 changed files with 1068 additions and 885 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,6 +15,7 @@ import ScheduleDayViewContainer from "../schedule-day-view/schedule-day-view.con
import ScheduleExistingAppointmentsList
from "../schedule-existing-appointments-list/schedule-existing-appointments-list.component";
import "./schedule-job-modal.scss";
import InstanceRenderManager from "../../utils/instanceRenderMgr";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
@@ -69,141 +70,144 @@ export function ScheduleJobModalComponent({
};
return (
<Row gutter={[16, 16]}>
<Col span={12}>
<Space>
<Typography.Title level={3}>
{lbrHrsData?.jobs_by_pk?.ro_number}
</Typography.Title>
<Typography.Title level={4}>{`B/R Hrs:${
lbrHrsData?.jobs_by_pk.labhrs?.aggregate?.sum?.mod_lb_hrs || 0
}/${
lbrHrsData?.jobs_by_pk.larhrs?.aggregate?.sum?.mod_lb_hrs || 0
}`}</Typography.Title>
</Space>
<LayoutFormRow grow>
<Form.Item
name="start"
label={t("appointments.fields.time")}
rules={[
{
required: true,
//message: t("general.validation.required"),
},
]}
>
<DateTimePicker onBlur={handleDateBlur} onlyFuture/>
</Form.Item>
<Form.Item
name="scheduled_completion"
label={t("jobs.fields.scheduled_completion")}
rules={[
{
required: true,
//message: t("general.validation.required"),
},
]}
>
<DateTimePicker onlyFuture/>
</Form.Item>
</LayoutFormRow>
<Typography.Title level={4}>
{t("appointments.labels.smartscheduling")}
</Typography.Title>
<Row gutter={[16, 16]}>
<Col span={12}>
<Space>
<Typography.Title level={3}>
{lbrHrsData?.jobs_by_pk?.ro_number}
</Typography.Title>
<Typography.Title level={4}>{`B/R Hrs:${
lbrHrsData?.jobs_by_pk.labhrs?.aggregate?.sum?.mod_lb_hrs || 0
}/${
lbrHrsData?.jobs_by_pk.larhrs?.aggregate?.sum?.mod_lb_hrs || 0
}`}</Typography.Title>
</Space>
<LayoutFormRow grow>
<Form.Item
name="start"
label={t("appointments.fields.time")}
rules={[
{
// smartOptions.length > 0 && (
// <div>{t("appointments.labels.suggesteddates")}</div>
// )
}
required: true,
//message: t("general.validation.required"),
},
]}
>
<DateTimePicker onBlur={handleDateBlur} onlyFuture />
</Form.Item>
<Form.Item
name="scheduled_completion"
label={t("jobs.fields.scheduled_completion")}
rules={[
{
required: true,
//message: t("general.validation.required"),
},
]}
>
<DateTimePicker onlyFuture />
</Form.Item>
</LayoutFormRow>
{InstanceRenderManager({
imex: (
<>
<Typography.Title level={4}>
{t("appointments.labels.smartscheduling")}
</Typography.Title>
<Space wrap>
<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>
))}
</Space>
<LayoutFormRow grow>
<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 disabled={!form.getFieldValue("notifyCustomer")}/>
</Form.Item>
</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>
</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>
</Form.Item>
<Form.Item name={"note"} label={t("appointments.fields.note")}>
<Input/>
</Form.Item>
</LayoutFormRow>
{t("appointments.labels.history")}
<ScheduleExistingAppointmentsList
existingAppointments={existingAppointments}
/>
</Col>
<Col span={12}>
<Form.Item shouldUpdate={(prev, cur) => prev.start !== cur.start}>
{() => {
const values = form.getFieldsValue();
if (values.start) {
calculateScheduleLoad(dayjs(values.start).add(3, "day"));
<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"),
});
}
return (
<div className="schedule-job-modal">
<ScheduleDayViewContainer day={values.start}/>
</div>
);
}}
</Form.Item>
</Col>
</Row>
handleDateBlur();
}}
>
<DateFormatter includeDay>{d}</DateFormatter>
</Button>
))}
</Space>
</>
),
rome: "USE_IMEX",
promanager: <></>,
})}
<LayoutFormRow grow>
<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 disabled={!form.getFieldValue("notifyCustomer")} />
</Form.Item>
</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>
</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>
</Form.Item>
<Form.Item name={"note"} label={t("appointments.fields.note")}>
<Input />
</Form.Item>
</LayoutFormRow>
{t("appointments.labels.history")}
<ScheduleExistingAppointmentsList
existingAppointments={existingAppointments}
/>
</Col>
<Col span={12}>
<Form.Item shouldUpdate={(prev, cur) => prev.start !== cur.start}>
{() => {
const values = form.getFieldsValue();
if (values.start) {
calculateScheduleLoad(dayjs(values.start).add(3, "day"));
}
return (
<div className="schedule-job-modal">
<ScheduleDayViewContainer day={values.start} />
</div>
);
}}
</Form.Item>
</Col>
</Row>
);
}