Added jobs in production to schedule and error handling. BOD-371

bodyshop_translations.babel

@@ -1,4 +1,4 @@
-<babeledit_project version="1.2" be_version="2.7.1">
+<babeledit_project be_version="2.7.1" version="1.2">
     <!--
 
     BabelEdit project file
@@ -568,6 +568,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>inproduction</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>nocompletingjobs</name>
                                         <definition_loaded>false</definition_loaded>

client/src/components/job-search-select/job-search-select.component.jsx

@@ -7,6 +7,7 @@ import {
 } from "../../graphql/jobs.queries";
 import { LoadingOutlined } from "@ant-design/icons";
 import _ from "lodash";
+import AlertComponent from "../alert/alert.component";
 
 const { Option } = Select;
 
@@ -88,6 +89,10 @@ const JobSearchSelect = ({ value, onChange, onBlur, disabled }, ref) => {
           : null}
       </Select>
       {idLoading || loading ? <LoadingOutlined /> : null}
+      {error ? <AlertComponent message={error.message} type="error" /> : null}
+      {idError ? (
+        <AlertComponent message={idError.message} type="error" />
+      ) : null}
     </div>
   );
 };

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

@@ -6,6 +6,7 @@ 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) =>
@@ -21,26 +22,31 @@ export function ScheduleCalendarComponent({
 
   return (
     <div>
-      <Button
+      <div className="imex-flex-row">
-        onClick={() => {
+        <Button
-          refetch();
+          className="imex-flex-row__margin"
-        }}
+          onClick={() => {
-      >
+            refetch();
-        <SyncOutlined />
+          }}
-      </Button>
+        >
+          <SyncOutlined />
+        </Button>
 
-      <Button
+        <Button
-        onClick={() => {
+          className="imex-flex-row__margin"
-          setScheduleContext({
+          onClick={() => {
-            actions: { refetch: refetch },
+            setScheduleContext({
-            context: {
+              actions: { refetch: refetch },
-              jobId: null,
+              context: {
-            },
+                jobId: null,
-          });
+              },
-        }}
+            });
-      >
+          }}
-        {t("appointments.actions.new")}
+        >
-      </Button>
+          {t("appointments.actions.new")}
+        </Button>
+        <ScheduleProductionList />
+      </div>
 
       <ScheduleModal />
 

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

@@ -1,6 +1,6 @@
 import { useQuery } from "@apollo/react-hooks";
 import queryString from "query-string";
-import React, { useMemo } from "react";
+import React, { useMemo, useEffect } from "react";
 import { useLocation } from "react-router-dom";
 import { QUERY_ALL_ACTIVE_APPOINTMENTS } from "../../graphql/appointments.queries";
 import AlertComponent from "../alert/alert.component";
@@ -22,6 +22,7 @@ export function ScheduleCalendarContainer({ calculateScheduleLoad }) {
 
   const { date, view } = search;
   const range = useMemo(() => getRange(date, view), [date, view]);
+
   const { loading, error, data, refetch } = useQuery(
     QUERY_ALL_ACTIVE_APPOINTMENTS,
     {
@@ -30,6 +31,10 @@ export function ScheduleCalendarContainer({ calculateScheduleLoad }) {
     }
   );
 
+  useEffect(() => {
+    if (data && range.end) calculateScheduleLoad(range.end);
+  }, [data, range, calculateScheduleLoad]);
+
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type="error" />;
   let normalizedData = data.appointments.map((e) => {
@@ -42,8 +47,6 @@ export function ScheduleCalendarContainer({ calculateScheduleLoad }) {
     );
   });
 
-  calculateScheduleLoad(range.end);
-
   return (
     <ScheduleCalendarComponent
       refetch={refetch}

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

@@ -0,0 +1,67 @@
+import { Button, Card, Popover } from "antd";
+import React from "react";
+import { useLazyQuery } from "react-apollo";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { QUERY_JOBS_IN_PRODUCTION } from "../../graphql/jobs.queries";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
+import AlertComponent from "../alert/alert.component";
+import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
+import "./schedule-production-list.styles.scss";
+
+export default function ScheduleProductionList() {
+  const { t } = useTranslation();
+  const [callQuery, { loading, error, data }] = useLazyQuery(
+    QUERY_JOBS_IN_PRODUCTION
+  );
+
+  const content = () => {
+    return (
+      <Card>
+        <div
+          onClick={(e) => e.stopPropagation()}
+          className="jobs-in-production-table"
+        >
+          {loading ? <LoadingSkeleton /> : null}
+          {error ? (
+            <AlertComponent message={error.message} type="error" />
+          ) : null}
+          {data ? (
+            <table>
+              <tbody>
+                {data && data.jobs
+                  ? data.jobs.map((j) => (
+                      <tr key={j.id}>
+                        <td>
+                          <Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link>
+                        </td>
+                        <td>{`${j.ownr_fn || ""} ${j.ownr_ln || ""} ${
+                          j.ownr_co_nm || ""
+                        }`}</td>
+                        <td>{`${j.v_model_yr || ""} ${j.v_make_desc || ""} ${
+                          j.v_model_desc || ""
+                        }`}</td>
+                        <td>
+                          <DateTimeFormatter>
+                            {j.scheduled_completion}
+                          </DateTimeFormatter>
+                        </td>
+                      </tr>
+                    ))
+                  : null}
+              </tbody>
+            </table>
+          ) : null}
+        </div>
+      </Card>
+    );
+  };
+
+  return (
+    <Popover content={content} trigger="click" placement="bottomRight">
+      <Button onClick={() => callQuery()}>
+        {t("appointments.labels.inproduction")}
+      </Button>
+    </Popover>
+  );
+}

client/src/components/schedule-production-list/schedule-production-list.styles.scss

@@ -0,0 +1,30 @@
+.jobs-in-production-table {
+  //   flex: 1;
+  //   display: flex;
+  //   flex-direction: column;
+  //   align-items: center;
+
+  table {
+    border: 1px solid #ccc;
+    border-collapse: collapse;
+    margin: 0;
+    padding: 0;
+    //width: 80%;
+    table-layout: fixed;
+  }
+
+  table tr {
+    //background-color: #f8f8f8;
+    border: 1px solid #ddd;
+    padding: 0.35em;
+  }
+
+  table th,
+  table td {
+    padding: 0.625em;
+    //text-align: center;
+  }
+  table td.currency {
+    text-align: right;
+  }
+}

client/src/graphql/jobs.queries.js

@@ -971,6 +971,25 @@ export const QUERY_ALL_JOB_FIELDS = gql`
     }
   }
 `;
+export const QUERY_JOBS_IN_PRODUCTION = gql`
+  query QUERY_JOBS_IN_PRODUCTION {
+    jobs(
+      where: { inproduction: { _eq: true } }
+      order_by: { scheduled_completion: asc }
+    ) {
+      id
+      ro_number
+      est_number
+      ownr_co_nm
+      ownr_fn
+      ownr_ln
+      v_model_yr
+      v_make_desc
+      v_model_desc
+      scheduled_completion
+    }
+  }
+`;
 
 export const QUERY_ALL_JOBS_PAGINATED = gql`
   query QUERY_ALL_JOBS_PAGINATED(

client/src/translations/en_us/common.json

@@ -42,6 +42,7 @@
 				"cancelledappointment": "Canceled appointment for: ",
 				"completingjobs": "Completing Jobs",
 				"history": "History",
+				"inproduction": "Jobs In Production",
 				"nocompletingjobs": "No jobs scheduled for completion.",
 				"nodateselected": "No date has been selected.",
 				"priorappointments": "Previous Appointments",

client/src/translations/es/common.json

@@ -42,6 +42,7 @@
 				"cancelledappointment": "Cita cancelada para:",
 				"completingjobs": "",
 				"history": "",
+				"inproduction": "",
 				"nocompletingjobs": "",
 				"nodateselected": "No se ha seleccionado ninguna fecha.",
 				"priorappointments": "Nombramientos previos",

client/src/translations/fr/common.json

@@ -42,6 +42,7 @@
 				"cancelledappointment": "Rendez-vous annulé pour:",
 				"completingjobs": "",
 				"history": "",
+				"inproduction": "",
 				"nocompletingjobs": "",
 				"nodateselected": "Aucune date n'a été sélectionnée.",
 				"priorappointments": "Rendez-vous précédents",