IO-3020 IO-3036 Extend blur wrapper, add lock wrapper to components throughout the system. Many placeholders still left for upsell components.
This commit is contained in:
Patrick Fic
@@ -18,6 +18,8 @@ import ScheduleBlockDay from "../schedule-block-day/schedule-block-day.component
|
||||
import ScheduleCalendarHeaderGraph from "./schedule-calendar-header-graph.component";
|
||||
import InstanceRenderMgr from "../../utils/instanceRenderMgr";
|
||||
import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
|
||||
import BlurWrapper from "../feature-wrapper/blur-wrapper.component";
|
||||
import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop,
|
||||
@@ -59,30 +61,37 @@ export function ScheduleCalendarHeaderComponent({
|
||||
<tbody>
|
||||
{loadData && loadData.allJobsOut ? (
|
||||
loadData.allJobsOut.map((j) => (
|
||||
<tr key={j.id}>
|
||||
<td style={{ padding: "2.5px" }}>
|
||||
<Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link> ({j.status})
|
||||
</td>
|
||||
<td style={{ padding: "2.5px" }}>
|
||||
<OwnerNameDisplay ownerObject={j} />
|
||||
</td>
|
||||
<td style={{ padding: "2.5px" }}>
|
||||
{`(${j.labhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0}/${
|
||||
j.larhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0
|
||||
}/${(j.labhrs.aggregate?.sum?.mod_lb_hrs + j.larhrs.aggregate?.sum?.mod_lb_hrs).toFixed(
|
||||
1
|
||||
)} ${t("general.labels.hours")})`}
|
||||
</td>
|
||||
<td style={{ padding: "2.5px" }}>
|
||||
<DateTimeFormatter>{j.scheduled_completion}</DateTimeFormatter>
|
||||
</td>
|
||||
</tr>
|
||||
<BlurWrapperComponent key={j.id} featureName="smartscheduling">
|
||||
<tr>
|
||||
<td style={{ padding: "2.5px" }}>
|
||||
<Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link> ({j.status})
|
||||
</td>
|
||||
<td style={{ padding: "2.5px" }}>
|
||||
<OwnerNameDisplay ownerObject={j} />
|
||||
</td>
|
||||
<td style={{ padding: "2.5px" }}>
|
||||
{`(${j.labhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0}/${
|
||||
j.larhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0
|
||||
}/${(j.labhrs.aggregate?.sum?.mod_lb_hrs + j.larhrs.aggregate?.sum?.mod_lb_hrs).toFixed(
|
||||
1
|
||||
)} ${t("general.labels.hours")})`}
|
||||
</td>
|
||||
<td style={{ padding: "2.5px" }}>
|
||||
<DateTimeFormatter>{j.scheduled_completion}</DateTimeFormatter>
|
||||
</td>
|
||||
</tr>
|
||||
</BlurWrapperComponent>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td style={{ padding: "2.5px" }}>{t("appointments.labels.nocompletingjobs")}</td>
|
||||
<BlurWrapperComponent featureName="smartscheduling">
|
||||
<td style={{ padding: "2.5px" }}>{t("appointments.labels.nocompletingjobs")}</td>
|
||||
</BlurWrapperComponent>
|
||||
</tr>
|
||||
)}
|
||||
{
|
||||
//TODO:Upsell
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -94,30 +103,37 @@ export function ScheduleCalendarHeaderComponent({
|
||||
<tbody>
|
||||
{loadData && loadData.allJobsIn ? (
|
||||
loadData.allJobsIn.map((j) => (
|
||||
<tr key={j.id}>
|
||||
<td style={{ padding: "2.5px" }}>
|
||||
<Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link>
|
||||
</td>
|
||||
<td style={{ padding: "2.5px" }}>
|
||||
<OwnerNameDisplay ownerObject={j} />
|
||||
</td>
|
||||
<td style={{ padding: "2.5px" }}>
|
||||
{`(${j.labhrs?.aggregate?.sum.mod_lb_hrs?.toFixed(1) || 0}/${
|
||||
j.larhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0
|
||||
}/${(j.labhrs?.aggregate?.sum?.mod_lb_hrs + j.larhrs?.aggregate?.sum?.mod_lb_hrs).toFixed(
|
||||
1
|
||||
)} ${t("general.labels.hours")})`}
|
||||
</td>
|
||||
<td style={{ padding: "2.5px" }}>
|
||||
<DateTimeFormatter>{j.scheduled_in}</DateTimeFormatter>
|
||||
</td>
|
||||
</tr>
|
||||
<BlurWrapperComponent key={j.id} featureName="smartscheduling">
|
||||
<tr>
|
||||
<td style={{ padding: "2.5px" }}>
|
||||
<Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link>
|
||||
</td>
|
||||
<td style={{ padding: "2.5px" }}>
|
||||
<OwnerNameDisplay ownerObject={j} />
|
||||
</td>
|
||||
<td style={{ padding: "2.5px" }}>
|
||||
{`(${j.labhrs?.aggregate?.sum.mod_lb_hrs?.toFixed(1) || 0}/${
|
||||
j.larhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0
|
||||
}/${(j.labhrs?.aggregate?.sum?.mod_lb_hrs + j.larhrs?.aggregate?.sum?.mod_lb_hrs).toFixed(
|
||||
1
|
||||
)} ${t("general.labels.hours")})`}
|
||||
</td>
|
||||
<td style={{ padding: "2.5px" }}>
|
||||
<DateTimeFormatter>{j.scheduled_in}</DateTimeFormatter>
|
||||
</td>
|
||||
</tr>
|
||||
</BlurWrapperComponent>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td style={{ padding: "2.5px" }}>{t("appointments.labels.noarrivingjobs")}</td>
|
||||
<BlurWrapperComponent featureName="smartscheduling">
|
||||
<td style={{ padding: "2.5px" }}>{t("appointments.labels.noarrivingjobs")}</td>
|
||||
</BlurWrapperComponent>
|
||||
</tr>
|
||||
)}
|
||||
{
|
||||
//TODO:Upsell
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -132,10 +148,12 @@ export function ScheduleCalendarHeaderComponent({
|
||||
trigger="hover"
|
||||
title={t("appointments.labels.arrivingjobs")}
|
||||
>
|
||||
<Icon component={MdFileDownload} style={{ color: "green" }} />
|
||||
{(loadData.allHoursInBody || 0) && loadData.allHoursInBody.toFixed(1)}/
|
||||
{(loadData.allHoursInRefinish || 0) && loadData.allHoursInRefinish.toFixed(1)}/
|
||||
{(loadData.allHoursIn || 0) && loadData.allHoursIn.toFixed(1)}
|
||||
<Space size="small">
|
||||
<Icon component={MdFileDownload} style={{ color: "green" }} />
|
||||
<BlurWrapper featureName="smartscheduling">
|
||||
<span>{`${(loadData.allHoursInBody || 0) && loadData.allHoursInBody.toFixed(1)}/${(loadData.allHoursInRefinish || 0) && loadData.allHoursInRefinish.toFixed(1)}/${(loadData.allHoursIn || 0) && loadData.allHoursIn.toFixed(1)}`}</span>
|
||||
</BlurWrapper>
|
||||
</Space>
|
||||
</Popover>
|
||||
<Popover
|
||||
placement={"bottom"}
|
||||
@@ -143,8 +161,12 @@ export function ScheduleCalendarHeaderComponent({
|
||||
trigger="hover"
|
||||
title={t("appointments.labels.completingjobs")}
|
||||
>
|
||||
<Icon component={MdFileUpload} style={{ color: "red" }} />
|
||||
{(loadData.allHoursOut || 0) && loadData.allHoursOut.toFixed(1)}
|
||||
<Space size="small">
|
||||
<Icon component={MdFileUpload} style={{ color: "red" }} />
|
||||
<BlurWrapper featureName="smartscheduling">
|
||||
<span>{(loadData.allHoursOut || 0) && loadData.allHoursOut.toFixed(1)}</span>
|
||||
</BlurWrapper>
|
||||
</Space>
|
||||
</Popover>
|
||||
<ScheduleCalendarHeaderGraph loadData={loadData} />
|
||||
</Space>
|
||||
@@ -196,18 +218,7 @@ export function ScheduleCalendarHeaderComponent({
|
||||
<ScheduleBlockDay alreadyBlocked={isDayBlocked.length > 0} date={date} refetch={refetch}>
|
||||
<div style={{ color: isShopOpen(date) ? "" : "tomato" }}>
|
||||
{label}
|
||||
{InstanceRenderMgr({
|
||||
imex: HasFeatureAccess({ featureName: "smartscheduling", bodyshop }) ? (
|
||||
calculating ? (
|
||||
<LoadingSkeleton />
|
||||
) : (
|
||||
LoadComponent
|
||||
)
|
||||
) : (
|
||||
<></>
|
||||
),
|
||||
rome: "USE_IMEX"
|
||||
})}
|
||||
{calculating ? <LoadingSkeleton /> : LoadComponent}
|
||||
</div>
|
||||
</ScheduleBlockDay>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user