Added ATS Info to Calendar IO-711

bodyshop_translations.babel

@@ -1,4 +1,4 @@
-<babeledit_project be_version="2.7.1" version="1.2">
+<babeledit_project version="1.2" be_version="2.7.1">
     <!--
 
     BabelEdit project file
@@ -24845,6 +24845,32 @@
                     <folder_node>
                         <name>printcenter</name>
                         <children>
+                            <folder_node>
+                                <name>appointments</name>
+                                <children>
+                                    <concept_node>
+                                        <name>appointment_confirmation</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                </children>
+                            </folder_node>
                             <folder_node>
                                 <name>bills</name>
                                 <children>

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

@@ -1,6 +1,8 @@
 import Icon from "@ant-design/icons";
 import { Popover } from "antd";
-import React from "react";
+import _ from "lodash";
+import moment from "moment";
+import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { MdFileDownload, MdFileUpload } from "react-icons/md";
 import { connect } from "react-redux";
@@ -15,8 +17,6 @@ import { DateTimeFormatter } from "../../utils/DateFormatter";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import ScheduleBlockDay from "../schedule-block-day/schedule-block-day.component";
 import ScheduleCalendarHeaderGraph from "./schedule-calendar-header-graph.component";
-import moment from "moment";
-
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   load: selectScheduleLoad,
@@ -32,8 +32,17 @@ export function ScheduleCalendarHeaderComponent({
   date,
   load,
   calculating,
+  events,
   ...otherProps
 }) {
+  const ATSToday = useMemo(() => {
+    if (!events) return [];
+    return _.groupBy(
+      events.filter((e) => moment(date).isSame(moment(e.start), "day")),
+      "job.alt_transport"
+    );
+  }, [events, date]);
+
   const { t } = useTranslation();
   const loadData = load[date.toISOString().substr(0, 10)];
 
@@ -102,26 +111,37 @@ export function ScheduleCalendarHeaderComponent({
   );
 
   const LoadComponent = loadData ? (
-    <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)}
-      </Popover>
-      <ScheduleCalendarHeaderGraph loadData={loadData} />
+    <div>
+      <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)}
+        </Popover>
+        <ScheduleCalendarHeaderGraph loadData={loadData} />
+      </div>
+      <div>
+        <ul style={{ listStyleType: "none", columns: "2 auto", padding: 0 }}>
+          {Object.keys(ATSToday).map((key, idx) => (
+            <li key={idx}>{`${key === "null" ? "N/A" : key}: ${
+              ATSToday[key].length
+            }`}</li>
+          ))}
+        </ul>
+      </div>
     </div>
   ) : null;
 

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

@@ -4,6 +4,9 @@
 .rbc-time-view .rbc-allday-cell {
   height: unset;
 }
+.rbc-row-content {
+  display: none;
+}
 
 .rbc-event-label {
   display: none;

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

@@ -27,16 +27,6 @@ export function ScheduleCalendarWrapperComponent({
   const history = useHistory();
 
   const handleEventPropStyles = (event, start, end, isSelected) => {
-    // if (!!!bodyshop.ssbuckets) {
-    //   return {};
-    // }
-    // const defaultEventColor = "#3174ad";
-    // const jobHrs = result.jobs_by_pk.jobhrs.aggregate.sum.mod_lb_hrs;
-    // const JobBucket = bodyshop.ssbuckets.filter(
-    //   (bucket) =>
-    //     bucket.gte <= jobHrs && (!!bucket.lt ? bucket.lt > jobHrs : true)
-    // )[0];
-
     return {
       ...(event.color
         ? {
@@ -70,15 +60,15 @@ export function ScheduleCalendarWrapperComponent({
         search.view = view;
         history.push({ search: queryString.stringify(search) });
       }}
-      step={30}
-      timeslots={1}
+      step={15}
+      // timeslots={1}
       showMultiDayTimes
       localizer={localizer}
       min={
         bodyshop.schedule_start_time
           ? new Date(bodyshop.schedule_start_time)
           : new Date("2020-01-01T06:00:00")
-      } 
+      }
       max={
         bodyshop.schedule_end_time
           ? new Date(bodyshop.schedule_end_time)
@@ -86,8 +76,9 @@ export function ScheduleCalendarWrapperComponent({
       }
       eventPropGetter={handleEventPropStyles}
       components={{
-        event: (e) => Event({ bodyshop: bodyshop, event: e.event, refetch: refetch }),
-        header: HeaderComponent,
+        event: (e) =>
+          Event({ bodyshop: bodyshop, event: e.event, refetch: refetch }),
+        header: (p) => <HeaderComponent {...p} events={data} />,
       }}
       {...otherProps}
     />

client/src/translations/en_us/common.json

@@ -1502,6 +1502,9 @@
 			}
 		},
 		"printcenter": {
+			"appointments": {
+				"appointment_confirmation": "Appointment Confirmation"
+			},
 			"bills": {
 				"inhouse_invoice": "In House Invoice"
 			},

client/src/translations/es/common.json

@@ -1502,6 +1502,9 @@
 			}
 		},
 		"printcenter": {
+			"appointments": {
+				"appointment_confirmation": ""
+			},
 			"bills": {
 				"inhouse_invoice": ""
 			},

client/src/translations/fr/common.json

@@ -1502,6 +1502,9 @@
 			}
 		},
 		"printcenter": {
+			"appointments": {
+				"appointment_confirmation": ""
+			},
 			"bills": {
 				"inhouse_invoice": ""
 			},