Dave Richer
@@ -1,220 +1,213 @@
|
||||
import {
|
||||
Button,
|
||||
Col,
|
||||
Form,
|
||||
Input,
|
||||
Row,
|
||||
Select,
|
||||
Space,
|
||||
Switch,
|
||||
Typography,
|
||||
} from "antd";
|
||||
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 { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { calculateScheduleLoad } from "../../redux/application/application.actions";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import { DateFormatter } from "../../utils/DateFormatter";
|
||||
import React, {useState} from "react";
|
||||
import {useTranslation} from "react-i18next";
|
||||
import {connect} from "react-redux";
|
||||
import {createStructuredSelector} from "reselect";
|
||||
import {calculateScheduleLoad} from "../../redux/application/application.actions";
|
||||
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";
|
||||
import ScheduleExistingAppointmentsList
|
||||
from "../schedule-existing-appointments-list/schedule-existing-appointments-list.component";
|
||||
import "./schedule-job-modal.scss";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop,
|
||||
bodyshop: selectBodyshop,
|
||||
});
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
||||
calculateScheduleLoad: (endDate) => dispatch(calculateScheduleLoad(endDate)),
|
||||
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
||||
calculateScheduleLoad: (endDate) => dispatch(calculateScheduleLoad(endDate)),
|
||||
});
|
||||
|
||||
export function ScheduleJobModalComponent({
|
||||
bodyshop,
|
||||
form,
|
||||
existingAppointments,
|
||||
lbrHrsData,
|
||||
jobId,
|
||||
calculateScheduleLoad,
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [smartOptions, setSmartOptions] = useState([]);
|
||||
bodyshop,
|
||||
form,
|
||||
existingAppointments,
|
||||
lbrHrsData,
|
||||
jobId,
|
||||
calculateScheduleLoad,
|
||||
}) {
|
||||
const {t} = useTranslation();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [smartOptions, setSmartOptions] = useState([]);
|
||||
|
||||
const handleSmartScheduling = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await axios.post("/scheduling/job", {
|
||||
jobId: jobId,
|
||||
});
|
||||
if (response.data) setSmartOptions(response.data);
|
||||
} catch (error) {
|
||||
console.log("error", error, error.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDateBlur = () => {
|
||||
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: dayjs(values.start).businessDaysAdd(
|
||||
totalHours / bodyshop.target_touchtime,
|
||||
"day"
|
||||
),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
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>
|
||||
|
||||
{
|
||||
// smartOptions.length > 0 && (
|
||||
// <div>{t("appointments.labels.suggesteddates")}</div>
|
||||
// )
|
||||
const handleSmartScheduling = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await axios.post("/scheduling/job", {
|
||||
jobId: jobId,
|
||||
});
|
||||
if (response.data) setSmartOptions(response.data);
|
||||
} catch (error) {
|
||||
console.log("error", error, error.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
<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") });
|
||||
};
|
||||
|
||||
const handleDateBlur = () => {
|
||||
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: dayjs(values.start).businessDaysAdd(
|
||||
totalHours / bodyshop.target_touchtime,
|
||||
"day"
|
||||
),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
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>
|
||||
|
||||
{
|
||||
// smartOptions.length > 0 && (
|
||||
// <div>{t("appointments.labels.suggesteddates")}</div>
|
||||
// )
|
||||
}
|
||||
handleDateBlur();
|
||||
}}
|
||||
>
|
||||
<DateFormatter includeDay>{d}</DateFormatter>
|
||||
</Button>
|
||||
))}
|
||||
</Space>
|
||||
<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>
|
||||
<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>
|
||||
);
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(ScheduleJobModalComponent);
|
||||
|
||||
@@ -1,249 +1,246 @@
|
||||
import { useMutation, useQuery } from "@apollo/client";
|
||||
import { Form, Modal, notification } from "antd";
|
||||
import {useMutation, useQuery} from "@apollo/client";
|
||||
import {Form, Modal, notification} from "antd";
|
||||
import dayjs from "../../utils/day";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { logImEXEvent } from "../../firebase/firebase.utils";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import {useTranslation} from "react-i18next";
|
||||
import {connect} from "react-redux";
|
||||
import {createStructuredSelector} from "reselect";
|
||||
import {logImEXEvent} from "../../firebase/firebase.utils";
|
||||
import {
|
||||
CANCEL_APPOINTMENT_BY_ID,
|
||||
INSERT_APPOINTMENT,
|
||||
QUERY_APPOINTMENTS_BY_JOBID,
|
||||
CANCEL_APPOINTMENT_BY_ID,
|
||||
INSERT_APPOINTMENT,
|
||||
QUERY_APPOINTMENTS_BY_JOBID,
|
||||
} from "../../graphql/appointments.queries";
|
||||
import { QUERY_LBR_HRS_BY_PK, UPDATE_JOBS } from "../../graphql/jobs.queries";
|
||||
import { insertAuditTrail } from "../../redux/application/application.actions";
|
||||
import { setEmailOptions } from "../../redux/email/email.actions";
|
||||
import { toggleModalVisible } from "../../redux/modals/modals.actions";
|
||||
import { selectSchedule } from "../../redux/modals/modals.selectors";
|
||||
import {
|
||||
selectBodyshop,
|
||||
selectCurrentUser,
|
||||
} from "../../redux/user/user.selectors";
|
||||
import {QUERY_LBR_HRS_BY_PK, UPDATE_JOBS} from "../../graphql/jobs.queries";
|
||||
import {insertAuditTrail} from "../../redux/application/application.actions";
|
||||
import {setEmailOptions} from "../../redux/email/email.actions";
|
||||
import {toggleModalVisible} from "../../redux/modals/modals.actions";
|
||||
import {selectSchedule} from "../../redux/modals/modals.selectors";
|
||||
import {selectBodyshop, selectCurrentUser,} from "../../redux/user/user.selectors";
|
||||
import AuditTrailMapping from "../../utils/AuditTrailMappings";
|
||||
import { DateTimeFormat } from "../../utils/DateFormatter";
|
||||
import { TemplateList } from "../../utils/TemplateConstants";
|
||||
import {DateTimeFormat} from "../../utils/DateFormatter";
|
||||
import {TemplateList} from "../../utils/TemplateConstants";
|
||||
import ScheduleJobModalComponent from "./schedule-job-modal.component";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop,
|
||||
scheduleModal: selectSchedule,
|
||||
currentUser: selectCurrentUser,
|
||||
bodyshop: selectBodyshop,
|
||||
scheduleModal: selectSchedule,
|
||||
currentUser: selectCurrentUser,
|
||||
});
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
toggleModalVisible: () => dispatch(toggleModalVisible("schedule")),
|
||||
setEmailOptions: (e) => dispatch(setEmailOptions(e)),
|
||||
insertAuditTrail: ({ jobid, operation }) =>
|
||||
dispatch(insertAuditTrail({ jobid, operation })),
|
||||
toggleModalVisible: () => dispatch(toggleModalVisible("schedule")),
|
||||
setEmailOptions: (e) => dispatch(setEmailOptions(e)),
|
||||
insertAuditTrail: ({jobid, operation}) =>
|
||||
dispatch(insertAuditTrail({jobid, operation})),
|
||||
});
|
||||
|
||||
export function ScheduleJobModalContainer({
|
||||
scheduleModal,
|
||||
bodyshop,
|
||||
toggleModalVisible,
|
||||
setEmailOptions,
|
||||
currentUser,
|
||||
insertAuditTrail,
|
||||
}) {
|
||||
const { open, context, actions } = scheduleModal;
|
||||
const { jobId, job, previousEvent } = context;
|
||||
scheduleModal,
|
||||
bodyshop,
|
||||
toggleModalVisible,
|
||||
setEmailOptions,
|
||||
currentUser,
|
||||
insertAuditTrail,
|
||||
}) {
|
||||
const {open, context, actions} = scheduleModal;
|
||||
const {jobId, job, previousEvent} = context;
|
||||
|
||||
const { refetch } = actions;
|
||||
const [form] = Form.useForm();
|
||||
const {refetch} = actions;
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const { data: lbrHrsData } = useQuery(QUERY_LBR_HRS_BY_PK, {
|
||||
variables: { id: job && job.id },
|
||||
skip: !job || !job.id,
|
||||
fetchPolicy: "network-only",
|
||||
nextFetchPolicy: "network-only",
|
||||
});
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [cancelAppointment] = useMutation(CANCEL_APPOINTMENT_BY_ID);
|
||||
const [insertAppointment] = useMutation(INSERT_APPOINTMENT);
|
||||
const [updateJobStatus] = useMutation(UPDATE_JOBS);
|
||||
|
||||
useEffect(() => {
|
||||
if (job) form.resetFields();
|
||||
}, [job, form]);
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
const existingAppointments = useQuery(QUERY_APPOINTMENTS_BY_JOBID, {
|
||||
variables: { jobid: jobId },
|
||||
fetchPolicy: "network-only",
|
||||
nextFetchPolicy: "network-only",
|
||||
skip: !open || !!!jobId,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
existingAppointments.data &&
|
||||
existingAppointments.data.appointments.length > 0 &&
|
||||
!existingAppointments.data.appointments[0].canceled
|
||||
) {
|
||||
form.setFieldsValue({
|
||||
color: existingAppointments.data.appointments[0].color,
|
||||
|
||||
note: existingAppointments.data.appointments[0].note,
|
||||
});
|
||||
}
|
||||
}, [existingAppointments.data, form]);
|
||||
|
||||
const handleFinish = async (values) => {
|
||||
logImEXEvent("schedule_new_appointment");
|
||||
|
||||
setLoading(true);
|
||||
if (!!previousEvent) {
|
||||
const cancelAppt = await cancelAppointment({
|
||||
variables: { appid: previousEvent },
|
||||
});
|
||||
|
||||
if (!!cancelAppt.errors) {
|
||||
notification["error"]({
|
||||
message: t("appointments.errors.canceling", {
|
||||
message: JSON.stringify(cancelAppt.errors),
|
||||
}),
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
notification["success"]({
|
||||
message: t("appointments.successes.canceled"),
|
||||
});
|
||||
}
|
||||
|
||||
if (existingAppointments.data.appointments.length > 0) {
|
||||
await Promise.all(
|
||||
existingAppointments.data.appointments.map((app) => {
|
||||
return cancelAppointment({
|
||||
variables: { appid: app.id },
|
||||
});
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
const appt = await insertAppointment({
|
||||
variables: {
|
||||
app: {
|
||||
jobid: jobId,
|
||||
bodyshopid: bodyshop.id,
|
||||
start: dayjs(values.start),
|
||||
end: dayjs(values.start).add(bodyshop.appt_length || 60, "minute"),
|
||||
color: values.color,
|
||||
note: values.note,
|
||||
created_by: currentUser.email,
|
||||
},
|
||||
jobId: jobId,
|
||||
altTransport: values.alt_transport,
|
||||
},
|
||||
const {data: lbrHrsData} = useQuery(QUERY_LBR_HRS_BY_PK, {
|
||||
variables: {id: job && job.id},
|
||||
skip: !job || !job.id,
|
||||
fetchPolicy: "network-only",
|
||||
nextFetchPolicy: "network-only",
|
||||
});
|
||||
|
||||
if (!appt.errors) {
|
||||
insertAuditTrail({
|
||||
jobid: job.id,
|
||||
operation: AuditTrailMapping.appointmentinsert(
|
||||
DateTimeFormat(values.start)
|
||||
),
|
||||
});
|
||||
}
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [cancelAppointment] = useMutation(CANCEL_APPOINTMENT_BY_ID);
|
||||
const [insertAppointment] = useMutation(INSERT_APPOINTMENT);
|
||||
const [updateJobStatus] = useMutation(UPDATE_JOBS);
|
||||
|
||||
if (!!appt.errors) {
|
||||
notification["error"]({
|
||||
message: t("appointments.errors.saving", {
|
||||
message: JSON.stringify(appt.errors),
|
||||
}),
|
||||
});
|
||||
return;
|
||||
}
|
||||
notification["success"]({
|
||||
message: t("appointments.successes.created"),
|
||||
useEffect(() => {
|
||||
if (job) form.resetFields();
|
||||
}, [job, form]);
|
||||
|
||||
const {t} = useTranslation();
|
||||
|
||||
const existingAppointments = useQuery(QUERY_APPOINTMENTS_BY_JOBID, {
|
||||
variables: {jobid: jobId},
|
||||
fetchPolicy: "network-only",
|
||||
nextFetchPolicy: "network-only",
|
||||
skip: !open || !!!jobId,
|
||||
});
|
||||
if (jobId) {
|
||||
const jobUpdate = await updateJobStatus({
|
||||
variables: {
|
||||
jobIds: [jobId],
|
||||
fields: {
|
||||
status: bodyshop.md_ro_statuses.default_scheduled,
|
||||
date_scheduled: new Date(),
|
||||
scheduled_in: values.start,
|
||||
scheduled_completion: values.scheduled_completion,
|
||||
lost_sale_reason: null,
|
||||
date_lost_sale: null,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
if (!!jobUpdate.errors) {
|
||||
notification["error"]({
|
||||
message: t("appointments.errors.saving", {
|
||||
message: JSON.stringify(jobUpdate.errors),
|
||||
}),
|
||||
useEffect(() => {
|
||||
if (
|
||||
existingAppointments.data &&
|
||||
existingAppointments.data.appointments.length > 0 &&
|
||||
!existingAppointments.data.appointments[0].canceled
|
||||
) {
|
||||
form.setFieldsValue({
|
||||
color: existingAppointments.data.appointments[0].color,
|
||||
|
||||
note: existingAppointments.data.appointments[0].note,
|
||||
});
|
||||
}
|
||||
}, [existingAppointments.data, form]);
|
||||
|
||||
const handleFinish = async (values) => {
|
||||
logImEXEvent("schedule_new_appointment");
|
||||
|
||||
setLoading(true);
|
||||
if (!!previousEvent) {
|
||||
const cancelAppt = await cancelAppointment({
|
||||
variables: {appid: previousEvent},
|
||||
});
|
||||
|
||||
if (!!cancelAppt.errors) {
|
||||
notification["error"]({
|
||||
message: t("appointments.errors.canceling", {
|
||||
message: JSON.stringify(cancelAppt.errors),
|
||||
}),
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
notification["success"]({
|
||||
message: t("appointments.successes.canceled"),
|
||||
});
|
||||
}
|
||||
|
||||
if (existingAppointments.data.appointments.length > 0) {
|
||||
await Promise.all(
|
||||
existingAppointments.data.appointments.map((app) => {
|
||||
return cancelAppointment({
|
||||
variables: {appid: app.id},
|
||||
});
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
const appt = await insertAppointment({
|
||||
variables: {
|
||||
app: {
|
||||
jobid: jobId,
|
||||
bodyshopid: bodyshop.id,
|
||||
start: dayjs(values.start),
|
||||
end: dayjs(values.start).add(bodyshop.appt_length || 60, "minute"),
|
||||
color: values.color,
|
||||
note: values.note,
|
||||
created_by: currentUser.email,
|
||||
},
|
||||
jobId: jobId,
|
||||
altTransport: values.alt_transport,
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
setLoading(false);
|
||||
toggleModalVisible();
|
||||
if (values.notifyCustomer) {
|
||||
setEmailOptions({
|
||||
jobid: jobId,
|
||||
messageOptions: {
|
||||
to: [values.email],
|
||||
replyTo: bodyshop.email,
|
||||
subject: TemplateList("appointment").appointment_confirmation.subject,
|
||||
},
|
||||
template: {
|
||||
name: TemplateList("appointment").appointment_confirmation.key,
|
||||
variables: {
|
||||
id: appt.data.insert_appointments.returning[0].id,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
if (refetch) refetch();
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
onCancel={() => toggleModalVisible()}
|
||||
onOk={() => form.submit()}
|
||||
width={"90%"}
|
||||
maskClosable={false}
|
||||
destroyOnClose
|
||||
okButtonProps={{
|
||||
loading: loading,
|
||||
}}
|
||||
closable={false}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={handleFinish}
|
||||
initialValues={{
|
||||
notifyCustomer: !!(job && job.ownr_ea),
|
||||
email: (job && job.ownr_ea) || "",
|
||||
start: null,
|
||||
// smartDates: [],
|
||||
scheduled_completion: null,
|
||||
color: context.color,
|
||||
alt_transport: context.alt_transport,
|
||||
note: context.note,
|
||||
}}
|
||||
>
|
||||
<ScheduleJobModalComponent
|
||||
existingAppointments={existingAppointments}
|
||||
lbrHrsData={lbrHrsData}
|
||||
form={form}
|
||||
jobId={jobId}
|
||||
/>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
if (!appt.errors) {
|
||||
insertAuditTrail({
|
||||
jobid: job.id,
|
||||
operation: AuditTrailMapping.appointmentinsert(
|
||||
DateTimeFormat(values.start)
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
if (!!appt.errors) {
|
||||
notification["error"]({
|
||||
message: t("appointments.errors.saving", {
|
||||
message: JSON.stringify(appt.errors),
|
||||
}),
|
||||
});
|
||||
return;
|
||||
}
|
||||
notification["success"]({
|
||||
message: t("appointments.successes.created"),
|
||||
});
|
||||
if (jobId) {
|
||||
const jobUpdate = await updateJobStatus({
|
||||
variables: {
|
||||
jobIds: [jobId],
|
||||
fields: {
|
||||
status: bodyshop.md_ro_statuses.default_scheduled,
|
||||
date_scheduled: new Date(),
|
||||
scheduled_in: values.start,
|
||||
scheduled_completion: values.scheduled_completion,
|
||||
lost_sale_reason: null,
|
||||
date_lost_sale: null,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
if (!!jobUpdate.errors) {
|
||||
notification["error"]({
|
||||
message: t("appointments.errors.saving", {
|
||||
message: JSON.stringify(jobUpdate.errors),
|
||||
}),
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
setLoading(false);
|
||||
toggleModalVisible();
|
||||
if (values.notifyCustomer) {
|
||||
setEmailOptions({
|
||||
jobid: jobId,
|
||||
messageOptions: {
|
||||
to: [values.email],
|
||||
replyTo: bodyshop.email,
|
||||
subject: TemplateList("appointment").appointment_confirmation.subject,
|
||||
},
|
||||
template: {
|
||||
name: TemplateList("appointment").appointment_confirmation.key,
|
||||
variables: {
|
||||
id: appt.data.insert_appointments.returning[0].id,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
if (refetch) refetch();
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
onCancel={() => toggleModalVisible()}
|
||||
onOk={() => form.submit()}
|
||||
width={"90%"}
|
||||
maskClosable={false}
|
||||
destroyOnClose
|
||||
okButtonProps={{
|
||||
loading: loading,
|
||||
}}
|
||||
closable={false}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={handleFinish}
|
||||
initialValues={{
|
||||
notifyCustomer: !!(job && job.ownr_ea),
|
||||
email: (job && job.ownr_ea) || "",
|
||||
start: null,
|
||||
// smartDates: [],
|
||||
scheduled_completion: null,
|
||||
color: context.color,
|
||||
alt_transport: context.alt_transport,
|
||||
note: context.note,
|
||||
}}
|
||||
>
|
||||
<ScheduleJobModalComponent
|
||||
existingAppointments={existingAppointments}
|
||||
lbrHrsData={lbrHrsData}
|
||||
form={form}
|
||||
jobId={jobId}
|
||||
/>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(ScheduleJobModalContainer);
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
.schedule-job-modal {
|
||||
height: 70vh;
|
||||
overflow-y: auto;
|
||||
|
||||
.rbc-calendar {
|
||||
.rbc-toolbar {
|
||||
.rbc-btn-group {
|
||||
|
||||
Reference in New Issue
Block a user