IO-1055 Blocked Day improvements.

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

@@ -24,6 +24,15 @@ export function ScheduleEventComponent({
 }) {
   const { t } = useTranslation();
   const [visible, setVisible] = useState(false);
+
+  const blockContent = (
+    <div>
+      <Button onClick={() => handleCancel(event.id)} disabled={event.arrived}>
+        {t("appointments.actions.cancel")}
+      </Button>
+    </div>
+  );
+
   const popoverContent = (
     <div>
       {!event.isintake ? (
@@ -167,7 +176,7 @@ export function ScheduleEventComponent({
       visible={visible}
       onVisibleChange={(vis) => setVisible(vis)}
       trigger="click"
-      content={popoverContent}
+      content={event.block ? blockContent : popoverContent}
       style={{ height: "100%", width: "100%" }}
     >
       {RegularEvent}

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

@@ -30,26 +30,27 @@ export default function ScheduleEventContainer({ bodyshop, event, refetch }) {
       return;
     }
 
-    const jobUpdate = await updateJob({
-      variables: {
-        jobId: event.job.id,
+    if (event.job) {
+      const jobUpdate = await updateJob({
+        variables: {
+          jobId: event.job.id,
 
-        job: {
-          date_scheduled: null,
-          scheduled_in: null,
-          status: bodyshop.md_ro_statuses.default_imported,
+          job: {
+            date_scheduled: null,
+            scheduled_in: null,
+            status: bodyshop.md_ro_statuses.default_imported,
+          },
         },
-      },
-    });
-    if (!!jobUpdate.errors) {
-      notification["error"]({
-        message: t("jobs.errors.updating", {
-          message: JSON.stringify(jobUpdate.errors),
-        }),
       });
-      return;
+      if (!!jobUpdate.errors) {
+        notification["error"]({
+          message: t("jobs.errors.updating", {
+            message: JSON.stringify(jobUpdate.errors),
+          }),
+        });
+        return;
+      }
     }
-
     if (refetch) refetch();
   };
 

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

@@ -15,7 +15,13 @@ const mapStateToProps = createStructuredSelector({
 
 const mapDispatchToProps = (dispatch) => ({});
 
-export function ScheduleBlockDay({ date, children, refetch, bodyshop }) {
+export function ScheduleBlockDay({
+  date,
+  children,
+  refetch,
+  bodyshop,
+  alreadyBlocked,
+}) {
   const { t } = useTranslation();
   const [insertBlock] = useMutation(INSERT_APPOINTMENT_BLOCK);
 
@@ -56,7 +62,11 @@ export function ScheduleBlockDay({ date, children, refetch, bodyshop }) {
   );
 
   return (
-    <Dropdown overlay={menu} trigger={["contextMenu"]}>
+    <Dropdown
+      overlay={menu}
+      disabled={alreadyBlocked}
+      trigger={["contextMenu"]}
+    >
       {children}
     </Dropdown>
   );

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

@@ -43,6 +43,12 @@ export function ScheduleCalendarHeaderComponent({
     );
   }, [events, date]);
 
+  const isDayBlocked = useMemo(() => {
+    return events.filter(
+      (e) => moment(date).isSame(moment(e.start), "day") && e.block
+    );
+  }, [events, date]);
+
   const { t } = useTranslation();
   const loadData = load[date.toISOString().substr(0, 10)];
 
@@ -136,9 +142,9 @@ export function ScheduleCalendarHeaderComponent({
       <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>
+            <li key={idx}>{`${
+              key === "null" || key === "undefined" ? "N/A" : key
+            }: ${ATSToday[key].length}`}</li>
           ))}
         </ul>
       </div>
@@ -179,7 +185,11 @@ export function ScheduleCalendarHeaderComponent({
 
   return (
     <div className="imex-calendar-load">
-      <ScheduleBlockDay date={date} refetch={refetch}>
+      <ScheduleBlockDay
+        alreadyBlocked={isDayBlocked.length > 0}
+        date={date}
+        refetch={refetch}
+      >
         <div style={{ color: isShopOpen(date) ? "" : "tomato" }}>
           {label}
           {calculating ? <LoadingSkeleton /> : LoadComponent}

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

@@ -78,7 +78,9 @@ export function ScheduleCalendarWrapperComponent({
       components={{
         event: (e) =>
           Event({ bodyshop: bodyshop, event: e.event, refetch: refetch }),
-        header: (p) => <HeaderComponent {...p} events={data} />,
+        header: (p) => (
+          <HeaderComponent {...p} events={data} refetch={refetch} />
+        ),
       }}
       {...otherProps}
     />