Added schedule load to daily veiw with additional CSS fixes. BOD-319

client/src/components/header/header.component.jsx

@@ -13,7 +13,7 @@ import Icon, {
   UnorderedListOutlined,
   UserOutlined,
 } from "@ant-design/icons";
-import { Avatar, Layout, Menu } from "antd";
+import { Avatar, Menu } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { BsKanban } from "react-icons/bs";
@@ -29,16 +29,12 @@ import { createStructuredSelector } from "reselect";
 import { selectRecentItems } from "../../redux/application/application.selectors";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { signOutStart } from "../../redux/user/user.actions";
-import {
-  selectBodyshop,
-  selectCurrentUser,
-} from "../../redux/user/user.selectors";
+import { selectCurrentUser } from "../../redux/user/user.selectors";
 import GlobalSearch from "../global-search/global-search.component";
 import "./header.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
-  bodyshop: selectBodyshop,
   recentItems: selectRecentItems,
 });
 
@@ -53,7 +49,6 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 function Header({
-  bodyshop,
   handleMenuClick,
   currentUser,
   signOutStart,
@@ -63,10 +58,8 @@ function Header({
   recentItems,
 }) {
   const { t } = useTranslation();
-  const { Header } = Layout;
 
   return (
-    <Header>
     <Menu
       mode="horizontal"
       theme="dark"
@@ -219,9 +212,7 @@ function Header({
         <Menu.Divider />
 
         <Menu.Item key="timetickets">
-            <Link to="/manage/timetickets">
-              {t("menus.header.timetickets")}
-            </Link>
+          <Link to="/manage/timetickets">{t("menus.header.timetickets")}</Link>
         </Menu.Item>
         <Menu.Item
           key="entertimetickets"
@@ -337,7 +328,6 @@ function Header({
         </Menu.SubMenu>
       </Menu.SubMenu>
     </Menu>
-    </Header>
   );
 }
 

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

@@ -100,14 +100,17 @@ export function ScheduleCalendarHeaderComponent({
       </div>
     </Popover>
   ) : null;
+  console.log("loadData", loadData);
 
   return (
+    <div className="imex-calendar-load">
       <ScheduleBlockDay date={date} refetch={refetch}>
         <div>
           {label}
           {calculating ? <LoadingSkeleton /> : LoadComponent}
         </div>
       </ScheduleBlockDay>
+    </div>
   );
 }
 export default connect(

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

@@ -1,8 +1,10 @@
 @import "react-big-calendar/lib/sass/styles";
 
-.rbc-time-view .rbc-row {
-  box-sizing: unset !important;
-  min-height: unset !important;
+.rbc-time-header-cell-single-day {
+  display: unset;
+}
+.rbc-time-view .rbc-allday-cell {
+  height: unset;
 }
 
 .imex-event-arrived {
@@ -20,3 +22,9 @@
 .rbc-event.rbc-selected {
   background-color: slategrey;
 }
+.imex-calendar-load {
+  max-width: 12rem;
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+}

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

@@ -1,25 +1,11 @@
 import { SyncOutlined } from "@ant-design/icons";
 import { Button } from "antd";
 import React from "react";
-import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
-import { setModalContext } from "../../redux/modals/modals.actions";
 import ScheduleCalendarWrapperComponent from "../schedule-calendar-wrapper/scheduler-calendar-wrapper.component";
 import ScheduleModal from "../schedule-job-modal/schedule-job-modal.container";
 import ScheduleProductionList from "../schedule-production-list/schedule-production-list.component";
 
-const mapDispatchToProps = (dispatch) => ({
-  setScheduleContext: (context) =>
-    dispatch(setModalContext({ context: context, modal: "schedule" })),
-});
-
-export function ScheduleCalendarComponent({
-  data,
-  refetch,
-  setScheduleContext,
-}) {
-  const { t } = useTranslation();
-
+export default function ScheduleCalendarComponent({ data, refetch }) {
   return (
     <div>
       <div className="imex-flex-row">
@@ -32,19 +18,6 @@ export function ScheduleCalendarComponent({
           <SyncOutlined />
         </Button>
 
-        <Button
-          className="imex-flex-row__margin"
-          onClick={() => {
-            setScheduleContext({
-              actions: { refetch: refetch },
-              context: {
-                jobId: null,
-              },
-            });
-          }}
-        >
-          {t("appointments.actions.new")}
-        </Button>
         <ScheduleProductionList />
       </div>
 
@@ -54,4 +27,3 @@ export function ScheduleCalendarComponent({
     </div>
   );
 }
-export default connect(null, mapDispatchToProps)(ScheduleCalendarComponent);

client/src/components/schedule-job-modal/schedule-job-modal.component.jsx

@@ -1,16 +1,16 @@
 import { Button, Checkbox, Col, Row } from "antd";
 import axios from "axios";
+import moment from "moment";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { auth } from "../../firebase/firebase.utils";
 import { DateFormatter } from "../../utils/DateFormatter";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
 import EmailInput from "../form-items-formatted/email-form-item.component";
 import ScheduleDayViewContainer from "../schedule-day-view/schedule-day-view.container";
 import ScheduleExistingAppointmentsList from "../schedule-existing-appointments-list/schedule-existing-appointments-list.component";
-import moment from "moment";
 
 export default function ScheduleJobModalComponent({
+  jobId,
   existingAppointments,
   appData,
   setAppData,
@@ -20,15 +20,9 @@ export default function ScheduleJobModalComponent({
   const handleAuto = async () => {
     setLoading(true);
     try {
-      const response = await axios.post(
-        "/scheduling/job",
-        { jobId: "661dd1d5-bf06-426f-8bd2-bd9e41de8eb1" },
-        {
-          headers: {
-            Authorization: `Bearer ${await auth.currentUser.getIdToken(true)}`,
-          },
-        }
-      );
+      const response = await axios.post("/scheduling/job", {
+        jobId: "661dd1d5-bf06-426f-8bd2-bd9e41de8eb1",
+      });
       setAppData({ ...appData, smartDates: response.data });
     } catch (error) {
       console.log("error", error, error.message);

client/src/components/schedule-job-modal/schedule-job-modal.container.jsx

@@ -27,6 +27,7 @@ const mapDispatchToProps = (dispatch) => ({
   toggleModalVisible: () => dispatch(toggleModalVisible("schedule")),
   setEmailOptions: (e) => dispatch(setEmailOptions(e)),
 });
+
 export function ScheduleJobModalContainer({
   scheduleModal,
   bodyshop,
@@ -163,6 +164,7 @@ export function ScheduleJobModalContainer({
       }}
     >
       <ScheduleJobModalComponent
+        jobId={jobId}
         existingAppointments={existingAppointments}
         appData={appData}
         setAppData={setAppData}

client/src/components/schedule-production-list/schedule-production-list.component.jsx

@@ -1,4 +1,5 @@
-import { Button, Card, Popover } from "antd";
+import { DownOutlined } from "@ant-design/icons";
+import { Card, Popover } from "antd";
 import React from "react";
 import { useLazyQuery } from "react-apollo";
 import { useTranslation } from "react-i18next";
@@ -59,9 +60,10 @@ export default function ScheduleProductionList() {
 
   return (
     <Popover content={content} trigger="click" placement="bottomRight">
-      <Button onClick={() => callQuery()}>
+      <a href=" #" onClick={() => callQuery()}>
         {t("appointments.labels.inproduction")}
-      </Button>
+        <DownOutlined />
+      </a>
     </Popover>
   );
 }

client/src/pages/manage/manage.page.component.jsx

@@ -127,7 +127,7 @@ const TimeTicketsAll = lazy(() =>
   import("../time-tickets/time-tickets.container")
 );
 
-const { Content } = Layout;
+const { Content, Header } = Layout;
 
 const stripePromise = new Promise((resolve, reject) => {
   client.query({ query: QUERY_STRIPE_ID }).then((resp) => {
@@ -152,8 +152,9 @@ export function Manage({ match, conflict }) {
 
   return (
     <Layout className="layout-container">
+      <Header>
         <HeaderContainer />
-
+      </Header>
       <Content className="content-container">
         <FcmNotification />
         <ErrorBoundary>