Added block calendar day for BOD-94

client/src/components/invoice-add-line-button/invoice-add-line-button.component.jsx

@@ -1,36 +0,0 @@
-import React, { useState } from "react";
-import { Button, Popover, Input, InputNumber, Form } from "antd";
-import { SelectOutlined } from "@ant-design/icons";
-import { useTranslation } from "react-i18next";
-
-export default function InvoiceAddLineButton({ jobLine, discount, disabled }) {
-  const [visibility, setVisibility] = useState(false);
-  const { t } = useTranslation();
-
-  const popContent = (
-    <div style={{ display: "flex" }}>
-      <Form.Item name="line_desc" label={t("joblines.fields.line_desc")}>
-        <Input />
-      </Form.Item>
-      <Form.Item name="oem_partno" label={t("joblines.fields.oem_partno")}>
-        <Input />
-      </Form.Item>
-      <Form.Item name="retail" label={t("invoicelines.fields.retail")}>
-        <InputNumber precision={2} />
-      </Form.Item>
-      <Form.Item name="actual" label={t("invoicelines.fields.actual")}>
-        <InputNumber precision={2} />
-      </Form.Item>
-      DISC: {discount}
-      <Button onClick={() => setVisibility(false)}>X</Button>
-    </div>
-  );
-
-  return (
-    <Popover content={popContent} visible={visibility}>
-      <Button onClick={() => setVisibility(true)} disabled={!disabled}>
-        <SelectOutlined />
-      </Button>
-    </Popover>
-  );
-}

client/src/components/schedule-block-day/schedule-block-day.component.jsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { MinusCircleTwoTone } from "@ant-design/icons";
+import { Dropdown, Menu } from "antd";
+import { useTranslation } from "react-i18next";
+import { useMutation } from "@apollo/react-hooks";
+import { INSERT_APPOINTMENT } from "../../graphql/appointments.queries";
+import moment from "moment";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(mapStateToProps, mapDispatchToProps)(ScheduleBlockDay);
+
+export function ScheduleBlockDay({ date, children, refetch, bodyshop }) {
+  const { t } = useTranslation();
+  const [insertBlock] = useMutation(INSERT_APPOINTMENT);
+
+  const handleMenu = async (e) => {
+    e.domEvent.stopPropagation();
+    console.log("date", date);
+
+    if (e.key === "block") {
+      console.log("Block.");
+
+      const blockAppt = {
+        title: t("appointments.labels.blocked"),
+        block: true,
+        isintake: false,
+        bodyshopid: bodyshop.id,
+        start: moment(date).startOf("day"),
+        end: moment(date).endOf("day"),
+      };
+      console.log("handleMenu -> blockAppt", blockAppt);
+
+      const result = await insertBlock({
+        variables: { app: [blockAppt] },
+      });
+
+      if (!!refetch) refetch();
+    }
+  };
+
+  const menu = (
+    <Menu onClick={handleMenu}>
+      <Menu.Item key="block">{t("appointments.actions.block")}</Menu.Item>
+      <Menu.Item key="2">2nd menu item</Menu.Item>
+      <Menu.Item key="3">3rd menu item</Menu.Item>
+    </Menu>
+  );
+
+  return (
+    <Dropdown overlay={menu} trigger={["contextMenu"]}>
+      {children}
+    </Dropdown>
+  );
+}

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

@@ -9,6 +9,8 @@ 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";
+import ScheduleBlockDay from "../schedule-block-day/schedule-block-day.component";
+
 const ShopTargetHrs = 100;
 
 const mapStateToProps = createStructuredSelector({
@@ -23,6 +25,7 @@ const mapDispatchToProps = (dispatch) => ({
 
 export function ScheduleCalendarHeaderComponent({
   label,
+  refetch,
   date,
   load,
   calculating,
@@ -37,7 +40,7 @@ export function ScheduleCalendarHeaderComponent({
         percent={((loadData.expectedLoad || 0) / ShopTargetHrs) * 100}
       />
 
-      <div>
+      <div className="imex-flex-row imex-flex-row__flex-space-around">
         <Icon component={MdCallReceived} />
         {(loadData.hoursIn || 0) && loadData.hoursIn.toFixed(2)}
         <Icon component={MdCallMissedOutgoing} />
@@ -47,14 +50,16 @@ export function ScheduleCalendarHeaderComponent({
   ) : null;
 
   return (
-    <div>
-      {label}
-      {calculating || JSON.stringify(load) === "{}" ? (
-        <LoadingSkeleton />
-      ) : (
-        LoadComponent
-      )}
-    </div>
+    <ScheduleBlockDay date={date} refetch={refetch}>
+      <div>
+        {label}
+        {calculating || JSON.stringify(load) === "{}" ? (
+          <LoadingSkeleton />
+        ) : (
+          LoadComponent
+        )}
+      </div>
+    </ScheduleBlockDay>
   );
 }
 export default connect(

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

@@ -6,5 +6,9 @@
 }
 
 .imex-event-arrived {
-  background-color: green;
+  background-color: rgba(4, 141, 4, 0.4);
+}
+
+.imex-event-block {
+  background-color: rgba(212, 2, 2, 0.6);
 }

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

@@ -37,14 +37,20 @@ export function ScheduleCalendarWrapperComponent({
     //     bucket.gte <= jobHrs && (!!bucket.lt ? bucket.lt > jobHrs : true)
     // )[0];
 
-    return { className: event.arrived ? "imex-event-arrived" : "" };
+    return {
+      className: `${event.arrived ? "imex-event-arrived" : ""} ${
+        event.block ? "imex-event-block" : ""
+      }`,
+    };
   };
 
+  const selectedDate = new Date(date || moment(search.date) || Date.now());
+
   return (
     <Calendar
       events={data}
       defaultView={search.view || defaultView || "week"}
-      date={new Date(date || search.date || Date.now())}
+      date={selectedDate}
       onNavigate={(date, view, action) => {
         search.date = date.toISOString().substr(0, 10);
         history.push({ search: queryString.stringify(search) });

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

@@ -5,6 +5,8 @@ import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import ScheduleEventComponent from "./schedule-event.component";
 import { notification } from "antd";
 import { useTranslation } from "react-i18next";
+
+
 export default function ScheduleEventContainer({ event, refetch }) {
   const { t } = useTranslation();
   const [cancelAppointment] = useMutation(CANCEL_APPOINTMENT_BY_ID);