From fa943846849f9c3577c9d91c1975391133f8c275 Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Mon, 8 Feb 2021 10:00:46 -0800
Subject: [PATCH] Updated production note display. IO-495

---
 .../jobs-detail-header.component.jsx              | 15 ++++++++++++---
 ...tion-list-columns.productionnote.component.jsx | 14 +++++++++++---
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx b/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
index 5a2a7e7a6..32c103813 100644
--- a/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
+++ b/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
@@ -1,11 +1,12 @@
 import { PrinterFilled } from "@ant-design/icons";
 import { Button, Divider, PageHeader, Tag } from "antd";
-import React from "react";
+import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { setModalContext } from "../../redux/modals/modals.actions";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import JobEmployeeAssignments from "../job-employee-assignments/job-employee-assignments.container";
 import JobsChangeStatus from "../jobs-change-status/jobs-change-status.component";
@@ -18,6 +19,7 @@ import "./jobs-detail-header.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
   jobRO: selectJobReadOnly,
+  bodyshop: selectBodyshop,
 });
 
 const mapDispatchToProps = (dispatch) => ({
@@ -32,9 +34,16 @@ export function JobsDetailHeader({
   refetch,
   loading,
   form,
+  bodyshop,
 }) {
   const { t } = useTranslation();
 
+  const jobInPostProduction = useMemo(() => {
+    return bodyshop.md_ro_statuses.post_production_statuses.includes(
+      job.status
+    );
+  }, [job.status, bodyshop.md_ro_statuses.post_production_statuses]);
+
   const menuExtra = (
     <div className="imex-flex-row">
       <JobsChangeStatus job={job} />
@@ -92,10 +101,10 @@ export function JobsDetailHeader({
       extra={menuExtra}
     >
       <div style={{ display: "flex", justifyContent: "flex-end" }}>
-        {job.inproduction && (
+        {(job.inproduction || jobInPostProduction) && (
           <>
             <div style={{ display: "flex", flex: 1 }}>
-              <div style={{ width: "20%" }}>
+              <div style={{ marginRight: "2rem" }}>
                 {t("jobs.fields.production_vars.note")}
               </div>
               <ProductionListColumnProductionNote record={job} />
diff --git a/client/src/components/production-list-columns/production-list-columns.productionnote.component.jsx b/client/src/components/production-list-columns/production-list-columns.productionnote.component.jsx
index 7dfc510b2..aa7a42b5e 100644
--- a/client/src/components/production-list-columns/production-list-columns.productionnote.component.jsx
+++ b/client/src/components/production-list-columns/production-list-columns.productionnote.component.jsx
@@ -54,10 +54,10 @@ export default function ProductionListColumnProductionNote({ record }) {
       content={
         <div style={{ width: "30em" }}>
           <Input.TextArea
-            rows={2}
+            rows={5}
             value={note}
             onChange={handleChange}
-            onPressEnter={handleSaveNote}
+            // onPressEnter={handleSaveNote}
             autoFocus
             allowClear
           />
@@ -70,7 +70,15 @@ export default function ProductionListColumnProductionNote({ record }) {
       }
       trigger={["click"]}
     >
-      <div style={{ width: "100%", height: "19px", cursor: "pointer" }}>
+      <div
+        style={{
+          width: "100%",
+          height: "19px",
+          cursor: "pointer",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+        }}
+      >
         <Icon component={FaRegStickyNote} style={{ marginRight: ".2rem" }} />
         {(record.production_vars && record.production_vars.note) || " "}
       </div>