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

client/src/components/loading-skeleton/loading-skeleton.component.jsx

@@ -4,5 +4,5 @@ import "./loading-skeleton.styles.scss";
 import { Skeleton } from "antd";
 
 export default function LoadingSkeleton(props) {
-  return <Skeleton {...props} className="loading-skeleton" active />;
+  return <Skeleton {...props} className='loading-skeleton' active />;
 }

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}
     />

client/src/components/schedule-calendar/schedule-calendar.container.jsx

@@ -31,7 +31,7 @@ export function ScheduleCalendarContainer({ calculateScheduleLoad }) {
   );
 
   if (loading) return <LoadingSpinner />;
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent message={error.message} type='error' />;
   let normalizedData = data.appointments.map((e) => {
     //Required becuase Hasura returns a string instead of a date object.
     return Object.assign(
@@ -42,29 +42,13 @@ export function ScheduleCalendarContainer({ calculateScheduleLoad }) {
     );
   });
 
-  console.log("ScheduleCalendarContainer -> normalizedData", normalizedData);
-  normalizedData.push({
-    id: 1,
-    title: "All day event",
-    allDay: true,
-    isintake: false,
-    start: new Date(),
-    end: new Date(),
-  });
+  calculateScheduleLoad(range.end);
+
   return (
-    <span>
-      <button
-        onClick={() => {
-          calculateScheduleLoad(range.end);
-        }}
-      >
-        Calc Load
-      </button>
-      <ScheduleCalendarComponent
-        refetch={refetch}
-        data={data ? normalizedData : null}
-      />
-    </span>
+    <ScheduleCalendarComponent
+      refetch={refetch}
+      data={data ? normalizedData : null}
+    />
   );
 }
 export default connect(

client/src/components/schedule-datecellwrapper/schedule-datecellwrapper.component.jsx

@@ -1,18 +0,0 @@
-import React from "react";
-
-export default function ScheduleDateCellWrapper(dateCellWrapperProps) {
-  // Show 'click me' text in arbitrary places by using the range prop
-
-  const style = {
-    display: "flex",
-    flex: 1,
-    borderLeft: "1px solid #DDD",
-    backgroundColor: "#fff",
-  };
-  return (
-    <div style={style}>
-      PLACEHOLDER:DATA
-      {dateCellWrapperProps.children}
-    </div>
-  );
-}