IO-2162 Improved UI for scheduled problem jobs.

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

@@ -11,7 +11,7 @@ import HeaderComponent from "./schedule-calendar-header.component";
 import "./schedule-calendar.styles.scss";
 import JobDetailCards from "../job-detail-cards/job-detail-cards.component";
 import { selectProblemJobs } from "../../redux/application/application.selectors";
-import { Alert } from "antd";
+import { Alert, Collapse } from "antd";
 import { useTranslation } from "react-i18next";
 
 const mapStateToProps = createStructuredSelector({
@@ -53,7 +53,28 @@ export function ScheduleCalendarWrapperComponent({
   return (
     <>
       <JobDetailCards />
-      {problemJobs &&
+      {problemJobs && problemJobs.length > 2 ? (
+        <Collapse>
+          <Collapse.Panel
+            header={
+              <span style={{ color: "tomato" }}>
+                {t("appointments.labels.severalerrorsfound")}
+              </span>
+            }
+          >
+            {problemJobs.map((problem) => (
+              <Alert
+                key={problem.id}
+                type="error"
+                message={t("appointments.labels.dataconsistency", {
+                  ro_number: problem.ro_number,
+                  code: problem.code,
+                })}
+              />
+            ))}
+          </Collapse.Panel>
+        </Collapse>
+      ) : (
         problemJobs.map((problem) => (
           <Alert
             key={problem.id}
@@ -63,7 +84,8 @@ export function ScheduleCalendarWrapperComponent({
               code: problem.code,
             })}
           />
-        ))}
+        ))
+      )}
 
       <Calendar
         events={data}

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

@@ -60,9 +60,7 @@ export function ScheduleJobModalComponent({
 
   const handleDateBlur = () => {
     const values = form.getFieldsValue();
-    if (values.start) {
-      calculateScheduleLoad(values.start);
-    }
+
     if (lbrHrsData) {
       const totalHours =
         lbrHrsData.jobs_by_pk.labhrs.aggregate.sum.mod_lb_hrs +
@@ -197,6 +195,9 @@ export function ScheduleJobModalComponent({
         <Form.Item shouldUpdate={(prev, cur) => prev.start !== cur.start}>
           {() => {
             const values = form.getFieldsValue();
+            if (values.start) {
+              calculateScheduleLoad(values.start);
+            }
             return (
               <div className="schedule-job-modal">
                 <ScheduleDayViewContainer day={values.start} />