69 lines
2.0 KiB
JavaScript
69 lines
2.0 KiB
JavaScript
import React from "react";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import {
|
|
selectScheduleLoad,
|
|
selectScheduleLoadCalculating,
|
|
} from "../../redux/application/application.selectors";
|
|
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
|
|
import { Progress } from "antd";
|
|
import { MdCallReceived, MdCallMissedOutgoing } from "react-icons/md";
|
|
import Icon from "@ant-design/icons";
|
|
import ScheduleBlockDay from "../schedule-block-day/schedule-block-day.component";
|
|
|
|
const ShopTargetHrs = 100;
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
//currentUser: selectCurrentUser
|
|
load: selectScheduleLoad,
|
|
calculating: selectScheduleLoadCalculating,
|
|
});
|
|
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
|
});
|
|
|
|
export function ScheduleCalendarHeaderComponent({
|
|
label,
|
|
refetch,
|
|
date,
|
|
load,
|
|
calculating,
|
|
...otherProps
|
|
}) {
|
|
const loadData = load[date.toISOString().substr(0, 10)];
|
|
|
|
const LoadComponent = loadData ? (
|
|
<div style={{ display: "flex", flexDirection: "column" }}>
|
|
<Progress
|
|
style={{ display: "flex", alignItems: "center" }}
|
|
percent={((loadData.expectedLoad || 0) / ShopTargetHrs) * 100}
|
|
/>
|
|
|
|
<div className="imex-flex-row imex-flex-row__flex-space-around">
|
|
<Icon component={MdCallReceived} />
|
|
{(loadData.hoursIn || 0) && loadData.hoursIn.toFixed(2)}
|
|
<Icon component={MdCallMissedOutgoing} />
|
|
{(loadData.hoursOut || 0) && loadData.hoursOut.toFixed(2)}
|
|
</div>
|
|
</div>
|
|
) : null;
|
|
|
|
return (
|
|
<ScheduleBlockDay date={date} refetch={refetch}>
|
|
<div>
|
|
{label}
|
|
{calculating || JSON.stringify(load) === "{}" ? (
|
|
<LoadingSkeleton />
|
|
) : (
|
|
LoadComponent
|
|
)}
|
|
</div>
|
|
</ScheduleBlockDay>
|
|
);
|
|
}
|
|
export default connect(
|
|
mapStateToProps,
|
|
mapDispatchToProps
|
|
)(ScheduleCalendarHeaderComponent);
|