From 22ce28dddffe19b610e43b079635cbd8054e3393 Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Thu, 27 Aug 2020 10:26:54 -0700
Subject: [PATCH] Added jobs in production to schedule and error handling.
 BOD-371

---
 bodyshop_translations.babel                   | 23 ++++++-
 .../job-search-select.component.jsx           |  5 ++
 .../schedule-calendar.component.jsx           | 44 ++++++------
 .../schedule-calendar.container.jsx           |  9 ++-
 .../schedule-production-list.component.jsx    | 67 +++++++++++++++++++
 .../schedule-production-list.styles.scss      | 30 +++++++++
 client/src/graphql/jobs.queries.js            | 19 ++++++
 client/src/translations/en_us/common.json     |  1 +
 client/src/translations/es/common.json        |  1 +
 client/src/translations/fr/common.json        |  1 +
 10 files changed, 177 insertions(+), 23 deletions(-)
 create mode 100644 client/src/components/schedule-production-list/schedule-production-list.component.jsx
 create mode 100644 client/src/components/schedule-production-list/schedule-production-list.styles.scss

diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index 25490894b..dba9f1097 100644
--- a/bodyshop_translations.babel
+++ b/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>
diff --git a/client/src/components/job-search-select/job-search-select.component.jsx b/client/src/components/job-search-select/job-search-select.component.jsx
index 72cfa39a7..b730c6f2e 100644
--- a/client/src/components/job-search-select/job-search-select.component.jsx
+++ b/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>
   );
 };
diff --git a/client/src/components/schedule-calendar/schedule-calendar.component.jsx b/client/src/components/schedule-calendar/schedule-calendar.component.jsx
index 85ecf8cdd..90875dd53 100644
--- a/client/src/components/schedule-calendar/schedule-calendar.component.jsx
+++ b/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
-        onClick={() => {
-          refetch();
-        }}
-      >
-        <SyncOutlined />
-      </Button>
+      <div className="imex-flex-row">
+        <Button
+          className="imex-flex-row__margin"
+          onClick={() => {
+            refetch();
+          }}
+        >
+          <SyncOutlined />
+        </Button>
 
-      <Button
-        onClick={() => {
-          setScheduleContext({
-            actions: { refetch: refetch },
-            context: {
-              jobId: null,
-            },
-          });
-        }}
-      >
-        {t("appointments.actions.new")}
-      </Button>
+        <Button
+          className="imex-flex-row__margin"
+          onClick={() => {
+            setScheduleContext({
+              actions: { refetch: refetch },
+              context: {
+                jobId: null,
+              },
+            });
+          }}
+        >
+          {t("appointments.actions.new")}
+        </Button>
+        <ScheduleProductionList />
+      </div>
 
       <ScheduleModal />
 
diff --git a/client/src/components/schedule-calendar/schedule-calendar.container.jsx b/client/src/components/schedule-calendar/schedule-calendar.container.jsx
index eff7a1bc8..928d30f65 100644
--- a/client/src/components/schedule-calendar/schedule-calendar.container.jsx
+++ b/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}
diff --git a/client/src/components/schedule-production-list/schedule-production-list.component.jsx b/client/src/components/schedule-production-list/schedule-production-list.component.jsx
new file mode 100644
index 000000000..a3f1e93aa
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/client/src/components/schedule-production-list/schedule-production-list.styles.scss b/client/src/components/schedule-production-list/schedule-production-list.styles.scss
new file mode 100644
index 000000000..35d77ecb9
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/client/src/graphql/jobs.queries.js b/client/src/graphql/jobs.queries.js
index 72d5b3612..616249837 100644
--- a/client/src/graphql/jobs.queries.js
+++ b/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(
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index ba6b64e46..20f0d28b0 100644
--- a/client/src/translations/en_us/common.json
+++ b/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",
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index a39723a6f..968e7b6fd 100644
--- a/client/src/translations/es/common.json
+++ b/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",
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index d05cf738a..22e37884d 100644
--- a/client/src/translations/fr/common.json
+++ b/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",