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

Added in jobs to schedule header for greater transparency. BOD-403

Browse Source
This commit is contained in:
Patrick Fic
2020-09-23 08:31:06 -07:00
parent f84520c260
commit 6c2e0dad45
12 changed files with 150 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
client/src/components/schedule-calendar-wrapper/schedule-calendar-header.component.js
View File

@@ -38,7 +38,7 @@ export function ScheduleCalendarHeaderComponent({
const { t } = useTranslation();
const loadData = load[date.toISOString().substr(0, 10)];
const popContent = () => (
const jobsOutPopup = () => (
<div onClick={(e) => e.stopPropagation()}>
<table>
<tbody>
@@ -71,34 +71,72 @@ export function ScheduleCalendarHeaderComponent({
</div>
);
const jobsInPopup = () => (
<div onClick={(e) => e.stopPropagation()}>
<table>
<tbody>
{loadData && loadData.jobsIn ? (
loadData.jobsIn.map((j) => (
<tr key={j.id}>
<td>
<Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link>
</td>
<td>
{`(${(
j.labhrs.aggregate.sum.mod_lb_hrs +
j.larhrs.aggregate.sum.mod_lb_hrs
).toFixed(1)} ${t("general.labels.hours")})`}
</td>
<td>
<DateTimeFormatter>{j.scheduled_in}</DateTimeFormatter>
</td>
</tr>
))
) : (
<tr>
<td>{t("appointments.labels.noarrivingjobs")}</td>
</tr>
)}
</tbody>
</table>
</div>
);
const LoadComponent = loadData ? (
<Popover
placement={"bottom"}
content={popContent}
trigger="hover"
title={t("appointments.labels.completingjobs")}
>
<div className="imex-flex-row imex-flex-row__flex-space-around">
<div className="imex-flex-row imex-flex-row__flex-space-around">
<Popover
placement={"bottom"}
content={jobsInPopup}
trigger="hover"
title={t("appointments.labels.arrivingjobs")}
>
<Icon component={MdFileDownload} style={{ color: "green" }} />
{(loadData.hoursIn || 0) && loadData.hoursIn.toFixed(2)}
</Popover>
<Popover
placement={"bottom"}
content={jobsOutPopup}
trigger="hover"
title={t("appointments.labels.completingjobs")}
>
<Icon component={MdFileUpload} style={{ color: "red" }} />
{(loadData.hoursOut || 0) && loadData.hoursOut.toFixed(2)}
<Statistic
value={((loadData.expectedLoad || 0) / bodyshop.prodtargethrs) * 100}
suffix={"%"}
precision={0}
valueStyle={{
color:
Math.abs(
100 -
((loadData.expectedLoad || 0) / bodyshop.prodtargethrs) * 100
) <= 10
? "green"
: "red",
}}
/>
</div>
</Popover>
</Popover>
<Statistic
value={((loadData.expectedLoad || 0) / bodyshop.prodtargethrs) * 100}
suffix={"%"}
precision={0}
valueStyle={{
color:
Math.abs(
100 -
((loadData.expectedLoad || 0) / bodyshop.prodtargethrs) * 100
) <= 10
? "green"
: "red",
}}
/>
</div>
) : null;
return (

2
client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx
View File

@@ -62,7 +62,7 @@ export function ScheduleCalendarWrapperComponent({
search.view = view;
history.push({ search: queryString.stringify(search) });
}}
step={30}
step={15}
timeslots={1}
showMultiDayTimes
localizer={localizer}