BOD-84 Load calculates for this week. Bug exists going past current week.

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

@@ -0,0 +1,62 @@
+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";
+const ShopTargetHrs = 100;
+
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+  load: selectScheduleLoad,
+  calculating: selectScheduleLoadCalculating,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export function ScheduleCalendarHeaderComponent({
+  label,
+  date,
+  load,
+  calculating,
+  ...otherProps
+}) {
+  const loadData = load[date.toISOString().substr(0, 10)];
+
+  const LoadComponent = loadData ? (
+    <div>
+      <Progress
+        percent={((loadData.expectedLoad || 0) / ShopTargetHrs) * 100}
+      />
+
+      <div>
+        <Icon component={MdCallReceived} />
+        {(loadData.hoursIn || 0) && loadData.hoursIn.toFixed(2)}
+        <Icon component={MdCallMissedOutgoing} />
+        {(loadData.hoursOut || 0) && loadData.hoursOut.toFixed(2)}
+      </div>
+    </div>
+  ) : null;
+
+  return (
+    <div>
+      {label}
+      {calculating || JSON.stringify(load) === "{}" ? (
+        <LoadingSkeleton />
+      ) : (
+        LoadComponent
+      )}
+    </div>
+  );
+}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ScheduleCalendarHeaderComponent);

client/src/components/schedule-calendar-wrapper/schedule-calendar.styles.scss

@@ -1 +1,6 @@
-@import 'react-big-calendar/lib/sass/styles';
+@import "react-big-calendar/lib/sass/styles";
+
+.rbc-time-view .rbc-row {
+  box-sizing: unset !important;
+  min-height: unset !important;
+}

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

@@ -1,10 +1,10 @@
-import { Progress } from "antd";
 import moment from "moment";
 import queryString from "query-string";
 import React from "react";
 import { Calendar, momentLocalizer } from "react-big-calendar";
 import { useHistory, useLocation } from "react-router-dom";
 import Event from "../schedule-event/schedule-event.container";
+import HeaderComponent from "./schedule-calendar-header.component";
 //import "react-big-calendar/lib/css/react-big-calendar.css";
 import "./schedule-calendar.styles.scss";
 
@@ -37,21 +37,14 @@ export default function ScheduleCalendarWrapperComponent({
         history.push({ search: queryString.stringify(search) });
       }}
       step={30}
+      timeslots={1}
       showMultiDayTimes
       localizer={localizer}
       min={new Date("2020-01-01T06:00:00")} //TODO Read from business settings.
       max={new Date("2020-01-01T20:00:00")}
       components={{
         event: (e) => Event({ event: e.event, refetch: refetch }),
-        header: (props) => {
-          return (
-            <span>
-              <div>{props.label}</div>
-              <Progress style={{ flex: "1" }} percent={77} showInfo={false} />
-            </span>
-          );
-        },
-        //dateCellWrapper: DateCellWrapper,
+        header: HeaderComponent,
       }}
       {...otherProps}
     />