IO-863 Fix calendar month view.
This commit is contained in:
Patrick Fic
@@ -0,0 +1,56 @@
|
||||
import React from "react";
|
||||
import { useMutation } from "@apollo/client";
|
||||
import { UPDATE_JOB } from "../../graphql/jobs.queries";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { Dropdown, Menu, notification } from "antd";
|
||||
import { DownOutlined } from "@ant-design/icons";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop,
|
||||
});
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
||||
});
|
||||
|
||||
export function JobAltTransportChange({ bodyshop, job }) {
|
||||
const [updateJob] = useMutation(UPDATE_JOB);
|
||||
const { t } = useTranslation();
|
||||
|
||||
const onClick = async ({ key }) => {
|
||||
const result = await updateJob({
|
||||
variables: { jobId: job.id, job: { alt_transport: key } },
|
||||
});
|
||||
|
||||
if (!!!result.errors) {
|
||||
notification["success"]({ message: t("appointments.successes.saved") });
|
||||
} else {
|
||||
notification["error"]({
|
||||
message: t("appointments.errors.saving", {
|
||||
error: JSON.stringify(result.errors),
|
||||
}),
|
||||
});
|
||||
}
|
||||
};
|
||||
const menu = (
|
||||
<Menu selectedKeys={[job && job.alt_transport]} onClick={onClick}>
|
||||
{bodyshop.appt_alt_transport &&
|
||||
bodyshop.appt_alt_transport.map((alt) => (
|
||||
<Menu.Item key={alt}>{alt}</Menu.Item>
|
||||
))}
|
||||
</Menu>
|
||||
);
|
||||
return (
|
||||
<Dropdown overlay={menu}>
|
||||
<a href=" #" onClick={(e) => e.preventDefault()}>
|
||||
<DownOutlined />
|
||||
</a>
|
||||
</Dropdown>
|
||||
);
|
||||
}
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(JobAltTransportChange);
|
||||
@@ -0,0 +1,55 @@
|
||||
import React from "react";
|
||||
import { useMutation } from "@apollo/client";
|
||||
import { UPDATE_APPOINTMENT } from "../../graphql/appointments.queries";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { Dropdown, Menu, notification } from "antd";
|
||||
import { DownOutlined } from "@ant-design/icons";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop,
|
||||
});
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
||||
});
|
||||
|
||||
export function ScheduleEventColor({ bodyshop, event }) {
|
||||
const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
|
||||
const { t } = useTranslation();
|
||||
|
||||
const onClick = async ({ key }) => {
|
||||
const result = await updateAppointment({
|
||||
variables: { appid: event.id, app: { color: key } },
|
||||
});
|
||||
|
||||
if (!!!result.errors) {
|
||||
notification["success"]({ message: t("appointments.successes.saved") });
|
||||
} else {
|
||||
notification["error"]({
|
||||
message: t("appointments.errors.saving", {
|
||||
error: JSON.stringify(result.errors),
|
||||
}),
|
||||
});
|
||||
}
|
||||
};
|
||||
const menu = (
|
||||
<Menu selectedKeys={[event.color]} onClick={onClick}>
|
||||
{bodyshop.appt_colors &&
|
||||
bodyshop.appt_colors.map((color) => (
|
||||
<Menu.Item style={{ color: color.color.hex }} key={color.color.hex}>
|
||||
{color.label}
|
||||
</Menu.Item>
|
||||
))}
|
||||
</Menu>
|
||||
);
|
||||
return (
|
||||
<Dropdown overlay={menu}>
|
||||
<a href=" #" onClick={(e) => e.preventDefault()}>
|
||||
<DownOutlined />
|
||||
</a>
|
||||
</Dropdown>
|
||||
);
|
||||
}
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(ScheduleEventColor);
|
||||
173
client/src/components/job-at-change/schedule-event.component.jsx
Normal file
173
client/src/components/job-at-change/schedule-event.component.jsx
Normal file
@@ -0,0 +1,173 @@
|
||||
import { Button, Popover, Space } from "antd";
|
||||
import React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { Link } from "react-router-dom";
|
||||
import { setModalContext } from "../../redux/modals/modals.actions";
|
||||
import CurrencyFormatter from "../../utils/CurrencyFormatter";
|
||||
import PhoneFormatter from "../../utils/PhoneFormatter";
|
||||
import { GenerateDocument } from "../../utils/RenderTemplate";
|
||||
import DataLabel from "../data-label/data-label.component";
|
||||
import ScheduleAtChange from "./job-at-change.component";
|
||||
import ScheduleEventColor from "./schedule-event.color.component";
|
||||
import { TemplateList } from "../../utils/TemplateConstants";
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
setScheduleContext: (context) =>
|
||||
dispatch(setModalContext({ context: context, modal: "schedule" })),
|
||||
});
|
||||
|
||||
export function ScheduleEventComponent({
|
||||
event,
|
||||
refetch,
|
||||
handleCancel,
|
||||
setScheduleContext,
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const popoverContent = (
|
||||
<div>
|
||||
{!event.isintake ? (
|
||||
<strong>{event.title}</strong>
|
||||
) : (
|
||||
<Space>
|
||||
<strong>{`${(event.job && event.job.ownr_fn) || ""} ${
|
||||
(event.job && event.job.ownr_ln) || ""
|
||||
}`}</strong>
|
||||
<span style={{ margin: 4 }}>
|
||||
{`${(event.job && event.job.v_model_yr) || ""} ${
|
||||
(event.job && event.job.v_make_desc) || ""
|
||||
} ${(event.job && event.job.v_model_desc) || ""}`}
|
||||
</span>
|
||||
<ScheduleEventColor event={event} />
|
||||
</Space>
|
||||
)}
|
||||
|
||||
{event.job ? (
|
||||
<div>
|
||||
<DataLabel label={t("jobs.fields.ro_number")}>
|
||||
{(event.job && event.job.ro_number) || ""}
|
||||
</DataLabel>
|
||||
<DataLabel label={t("jobs.fields.clm_total")}>
|
||||
<CurrencyFormatter>
|
||||
{(event.job && event.job.clm_total) || ""}
|
||||
</CurrencyFormatter>
|
||||
</DataLabel>
|
||||
<DataLabel hideIfNull label={t("jobs.fields.ins_co_nm")}>
|
||||
{(event.job && event.job.ins_co_nm) || ""}
|
||||
</DataLabel>
|
||||
<DataLabel hideIfNull label={t("jobs.fields.clm_no")}>
|
||||
{(event.job && event.job.clm_no) || ""}
|
||||
</DataLabel>
|
||||
<DataLabel label={t("jobs.fields.ownr_ea")}>
|
||||
{(event.job && event.job.ownr_ea) || ""}
|
||||
</DataLabel>
|
||||
<DataLabel label={t("jobs.fields.ownr_ph1")}>
|
||||
<PhoneFormatter>
|
||||
{(event.job && event.job.ownr_ph1) || ""}
|
||||
</PhoneFormatter>
|
||||
</DataLabel>
|
||||
<DataLabel label={t("jobs.fields.alt_transport")}>
|
||||
{(event.job && event.job.alt_transport) || ""}
|
||||
<ScheduleAtChange job={event && event.job} />
|
||||
</DataLabel>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="imex-flex-row">
|
||||
{event.job ? (
|
||||
<Link to={`/manage/jobs/${event.job && event.job.id}`}>
|
||||
<Button>{t("appointments.actions.viewjob")}</Button>
|
||||
</Link>
|
||||
) : null}
|
||||
<Button
|
||||
onClick={() => {
|
||||
const Template = TemplateList("job").appointment_reminder;
|
||||
GenerateDocument(
|
||||
{
|
||||
name: Template.key,
|
||||
variables: { id: event.job.id },
|
||||
},
|
||||
{ to: event.job && event.job.ownr_ea, subject: Template.subject },
|
||||
"e"
|
||||
);
|
||||
}}
|
||||
disabled={event.arrived}
|
||||
>
|
||||
{t("appointments.actions.sendreminder")}
|
||||
</Button>
|
||||
<Button onClick={() => handleCancel(event.id)} disabled={event.arrived}>
|
||||
{t("appointments.actions.cancel")}
|
||||
</Button>
|
||||
<Button
|
||||
disabled={event.arrived}
|
||||
onClick={() => {
|
||||
setScheduleContext({
|
||||
actions: { refetch: refetch },
|
||||
context: {
|
||||
jobId: event.job.id,
|
||||
job: event.job,
|
||||
previousEvent: event.id,
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
{t("appointments.actions.reschedule")}
|
||||
</Button>
|
||||
{event.isintake ? (
|
||||
<Link
|
||||
to={{
|
||||
pathname: `/manage/jobs/${event.job && event.job.id}/intake`,
|
||||
search: `?appointmentId=${event.id}`,
|
||||
}}
|
||||
>
|
||||
<Button disabled={event.arrived}>
|
||||
{t("appointments.actions.intake")}
|
||||
</Button>
|
||||
</Link>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const RegularEvent = event.isintake ? (
|
||||
<div style={{ display: "flex", flexWrap: "wrap" }}>
|
||||
<Space>
|
||||
<strong>{`${event.job.ro_number || t("general.labels.na")}`}</strong>
|
||||
<span>{`${(event.job && event.job.ownr_fn) || ""} ${
|
||||
(event.job && event.job.ownr_ln) || ""
|
||||
} ${(event.job && event.job.ownr_co_nm) || ""}`}</span>
|
||||
</Space>
|
||||
<Space>
|
||||
<span>
|
||||
{`${(event.job && event.job.v_model_yr) || ""} ${
|
||||
(event.job && event.job.v_make_desc) || ""
|
||||
} ${(event.job && event.job.v_model_desc) || ""}`}
|
||||
</span>
|
||||
<span>
|
||||
{`(${
|
||||
(event.job && event.job.labhrs.aggregate.sum.mod_lb_hrs) || "0"
|
||||
} / ${
|
||||
(event.job && event.job.larhrs.aggregate.sum.mod_lb_hrs) || "0"
|
||||
})`}
|
||||
</span>
|
||||
</Space>
|
||||
{event.job && event.job.alt_transport && (
|
||||
<div style={{ margin: ".1rem" }}>{event.job.alt_transport}</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<strong>{`${event.title || ""}`}</strong>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<Popover
|
||||
trigger="click"
|
||||
content={popoverContent}
|
||||
style={{ height: "100%", width: "100%" }}
|
||||
>
|
||||
{RegularEvent}
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
export default connect(null, mapDispatchToProps)(ScheduleEventComponent);
|
||||
@@ -0,0 +1,63 @@
|
||||
import { useMutation } from "@apollo/client";
|
||||
import { notification } from "antd";
|
||||
import React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { logImEXEvent } from "../../firebase/firebase.utils";
|
||||
import { CANCEL_APPOINTMENT_BY_ID } from "../../graphql/appointments.queries";
|
||||
import { UPDATE_JOB } from "../../graphql/jobs.queries";
|
||||
import ScheduleEventComponent from "./schedule-event.component";
|
||||
|
||||
export default function ScheduleEventContainer({ bodyshop, event, refetch }) {
|
||||
const { t } = useTranslation();
|
||||
const [cancelAppointment] = useMutation(CANCEL_APPOINTMENT_BY_ID);
|
||||
const [updateJob] = useMutation(UPDATE_JOB);
|
||||
const handleCancel = async (id) => {
|
||||
logImEXEvent("schedule_cancel_appt");
|
||||
|
||||
const cancelAppt = await cancelAppointment({
|
||||
variables: { appid: event.id },
|
||||
});
|
||||
notification["success"]({
|
||||
message: t("appointments.successes.canceled"),
|
||||
});
|
||||
|
||||
if (!!cancelAppt.errors) {
|
||||
notification["error"]({
|
||||
message: t("appointments.errors.canceling", {
|
||||
message: JSON.stringify(cancelAppt.errors),
|
||||
}),
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const jobUpdate = await updateJob({
|
||||
variables: {
|
||||
jobId: event.job.id,
|
||||
|
||||
job: {
|
||||
date_scheduled: null,
|
||||
scheduled_in: null,
|
||||
status: bodyshop.md_ro_statuses.default_imported,
|
||||
},
|
||||
},
|
||||
});
|
||||
if (!!jobUpdate.errors) {
|
||||
notification["error"]({
|
||||
message: t("jobs.errors.updating", {
|
||||
message: JSON.stringify(jobUpdate.errors),
|
||||
}),
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (refetch) refetch();
|
||||
};
|
||||
|
||||
return (
|
||||
<ScheduleEventComponent
|
||||
event={event}
|
||||
refetch={refetch}
|
||||
handleCancel={handleCancel}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user