IO-863 Fix calendar month view.

client/package.json

@@ -33,7 +33,7 @@
     "prop-types": "^15.7.2",
     "query-string": "^6.14.0",
     "react": "^17.0.1",
-    "react-big-calendar": "^0.32.0",
+    "react-big-calendar": "^0.33.2",
     "react-color": "^2.19.3",
     "react-dom": "^17.0.1",
     "react-drag-listview": "^0.1.8",

client/src/components/job-at-change/job-at-change.component.jsx

@@ -15,13 +15,13 @@ const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
-export function ScheduleAtChange({ bodyshop, event }) {
+export function JobAltTransportChange({ bodyshop, job }) {
   const [updateJob] = useMutation(UPDATE_JOB);
   const { t } = useTranslation();
 
   const onClick = async ({ key }) => {
     const result = await updateJob({
-      variables: { jobId: event.job.id, job: { alt_transport: key } },
+      variables: { jobId: job.id, job: { alt_transport: key } },
     });
 
     if (!!!result.errors) {
@@ -35,10 +35,7 @@ export function ScheduleAtChange({ bodyshop, event }) {
     }
   };
   const menu = (
-    <Menu
+    <Menu selectedKeys={[job && job.alt_transport]} onClick={onClick}>
-      selectedKeys={[event.job && event.job.alt_transport]}
-      onClick={onClick}
-    >
       {bodyshop.appt_alt_transport &&
         bodyshop.appt_alt_transport.map((alt) => (
           <Menu.Item key={alt}>{alt}</Menu.Item>
@@ -53,4 +50,7 @@ export function ScheduleAtChange({ bodyshop, event }) {
     </Dropdown>
   );
 }
-export default connect(mapStateToProps, mapDispatchToProps)(ScheduleAtChange);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(JobAltTransportChange);

client/src/components/job-at-change/schedule-event.component.jsx

@@ -8,7 +8,7 @@ import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import PhoneFormatter from "../../utils/PhoneFormatter";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import DataLabel from "../data-label/data-label.component";
-import ScheduleAtChange from "./schedule-event.at.component";
+import ScheduleAtChange from "./job-at-change.component";
 import ScheduleEventColor from "./schedule-event.color.component";
 import { TemplateList } from "../../utils/TemplateConstants";
 const mapDispatchToProps = (dispatch) => ({
@@ -67,7 +67,7 @@ export function ScheduleEventComponent({
           </DataLabel>
           <DataLabel label={t("jobs.fields.alt_transport")}>
             {(event.job && event.job.alt_transport) || ""}
-            <ScheduleAtChange event={event} />
+            <ScheduleAtChange job={event && event.job} />
           </DataLabel>
         </div>
       ) : null}

client/src/components/jobs-detail-header/jobs-detail-header.component.jsx

@@ -10,6 +10,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import ChatOpenButton from "../chat-open-button/chat-open-button.component";
 import DataLabel from "../data-label/data-label.component";
+import JobAltTransportChange from "../job-at-change/job-at-change.component";
 import JobEmployeeAssignments from "../job-employee-assignments/job-employee-assignments.container";
 import ProductionListColumnProductionNote from "../production-list-columns/production-list-columns.productionnote.component";
 import "./jobs-detail-header.styles.scss";
@@ -75,6 +76,10 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
               <span style={{ margin: "0rem .5rem" }}>/</span>
               <CurrencyFormatter>{job.owner_owing}</CurrencyFormatter>
             </DataLabel>
+            <DataLabel label={t("jobs.fields.alt_transport")}>
+              {job.alt_transport}
+              <JobAltTransportChange job={job} />
+            </DataLabel>
             {(job.inproduction || jobInPostProduction) && (
               <DataLabel label={t("jobs.fields.production_vars.note")}>
                 <ProductionListColumnProductionNote record={job} />

client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx

@@ -1,5 +1,6 @@
 import { SyncOutlined } from "@ant-design/icons";
 import { Button, Card, Input, Space, Table, Typography } from "antd";
+import _ from "lodash";
 import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -8,10 +9,8 @@ import { Link, useHistory, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import PhoneFormatter from "../../utils/PhoneFormatter";
 import { alphaSort } from "../../utils/sorters";
 import StartChatButton from "../chat-open-button/chat-open-button.component";
-import _ from "lodash";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -71,14 +70,9 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       key: "ownr_ph1",
       width: "12%",
       ellipsis: true,
-      render: (text, record) => {
+      render: (text, record) => (
-        return record.ownr_ph1 ? (
+        <StartChatButton phone={record.ownr_ph1} jobid={record.id} />
-          <span>
+      ),
-            <PhoneFormatter>{record.ownr_ph1}</PhoneFormatter>
-            <StartChatButton phone={record.ownr_ph1} jobid={record.id} />
-          </span>
-        ) : null;
-      },
     },
     {
       title: t("jobs.fields.status"),

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

@@ -15,7 +15,7 @@ import JobDetailCardsPartsComponent from "../job-detail-cards/job-detail-cards.p
 import JobEmployeeAssignments from "../job-employee-assignments/job-employee-assignments.container";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import ProductionRemoveButton from "../production-remove-button/production-remove-button.component";
-import ScheduleEventAt from "../schedule-event/schedule-event.at.component";
+import JobAtChange from "../job-at-change/job-at-change.component";
 
 export default function ProductionListDetail({ jobs }) {
   const search = queryString.parse(useLocation().search);
@@ -60,7 +60,7 @@ export default function ProductionListDetail({ jobs }) {
             <Descriptions.Item label={t("jobs.fields.alt_transport")}>
               <Space>
                 {data.jobs_by_pk.alt_transport || ""}
-                <ScheduleEventAt event={{ job: data.jobs_by_pk }} />
+                <JobAtChange event={{ job: data.jobs_by_pk }} />
               </Space>
             </Descriptions.Item>
             <Descriptions.Item label={t("jobs.fields.clm_no")}>

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

@@ -4,13 +4,13 @@
 .rbc-time-view .rbc-allday-cell {
   height: unset;
 }
-.rbc-row-content {
+// .rbc-row-content {
-  display: none;
+//   display: none;
-}
+// }
 
-.rbc-event-label {
+// .rbc-event-label {
-  display: none;
+//   display: none;
-}
+// }
 
 .imex-event-arrived {
   background-color: rgba(4, 141, 4, 0.4);
@@ -21,7 +21,7 @@
 }
 
 .rbc-month-view {
-  height: 125rem;
+  // height: 125rem;
 }
 
 .rbc-event.rbc-selected {

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

@@ -6,7 +6,7 @@ import { connect } from "react-redux";
 import { useHistory, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import Event from "../schedule-event/schedule-event.container";
+import Event from "../job-at-change/schedule-event.container";
 import HeaderComponent from "./schedule-calendar-header.component";
 import "./schedule-calendar.styles.scss";
 

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

@@ -1,5 +1,5 @@
 import { SyncOutlined } from "@ant-design/icons";
-import { Button, Col, PageHeader, Row, Space } from "antd";
+import { Button, Card, Col, PageHeader, Row, Space } from "antd";
 import React from "react";
 import ScheduleCalendarWrapperComponent from "../schedule-calendar-wrapper/scheduler-calendar-wrapper.component";
 import ScheduleModal from "../schedule-job-modal/schedule-job-modal.container";
@@ -28,7 +28,13 @@ export default function ScheduleCalendarComponent({ data, refetch }) {
       </Col>
 
       <Col span={24}>
-        <ScheduleCalendarWrapperComponent data={data} refetch={refetch} />
+        <Card>
+          <ScheduleCalendarWrapperComponent
+            data={data}
+            refetch={refetch}
+            style={{ height: "100rem" }}
+          />
+        </Card>
       </Col>
     </Row>
   );

client/yarn.lock

@@ -4822,7 +4822,7 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
-date-arithmetic@^4.0.1:
+date-arithmetic@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/date-arithmetic/-/date-arithmetic-4.1.0.tgz#e5d6434e9deb71f79760a37b729e4a515e730ddf"
   integrity sha512-QWxYLR5P/6GStZcdem+V1xoto6DMadYWpMXU82ES3/RfR3Wdwr3D0+be7mgOJ+Ov0G9D5Dmb9T17sNLQYj9XOg==
@@ -10840,14 +10840,14 @@ react-beautiful-dnd@^13.0.0:
     redux "^4.0.4"
     use-memo-one "^1.1.1"
 
-react-big-calendar@^0.32.0:
+react-big-calendar@^0.33.2:
-  version "0.32.0"
+  version "0.33.2"
-  resolved "https://registry.yarnpkg.com/react-big-calendar/-/react-big-calendar-0.32.0.tgz#0fec655a5a0f859cc5b84a138837eaa072e71db9"
+  resolved "https://registry.yarnpkg.com/react-big-calendar/-/react-big-calendar-0.33.2.tgz#e5c2d1110433a3a442609f589922e47887423a93"
-  integrity sha512-IidodG2oCd9VH7f9AsZAMyPZw12wLoicjHzEECrqdg3PIOuKOTScYhsqrSdNq+5j3vfy5sby5cWdBxgViMz9Mg==
+  integrity sha512-bUpkLdkHyAHj7wYdPdAXbhPE1S3y0eFJ69m4Hi2rz41gdgP3Ti10rTOhRYYsO7GS4RGqsCUtUrn37iHqdcOJog==
   dependencies:
     "@babel/runtime" "^7.1.5"
     clsx "^1.0.4"
-    date-arithmetic "^4.0.1"
+    date-arithmetic "^4.1.0"
     dom-helpers "^5.1.0"
     invariant "^2.2.4"
     lodash "^4.17.11"